diff --git a/images/logo/og-img.png b/images/logo/og-img.png new file mode 100644 index 00000000..4852a0de Binary files /dev/null and b/images/logo/og-img.png differ diff --git a/images/logo/pandaMarket-Logo-mobile.png b/images/logo/pandaMarket-Logo-mobile.png new file mode 100644 index 00000000..588d5847 Binary files /dev/null and b/images/logo/pandaMarket-Logo-mobile.png differ diff --git a/images/logo/pandaMarket-Logo.png b/images/logo/pandaMarket-Logo.png index a1dc1c6a..42cb0230 100644 Binary files a/images/logo/pandaMarket-Logo.png and b/images/logo/pandaMarket-Logo.png differ diff --git a/index.html b/index.html index 6efcf4c3..8b2a3b00 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,13 @@ + + + + 판다마켓 로그인 @@ -58,7 +65,12 @@

-
+
+ 상품 검색
Search
@@ -70,11 +82,6 @@ 쉽게 찾아보세요

- 상품 검색
-
@codeit - 2025
+
@codeit - 2025
Privacy Policy FAQ diff --git a/login.html b/login.html index aed05590..3037de8e 100644 --- a/login.html +++ b/login.html @@ -23,7 +23,7 @@ 판다마켓 logo
@@ -48,31 +48,39 @@ name="password" placeholder="비밀번호를 입력해주세요" /> - 비밀번호 숨김 +
- 로그인 +
diff --git a/signup.html b/signup.html index 9f46929f..262955c3 100644 --- a/signup.html +++ b/signup.html @@ -23,7 +23,7 @@ 판다마켓 logo
@@ -56,12 +56,13 @@ name="password" placeholder="비밀번호를 입력해주세요" /> - 비밀번호 숨김 +
@@ -73,16 +74,19 @@ name="verifyPassword" placeholder="비밀번호를 다시 입력해주세요" /> - 비밀번호 보임 +
- 회원가입 + diff --git a/styles/auth.css b/styles/auth.css index 8dffd2cf..bf558da3 100644 --- a/styles/auth.css +++ b/styles/auth.css @@ -1,26 +1,36 @@ .auth-container { - max-width: 640px; - margin: 60px auto; + max-width: 400px; + width: 100%; + margin: 24px auto; + padding: 0 16px; color: var(--gray800); } /* 로고 */ .logo-wrapper { text-align: center; - margin-bottom: 40px; + margin-bottom: 24px; } /* 로그인 폼 */ -.input-form { +.auth-container form { + display: flex; + flex-direction: column; + gap: 16px; margin-bottom: 24px; } +.input-form { + display: flex; + flex-direction: column; + gap: 8px; +} + .input-form label { display: block; font-weight: 700; - font-size: var(--font-size-2lg); - line-height: var(--line-height-2lg); - margin-bottom: 16px; + font-size: var(--font-size-md); + line-height: var(--line-height-md); } input { @@ -31,6 +41,10 @@ input { background-color: var(--gray100); } +input::placeholder { + color: var(--gray400); +} + input:focus { outline-color: var(--primary100); } @@ -47,9 +61,8 @@ input:focus { cursor: pointer; } -#auth-button { +.auth-button { width: 100%; - margin-bottom: 24px; } /* 간편 로그인하기 */ @@ -60,7 +73,6 @@ input:focus { background-color: #e6f2ff; border-radius: 8px; margin-bottom: 24px; - display: flex; align-items: center; justify-content: space-between; @@ -89,3 +101,39 @@ input:focus { color: var(--primary100); text-decoration: underline; } + +@media (min-width: 768px) { + .auth-container { + max-width: 640px; + margin: 48px auto; + padding: 0; + } + + /* 로고 */ + .logo-wrapper { + margin-bottom: 40px; + } + + .logo-wrapper img { + width: 396px; + } + /* 로그인 폼 */ + .auth-container form { + gap: 24px; + } + + .input-form { + gap: 16px; + } + + .input-form label { + font-size: var(--font-size-2lg); + line-height: var(--line-height-2lg); + } +} + +@media (min-width: 1200px) { + .auth-container { + margin: 60px auto; + } +} diff --git a/styles/global.css b/styles/global.css index fe7ff85d..f1cab570 100644 --- a/styles/global.css +++ b/styles/global.css @@ -68,14 +68,8 @@ img { vertical-align: bottom; } -span { - font-size: 40px; - font-weight: 700; - line-height: 56px; - letter-spacing: 0.02em; -} - /* ------------------------------------- */ +/* Mobile First로 진행(Mobile → Tablet → PC)*/ body { color: var(--gray700); @@ -86,7 +80,7 @@ body { header { width: 100%; height: 70px; - padding: 0 200px; + padding: 0 16px; display: flex; align-items: center; justify-content: space-between; @@ -99,20 +93,21 @@ header { } footer { - width: 100%; - height: 160px; - padding: 32px 400px 108px; + padding: 32px 32px 30px; color: var(--gray400); background-color: var(--gray900); display: flex; align-items: center; justify-content: space-between; + flex-wrap: wrap; + gap: 60px; } .container { max-width: 1120px; margin: 0 auto; width: 100%; + padding: 0 16px; } .button { @@ -125,9 +120,9 @@ footer { } .btn-round { - font-size: var(--font-size-xl); + font-size: var(--font-size-2lg); font-weight: 600; - padding: 16px 124px; + padding: 12px 71px; border-radius: 9999px; } @@ -144,3 +139,38 @@ footer { cursor: default; pointer-events: none; } + +@media (min-width: 768px) { + header { + padding: 0 24px; + } + + footer { + padding: 32px 104px 108px 104px; + } + + .container { + padding: 0 24px; + } + + .btn-round { + font-size: var(--font-size-xl); + font-weight: 600; + padding: 16px 124px; + border-radius: 9999px; + } +} + +@media (min-width: 1200px) { + header { + padding: 0 200px; + } + + footer { + padding: 32px 200px 108px 200px; + } + + .container { + padding: 0; + } +} diff --git a/styles/home.css b/styles/home.css index 4165f740..ec6a9ae0 100644 --- a/styles/home.css +++ b/styles/home.css @@ -1,6 +1,7 @@ +/* Mobile First로 진행(Mobile → Tablet → PC)*/ /* header */ .logo { - width: 153px; + width: 103px; cursor: pointer; } @@ -14,62 +15,79 @@ /* banner */ .banner { - height: 540px; background-color: #cfe5ff; background-repeat: no-repeat; - background-position: calc(100% - 30%) bottom; display: flex; - align-items: center; + background-position: center bottom; + text-align: center; } #banner-top { + height: 540px; + padding-top: 48px; + margin-top: 70px; background-image: url("/images/home/Img_banner_top.png"); + background-size: 448px; } #banner-bottom { + height: 540px; + padding-top: 121px; background-image: url("/images/home/Img_banner_bottom.png"); + background-size: 375px; } -.banner-title { - margin-bottom: 32px; +#banner-top .banner-title { + margin-bottom: 18px; } .banner-title span { + font-weight: 700; + line-height: 140%; + font-size: var(--font-size-3xl); display: block; } /* contents */ #contents { - margin-bottom: 138px; + margin-top: 52px; + margin-bottom: 83px; } .content { - padding: 138px 0; display: flex; - align-items: center; + flex-direction: column; justify-content: center; - gap: 64px; -} - -.content-description p { - font-size: var(--font-size-2xl); - line-height: var(--line-height-2xl); - margin-top: 24px; + gap: 24px; } .content-tag { color: var(--primary100); - font-size: var(--font-size-2lg); - line-height: var(--line-height-2lg); + font-size: var(--font-size-lg); + line-height: var(--line-height-lg); font-weight: 700; - margin-bottom: 12px; + margin-bottom: 8px; } .content-title span { - display: block; + font-weight: 700; + font-size: var(--font-size-2xl); + line-height: var(--line-height-2xl); +} + +.content-description { + margin-bottom: 40px; +} + +.content-description p { + font-weight: 500; + font-size: var(--font-size-lg); + line-height: var(--line-height-lg); + margin-top: 16px; } .content-img { - width: 579px; + width: 100%; + border-radius: 7px; } .content:nth-child(odd) .content-description { @@ -80,13 +98,158 @@ } /* footer */ +.copyright { + order: 3; + flex-basis: 100%; + font-weight: 400; + font-size: var(--font-size-lg); +} .footer-menu { display: flex; gap: 30px; color: var(--gray200); + font-weight: 400; + font-size: var(--font-size-lg); } .footer-social { display: flex; gap: 12px; } + +/* 반응형 - Tablet */ +@media (min-width: 768px) { + #banner-top .banner-title span { + font-size: 40px; + display: inline; + } + + .logo { + content: url(/images/logo/pandaMarket-Logo.png); + width: 153px; + } + + /* banner */ + #banner-top { + height: 771px; + padding-top: 84px; + background-size: 744px; + } + + #banner-bottom { + height: 927px; + padding-top: 201px; + background-size: 744px; + } + + .banner-title { + margin-bottom: 24px; + } + + /* contents */ + #contents { + margin-top: 24px; + margin-bottom: 56px; + } + + .content-tag { + font-size: var(--font-size-2lg); + line-height: var(--line-height-2lg); + margin-bottom: 16px; + } + + .content-title span { + font-size: var(--font-size-3xl); + line-height: var(--line-height-3xl); + } + + .content-description { + margin-bottom: 52px; + } + + .content-description p { + font-size: var(--font-size-2lg); + line-height: var(--line-height-2lg); + margin-top: 24px; + } + + .content-img { + border-radius: 14px; + } + + /* footer */ + .copyright { + order: 0; + flex-basis: auto; + } +} + +/* 반응형 - Desktop */ +@media (min-width: 1200px) { + #banner-top .banner-title span, + .content-title span { + display: block; + } + + /* banner */ + .banner { + text-align: start; + align-items: center; + background-position: calc(100% - 30%) bottom; + } + + .banner-title { + margin-bottom: 32px; + } + + #banner-top, + #banner-bottom { + height: 540px; + padding-top: 0; + background-size: 746px; + } + + /* contents */ + #contents { + margin-top: 0; + margin-bottom: 138px; + } + + .content { + padding: 138px 0; + flex-direction: row; + align-items: center; + gap: 64px; + } + + .content-tag { + margin-bottom: 12px; + } + + .content-title span { + font-size: 40px; + line-height: 140%; + } + + .content-description { + margin-bottom: 40px; + } + + .content-description p { + font-size: var(--font-size-2xl); + line-height: var(--line-height-2xl); + } + + .content-img { + width: 579px; + border-radius: 0; + } + + .reverse .content-img { + order: 2; + } + + .reverse .content-description { + order: 1; + } +}