diff --git a/images/Img_home_01.png b/images/Img_home_01.png deleted file mode 100644 index 249652e3..00000000 Binary files a/images/Img_home_01.png and /dev/null differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png deleted file mode 100644 index 84d8629f..00000000 Binary files a/images/Img_home_02.png and /dev/null differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png deleted file mode 100644 index eb0d6cd2..00000000 Binary files a/images/Img_home_03.png and /dev/null differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png deleted file mode 100644 index 58b29043..00000000 Binary files a/images/Img_home_bottom.png and /dev/null differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png deleted file mode 100644 index 7ce56caa..00000000 Binary files a/images/Img_home_top.png and /dev/null differ diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png deleted file mode 100644 index 9d5f8ef3..00000000 Binary files a/images/Property 1=sm.png and /dev/null differ diff --git a/images/Property 1=sm@3x.png b/images/Property 1=sm@3x.png deleted file mode 100644 index cbffb370..00000000 Binary files a/images/Property 1=sm@3x.png and /dev/null differ diff --git a/images/btn_visibility_off.png b/images/btn_visibility_off.png new file mode 100644 index 00000000..818a5097 Binary files /dev/null and b/images/btn_visibility_off.png differ diff --git a/images/btn_visibility_on.png b/images/btn_visibility_on.png new file mode 100644 index 00000000..7efc7e9d Binary files /dev/null and b/images/btn_visibility_on.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png index a3e343c7..f32e7ef8 100644 Binary files a/images/ic_facebook.png and b/images/ic_facebook.png differ diff --git a/images/ic_google.png b/images/ic_google.png new file mode 100644 index 00000000..5a81f397 Binary files /dev/null and b/images/ic_google.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png index c47e044d..8c1837df 100644 Binary files a/images/ic_instagram.png and b/images/ic_instagram.png differ diff --git a/images/ic_kakao.png b/images/ic_kakao.png new file mode 100644 index 00000000..5b63a8df Binary files /dev/null and b/images/ic_kakao.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png index 3f74b730..216c58d2 100644 Binary files a/images/ic_twitter.png and b/images/ic_twitter.png differ diff --git a/images/ic_youtube.png b/images/ic_youtube.png index 874150b0..27d12233 100644 Binary files a/images/ic_youtube.png and b/images/ic_youtube.png differ diff --git a/images/img_home_01.png b/images/img_home_01.png new file mode 100644 index 00000000..2060928a Binary files /dev/null and b/images/img_home_01.png differ diff --git a/images/img_home_02.png b/images/img_home_02.png new file mode 100644 index 00000000..e8abd3e8 Binary files /dev/null and b/images/img_home_02.png differ diff --git a/images/img_home_03.png b/images/img_home_03.png new file mode 100644 index 00000000..57b7ada1 Binary files /dev/null and b/images/img_home_03.png differ diff --git a/images/img_home_bottom.png b/images/img_home_bottom.png new file mode 100644 index 00000000..1cbf3038 Binary files /dev/null and b/images/img_home_bottom.png differ diff --git a/images/img_home_top.png b/images/img_home_top.png new file mode 100644 index 00000000..ed36e4a4 Binary files /dev/null and b/images/img_home_top.png differ diff --git a/images/logo_lg.png b/images/logo_lg.png new file mode 100644 index 00000000..bc206ad5 Binary files /dev/null and b/images/logo_lg.png differ diff --git a/images/Property 1=sm@2x.png b/images/logo_sm.png similarity index 100% rename from images/Property 1=sm@2x.png rename to images/logo_sm.png diff --git a/style.css b/index.css similarity index 67% rename from style.css rename to index.css index 71cd29c0..258a4b2b 100644 --- a/style.css +++ b/index.css @@ -1,17 +1,5 @@ -* { - box-sizing: border-box; - font-family: Pretendard, sans-serif; - color: #374151; - font-size: 16px; -} - -a { - text-decoration: none; - cursor: pointer; -} - -p { - margin: 0; +html { + color: var(--gray700); } body { @@ -20,26 +8,36 @@ body { } header { + position: sticky; + top: 0; + left: 0; + right: 0; background-color: #FFFFFF; border-bottom: 1px solid #DDE0E3 } footer { - background-color: #111827; + background-color: var(--gray900); height: 10rem; } .gnb { - padding: 9px 400px; display: flex; justify-content: space-between; align-items: center; + padding: 9px 400px; } .gnb img { max-width: 10rem; } +.btn-login { + width: 8rem; + height: 3rem; + text-align: center; +} + .wrap { max-width: 1920px; width: 100%; @@ -143,35 +141,12 @@ footer { gap: 0.75rem; } -.btn-large, .btn-login { - background-color: #3692FF; -} - -.btn-large:hover, .btn-login:hover { - background-color: #1967D6; -} - -.btn-large:active, .btn-login:active { - background-color: #1251AA; -} - -.btn-login { - color: #F3F4F6; - width: 8rem; - height: 3rem; - padding: 0.75rem 1.5rem; - border-radius: 8px; - text-align: center; -} - -.btn-large { - color: #F9FAFB; - padding: 1rem 7.75rem; - border-radius: 40px; +.sns img{ + max-width: 1.25rem; } .keyword { - color: #3692FF; + color: var(--blue); margin-bottom: 0.75rem; } @@ -181,45 +156,11 @@ footer { } .copyright { - color: #9CA3AF; + color: var(--gray400); } .faq a { - color: #E5E7EB; -} - -.bold { - font-weight: 700; -} - -.semibold { - font-weight: 600; -} - -.medium { - font-weight: 500; -} - -.text-4xl { - font-size: 2.5rem; - line-height: 3.5rem; - letter-spacing: -0.125rem; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; - letter-spacing: -0.0625rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 2rem; -} - -.text-2lg { - font-size: 1.125rem; - line-height: 1.625rem; + color: var(--gray200); } @media (max-width:1920px) { @@ -229,7 +170,7 @@ footer { } @media (max-width:1280px) { - * { + html { font-size: 12px; } } \ No newline at end of file diff --git a/index.html b/index.html index 68e5e452..1d73e512 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,17 @@ 판다마켓 - + + +
- +
@@ -21,19 +23,19 @@

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

- 구경하러 가기 + 구경하러 가기
- 판다 이미지 + 판다 이미지
- 인기 상품 + 인기 상품

Hot item @@ -64,12 +66,12 @@ 쉽게 찾아보세요

- 상품 검색 + 상품 검색
- 상품 등록 + 상품 등록

Register @@ -91,11 +93,11 @@

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

- 판다 이미지 + 판다 이미지
@@ -104,23 +106,31 @@

@codeit - 2024

- Privacy Policy - FAQ -
-
- - 페이스북 - - - 트위터 - - - 유튜브 - - - 인스타그램 - + Privacy Policy + FAQ
+
diff --git a/login.css b/login.css new file mode 100644 index 00000000..079b4d54 --- /dev/null +++ b/login.css @@ -0,0 +1,80 @@ +html { + color: var(--gray800); +} + +.wrap { + max-width: 640px; + width: 100%; + margin: 0 auto; +} + +.logo { + margin-top: 240px; +} + +.logo a{ + display: flex; + justify-content: center; +} + +.logo img { + width: 60%; +} + +.login-form{ + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 40px; +} + +.input-group{ + display: flex; + flex-direction: column; + gap: 16px; + position: relative; +} + +.input-group input{ + padding: 16px 24px; + background-color: var(--gray100); + border-width: 0; + border-radius: 12px; +} + +.input-group img { + position: absolute; + right: 24px; + bottom: 16px; + width: 24px; +} + +.simple-login{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + border-radius: 8px; + margin-top: 24px; + background-color: #E6F2FF; +} + +.simple-login ul{ + display: flex; + gap: 16px; +} + +.simple-login ul li img{ + width: 42px; +} + +.to-signup{ + display: flex; + justify-content: center; + gap: 4px; + margin-top: 24px; +} + +.to-signup a { + text-decoration: underline; +} \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..a3b53126 --- /dev/null +++ b/login.html @@ -0,0 +1,55 @@ + + + + + + 판다마켓 로그인 + + + + + +
+ +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..95854cfa --- /dev/null +++ b/reset.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Pretendard, sans-serif; + font-size: 16px; +} + +a { + text-decoration: none; + cursor: pointer; +} + +button { + border: none; +} + +body, p { + margin: 0; + padding: 0; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/signup.css b/signup.css new file mode 100644 index 00000000..b84accd4 --- /dev/null +++ b/signup.css @@ -0,0 +1,80 @@ +html { + color: var(--gray800); +} + +.wrap { + max-width: 640px; + width: 100%; + margin: 0 auto; +} + +.logo { + margin-top: 240px; +} + +.logo a{ + display: flex; + justify-content: center; +} + +.logo img { + width: 60%; +} + +.signup-form{ + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 40px; +} + +.input-group{ + display: flex; + flex-direction: column; + gap: 16px; + position: relative; +} + +.input-group input{ + padding: 16px 24px; + background-color: var(--gray100); + border-width: 0; + border-radius: 12px; +} + +.input-group img { + position: absolute; + right: 24px; + bottom: 16px; + width: 24px; +} + +.simple-login{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + border-radius: 8px; + margin-top: 24px; + background-color: #E6F2FF; +} + +.simple-login ul{ + display: flex; + gap: 16px; +} + +.simple-login ul li img{ + width: 42px; +} + +.to-login{ + display: flex; + justify-content: center; + gap: 4px; + margin-top: 24px; +} + +.to-login a { + text-decoration: underline; +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..3980ea73 --- /dev/null +++ b/signup.html @@ -0,0 +1,64 @@ + + + + + + 판다마켓 회원가입 + + + + + +
+ +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/utility.css b/utility.css new file mode 100644 index 00000000..f11d2f82 --- /dev/null +++ b/utility.css @@ -0,0 +1,78 @@ +:root { + --gray900: #111827; + --gray800: #1F2937; + --gray700: #374151; + --gray600: #4B5563; + --gray500: #6B7280; + --gray400: #9CA3AF; + --gray200: #E5E7EB; + --gray100: #F3F4F6; + --gray50: #F9FAFB; + --blue: #3692FF; +} + +.btn-large, .btn-small { + background-color: var(--blue); + color: var(--gray100); +} + +.btn-large:hover, .btn-small:hover { + background-color: #1967D6; +} + +.btn-large:active, .btn-small:active { + background-color: #1251AA; +} + +.btn-large { + padding: 1rem 7.75rem; + border-radius: 40px; +} + +.btn-small { + padding: 0.75rem 1.5rem; + border-radius: 8px; +} + +.bold { + font-weight: 700; +} + +.semibold { + font-weight: 600; +} + +.medium { + font-weight: 500; +} + +.regular { + font-weight: 400; +} + +.text-4xl { + font-size: 2.5rem; + line-height: 3.5rem; + letter-spacing: -0.125rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; + letter-spacing: -0.0625rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 2rem; +} + +.text-lg { + font-size: 1rem; + line-height: 1.625rem; +} + +.text-2lg { + font-size: 1.125rem; + line-height: 1.625rem; +} \ No newline at end of file