diff --git a/css/main-style.css b/css/main-style.css index 1527c706..de0b3e85 100644 --- a/css/main-style.css +++ b/css/main-style.css @@ -1,7 +1,7 @@ :root { --primary-100: #3692ff; --primary-200: #1967d6; - --primary-200: #1251aa; + --primary-300: #1251aa; --gray-900: #111827; --gray-800: #1f2937; --gray-700: #374151; @@ -71,21 +71,23 @@ header { margin: 0 auto; } +.top-title-txt { + width: 30%; +} + .show-items { + display: inline-block; height: 56px; border-radius: 40px; - padding: 16px 124px; + width: 100%; + text-align: center; font-size: 20px; font-weight: 600; - line-height: 32px; + line-height: 56px; color: var(--gray-50, #f9fafb); background-color: var(--primary-100, #3692ff); } -.main-top > .container { - align-items: flex-start; -} - .container { max-width: 1920px; display: flex; @@ -94,7 +96,7 @@ header { } .main-middle > .container { - width: 50%; + width: 65%; background-color: #fcfcfc; margin: 10% auto; border-radius: 12px; @@ -178,6 +180,20 @@ footer .footer-list { margin: 0 200px; } + .main-title { + font-size: 32px; + } + + .main-describe { + font-size: 18px; + } +} + +@media (min-width: 1200px) { + header .navi { + margin: 0 200px; + } + .main-point { font-size: 12px; } @@ -190,3 +206,175 @@ footer .footer-list { font-size: 18px; } } + +@media (max-width: 1199px) and (min-width: 768px) { + header .navi { + margin: 0 24px; + padding: 12px 0; + } + + .main-top { + height: 774px; + } + + .container { + flex-direction: column; + justify-content: space-between; + height: 100%; + } + + .invisible { + display: none; + } + + .top-title-txt { + width: 100%; + margin-top: 10%; + text-align: center; + } + + .show-items { + width: 50%; + } + + .main-middle > .container { + width: 95%; + margin: 20px auto; + } + + .container > .main-txt { + order: 2; + } + + .container > .main-content-img { + order: 1; + } + + .main-bottom { + margin-top: 10%; + height: 927px; + } + + .bottom-txt { + margin-top: 30%; + text-align: center; + } + + footer { + height: 160px; + } + + .footer-list { + padding: 20px 80px; + } +} + +@media (max-width: 767px) and (min-width: 375px) { + body { + overflow-x: hidden; + } + + header .navi { + margin: 0 16px; + padding: 12px 0; + } + + .panda-icon { + display: none; + } + + .main-top { + height: 540px; + } + + .invisible { + display: none; + } + + .container { + flex-direction: column; + justify-content: space-between; + height: 100%; + } + + .top-title-txt { + width: 240px; + margin-top: 10%; + text-align: center; + } + + .main-top > .container > .main-core-img { + width: 120%; + object-fit: contain; + overflow: hidden; + } + + .main-core-img { + width: 100%; + } + + .main-middle > .container { + width: 90%; + margin: 20% auto; + } + + .main-core-title { + font-size: 32px; + } + + .main-point, + .main-describe { + font-size: 16px; + } + + .main-title { + font-size: 24px; + } + + .container > .main-txt { + order: 2; + } + + .container > .main-content-img { + order: 1; + } + + .main-bottom { + margin-top: 10%; + } + + .bottom-txt { + margin-top: 30%; + text-align: center; + } + + .list-policy > a { + color: var(--gray-400, #9ca3af); + margin: 0 8px; + } + + footer .footer-list { + display: grid; + grid-template-areas: + "policy sns" + ". ." + "copyright ."; + grid-template-columns: 1fr 1fr; + gap: 16px; + padding: 20px 16px; + align-items: center; + } + + .list-policy { + grid-area: policy; + } + + .list-sns { + grid-area: sns; + justify-content: center; + } + + .copyright { + grid-area: copyright; + } +} diff --git a/css/sign.css b/css/sign.css index 71737455..a79ddb18 100644 --- a/css/sign.css +++ b/css/sign.css @@ -1,7 +1,7 @@ :root { --primary-100: #3692ff; --primary-200: #1967d6; - --primary-200: #1251aa; + --primary-300: #1251aa; --gray-900: #111827; --gray-800: #1f2937; --gray-700: #374151; @@ -61,13 +61,20 @@ body { } .pwd-section { - position: relative; + display: flex; + background-color: var(--gray-100, #f3f4f6); + border-radius: 12px; + height: 54px; + margin: 20px 0; + align-items: center; } .pwd-visible { - position: absolute; - right: 5%; - bottom: 35px; + margin: 0 5px; +} + +#user-pwd { + padding: 0 0 0 20px; } .login-btn { @@ -122,3 +129,24 @@ body { color: var(--primary-100, #3692ff); text-decoration: underline; } + +@media (max-width: 767px) and (min-width: 375px) { + .container { + margin: 80px auto; + width: 100%; + max-width: 400px; + } + + .logo { + width: 198px; + margin: 0 auto; + } + + .panda-icon { + width: 100%; + } + + .content { + padding: 0 20px; + } +} diff --git a/images/5d7d01ce3d5d3c8c.jpg b/images/5d7d01ce3d5d3c8c.jpg new file mode 100644 index 00000000..13a81880 Binary files /dev/null and b/images/5d7d01ce3d5d3c8c.jpg differ diff --git a/index.html b/index.html index 53f20697..35507cc8 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,10 @@ 판다마켓 + + + +
@@ -23,10 +27,7 @@
-

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

+

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

구경하러 가기
판다마켓 메인페이지 상단 이미지 @@ -37,10 +38,7 @@

Hot item -

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

+

인기 상품을 확인해 보세요

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요 @@ -50,10 +48,7 @@

Search -

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

+

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

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요 @@ -66,7 +61,7 @@

Register

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

@@ -78,7 +73,7 @@

-

+

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

diff --git a/login.html b/login.html index 0a1b2a16..3938141f 100644 --- a/login.html +++ b/login.html @@ -16,21 +16,29 @@