diff --git a/signup.css b/auth.css similarity index 63% rename from signup.css rename to auth.css index b84accd4..8569d3cf 100644 --- a/signup.css +++ b/auth.css @@ -2,54 +2,62 @@ html { color: var(--gray800); } +body { + padding: 10vh 0; +} + .wrap { max-width: 640px; width: 100%; margin: 0 auto; } -.logo { - margin-top: 240px; -} - -.logo a{ +.logo a { display: flex; justify-content: center; } -.logo img { +.logo img { width: 60%; } -.signup-form{ +.login-form, +.signup-form { display: flex; flex-direction: column; gap: 24px; - margin-top: 40px; + margin-top: 55px; } -.input-group{ +.input-group { display: flex; flex-direction: column; gap: 16px; position: relative; } -.input-group input{ +.input-group input { padding: 16px 24px; background-color: var(--gray100); border-width: 0; border-radius: 12px; } -.input-group img { +.input-group button { position: absolute; right: 24px; bottom: 16px; width: 24px; + height: 24px; + padding: 0px; + background-color: transparent; +} + +.input-group img { + width: 100%; } -.simple-login{ +.simple-login { display: flex; justify-content: space-between; align-items: center; @@ -59,22 +67,35 @@ html { background-color: #E6F2FF; } -.simple-login ul{ +.simple-login ul { display: flex; gap: 16px; } -.simple-login ul li img{ +.simple-login ul li img { width: 42px; } -.to-login{ +.to-signup, +.to-login { display: flex; justify-content: center; gap: 4px; margin-top: 24px; } +.to-signup a, .to-login a { text-decoration: underline; +} + +/* Mobile */ +@media (min-width:375px) and (max-width:767px) { + body { + padding: 10vh 16px; + } + + .wrap { + max-width: 400px; + } } \ No newline at end of file diff --git a/common.css b/common.css new file mode 100644 index 00000000..774cc6a7 --- /dev/null +++ b/common.css @@ -0,0 +1,21 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Pretendard, sans-serif; + font-size: 16px; +} + +:root { + --gray900: #111827; + --gray800: #1F2937; + --gray700: #374151; + --gray600: #4B5563; + --gray500: #6B7280; + --gray400: #9CA3AF; + --gray200: #E5E7EB; + --gray100: #F3F4F6; + --gray50: #F9FAFB; + --blue: #3692FF; +} \ No newline at end of file diff --git a/images/btn_visibility_off.png b/images/ic_visibility_off.png similarity index 100% rename from images/btn_visibility_off.png rename to images/ic_visibility_off.png diff --git a/images/btn_visibility_on.png b/images/ic_visibility_on.png similarity index 100% rename from images/btn_visibility_on.png rename to images/ic_visibility_on.png diff --git a/images/logo_lg.png b/images/logo_lg.png index bc206ad5..3ce14570 100644 Binary files a/images/logo_lg.png and b/images/logo_lg.png differ diff --git a/images/logo_sm.png b/images/logo_sm.png index dfd80154..a41e2ae4 100644 Binary files a/images/logo_sm.png and b/images/logo_sm.png differ diff --git a/images/logo_typo.png b/images/logo_typo.png new file mode 100644 index 00000000..af3058e2 Binary files /dev/null and b/images/logo_typo.png differ diff --git a/images/og_image.png b/images/og_image.png new file mode 100644 index 00000000..02e69b20 Binary files /dev/null and b/images/og_image.png differ diff --git a/index.css b/index.css index 258a4b2b..5a26b271 100644 --- a/index.css +++ b/index.css @@ -18,7 +18,7 @@ header { footer { background-color: var(--gray900); - height: 10rem; + height: 160px; } .gnb { @@ -29,7 +29,8 @@ footer { } .gnb img { - max-width: 10rem; + display: block; + max-width: 160px; } .btn-login { @@ -44,78 +45,109 @@ footer { margin: 0 auto; } -.home-top-section img, .home-bottom-section img { +.home-top-section img, +.home-bottom-section img { max-width: 45rem; } .home-top-section { + display: flex; + flex-direction: column; + justify-content: flex-end; background-color: #CFE5FF; - height: 34rem; + height: 540px; } .home-top { - height: 100%; display: flex; justify-content: center; align-items: flex-end; + height: 90%; } -.home-top-content{ +.home-top-content { display: flex; flex-direction: column; - gap: 2rem; + align-items: flex-start; + gap: 32px; padding-bottom: 4%; } +.home-top-content p { + width: 340px; +} + +.home-section { + display: flex; + flex-direction: column; + background-color: #FFFFFF; + padding: 24px; +} + .home-section img { - max-width: 36rem; + width: 580px; } .home { - background-color: #FFFFFF; - height: 45rem; + height: 720px; display: flex; justify-content: center; align-items: center; } -.home-content{ +.home-content { background-color: #FCFCFC; display: flex; justify-content: center; - gap: 4rem; + gap: 64px; border-radius: 12px; - width: 65rem; + width: 1040px; } -.home-content-1, .home-content-2, .home-content-3 { +.home-content-1, +.home-content-2, +.home-content-3 { display: flex; flex-direction: column; justify-content: center; - margin-right: 0.75rem; + margin-right: 12px; + + word-break: keep-all; } .home-content-2 { text-align: end; margin-right: 0; - margin-left: 0.75rem; + margin-left: 12px; +} + +.home-title { + width: 340px; } .home-describe { margin-top: 1.5rem; + width: 340px; +} + +.home-content-3 .home-describe { + width: 380px; } .home-bottom-section { + display: flex; + flex-direction: column; + justify-content: flex-end; background-color: #CFE5FF; - height: 33.75rem; + height: 540px; } .home-bottom { - height: 100%; display: flex; justify-content: center; align-items: flex-end; - gap: 4rem; + height: 80%; + gap: 64px; } .home-bottom-content { @@ -125,23 +157,25 @@ footer { .footer-content { display: flex; justify-content: space-between; - max-width: 70rem; - padding-top: 1.5%; + max-width: 1120px; + padding-top: 32px; + height: 100%; } -.faq, .sns { +.faq, +.sns { display: flex; } .faq { - gap: 2rem; + gap: 32px; } .sns { - gap: 0.75rem; + gap: 12px; } -.sns img{ +.sns img { max-width: 1.25rem; } @@ -150,7 +184,8 @@ footer { margin-bottom: 0.75rem; } -.copyright, .faq { +.copyright, +.faq { font-size: 1rem; font-weight: 400; } @@ -163,14 +198,120 @@ footer { color: var(--gray200); } -@media (max-width:1920px) { +@media (min-width:1200px) and (max-width:1920px) { .gnb { padding: 9px 200px } } -@media (max-width:1280px) { - html { - font-size: 12px; +/* (min-width:768px) and */ +@media (max-width:1199px) { + .gnb { + padding: 9px 24px + } + + .home-top-section img, + .home-bottom-section img { + max-width: 100%; + } + + .home-top-section { + height: 105vw; + } + + .home-top { + flex-direction: column; + justify-content: space-between; + align-items: center; + } + + .home-top-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .home-top-content p { + width: 100%; + } + + .home-section { + gap: 52px; + padding-bottom: 56px; + } + + .home-section img { + width: 100%; + } + + .home { + height: auto; + } + + .home-content { + background-color: #FFFFFF; + flex-direction: column; + gap: 24px; + width: 100%; + } + + .home:nth-child(2) .home-content { + flex-direction: column-reverse; + align-items: flex-end; + } + + .home-content-2 { + text-align: end; + align-items: flex-end; + margin-right: 0; + margin-left: 12px; + } + + .home-title { + width: 100%; + } + + .home-bottom-section { + background-color: #CFE5FF; + height: 125vw; + } + + .home-bottom { + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + } + + .footer-content { + padding: 32px 10%; + } +} + +@media (min-width:375px) and (max-width:767px) { + .gnb { + padding: 9px 16px + } + + .home-top-section { + height: 144vw; + } + + .home-top-content p { + width: 340px; + text-align: center; + } + + .btn-large { + padding: 12px 71px; + } + + .footer-content { + flex-wrap: wrap; + gap: 60px; + } + + .copyright { + order: 1; } } \ No newline at end of file diff --git a/index.html b/index.html index 1d73e512..7d1a7081 100644 --- a/index.html +++ b/index.html @@ -1,137 +1,138 @@ - - - - 판다마켓 - - - - - -
-
- - -
-
+ + + + + + + + + 판다마켓 + + + + + + +
+
+ + +
+
-
-
-
-
-

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

- 구경하러 가기 +
+
+
+
+

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

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

- Hot item -

-

- 인기 상품을
- 확인해 보세요 -

-

- 가장 HOT한 중고거래 물품을
- 판다 마켓에서 확인해 보세요 -

+
+
+
+ 인기 상품 +
+

Hot item

+

인기 상품을 확인해보세요

+

+ 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요 +

+
-
-
-
-
-

- Search -

-

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

-

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

+
+
+
+

Search

+

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

+

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

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

- Register -

+
+
+ 상품 등록 +
+

Register

+

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

+

+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +

+
+
+
+
+ +
+
+

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

-

- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요 + 믿을 수 있는
+ 판다마켓 중고 거래

+ 판다 이미지
- -
+ +
-
-
-
-

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

+
- - - - - \ No newline at end of file + + + diff --git a/login.css b/login.css deleted file mode 100644 index 079b4d54..00000000 --- a/login.css +++ /dev/null @@ -1,80 +0,0 @@ -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 index a3b53126..efefa2fc 100644 --- a/login.html +++ b/login.html @@ -1,55 +1,68 @@ - - - - 판다마켓 로그인 - - - - - -
- -
-
-
-
+ + diff --git a/reset.css b/reset.css index 95854cfa..532056bb 100644 --- a/reset.css +++ b/reset.css @@ -1,12 +1,3 @@ -* { - box-sizing: border-box; -} - -html { - font-family: Pretendard, sans-serif; - font-size: 16px; -} - a { text-decoration: none; cursor: pointer; @@ -16,7 +7,8 @@ button { border: none; } -body, p { +body, +p { margin: 0; padding: 0; } diff --git a/signup.html b/signup.html index 3980ea73..4c32df9a 100644 --- a/signup.html +++ b/signup.html @@ -1,64 +1,91 @@ - - - - 판다마켓 회원가입 - - - - - -
- -
-
-
-
+ + diff --git a/utility.css b/utility.css index f11d2f82..c11218be 100644 --- a/utility.css +++ b/utility.css @@ -1,31 +1,29 @@ -: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 { +.btn-large, +.btn-medium, +.btn-small { background-color: var(--blue); color: var(--gray100); } -.btn-large:hover, .btn-small:hover { +.btn-large:hover, +.btn-medium:hover, +.btn-small:hover { background-color: #1967D6; } -.btn-large:active, .btn-small:active { +.btn-large:active, +.btn-medium:active, +.btn-small:active { background-color: #1251AA; } .btn-large { - padding: 1rem 7.75rem; + padding: 16px 124px; + border-radius: 40px; +} + +.btn-medium { + padding: 12px 71px; border-radius: 40px; } @@ -67,12 +65,12 @@ line-height: 2rem; } -.text-lg { - font-size: 1rem; +.text-2lg { + font-size: 1.125rem; line-height: 1.625rem; } -.text-2lg { - font-size: 1.125rem; +.text-lg { + font-size: 1rem; line-height: 1.625rem; } \ No newline at end of file