diff --git a/color.css b/color.css new file mode 100644 index 00000000..02c6edeb --- /dev/null +++ b/color.css @@ -0,0 +1,12 @@ +* { + --blue: #3692FF; + --gray-50: #F9FAFB; + --gray-100: #F3F4F6; + --gray-200: #E5E7EB; + --gray-400: #9CA3AF; + --gray-500: #6B7280; + --gray-600: #4B5563; + --gray-700: #374151; + --gray-800: #1F2937; + --gray-900: #111827; +} \ No newline at end of file diff --git a/index.css b/index.css index 51813614..f573f237 100644 --- a/index.css +++ b/index.css @@ -87,14 +87,10 @@ button:active { text-align: center; } -.section-container { - margin: 138px 0; -} - .section { display: flex; align-items: center; - margin: 0 auto; + margin: 138px auto; width: 988px; border-radius: 12px; overflow: hidden; @@ -156,6 +152,7 @@ button:active { .footer-container { display: flex; + align-items: center; justify-content: space-between; margin: 0 auto; padding: 32.5px 0; @@ -187,4 +184,130 @@ button:active { .SNS-container img { width: 20px; height: 20px; +} + + +/* tablet 사이즈 */ +@media only screen and (max-width: 1199px) { + .header-nav { + padding: 10px 24px; + width: calc(100% - 48px); + } + .landing-section { + height: auto; + } + .landing-content { + flex-direction: column; + } + .top-landing-message-container { + align-items: center; + margin: 84px 0 211px 0; + width: auto; + } + .top-landing-message-container .mobile-hide { + display: none; + } + .explore-button { + width: 357px; + } + + + .first-container .section { + margin: 24px 0; + } + .section-container { + padding: 0 24px; + } + .section { + flex-direction: column; + width: 100%; + margin: 52px 0; + background-color: transparent; + } + .section img { + width: 100%; + border-radius: 14px; + } + .section .section-title .mobile-hide { + display: none; + } + .message-container { + margin: 24px 0 0 0; + width: 100%; + } + .message-container .section-title { + font-size: 32px; + line-height: 42px; + } + .message-container .section-message { + font-size: 18px; + line-height: 26px; + } + .hot-item-message-container, + .register-section .message-container { + margin-left: 0; + } + .search-section .message-container { + margin-right: 0; + } + + .bottom-landing-section { + padding-top: 0; + } + + .bottom-landing-section .section-title { + margin: 201px 0 207px 0; + text-align: center; + } + .footer-container { + padding: 32.5px 104px; + } +} + +/* mobile 사이즈 */ +@media only screen and (max-width: 767px) { + .header-nav { + padding: 10px 16px; + width: calc(100% - 32px); + } + .landing-content img { + width: 100%; + } + .landing-content .section-title { + text-align: center; + } + .landing-content .mobile-hide { + display: inline; + } + .explore-button { + width: 240px; + font-size: 18px; + line-height: 26px; + text-align: center; + } + .message-container .section-title { + font-size: 24px; + line-height: 32px; + } + .message-container .section-message { + font-size: 16px; + } + .first-container .section { + margin: 52px 0; + } + .section-container { + padding: 0 16px; + } + .section { + margin: 40px 0; + } + .bottom-landing-section .section-title { + margin: 121px 0 131px 0; + font-size: 32px; + line-height: 44.8px; + } + .footer-container { + flex-wrap: wrap; + padding: 32px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 310d14b8..b126c05d 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,6 +8,21 @@ 판다마켓 + + + + + + + + + + + + + + +
@@ -23,21 +38,21 @@
-
-

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

+
+

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

구경하러 가기
판다마켓 랜딩 페이지 배너 이미지
-
+
hot-item 이미지
Hot item -

인기 상품을
확인해 보세요

-

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

+

인기 상품을
확인해 보세요

+

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

@@ -47,8 +62,8 @@ search 이미지
Search -

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

-

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

+

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

+

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

@@ -58,8 +73,8 @@ register 이미지
Register -

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

-

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

+

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

+

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

@@ -68,7 +83,7 @@
-

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

+

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

판다마켓 랜딩 페이지 배너 이미지
diff --git a/login.css b/login.css index 66130d04..084de0f6 100644 --- a/login.css +++ b/login.css @@ -114,4 +114,26 @@ .login { text-decoration: underline; +} + +/* mobile 사이즈 */ +@media only screen and (max-width: 767px) { + .logo-icon { + width: 52px; + height: 52px; + } + .logo-text { + width: 166px; + height: 65px; + } + .form-container { + padding: 0 16px; + max-width: 400px; + width: calc(100% - 32px); + } + .label-text { + margin-bottom: 8px; + font-size: 14px; + line-height: 24px; + } } \ No newline at end of file diff --git a/login.html b/login.html index d2c724c5..f96754d4 100644 --- a/login.html +++ b/login.html @@ -1,5 +1,5 @@ - + @@ -20,7 +20,7 @@
- +
diff --git a/palette.css b/palette.css index 9d62c0a3..3b96dd0b 100644 --- a/palette.css +++ b/palette.css @@ -1,9 +1,11 @@ +@import "./color.css"; + .gray900 { background-color: #111827; } .text-gray900 { - color: #111827; + color: var(--gray-900); } .gray800 { @@ -11,7 +13,7 @@ } .text-gray800 { - color: #1F2937; + color: var(--gray-800); } .gray700 { @@ -19,7 +21,7 @@ } .text-gray700 { - color: #374151; + color: var(--gray-700); } .gray600 { @@ -27,7 +29,7 @@ } .text-gray600 { - color: #4B5563; + color: var(--gray-600); } .gray500 { @@ -35,7 +37,7 @@ } .text-gray500 { - color: #6B7280; + color: var(--gray-500); } .gray400 { @@ -43,7 +45,7 @@ } .text-gray400 { - color: #9CA3AF; + color: var(--gray-400); } .gray200 { @@ -51,7 +53,7 @@ } .text-gray200 { - color: #E5E7EB; + color: var(--gray-200); } .gray100 { @@ -59,7 +61,7 @@ } .text-gray100 { - color: #F3F4F6; + color: var(--gray-100); } .gray50 { @@ -67,7 +69,7 @@ } .text-gray50 { - color: #F9FAFB; + color: var(--gray-50); } .blue { @@ -75,5 +77,5 @@ } .text-blue { - color: #3692FF; + color: var(--blue); } \ No newline at end of file diff --git a/signup.css b/signup.css index 66130d04..084de0f6 100644 --- a/signup.css +++ b/signup.css @@ -114,4 +114,26 @@ .login { text-decoration: underline; +} + +/* mobile 사이즈 */ +@media only screen and (max-width: 767px) { + .logo-icon { + width: 52px; + height: 52px; + } + .logo-text { + width: 166px; + height: 65px; + } + .form-container { + padding: 0 16px; + max-width: 400px; + width: calc(100% - 32px); + } + .label-text { + margin-bottom: 8px; + font-size: 14px; + line-height: 24px; + } } \ No newline at end of file diff --git a/signup.html b/signup.html index 66035856..c36a2c12 100644 --- a/signup.html +++ b/signup.html @@ -1,5 +1,5 @@ - + @@ -20,7 +20,7 @@
- +