-
Notifications
You must be signed in to change notification settings - Fork 24
[조수빈] Sprint2 #80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The head ref may contain hidden characters: "Basic-\uC870\uC218\uBE48-sprint2"
[조수빈] Sprint2 #80
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules/ |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| html { | ||
| font-family: Pretendard, sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| width: 100%; | ||
| background-color: #ffffff; | ||
| } | ||
|
|
||
| :root { | ||
| --primary-color: #3692ff; | ||
| --secondary-color: #F3F4F6; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| .login-form, | ||
| .signup-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-self: center; | ||
| align-items: center; | ||
| width: 640px; | ||
| height: 100%; | ||
| margin-top: 231px; | ||
| } | ||
|
|
||
| .title-img { | ||
| width: 396px; | ||
| height: 132px; | ||
| } | ||
|
|
||
| .auth-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| label { | ||
| font-size: 18px; | ||
| color: #1F2937; | ||
| } | ||
|
|
||
| .auth-input { | ||
| width: 640px; | ||
| height: 56px; | ||
| margin-top: 16px; | ||
| margin-bottom: 24px; | ||
| padding: 24px; | ||
| background-color: var(--secondary-color); | ||
| border: none; | ||
| border-radius: 12px; | ||
| } | ||
|
|
||
| .password-wrapper, | ||
| .password-check-wrapper { | ||
| position: relative; | ||
| } | ||
|
|
||
| .fa-solid { | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| right: 16px; | ||
| color: #4B5563; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| button { | ||
| height: 56px; | ||
| margin-bottom: 24px; | ||
| font-size: 20px; | ||
| color: var(--secondary-color); | ||
| background-color: var(--primary-color); | ||
| border: none; | ||
| border-radius: 40px; | ||
| } | ||
|
|
||
| .simple-login-container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 24px 23px; | ||
| background-color: #E6F2FF; | ||
| height: 74px; | ||
| color: #1F2937; | ||
| font-size: 16px; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .signup-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 24px; | ||
| } | ||
|
|
||
| .signup-desc { | ||
| color: #1F2937; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| .signup-button, | ||
| .login-button { | ||
| color: var(--primary-color); | ||
| font-size: 14px; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>로그인 - 판다마켓</title> | ||
| <link rel="stylesheet" href="/assets/styles/global.css"> | ||
| <link rel="stylesheet" href="/assets/styles/reset.css"> | ||
| <link rel="stylesheet" href="/assets/styles/login_signup.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | ||
| </head> | ||
| <body> | ||
| <div class="login-form"> | ||
| <header class="title"> | ||
| <a href="/"> | ||
| <img src="public/images/home_logo.svg" class="title-img" alt="타이틀 이미지"> | ||
| </a> | ||
| </header> | ||
| <main> | ||
| <form class="auth-form"> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. form 구현에 필요한 시맨틱 태그 (form, label, input 등) 를 잘 활용해주셨네요! 👏 |
||
| <label for="email">이메일</label> | ||
| <input type="text" id="email" class="auth-input"> | ||
|
|
||
| <label for="password">비밀번호</label> | ||
| <div class="password-wrapper"> | ||
| <input type="password" id="password" class="auth-input"> | ||
| <i class="fa-solid fa-eye eye-icon"></i> | ||
| </div> | ||
|
|
||
| <button type="submit" class="auth-submit">로그인</button> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. type="submit" 도 꼼꼼히 추가해주신 점 좋습니다! 👍 |
||
|
|
||
| <div class="simple-login-container"> | ||
| <p class="simple-login-desc">간편 로그인하기</p> | ||
| <a href="https://www.google.com/"> | ||
| <img src="public/images/google_icon.png" class="simple_login_img" alt="간편 로그인 이미지"> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/"> | ||
| <img src="public/images/kakao_icon.png" class="simple_login_img" alt="간편 로그인 이미지"> | ||
| </a> | ||
| </div> | ||
| </form> | ||
| </main> | ||
| <footer> | ||
| <div class="signup-container"> | ||
| <p class="signup-desc">판다마켓이 처음이신가요?</p> | ||
| <a href="/signup.html" class="signup-button">회원가입</a> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
css 변수 설정 잘 해주셨네요! 👍