diff --git a/img/btn_visibility_on.png b/img/btn_visibility_on.png new file mode 100644 index 00000000..2a13ff43 Binary files /dev/null and b/img/btn_visibility_on.png differ diff --git a/img/login_page_logo.png b/img/login_page_logo.png new file mode 100644 index 00000000..7db8527a Binary files /dev/null and b/img/login_page_logo.png differ diff --git a/img/social-login-google.png b/img/social-login-google.png new file mode 100644 index 00000000..49852a6b Binary files /dev/null and b/img/social-login-google.png differ diff --git a/img/social-login-kakao.png b/img/social-login-kakao.png new file mode 100644 index 00000000..01ef8b47 Binary files /dev/null and b/img/social-login-kakao.png differ diff --git a/index.html b/index.html index 9e30abfc..9229b5b3 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ @@ -21,14 +21,14 @@
- + 쇼핑하러 가기
- + 인기 상품

Hot item

인기 상품을
확인해 보세요

@@ -38,7 +38,7 @@
- + 구매를 원하는 상품

Search

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

@@ -48,7 +48,7 @@
- + 상품 등록

Register

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

@@ -60,7 +60,7 @@

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

- + 서머리 메뉴
@@ -72,10 +72,10 @@ FAQ
- - - - + 페이스북 + 트위터 + 유튜브 + 인스타그램
diff --git a/login b/login deleted file mode 100644 index e69de29b..00000000 diff --git a/login.html b/login.html new file mode 100644 index 00000000..95ada895 --- /dev/null +++ b/login.html @@ -0,0 +1,57 @@ + + + + 판다마켓 + + + + +
+ +
+ + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..15fc9b6d --- /dev/null +++ b/signup.html @@ -0,0 +1,67 @@ + + + + 판다마켓 + + + + +
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css index 132cad24..95d24bdb 100644 --- a/style.css +++ b/style.css @@ -14,6 +14,11 @@ body { display: flex; justify-content: space-between; align-items: center; + position: fixed; /* 상단에 붙이기 */ + top: 0px; + left: 0px; + z-index: 1; /* 앞으로 빼기, 이것은 숫자 무엇으로 설정해야 좋을까? */ + background-color: #FFFFFF; } .menu img { @@ -45,6 +50,7 @@ body { .go_shopping { width: 100%; height: 540px; + margin-top: 70px; position: relative; display: flex; flex-wrap: wrap; @@ -183,7 +189,6 @@ body { display: flex; flex-direction: column; justify-content: center; - /* align-items: center; */ } .sub_menu_text { @@ -208,7 +213,6 @@ body { width: 1110px; display: flex; margin: 143px 0 0; - /* justify-content: center; */ justify-content: space-between; align-items: center; } @@ -291,4 +295,253 @@ a:link { width: 70%; height: auto; } -} \ No newline at end of file +} + +.login-page { + height: 100vh; + margin-top: 231px; + display: flex; + justify-content: center; +} + +.login-container { + width: 640px; + height: 618px; +} + +.login-signup-main-logo { + width: 396px; + height: 132px; + margin: 0 auto; +} + +.login-content { + height: 446px; + margin-top: 40px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.member-info { + margin: 0; + height: 300px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.member-info p { + margin: 0 0 16px; + display: flex; + flex-direction: column; + justify-content: space-between; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0%; +} + +.member-info input { + height: 56px; + width: 100%; + box-sizing: border-box; + font-size: 16px; + font-weight: 400; + line-height: 0%; + padding: 0px 24px; + border: 0px; + border-radius: 12px; + gap: 10px; + color: #1F2937; + background-color: #F3F4F6; +} + +.login-password { + position: relative; +} + +.member-info .eyes { + height: 24px; + position: absolute; + top: 58px; + bottom: 0; + right: 16px; + display: flex; + align-items: center; + cursor: pointer; +} + +.go-login button { + width: 100%; + height: 56px; + border-radius: 40px; + padding: 16px 124px; + gap: 10px; + border: 0px; + background-color: #3692FF; + font-weight: 600; + font-size: 20px; + line-height: 32px; + letter-spacing: 0%; + vertical-align: middle; + display: flex; + justify-content: center; + align-items: center; + color: #F3F4F6; +} + +.social-login { + width: 100%; + height: 74px; + border-radius: 8px; + gap: 10px; + display: flex; + justify-content: center; + align-items: center; + background-color: #E6F2FF; +} + +.social-login-content { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 16px 23px; + vertical-align: middle; + font-weight: 500; + height: 26px; + font-size: 16px; + line-height: 26px; + letter-spacing: 0%; + color: #1F2937; +} + +.social-login-text { + height: 26px; + margin: 0; + font-weight: 500; + font-size: 16px; + line-height: 26px; + letter-spacing: 0%; + vertical-align:middle; + color: #1F2937; +} + +.social-login-img { + width: 100px; + height: 42px; + display: flex; + justify-content: space-between; +} + +.go-signup { + font-weight: 500; + font-size: 14px; + line-height: 24px; + letter-spacing: 0%; + margin: 0; + text-align: center; +} + +.go-signup a { + color: #3692FF; + text-decoration: underline; +} + +.signup-page { + height: 100vh; + margin-top: 231px; + display: flex; + justify-content: center; +} + +.signup-container { + width: 640px; + height: 857px; +} + +.signup-content { + margin-top: 40px; + height: 685px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.signup-member-info { + height: 539px; + display: flex; + justify-content: space-between; + flex-direction: column; + position: relative; +} + +.signup-member-info p { + margin: 0; + height: 26px; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0%; + color: #1F2937; +} + +.signup-member-info input { + margin-top: 16px; + padding-left: 24px; + width: 100%; + box-sizing: border-box; + border: 0px; + border-radius: 12px; + gap: 10px; + background-color: #F3F4F6; + height: 56px; + font-weight: 400; + font-size: 16px; + line-height: 0%; +} + +.login-password, +.login-password-valid { + position: relative; +} + +.login-password .eyes, +.login-password-valid .eyes { + height: 24px; + position: absolute; + top: 58px; + bottom: 0; + right: 16px; + display: flex; + align-items: center; + cursor: pointer; +} + +.btn-go-signup button { + width: 100%; + height: 56px; + border-radius: 40px; + padding: 16px 124px; + border: 0px; + background-color: #3692FF; + vertical-align: middle; + color: #F3F4F6; + font-weight: 600; + font-size: 20px; + line-height: 32px; + letter-spacing: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.go-login-page { + text-align: center; +} + +.go-login-page a { + color:#3692FF; + text-decoration: underline; +}