-
Notifications
You must be signed in to change notification settings - Fork 28
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 #21 from NaYejin94/Basic-나예진-sprint2
[나예진] sprint 2
- Loading branch information
Showing
9 changed files
with
261 additions
and
45 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.
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,10 +1,40 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Login</title> | ||
| <link rel="stylesheet" href="sign.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> | ||
| <title>로그인</title> | ||
| </head> | ||
| <body> | ||
| <a href="/"><img src="image/logo_large.png" alt="로그인 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> | ||
| <label for="login-email">이메일</label> | ||
| </div> | ||
| <input id="login-email" name="email" type="email" | ||
| placeholder="이메일을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd" >비밀번호</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd" name="pwd" type="password" | ||
| placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
| <button class="sign-btn">로그인</button> | ||
|
|
||
| </form> | ||
| <div class="simple-login-div"> | ||
| <div class="simple-login-txt">간편 로그인하기</div> | ||
| <div class="simple-login-icon"> | ||
| <a href="https://www.google.com/"><img src="image/google_icon.png"class="google-icon" alt="구글 간편로그인 아이콘"></a> | ||
| <a href="https://www.kakaocorp.com/page/"><img src="image/kakao_icon.png" class="kakao-icon" alt="카카오 간편로그인 아이콘"></a> | ||
| </div> | ||
| </div> | ||
| <div class="footer">판다마켓이 처음이신가요? | ||
| <a href="/signup.html" class="footer-signup-link">회원가입</a> | ||
| </div> | ||
| </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,133 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| :root { | ||
| --gray900 : #111827; | ||
| --gray800 : #1f2937; | ||
| --gray700 : #374151; | ||
| --gray600 : #4b5563; | ||
| --gray500 : #6b7280; | ||
| --gray400 : #9ca3af; | ||
| --gray200 : #e5e7eb; | ||
| --gray100 : #f3f4f6; | ||
| --gray50 : #f9fafb; | ||
| --blue:#3692ff; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "pretendard", sans-serif; | ||
| margin: 0 auto; | ||
| width: 640px; | ||
| margin-top: 231px; | ||
| } | ||
|
|
||
| .sign-logo { | ||
| display: block; | ||
| width: 396px; | ||
| height: 132px; | ||
| margin: 0 auto; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| .sign-form-label { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 26px; | ||
| color: var(--gray800); | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .sign-form-input { | ||
| width: 100%; | ||
| height: 56px; | ||
| border: none; | ||
| border-radius: 12px; | ||
| background-color: var(--gray100); | ||
| padding : 16px 24px; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .sign-form-input:focus { | ||
| outline-color: var(--blue); | ||
| } | ||
|
|
||
| .sign-form-input::placeholder { | ||
| font-size: 16px; | ||
| line-height: 26px; | ||
| font-weight: 300; | ||
| color: var(--gray400); | ||
| } | ||
|
|
||
| .password-container { | ||
| position: relative; | ||
| } | ||
|
|
||
| .visibility-off { | ||
| position:absolute; | ||
| width: 24px; | ||
| height: 24px; | ||
| top: 16px; | ||
| bottom: 16px; | ||
| right: 24px; | ||
| } | ||
|
|
||
| .sign-btn { | ||
| width: 100%; | ||
| border: none; | ||
| border-radius: 40px; | ||
| padding: 16px 124px; | ||
| background-color: var(--gray400); | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| color: var(--gray100); | ||
| cursor:pointer; | ||
| } | ||
|
|
||
| .sign-btn:hover { | ||
| background-color: var(--blue); | ||
| } | ||
|
|
||
| .simple-login-div { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin: 24px 0; | ||
| padding :16px 23px; | ||
| width: 100%; | ||
| background-color: #e6f2ff; | ||
| } | ||
|
|
||
| .simple-login-txt { | ||
| font-size: 16px; | ||
| font-weight: 500; | ||
| color: var(--gray800); | ||
| } | ||
|
|
||
| .simple-login-icon { | ||
| display: flex; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .simple-login-icon img{ | ||
| width: 42px; | ||
| height: 42px; | ||
| } | ||
|
|
||
| .footer { | ||
| display: flex; | ||
| justify-content: center; | ||
| font-size: 14px; | ||
| color: var(--gray800); | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .footer-signup-link { | ||
| color: var(--blue); | ||
| } | ||
|
|
||
|
|
||
| .footer-signup-link:hover { | ||
| color : #1251aa | ||
| } | ||
|
|
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,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="sign.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> | ||
| <title>회원가입</title> | ||
| </head> | ||
| <body> | ||
| <a href="/"><img src="image/logo_large.png" alt="회원가입 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> | ||
| <label for="login-email">이메일</label> | ||
| </div> | ||
| <input id="login-email" name="email" type="email" | ||
| placeholder="이메일을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-nickname">닉네임</label> | ||
| </div> | ||
| <input id="login-nickname" name="nickname" | ||
| placeholder="닉네임을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd" >비밀번호</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd" name="pwd" type="password" | ||
| placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd-confirm" >비밀번호 확인</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd-confirm" name="pwd-confirm" type="password" | ||
| placeholder="비밀번호를 다시 한 번 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
|
|
||
| <button class="sign-btn">회원가입</button> | ||
|
|
||
| </form> | ||
| <div class="simple-login-div"> | ||
| <div class="simple-login-txt">간편 로그인하기</div> | ||
| <div class="simple-login-icon"> | ||
| <a href="https://www.google.com/"><img src="image/google_icon.png"class="google-icon" alt="구글 간편로그인 아이콘"></a> | ||
| <a href="https://www.kakaocorp.com/page/"><img src="image/kakao_icon.png" class="kakao-icon" alt="카카오 간편로그인 아이콘"></a> | ||
| </div> | ||
| </div> | ||
| <div class="footer">이미 회원이신가요? | ||
| <a href="/login.html" class="footer-signup-link">로그인</a> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.