Skip to content

Commit

Permalink
2주차
Browse files Browse the repository at this point in the history
  • Loading branch information
@joonohjoonoh
joonohjoonoh committed Aug 19, 2024
1 parent c57acc4 commit 032e369
Show file tree
Hide file tree
Showing 12 changed files with 289 additions and 10 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
Binary file added 10-Sprint-Mission/.DS_Store
View file
Binary file not shown.
164 changes: 164 additions & 0 deletions 10-Sprint-Mission/css/style_log.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
/* 기본 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}


/* 로그인 컨테이너 */
.login-container {
width: 640px;
height: auto;
Gap: 40px;
Top: 231px;
Left: 640px;
border-radius: 8px;
text-align: center;
}

/* 회원가입 컨테이너 */
.signUp-container {
/* margin:0; */
width: 640px;
height: auto;
Gap: 40px;
Top: 60px;
Left: 640px;
border-radius: 8px;
text-align: center;
}

/* 로고 */
.logo img {
width: 400px;
height: auto;
margin-bottom: 20px;
cursor: pointer;
}

/* 로그인 폼 */
.login-form {
width: 100%;
}

/* 회원가입 폼 */
.signUp-form {
width: 100%;
}

/* 폼 공통 */
.form-group {
margin-bottom: 25px;
text-align: left;
}

.form-group label {
display: block;
font-weight: bold;
margin-bottom: 25px;
}

.form-group input {
width: 100%;
padding: 20px;
font-size: 17px;
border: 1px solid #E3E7EB;
border-radius: 15px;
box-sizing: border-box;
background-color: #E5E7EB; /* 아주 연한 회색 */
}

.form-group input:focus {
border-color: #3692FF;
outline: none;
background-color: #f0f0f0; /* 포커스 시 약간 더 진한 회색 */
}

.password-input {
position: relative;
}

.password-input .toggle-password {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
}

.password-input .toggle-password img {
width: 20px;
height: 20px;
}

/* 로그인 버튼 스타일 */
.login-button {
width: 100%;
height: 60px;
padding: 10px;
background-color: #6B7280;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
margin-bottom: 20px;
}

.login-button:hover {
background-color: #007BFF;
}

/* 간편 로그인 */
.easy-login p {
margin-right: auto;
font-size: 14px;
}

.easy-login-buttons {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e0f7fa; /* 옅은 하늘색 배경 */
padding: 10px;
border-radius: 8px;
}

.easy-login-buttons a {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
margin: 5px;
text-decoration: none; /* 링크의 기본 밑줄 제거 */
}

.easy-login-buttons img {
width: 40px;
height: 40px;
}

/* 회원가입 스타일 */
.signup-link p {
margin-top: 20px;
font-size: 14px;
}

.signup-link a {
color: #007BFF;
text-decoration: none;
}

.signup-link a:hover {
text-decoration: underline;
}
Binary file added 10-Sprint-Mission/img/.DS_Store
View file
Binary file not shown.
Binary file added 10-Sprint-Mission/img/icons/.DS_Store
View file
Binary file not shown.
Binary file added 10-Sprint-Mission/img/icons/IOS_Google_icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 10-Sprint-Mission/img/icons/Property 1=Default.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 10-Sprint-Mission/img/icons/Property 1=Variant2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 10-Sprint-Mission/img/icons/free-icon-kakao-talk-3669973.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions 10-Sprint-Mission/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<body>
<header class="header">
<a href="index.html">
<img src="./img/lg/Property 1=md.png" alt="로그인">
<img src="./img/lg/Property 1=md.png" alt="랜딩">
</a>
<a href="./links/login.html">
<img src="./img/btn/btn_small.png" alt="로그인버튼">
Expand Down Expand Up @@ -76,10 +76,10 @@ <h5>Register</h5>
<a href="links/faq.html">FAQ</a>
</section>
<section class="foot-right">
<a href="https://www.facebook.com/"><img src="/img/icons/ic_facebook.png" alt="facebook"></a>
<a href="https://x.com/"><img src="/img/icons/ic_twitter.png" alt="twitter"></a>
<a href="https://www.youtube.com/"><img src="/img/icons/ic_youtube.png" alt="ic_youtube"></a>
<a href="https://www.instagram.com/"><img src="/img/icons/ic_instagram.png" alt="instagram"></a>
<a href="https://www.facebook.com/"><img src="/10-Sprint-Mission/img/icons/ic_facebook.png" alt="facebook"></a>
<a href="https://x.com/"><img src="/10-Sprint-Mission/img/icons/ic_twitter.png" alt="twitter"></a>
<a href="https://www.youtube.com/"><img src="/10-Sprint-Mission/img/icons/ic_youtube.png" alt="ic_youtube"></a>
<a href="https://www.instagram.com/"><img src="/10-Sprint-Mission/img/icons/ic_instagram.png" alt="instagram"></a>
</section>
</section>
</footer>
Expand Down
55 changes: 50 additions & 5 deletions 10-Sprint-Mission/links/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓 로그인</title>
<link rel="stylesheet" href="/10-Sprint-Mission/css/style_log.css">
</head>
<body>

<div class="login-container">
<!-- 상단 로고 -->
<div class="logo">
<a href="http://127.0.0.1:5500/10-Sprint-Mission/index.html">
<img src="/10-Sprint-Mission/img/lg/Property 1=lg.png" alt="판다로고">
</a>
</div>

<!-- 로그인폼 -->
<form class="login-form">
<div class="form-group">
<label for="email">이메일</label>
<input type="email" id="email" placeholder="이메일을 입력해 주세요">
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<div class="password-input">
<input type="password" id="password" placeholder="비밀번호를 입력해 주세요">
<button type="button" class="toggle-password">
<img src="/10-Sprint-Mission/img/icons/Property 1=Default.png" alt="보인다.">
<img src="/10-Sprint-Mission/img/icons/Property 1=Variant2.png" alt="안보인다.">
</button>
</div>
</div>
<button type="submit" class="login-button">로그인</button>
</form>

<!-- 간편 로그인 -->
<div class="easy-login">
<div class="easy-login-buttons">
<p>간편 로그인하기</p>
<a href="https://www.google.com/" class="google-login">
<img src="/10-Sprint-Mission/img/icons/IOS_Google_icon.png" alt="Google">
</a>
<a href="https://www.kakaocorp.com/page" class="kakao-login">
<img src="/10-Sprint-Mission/img/icons/free-icon-kakao-talk-3669973.png" alt="Kakao">
</a>
</div>
</div>

<!-- 회원가입 -->
<div class="login-link">
<p>판다마켓이 처음이신가요? <a href="/10-Sprint-Mission/links/signUp.html">회원가입</a></p>
</div>
</div>
</body>
</html>
70 changes: 70 additions & 0 deletions 10-Sprint-Mission/links/signUp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓 로그인</title>
<link rel="stylesheet" href="/10-Sprint-Mission/css/style_log.css">
</head>
<body class="signUp">
<div class="signUp-container">
<!-- 상단 로고 -->
<div class="logo">
<a href="http://127.0.0.1:5500/10-Sprint-Mission/index.html">
<img src="/10-Sprint-Mission/img/lg/Property 1=lg.png" alt="판다로고">
</a>
</div>

<!-- 회원 가입폼 -->
<form class="login-form">
<div class="form-group">
<label for="email">이메일</label>
<input type="email" id="email" placeholder="이메일을 입력해 주세요">
</div>
<div class="form-group">
<label for="nick_name">닉네임</label>
<input type="text" id="email" placeholder="닉네임을 입력해 주세요">
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<div class="password-input">
<input type="password" id="password" placeholder="비밀번호를 입력해 주세요">
<button type="button" class="toggle-password">
<!-- <img src="/10-Sprint-Mission/img/icons/Property 1=Default.png" alt="보인다."> -->
<img src="/10-Sprint-Mission/img/icons/Property 1=Variant2.png" alt="안보인다.">
</button>
</div>
</div>
<div class="form-group">
<label for="password">비밀번호 확인</label>
<div class="password-input">
<input type="password" id="password" placeholder="비밀번호를 다시 한 번 입력해 주세요">
<button type="button" class="toggle-password">
<!-- <img src="/10-Sprint-Mission/img/icons/Property 1=Default.png" alt="보인다."> -->
<img src="/10-Sprint-Mission/img/icons/Property 1=Variant2.png" alt="안보인다.">
</button>
</div>
</div>
<button type="submit" class="login-button">로그인</button>
</form>

<!-- 간편 로그인 -->
<div class="easy-login">
<div class="easy-login-buttons">
<p>간편 로그인하기</p>
<a href="https://www.google.com/" class="google-login">
<img src="/10-Sprint-Mission/img/icons/IOS_Google_icon.png" alt="Google">
</a>
<a href="https://www.kakaocorp.com/page" class="kakao-login">
<img src="/10-Sprint-Mission/img/icons/free-icon-kakao-talk-3669973.png" alt="Kakao">
</a>
</div>
</div>

<!-- 회원가입 -->
<div class="signup-link">
<p>이미 회원이신가요? <a href="/10-Sprint-Mission/links/login.html">로그인</a></p>
</div>
</div>
</body>
</html>

0 comments on commit 032e369

Please sign in to comment.