diff --git a/css/common.css b/css/common.css index db7dd1a5..6616148e 100644 --- a/css/common.css +++ b/css/common.css @@ -3,9 +3,16 @@ src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; + font-display: swap; } /* Font size + line-height */ html { font-size: 62.5%; } + +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/css/login-signup.css b/css/login-signup.css index 321f5d35..e9613592 100644 --- a/css/login-signup.css +++ b/css/login-signup.css @@ -2,16 +2,22 @@ /* form label (이메일 / 비밀번호) */ form label { display: block; - font-size: var(--text-lg); - font-weight: var(--font-bold); + font-size: var(--text-lg); + font-weight: var(--font-bold); margin-bottom: var(--space-xs); } /* form input 텍스트 */ .content input { - font-size: var(--text-base); - font-weight: var(--font-normal); + font-size: var(--text-base); + font-weight: var(--font-normal); color: var(--secondary-color-gray700); + /* 레이아웃 & 디자인 */ + width: 100%; + height: 56px; + padding: 0 20px; + border-radius: 12px; + background-color: var(--secondary-color-gray100); } /* visibility 버튼 아이콘 */ @@ -22,20 +28,20 @@ form label { /* 제출 버튼 */ .btn-submit { - font-size: var(--text-xl); - font-weight: var(--font-semibold); + font-size: var(--text-xl); + font-weight: var(--font-semibold); width: 100%; height: 56px; border-radius: 40px; - background-color: var(--primary-color-100); + background-color: var(--secondary-color-gray400); color: #fff; } /* 간편 로그인 타이틀 */ .sns-login p { font-size: var(--text-base); - font-weight: var(--font-medium); - color: var(--secondary-color-gray700); + font-weight: var(--font-medium); + color: var(--secondary-color-gray800); } /* SNS 아이콘 링크 */ @@ -45,49 +51,42 @@ form label { } /* 회원가입 텍스트 */ -.sign-up { +.sign-up, +.login { font-size: var(--text-base); font-weight: var(--font-normal); color: var(--secondary-color-gray700); } -.sign-up a { +.sign-up a, +.login a { font-weight: var(--font-semibold); color: var(--primary-color-100); text-decoration: underline; } - - input:focus { outline-color: var(--primary-color-100); } .content { - max-width: 640px; + max-width: 400px; width: 100%; - margin: 120px auto; - padding: 0 20px; - display: flex; - justify-content: center; - align-items: center; + margin: 80px auto; + padding: 0 16px; flex-direction: column; gap: 24px; } +.logo { + width: 198px; +} + form { width: 100%; margin-top: 26px; display: flex; flex-direction: column; - gap: 24px; -} - -.content input { - width: 100%; - height: 56px; - padding: 0 20px; - border-radius: 12px; - background-color: var(--secondary-color-gray100); + gap: 16px; } .password-input-box { @@ -98,14 +97,6 @@ form { padding: 0 40px 0 20px; } -.btn-submit { - width: 100%; - height: 56px; - border-radius: 40px; - background-color: var(--primary-color-100); - color: #fff; -} - .sns-login { width: 100%; height: 74px; @@ -118,9 +109,6 @@ form { } .sns-login-link { - display: flex; - justify-content: center; - align-items: center; gap: 16px; } @@ -135,19 +123,17 @@ form { display: none; } -.sign-up, -.login { - font-size: 1.4rem; -} - -.sign-up a, -.login a { - text-decoration: underline; - color: var(--primary-color-100); -} - @media (min-width: 768px) { .content { + max-width: 640px; padding: 0; } + + form { + gap: 24px; + } + + .logo { + width: 369px; + } } diff --git a/css/reset.css b/css/reset.css index f5d918b2..6e780e55 100644 --- a/css/reset.css +++ b/css/reset.css @@ -8,7 +8,7 @@ html, body { - font-family: 'Pretendard-Regular', sans-serif; + font-family: 'Pretendard-Regular', system-ui, sans-serif; } button { diff --git a/css/style.css b/css/style.css index 30f9f830..f4024d5f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,3 @@ -.flex-center { - display: flex; - justify-content: center; - align-items: center; -} - /* btn */ .btn { display: inline-block; @@ -73,9 +67,16 @@ footer a { font-weight: var(--font-normal); } +.container { + width: 100%; + max-width: 343px; + margin: 0 auto; +} + /* header */ header { width: 100%; + height: 70px; padding: 9px 16px; position: fixed; top: 0; @@ -91,6 +92,10 @@ header { align-items: center; } +.logo img { + max-width: 103px; +} + /* main */ main { margin-top: 70px; @@ -129,7 +134,7 @@ main { display: flex; flex-direction: column; gap: 40px; - padding: 48px 16px; + padding: 48px 0px; background-color: #fff; } @@ -137,12 +142,15 @@ main { width: 100%; display: flex; flex-direction: column; + justify-content: center; + align-items: center; gap: 24px; } .features .img-box { width: 100%; border-radius: 12px; + overflow: hidden; } .features .text-box { @@ -181,7 +189,6 @@ main { } .footer-banner .img-box { - max-width: 746px; width: 100%; } @@ -233,7 +240,194 @@ footer a { } /* 반응형 조절 */ -.pc, -.tb { - display: none; + +@media (min-width: 768px) { + .container { + max-width: 696px; + } + + .more-btn { + width: 357px; + } + + .logo img { + max-width: 153px; + } + + /* font-size */ + .features p { + font-size: var(--text-lg); + font-weight: var(--font-medium); + } + + .badge { + font-size: var(--text-lg); + } + + .hero-heading h1, + .footer-banner-heading h2 { + font-size: var(--text-4xl); + line-height: var(--leading-4xl); + font-weight: var(--font-bold); + } + + .features h2 { + font-size: var(--text-3xl); + line-height: var(--leading-3xl); + font-weight: var(--font-bold); + margin: 0; + } + + /* 레이아웃 수정 */ + header { + padding: 9px 24px; + } + + .hero { + height: 771px; + padding: 84px 0 0; + } + + .hero-heading { + max-width: 515px; + } + + .feature { + max-width: 696px; + } + + .features .img-box img { + width: 100%; + height: auto; + } + + .features .text-box { + gap: 24px; + } + + .footer-banner { + height: 927px; + padding: 201px 0 0; + } + + .copyright { + position: static; + } + + footer { + padding: 0px 104px; + } +} + +@media (min-width: 1200px) { + .word-nowrap { + white-space: nowrap; + } + + .container { + max-width: 1120px; + } + + /* font-size */ + body { + font-size: var(--text-lg); + font-weight: var(--font-medium); + } + + .more-btn { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + } + + .badge { + font-size: var(--text-lg); + } + + .features h2 { + font-size: var(--text-4xl); + line-height: var(--leading-4xl); + font-weight: var(--font-bold); + } + + .features p { + font-size: var(--text-2xl); + line-height: var(--leading-2xl); + font-weight: var(--font-medium); + } + + /* 레이아웃 수정 */ + header { + padding: 9px 200px; + } + + .hero { + height: 540px; + } + + .hero-inner { + max-width: 1110px; + flex-direction: row; + } + + .hero-heading { + max-width: 357px; + text-align: left; + } + .hero .img-box { + height: 100%; + align-items: flex-end; + } + + .features { + padding: 138px 0; + gap: 138px 0; + } + + .feature { + max-width: 988px; + height: 444px; + flex-direction: row; + margin: 0 auto; + gap: 64px; + border-radius: 12px; + background-color: var(--secondary-color-gray50); + } + + .feature:nth-child(2) { + flex-direction: row-reverse; + } + + .features .img-box { + max-width: 579px; + border-radius: 0; + } + + .features .text-box { + flex: 1; + } + + .footer-banner { + height: 540px; + padding: 143px 0 0; + } + + .footer-banner-inner { + max-width: 1110px; + flex-direction: row; + } + + .footer-banner-heading { + text-align: left; + } + + .footer-banner .img-box { + width: 746px; + } +} + +@media (min-width: 1920px) { + .header-inner { + max-width: 1120px; + margin: 0 auto; + } } diff --git a/images/Property-1=lg.svg b/images/logo_l_1x.svg similarity index 100% rename from images/Property-1=lg.svg rename to images/logo_l_1x.svg diff --git a/images/Property-1=lg@2x.svg b/images/logo_l_2x.svg similarity index 100% rename from images/Property-1=lg@2x.svg rename to images/logo_l_2x.svg diff --git a/images/Property-1=lg@3x.svg b/images/logo_l_3x.svg similarity index 100% rename from images/Property-1=lg@3x.svg rename to images/logo_l_3x.svg diff --git a/images/Property 1=Typo.svg b/images/logo_m.svg similarity index 100% rename from images/Property 1=Typo.svg rename to images/logo_m.svg diff --git a/images/og-panda.svg b/images/og-panda.svg deleted file mode 100644 index 56db7770..00000000 --- a/images/og-panda.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/images/og_img.png b/images/og_img.png new file mode 100644 index 00000000..4dec9162 Binary files /dev/null and b/images/og_img.png differ diff --git a/index.html b/index.html index c5af9cfb..8af44e81 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,18 @@ 판다마켓 + + + - - + + + + + + + + @@ -22,8 +31,11 @@

- 로고 - 로고 + + + + 로고 +

로그인 @@ -35,8 +47,7 @@

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

구경하러 가기
@@ -45,14 +56,17 @@

-
+
인기 상품
Hot item -

인기 상품을 확인해보세요

+

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

가장 HOT한 중고거래 물품을
@@ -66,7 +80,10 @@

인기 상품을 확인해보세요

search -

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

+

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

구매하고 싶은 물품은 검색해서
@@ -80,7 +97,10 @@

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

Register -

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

+

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

어떤 물건이든 판매하고 싶은 상품을
@@ -99,13 +119,18 @@

- 판다마켓 푸터 배너 이미지 + 판다마켓 푸터 배너 이미지