diff --git a/common.css b/common.css new file mode 100644 index 00000000..f20adc28 --- /dev/null +++ b/common.css @@ -0,0 +1,8 @@ +body { + font-family: 'Pretendard', 'Noto Sans KR', sans-serif; +} + +a { + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/images/Property1.png b/images/Property1.png deleted file mode 100644 index 66c92b39..00000000 Binary files a/images/Property1.png and /dev/null differ diff --git a/images/Property2.png b/images/Property2.png deleted file mode 100644 index b18bcf16..00000000 Binary files a/images/Property2.png and /dev/null differ diff --git a/images/facebook.png b/images/ic_facebook.png similarity index 100% rename from images/facebook.png rename to images/ic_facebook.png diff --git a/images/ic_google.png b/images/ic_google.png new file mode 100644 index 00000000..49852a6b Binary files /dev/null and b/images/ic_google.png differ diff --git a/images/instagram.png b/images/ic_instagram.png similarity index 100% rename from images/instagram.png rename to images/ic_instagram.png diff --git a/images/ic_kakao.png b/images/ic_kakao.png new file mode 100644 index 00000000..01ef8b47 Binary files /dev/null and b/images/ic_kakao.png differ diff --git a/images/twitter.png b/images/ic_twitter.png similarity index 100% rename from images/twitter.png rename to images/ic_twitter.png diff --git a/images/youtube.png b/images/ic_youtube.png similarity index 100% rename from images/youtube.png rename to images/ic_youtube.png diff --git "a/images/\354\204\271\354\205\2301.png" b/images/item_hot.png similarity index 100% rename from "images/\354\204\271\354\205\2301.png" rename to images/item_hot.png diff --git "a/images/\354\204\271\354\205\2303.png" b/images/item_register.png similarity index 100% rename from "images/\354\204\271\354\205\2303.png" rename to images/item_register.png diff --git "a/images/\354\204\271\354\205\2302.png" b/images/item_search.png similarity index 100% rename from "images/\354\204\271\354\205\2302.png" rename to images/item_search.png diff --git a/images/login_header.png b/images/login_header.png new file mode 100644 index 00000000..98f75f0e Binary files /dev/null and b/images/login_header.png differ diff --git a/images/reply.png b/images/reply.png deleted file mode 100644 index b74f5fd1..00000000 Binary files a/images/reply.png and /dev/null differ diff --git a/index.html b/index.html index 13751c9c..50fdb4e8 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,13 @@ - + 판다마켓 + + + @@ -36,7 +39,7 @@

일상의 모든 물건을
경험해 보세요

- 인기상품을 확인해 보세요 + 인기상품을 확인해 보세요
Hot item

인기 상품을
확인해 보세요

@@ -47,7 +50,7 @@

가장 HOT한 중고거래 물품을
판다마켓에
- 구매를 원하는 상품을 검색하세요 + 구매를 원하는 상품을 검색하세요
Search

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

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

구매하고 싶은 물품은 검색해서
쉽게 찾

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

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

@@ -87,16 +90,16 @@

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

- + - 트위터 + 트위터 - 트위터 + 트위터 - 인스타 + 인스타
diff --git a/login/join.css b/login/join.css new file mode 100644 index 00000000..9981119d --- /dev/null +++ b/login/join.css @@ -0,0 +1,133 @@ +*{ + box-sizing: border-box; + border:none; + margin:0; + +} + +a{ + text-decoration: none; +} + +.join_header{ + display: flex; + justify-content: center; + padding-top: 150px; + padding-bottom:20px; + align-items: center; + gap: 30px +} + +.join_title{ +font-size:67px; +font-weight: 700; +color:#3692FF; +line-height:100%; +} + +.container { +margin:0 auto; +width: 640px; +} + + +.label{ + display:block; + margin:16px 0; + color:#1F2937; + font-size:18px; + font-weight:700; + line-height:26px; +} + +.login_box{ + background-color: #F3F4F6; + width:640px; + height:56px; + border-radius: 15px; + padding:16px 20px; +} + +.login_bt{ + width:640px; + height:56px; + border-radius:30px; + color:#F3F4F6; + background-color: #3692FF; + margin:30px 0; + font-size:20px; + font-weight: 600; + line-height:32px; +} + +.pass_box{ + position: relative; +} + +.icon{ + position: absolute; + bottom:20px; + left:600px; + cursor: pointer; +} + + +.repass_box{ + position: relative; +} + +.icon2{ + position: absolute; + bottom:20px; + left:600px; + cursor: pointer; +} + +.easy_login{ + display: flex; + align-items: center; + background-color: #E6F2FF; + height:74px; + border-radius: 8px; + justify-content: space-between; + padding:0 20px; + + +} + +#easy_login_text{ +color:#1F2937; +font-size:16px; +font-weight: 500; +line-height:26px; +} + +.sns{ + display:flex; + gap: 10px; +} + +.sns_img{ + width:42px; + height: 42px; +} + +.already_ppl{ + margin-top:30px; + margin-bottom: 100px; + display:flex; + justify-content: center; + align-items: center; + gap:10px; + font-weight: 500; + font-size:14px; +} + +#already_ppl_info{ + color:#1F2937; +} + +#already_ppl_log{ + color:#3692FF; + text-decoration: underline; +} \ No newline at end of file diff --git a/login/join.html b/login/join.html new file mode 100644 index 00000000..814be5b6 --- /dev/null +++ b/login/join.html @@ -0,0 +1,63 @@ + + + + + + + + 판다마켓 회원가입 + + + +
+ 판다얼굴 + 판다마켓 +
+ +
+
+ + + + + + +
+ + +
+ +
+
+
+ + +
+ +
+
+ + +
+

이미 회원이신가요?

로그인 +
+
+
+ + \ No newline at end of file diff --git a/login/login.html b/login/login.html index b0860a29..d08c9f5f 100644 --- a/login/login.html +++ b/login/login.html @@ -1,24 +1,54 @@ - + - 로그인 + + 판다마켓 로그인 -

로그인

-
-
- - + + + + +
+ + + + +
+ + +
+
-
- -
- - + + +
+

판다마켓이 처음이신가요?

회원가입 +
+
\ No newline at end of file diff --git a/login/style.css b/login/style.css index 94bc0f0e..40e88f67 100644 --- a/login/style.css +++ b/login/style.css @@ -1,46 +1,120 @@ *{ box-sizing: border-box; + border:none; + margin:0; + +} + +a{ + text-decoration: none; +} + +.login_header{ + display: flex; + justify-content: center; + padding-top: 150px; + padding-bottom:20px; + align-items: center; + gap: 30px +} + +.login_title{ +font-size:67px; +font-weight: 700; +color:#3692FF; +line-height:100%; +} + +.container { +margin:0 auto; +width: 640px; +} + + +.label{ + display:block; + margin:16px 0; + color:#1F2937; + font-size:18px; + font-weight:700; + line-height:26px; } -form { - margin: 16px auto; - width: 360px; +.login_box{ + background-color: #F3F4F6; + width:640px; + height:56px; + border-radius: 15px; + padding:16px 20px; } -label { - color: #000000; - display: block; - margin:16px 0 8px; +.login_bt{ + width:640px; + height:56px; + border-radius:30px; + color:#F3F4F6; + background-color: #3692FF; + margin:30px 0; + font-size:20px; + font-weight: 600; + line-height:32px; +} + +.pass_box{ + position: relative; +} + +.icon{ + position: absolute; + bottom:20px; + left:600px; +} + +.easy_login{ + display: flex; + align-items: center; + background-color: #E6F2FF; + height:74px; + border-radius: 8px; + justify-content: space-between; + padding:0 20px; + +} + +#easy_login_text{ +color:#1F2937; +font-size:16px; +font-weight: 500; +line-height:26px; } -input{ - border: 1px solid #000000; - color: #000000; - display: block; - font-size: 16px; - line-height: 24px; - margin: 8px 0; - padding: 16px 24px; - width: 100%; +.sns{ + display:flex; + gap: 10px; +} + +.sns_img{ + width:42px; + height: 42px; +} +.new_ppl{ + margin-top:30px; + margin-bottom: 100px; + display:flex; + justify-content: center; + align-items: center; + gap:10px; + font-weight: 500; + font-size:14px; } -button { - background-color: #ffffff; - border: none; - display: block; - font-size : 20px; - font-weight: 700; - margin: 24px 0; - padding: 16px; - width: 100%; +#new_ppl_info{ + color:#1F2937; } -.login-title { - color: #000000; - font-size: 35px; - font-weight: 700; - margin: 24px 0; - text-align: center; +#new_ppl_join{ + color:#3692FF; + text-decoration: underline; } \ No newline at end of file diff --git a/style/reset.css b/style/reset.css new file mode 100644 index 00000000..3cf5cc01 --- /dev/null +++ b/style/reset.css @@ -0,0 +1,4 @@ +*{ + box-sizing: border-box; + margin:0; +} diff --git a/style/style.css b/style/style.css index 5b0e779f..56219258 100644 --- a/style/style.css +++ b/style/style.css @@ -1,11 +1,10 @@ -*{ - box-sizing: border-box; - margin:0; -} /*헤더 부분*/ .main-header { + position:fixed; + top:0; + z-index: 100; display: flex; align-items: center; background-color: #ffffff; @@ -27,7 +26,6 @@ .login{ - background-size: cover; height: 45px; width: 140px; font-size: medium; @@ -36,7 +34,6 @@ background-color:#3692FF; color:#ffffff; cursor: pointer; - background-size: cover; } /*첫번째 섹션부분*/