diff --git a/colors.css b/colors.css new file mode 100644 index 00000000..d6a73687 --- /dev/null +++ b/colors.css @@ -0,0 +1,39 @@ +.gray900 { + color: #111827; +} + +.gray800 { + color: #1F2937; +} + +.gray700 { + color: #374151; +} + +.gray600 { + color: #4B5563; +} + +.gray500 { + color: #6B7280; +} + +.gray400 { + color: #9CA3AF; +} + +.gray200 { + color: #E5E7EB; +} + +.gray100 { + color: #F3F4F6; +} + +.gray50 { + color: #F9FAFB; +} + +.blue { + color: #3692FF; +} \ No newline at end of file diff --git a/img/ic_eye_blind.png b/img/ic_eye_blind.png new file mode 100644 index 00000000..3292ba68 Binary files /dev/null and b/img/ic_eye_blind.png differ diff --git a/img/ic_eye_open.png b/img/ic_eye_open.png new file mode 100644 index 00000000..ec91cca7 Binary files /dev/null and b/img/ic_eye_open.png differ diff --git a/img/ic_google.png b/img/ic_google.png new file mode 100644 index 00000000..e241c0c8 Binary files /dev/null and b/img/ic_google.png differ diff --git a/img/ic_kakaotalk.png b/img/ic_kakaotalk.png new file mode 100644 index 00000000..5b63a8df Binary files /dev/null and b/img/ic_kakaotalk.png differ diff --git a/index.html b/index.html index 1cdacc7c..cfea860c 100644 --- a/index.html +++ b/index.html @@ -24,13 +24,14 @@ +
@@ -41,7 +42,7 @@

일상의 모든 물건을
거래해 보세요

- +
@@ -50,7 +51,7 @@

일상의 모든 물건을
거래해 보세요

- +
Hot item @@ -67,14 +68,14 @@

구매를 원하는
상품을 검색하세요

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

- +
- +
Register @@ -91,7 +92,7 @@

판매를 원하는
상품을 등록하세요

믿을 수 있는
판다마켓 중고 거래

- +
diff --git a/login.html b/login.html new file mode 100644 index 00000000..165b3205 --- /dev/null +++ b/login.html @@ -0,0 +1,54 @@ + + + + + + + 판다마켓 로그인 페이지 + + + + + + + + + + + + diff --git a/reset.css b/reset.css index 6bdc48d0..2b828c79 100644 --- a/reset.css +++ b/reset.css @@ -1,6 +1,4 @@ /* reset.css */ - -/* 모든 요소의 margin과 padding을 0으로 초기화 */ *, *::before, *::after { @@ -9,44 +7,37 @@ box-sizing: border-box; } -/* 기본적인 폰트 설정 (웹사이트의 기본 폰트) */ body { font-family: 'Pretendard', sans-serif; word-break: keep-all; } -/* 텍스트 링크 스타일 초기화 */ a { text-decoration: none; color: inherit; } -/* 기본적으로 목록 스타일 초기화 */ ul, ol { list-style: none; } -/* 테이블의 기본 스타일 초기화 */ table { border-collapse: collapse; width: 100%; } -/* 이미지 기본 스타일 초기화 */ img { max-width: 100%; height: auto; } -/* 버튼 기본 스타일 초기화 */ button { - font-family: 'Pretendard', sans-serif; + font-family: inherit; background: none; border: none; cursor: pointer; } -/* 폼 입력 요소 초기화 */ input, textarea, select { @@ -56,13 +47,7 @@ select { font-size: inherit; } -/* 기본적으로 모든 div와 span의 스타일 초기화 */ div, span { display: block; } - -/* 기본적으로 모든 요소에 대해 불필요한 여백 제거 */ -body, h1, h2, h3, h4, h5, h6, p { - margin-bottom: 0; -} diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..718c00df --- /dev/null +++ b/signup.html @@ -0,0 +1,62 @@ + + + + + + + 판다마켓 회원가입 페이지 + + + + + + + + + + + + diff --git a/sprint-mission2-login.png b/sprint-mission2-login.png new file mode 100644 index 00000000..d9fdccb7 Binary files /dev/null and b/sprint-mission2-login.png differ diff --git a/sprint-mission2-signup.png b/sprint-mission2-signup.png new file mode 100644 index 00000000..33a0c715 Binary files /dev/null and b/sprint-mission2-signup.png differ diff --git a/style.css b/style.css index 6604aad0..63c004f2 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,14 @@ +body { + margin-top: 70px; +} + +#header { + position: fixed; + top: 0; + width: 100%; + background-color: #fff; +} + #header .wrap-header { display: flex; justify-content: space-between; @@ -145,14 +156,12 @@ main { } #description .wrap-description { - gap: 69px; padding-bottom: 0; margin-bottom: 60px; } #footer { - margin-top: -62px; - background-color: #111827; + background-color: #111827; } #footer .wrap-footer { @@ -182,4 +191,142 @@ main { .wrap-footer .sns-footer img { width: 20px; height: 20px; +} + +/* 판다마켓 로그인, 회원가입 공통 */ +body:has(.wrap-userinfo) { + margin-top: 0; +} + +.wrap-userinfo { + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; + max-width: 640px; + margin: 0 auto; +} + +.box-userinfo .wrap-logo { + width: 396px; + margin: 0 auto 40px; + padding: 12.98px 0 15.14px; +} + +.main-signup, +.main-login { + display: flex; + flex-direction: column; + gap: 24px; +} + +.wrap-userform { + display: flex; + flex-direction: column; + gap: 24px; +} + +.wrap-userform fieldset { + border: 0; +} + +.wrap-userform legend { + display: none; +} + +.wrap-userform .wrap-input { + display: flex; + flex-direction: column; + gap: 16px; +} + +.wrap-userform label { + font-size: 18px; + line-height: 26px; + font-weight: bold; +} + +.wrap-userform input { + width: 100%; + padding: 16px 24px; + font-size: 16px; + line-height: 26px; + border-radius: 12px; + background-color: #F3F4F6; +} + +.wrap-userform .login-button, +.wrap-userform .signup-button { + width: 100%; + padding: 12px 0; + font-size: 20px; + line-height: 32px; + color: #fff; + border-radius: 40px; + background-color: #3692FF; +} + +.easy-login { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + border-radius: 8px; + background-color: #E6F2FF; +} + +.easy-login p { + font-size: 16px; + line-height: 26px; + color: #1f2937; + font-weight: 500; +} + +.easy-login .ic-sns { + display: flex; + flex-direction: row; + gap: 16px; +} + +.easy-login .ic-sns a { + display: inline-block; + width: 42px; + height: 42px; +} + +.easy-login .ic-sns img { + width: 100%; +} + +.link-signup { + display: flex; + flex-direction: row; + justify-content: center; + gap: 4px; +} + +.link-signup p { + font-size: 14px; + line-height: 24px; +} + +.link-signup a { + font-size: 14px; + line-height: 24px; + color: #3692FF; + text-decoration: underline; +} + +/* 비밀번호 input 눈 모양 */ +.wrap-pw input, +.wrap-pwcheck input { + background-image: url('./img/ic_eye_blind.png'); + background-repeat: no-repeat; + background-size: 24px; + background-position: right 24px center; +} + +.wrap-pwcheck input { + background-image: url('./img/ic_eye_open.png'); } \ No newline at end of file