-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #72 from Injaeeee/Basic-정인재-sprint2
[정인재] Sprint2
- Loading branch information
Showing
10 changed files
with
424 additions
and
72 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,65 @@ | ||
| <!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>Document</title> | ||
| <title>login</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| login | ||
| <body class="loginPage"> | ||
| <a href="./"> | ||
| <div class="logo"> | ||
| <img src="/img/logo.png" /> | ||
| </div> | ||
| </a> | ||
|
|
||
|
|
||
| <main> | ||
| <form class="login"> | ||
| <div class="login-input"> | ||
| <label for="email">이메일</label> | ||
| <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요" /> | ||
| </div> | ||
|
|
||
| <div class="login-input"> | ||
| <label for="password">비밀번호</label> | ||
| <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" /> | ||
|
|
||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" | ||
| class="bi bi-eye-slash" viewBox="0 0 16 16"> | ||
| <path | ||
| d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" /> | ||
| <path | ||
| d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" /> | ||
| <path | ||
| d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" /> | ||
| </svg> | ||
|
|
||
| </div> | ||
|
|
||
| <button type="submit" class="login-button">로그인</button> | ||
|
|
||
| <div class="easy-login"> | ||
| <div>간편로그인하기</div> | ||
| <div class="platform"> | ||
| <a href="http://www.google.com"> | ||
| <img src="/img/Component 2.png" alt="구글" /> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/"> | ||
| <img src="/img/Component 3.png" alt="카카오톡" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| 판다마켓이 처음이신가요? | ||
| <a href="/signup/">회원가입</a> | ||
| </div> | ||
| </form> | ||
| </main> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .loginPage { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 40px; | ||
| } | ||
|
|
||
|
|
||
| .logo { | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .logo img { | ||
| width: 396px; | ||
| height: 132px; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| label { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| input { | ||
| width: 640px; | ||
| height: 56px; | ||
| border-radius: 12px; | ||
| background-color: #F3F4F6; | ||
| border: none; | ||
| color: #9CA3AF; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 24px; | ||
| padding: 0 15px; | ||
| outline: none; | ||
| /* 기본 outline 제거 */ | ||
| } | ||
|
|
||
| input:focus { | ||
| border: 2px solid #3692FF; | ||
|
|
||
| } | ||
|
|
||
| input:focus-out { | ||
| border: none; | ||
| } | ||
|
|
||
|
|
||
| .login { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| gap: 24px; | ||
| } | ||
|
|
||
| .login-input { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .login-button { | ||
| width: 640px; | ||
| height: 56px; | ||
| border-radius: 40px; | ||
| background-color: #9CA3AF; | ||
| font-size: 20px; | ||
| line-height: 24px; | ||
| font-weight: 600; | ||
| color: #FFFFFF; | ||
| border: none; | ||
| } | ||
|
|
||
| .login-button:hover { | ||
| background-color: #3692FF; | ||
| } | ||
|
|
||
| .easy-login { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding: 0 30px; | ||
| align-items: center; | ||
| width: 640px; | ||
| height: 74px; | ||
| border-radius: 8px; | ||
| background-color: #E6F2FF; | ||
| } | ||
|
|
||
| .platform { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .login-input svg { | ||
| position: absolute; | ||
| left: 94%; | ||
| transform: translateY(350%); | ||
| pointer-events: none; | ||
| /* 눈 모양 아이콘 */ | ||
| } |
Oops, something went wrong.