diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ce902a3 Binary files /dev/null and b/.DS_Store differ diff --git a/.github/.DS_Store b/.github/.DS_Store new file mode 100644 index 0000000..d8d3803 Binary files /dev/null and b/.github/.DS_Store differ diff --git a/pandamarket/.DS_Store b/pandamarket/.DS_Store new file mode 100644 index 0000000..257f003 Binary files /dev/null and b/pandamarket/.DS_Store differ diff --git "a/pandamarket/images/\354\235\264\353\257\270\354\247\200_\352\263\265\354\234\240.png" "b/pandamarket/images/\354\235\264\353\257\270\354\247\200_\352\263\265\354\234\240.png" new file mode 100644 index 0000000..6c86b70 Binary files /dev/null and "b/pandamarket/images/\354\235\264\353\257\270\354\247\200_\352\263\265\354\234\240.png" differ diff --git a/pandamarket/index.html b/pandamarket/index.html index a95937b..24477c5 100644 --- a/pandamarket/index.html +++ b/pandamarket/index.html @@ -2,10 +2,20 @@ + - 판다마켓 + 판다 마켓 + + + + + + + + + @@ -27,8 +37,7 @@

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

@@ -37,46 +46,47 @@
- + panda_image
- + home_img1
-

- Hot item
- 인기 상품을
확인해 보세요
- +

+

Hot item

+

인기 상품을 확인해 보세요

+

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

+

+
+ home_img2 +
-

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

+

Search

+

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

+

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

+

+
-
- + home_img3
-

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

+

Register

+

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

+

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

+

+
@@ -86,41 +96,42 @@ 믿을 수 있는
판다마켓 중고 거래

- + last_home_img diff --git a/pandamarket/login-signup-styles.css b/pandamarket/login-signup-styles.css new file mode 100644 index 0000000..8c2791b --- /dev/null +++ b/pandamarket/login-signup-styles.css @@ -0,0 +1,220 @@ +@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css'); + +* { + font-family: 'Pretendard', sans-serif; +} + +main { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + padding: 0; +} + +.wrap { + width: 640px; + height: 618px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.login-logo, +.signup-logo { + margin-bottom: 40px; +} + +/* 폼 공통 스타일 */ +form label { + font-size: 18px; + font-weight: 700; + color: rgba(31, 41, 55, 1); +} + +form input { + box-sizing: border-box; + background-color: rgba(243, 244, 246, 1); + border: 2px solid transparent; + border-radius: 12px; + width: 640px; + height: 56px; + padding-left: 24px; + padding-right: 24px; + font-size: 16px; + margin-top: 16px; + margin-bottom: 16px; +} + +form input:focus { + border-color: #3692FF; + outline: none; +} + +form #submit { + border-radius: 40px; + background-color: rgba(156, 163, 175, 1); + color: rgba(243, 244, 246, 1); + margin-top: 8px; + margin-bottom: 24px; + cursor: pointer; +} + +.simple-login { + box-sizing: border-box; + width: 640px; + height: 74px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 23px; + padding-right: 23px; + padding-top: 24px; + padding-bottom: 24px; + background-color: rgba(230, 242, 255, 1); + border-radius: 8px; + margin-bottom: 24px; +} + +.simple-login p { + font-size: 16px; + font-weight: 500; +} + +.logos { + box-sizing: border-box; + display: flex; + width: 100px; + height: 42px; + justify-content: space-between; +} + +.logos img { + height: 42px; + width: 42px; +} + +.move-to-login, +.move-to-signup { + font-size: 14px; + font-weight: 500; +} + +.move-to-login a, +.move-to-signup a { + color: rgba(54, 146, 255, 1); +} + +@media (max-width: 767px) { + main { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + padding: 0; + } + + .wrap { + width: 343px; + max-width: 400px; + height: 501px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .login-logo, + .signup-logo { + margin-bottom: 40px; + } + + .login-logo img, + .signup-logo img { + width: 198px; + height: 66px; + } + + /* 폼 공통 스타일 */ + form label { + font-size: 14px; + font-weight: 700; + color: rgba(31, 41, 55, 1); + } + + form input { + box-sizing: border-box; + background-color: rgba(243, 244, 246, 1); + border: 2px solid transparent; + border-radius: 12px; + width: 343px; + height: 56px; + padding-left: 24px; + padding-right: 24px; + font-size: 16px; + margin-top: 16px; + margin-bottom: 16px; + } + + form input:focus { + border-color: #3692FF; + outline: none; + } + + form #submit { + border-radius: 40px; + background-color: rgba(156, 163, 175, 1); + color: rgba(243, 244, 246, 1); + margin-top: 8px; + margin-bottom: 24px; + cursor: pointer; + } + + .simple-login { + box-sizing: border-box; + width: 343px; + height: 66px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 23px; + padding-right: 23px; + padding-top: 24px; + padding-bottom: 24px; + background-color: rgba(230, 242, 255, 1); + border-radius: 8px; + margin-bottom: 24px; + } + + .simple-login p { + font-size: 16px; + font-weight: 500; + } + + .logos { + box-sizing: border-box; + display: flex; + width: 100px; + height: 42px; + justify-content: space-between; + } + + .logos img { + height: 42px; + width: 42px; + } + + .move-to-login, + .move-to-signup { + font-size: 14px; + font-weight: 500; + } + + .move-to-login a, + .move-to-signup a { + color: rgba(54, 146, 255, 1); + } +} \ No newline at end of file diff --git a/pandamarket/login-styles.css b/pandamarket/login-styles.css deleted file mode 100644 index 5745c19..0000000 --- a/pandamarket/login-styles.css +++ /dev/null @@ -1,103 +0,0 @@ -@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css'); - -* { - font-family: 'Pretendard', sans-serif; -} - -main { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; - padding: 0; - overflow: hidden; -} - -.wrap { - width: 640px; - height: 618px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.login-logo { - margin-bottom: 10px; -} - -form p { - font-size: 18px; - font-weight: 700; - color: rgba(31, 41, 55, 1); -} - -form input { - box-sizing: border-box; - background-color: rgba(243, 244, 246, 1); - border: 2px solid transparent; - border-radius: 12px; - width: 640px; - height: 56px; - padding-left: 24px; - padding-right: 24px; - font-size: 16px; -} - -form input:focus { - border-color: #3692FF; - outline: none; -} - -form #submit { - border-radius: 40px; - background-color: rgba(156, 163, 175, 1); - color: rgba(243, 244, 246, 1); - margin-top: 24px; - margin-bottom: 24px; - cursor: pointer; -} - -.simple-login { - box-sizing: border-box; - width: 640px; - height: 74px; - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 23px; - padding-right: 23px; - padding-top: 24px; - padding-bottom: 24px; - background-color: rgba(230, 242, 255, 1); - border-radius: 8px; - margin-bottom: 24px; -} - -.simple-login p { - font-size: 16px; - font-weight: 500; -} - -.logos { - box-sizing: border-box; - display: flex; - width: 100px; - height: 42px; - justify-content: space-between; -} - -.logos img { - height: 42px; - width: 42px; -} - -.move-to-signup { - font-size: 14px; - font-weight: 500; -} - -.move-to-signup a { - color: rgba(54, 146, 255, 1); -} \ No newline at end of file diff --git a/pandamarket/login.html b/pandamarket/login.html index 5704956..8ec5784 100644 --- a/pandamarket/login.html +++ b/pandamarket/login.html @@ -2,7 +2,7 @@ - + Login @@ -19,10 +19,10 @@
-

이메일

+ -

비밀번호

+ diff --git a/pandamarket/signup-styles.css b/pandamarket/signup-styles.css deleted file mode 100644 index feaddc6..0000000 --- a/pandamarket/signup-styles.css +++ /dev/null @@ -1,98 +0,0 @@ -@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css'); - -* { - font-family: 'Pretendard', sans-serif; -} - -main { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; - padding: 0; -} - -.wrap { - width: 640px; - height: 618px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.signup-logo { - margin-bottom: 10px; -} - -form p { - font-size: 18px; - font-weight: 700; - color: rgba(31, 41, 55, 1); -} - -form input { - box-sizing: border-box; - background-color: rgba(243, 244, 246, 1); - border: 2px solid transparent; - border-radius: 12px; - width: 640px; - height: 56px; - padding-left: 24px; - padding-right: 24px; - font-size: 16px; -} - -form input:focus { - border-color: #3692FF; - outline: none; -} - -form #submit { - border-radius: 40px; - background-color: rgba(156, 163, 175, 1); - color: rgba(243, 244, 246, 1); - margin-top: 24px; - margin-bottom: 24px; - cursor: pointer; -} - -.simple-login { - box-sizing: border-box; - width: 640px; - height: 74px; - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 23px; - padding-right: 23px; - padding-top: 24px; - padding-bottom: 24px; - background-color: rgba(230, 242, 255, 1); - border-radius: 8px; - margin-bottom: 24px; -} - -.simple-login p { - font-size: 16px; - font-weight: 500; -} - -.logos { - box-sizing: border-box; - display: flex; - width: 100px; - height: 42px; - justify-content: space-between; -} - -.logos img { - height: 42px; - width: 42px; -} - -.move-to-login { - font-size: 14px; - font-weight: 500; -} \ No newline at end of file diff --git a/pandamarket/signup.html b/pandamarket/signup.html index 5d2f65f..d980f20 100644 --- a/pandamarket/signup.html +++ b/pandamarket/signup.html @@ -2,7 +2,7 @@ - + Signup @@ -19,19 +19,19 @@ -

이메일

+ -

닉네임

+ -

비밀번호

+ -

비밀번호 확인

+ - +
diff --git a/pandamarket/styles.css b/pandamarket/styles.css index a95e786..2655339 100644 --- a/pandamarket/styles.css +++ b/pandamarket/styles.css @@ -2,299 +2,1030 @@ * { font-family: 'Pretendard', sans-serif; + box-sizing: border-box; } -header { - justify-content: center; - display: flex; - margin-bottom: 8px; - padding-top: 8px; - margin-left: 200px; - margin-right: 200px; - position: sticky; - top: 0; - z-index: 1; -} +/* PC 버전의 사이즈 */ -body { - margin-left: 0; - margin-right: 0; -} +@media (min-width: 1200px) { + header { + justify-content: center; + display: flex; + margin-bottom: 8px; + padding-top: 8px; + position: sticky; + top: 0; + z-index: 1; + background-color: white; + } -.head { - width: 1120px; - height: 51px; - display: flex; - align-items: center; - justify-content: space-between; -} + body { + margin-left: 0; + margin-right: 0; + } -header .logo { - width: 153px; - height: 51px; -} + .head { + margin-left: 200px; + margin-right: 200px; + width: 1120px; + height: 51px; + display: flex; + align-items: center; + justify-content: space-between; + } -header .login-button { - width: 128px; - height: 48px; - border-radius: 8px; - border: none; - font-size: 16px; - font-weight: 600; - background-color: rgba(54, 146, 255, 1); - color: rgba(243, 244, 246, 1); - cursor: pointer; -} + header .logo { + width: 153px; + height: 51px; + } -.landingpage-image01 { - background-color: rgba(207, 229, 255, 1); - height: 540px; - width: 100%; - display: flex; - justify-content: center; -} + header .login-button { + width: 128px; + height: 48px; + border-radius: 8px; + border: none; + font-size: 16px; + font-weight: 600; + background-color: rgba(54, 146, 255, 1); + color: rgba(243, 244, 246, 1); + cursor: pointer; + } -.wrap-1 { - max-width: 1920px; - width: 100%; - margin: 0 auto; - position: relative; - min-width: 1920px; -} + .landingpage-image01 { + background-color: rgba(207, 229, 255, 1); + height: 540px; + width: 100%; + display: flex; + justify-content: center; + } -.landingpage-image01 img { - display: flex; - position: absolute; - bottom: 0; - right: 350px; -} + .wrap-1 { + max-width: 1920px; + width: 100%; + margin: 0 auto; + position: relative; + min-width: 1920px; + } -.landingpage-description { - width: 357px; - height: 260px; - display: flex; - flex-direction: column; - text-decoration: none; - position: absolute; - bottom: 100px; - left: 450px; -} + .landingpage-image01 img { + display: flex; + position: absolute; + bottom: 0; + right: 350px; + } -.landingpage-description a { - text-decoration: none; - width: 357px; - height: 56px; - cursor: pointer; -} + .landingpage-description { + width: 357px; + height: 260px; + display: flex; + flex-direction: column; + text-decoration: none; + position: absolute; + bottom: 100px; + left: 460px; + } -.p-1 { - font-size: 40px; - font-weight: 700; - line-height: 56px; -} + .landingpage-description a { + text-decoration: none; + width: 357px; + height: 56px; + cursor: pointer; + } -.description-button { - cursor: pointer; - width: 357px; - height: 56px; - border-radius: 40px; - background-color: rgba(54, 146, 255, 1); - font-size: 20px; - font-weight: 600; - border: none; - display: flex; - align-items: center; - justify-content: center; - color: rgba(249, 250, 251, 1); -} + .p-1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + padding-right: 30px; + } -.landingpage-popular-product { - display: flex; - justify-content: center; - margin-top: 150px; - align-items: center; -} + .description-button { + cursor: pointer; + width: 357px; + height: 56px; + border-radius: 40px; + background-color: rgba(54, 146, 255, 1); + font-size: 20px; + font-weight: 600; + border: none; + display: flex; + align-items: center; + justify-content: center; + color: rgba(249, 250, 251, 1); + } -.landingpage-popular-product-description { - box-sizing: border-box; - background-color: rgba(252, 252, 252, 1); - width: 400px; - height: 444px; - display: flex; - align-items: center; - padding-left: 60px; -} -.landingpage-popular-product-description p { - display: flex; - flex-direction: column; -} + .landingpage-popular-product { + display: flex; + justify-content: center; + margin-top: 150px; + align-items: center; + } -.landingpage-popular-product .Hot-item { - color: rgba(54, 146, 255, 1); - font-size: 18px; - font-weight: 700; -} + .landingpage-popular-product-description { + box-sizing: border-box; + background-color: rgba(252, 252, 252, 1); + width: 400px; + height: 444px; + display: flex; + align-items: center; + padding-left: 60px; + } -.Hot-item-title { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; -} + .landingpage-popular-product-description p { + display: flex; + flex-direction: column; + } -.Hot-item-description { - color: rgba(55, 65, 81, 1); - font-size: 24px; - font-weight: 500; -} + .landingpage-popular-product .Hot-item { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } -.landingpage-wanted-product { - display: flex; - justify-content: center; - margin-top: 300px; -} + .Hot-item-title { + color: rgba(55, 65, 81, 1); + font-size: 40px; + font-weight: 700; + padding-right: 120px; + } -.landingpage-wantedproduct-description { - box-sizing: border-box; - background-color: rgba(252, 252, 252, 1); - width: 400px; - height: 444px; - display: flex; - align-items: center; - padding-left: 50px; -} + .Hot-item-description { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 500; + } -.landingpage-wantedproduct-description p { - text-align: right; - display: flex; - flex-direction: column; -} + .landingpage-wanted-product { + display: flex; + justify-content: center; + margin-top: 300px; + flex-direction: row-reverse; + } -.Search { - color: rgba(54, 146, 255, 1); - font-size: 18px; - font-weight: 700; -} + .landingpage-wantedproduct-description { + box-sizing: border-box; + background-color: rgba(252, 252, 252, 1); + width: 400px; + height: 444px; + display: flex; + align-items: center; + padding-left: 50px; + } -.Search-title { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; -} + .landingpage-wantedproduct-description p { + text-align: right; + display: flex; + flex-direction: column; + } -.Search-description { - color: rgba(55, 65, 81, 1); - font-size: 24px; - font-weight: 500; -} + .search { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } -.landingpage-want-to-sell { - display: flex; - justify-content: center; - margin-top: 300px; -} + .search-title { + color: rgba(55, 65, 81, 1); + font-size: 40px; + font-weight: 700; + } -.landingpage-sell-description { - box-sizing: border-box; - background-color: rgba(252, 252, 252, 1); - width: 400px; - height: 444px; - display: flex; - align-items: center; - padding-left: 50px; -} + .search-title span { + padding-left: 90px; + } -.landingpage-sell-description p { - display: flex; - flex-direction: column; -} + .search-description { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 500; + } -.register { - color: rgba(54, 146, 255, 1); - font-size: 18px; - font-weight: 700; -} + .landingpage-want-to-sell { + display: flex; + justify-content: center; + margin-top: 300px; + } -.register-title { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; -} + .landingpage-sell-description { + box-sizing: border-box; + background-color: rgba(252, 252, 252, 1); + width: 400px; + height: 444px; + display: flex; + align-items: center; + padding-left: 50px; + } -.register-description { - color: rgba(55, 65, 81, 1); - font-size: 24px; - font-weight: 500; -} + .landingpage-sell-description p { + display: flex; + flex-direction: column; + } -.landingpage-image05 { - display: flex; - justify-content: center; - margin-top: 300px; -} + .register { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } -.landingpage-bottom { - width: 100%; - background-color: rgba(207, 229, 255, 1); - height: 540px; - margin-top: 300px; - display: flex; - justify-content: center; - align-items: flex-end; - padding: 0; -} + .register-title { + color: rgba(55, 65, 81, 1); + font-size: 40px; + font-weight: 700; + } -.landingpage-bottom-wrap { - width: 1110px; - height: 397px; - display: flex; - justify-content: flex-end; - align-items: center; -} + .register-title span { + padding-right: 100px; + } -.landingpage-bottom-wrap p { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; - margin-right: 20px; - position: relative; - bottom: 20px; -} + .register-description { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 500; + } -footer { - height: 160px; - background-color: rgba(17, 24, 39, 1); - display: flex; - justify-content: center; + .landingpage-image05 { + display: flex; + justify-content: center; + margin-top: 300px; + } -} + .landingpage-bottom { + width: 100%; + background-color: rgba(207, 229, 255, 1); + height: 540px; + margin-top: 300px; + display: flex; + justify-content: center; + align-items: flex-end; + padding: 0; + } -.foot { - width: 1120px; - height: 20px; - display: flex; - justify-content: space-evenly; -} + .landingpage-bottom-wrap { + width: 1110px; + height: 397px; + display: flex; + justify-content: flex-end; + align-items: center; + } -footer p { - font-size: 16px; - color: rgba(229, 231, 235, 1); - font-weight: 400; -} + .landingpage-bottom-wrap p { + color: rgba(55, 65, 81, 1); + font-size: 40px; + font-weight: 700; + margin-right: 20px; + position: relative; + bottom: 20px; + } + + .landingpage-bottom-wrap img { + width: 746px; + margin-left: 45px; + } + + footer { + height: 160px; + background-color: rgba(17, 24, 39, 1); + display: flex; + justify-content: center; + flex-direction: row; + } + + .foot { + width: 100%; + height: 20px; + display: flex; + justify-content: center; + flex-direction: row; + } + + .foot-start { + margin-right: 366px; + } + + .foot div { + display: flex; + flex-direction: row; + } + + footer p { + font-size: 16px; + color: rgba(229, 231, 235, 1); + font-weight: 400; + } -footer p a { - text-decoration: none; - font-size: 16px; - color: rgba(229, 231, 235, 1); - font-weight: 400; + footer p a { + text-decoration: none; + font-size: 16px; + color: rgba(229, 231, 235, 1); + font-weight: 400; + } + + .icons { + display: flex; + gap: 10px; + } + + .middle { + display: flex; + gap: 20px; + flex-direction: row; + margin-right: 366px; + } } -.icons { - display: flex; - gap: 10px; +/* Tablet 버전의 사이즈 */ + +@media (max-width: 1199px) { + header { + justify-content: center; + display: flex; + margin-bottom: 8px; + padding-top: 8px; + position: sticky; + top: 0; + z-index: 1; + background-color: white; + } + + body { + margin-left: 0; + margin-right: 0; + padding-right: 0; + padding-left: 0; + } + + .head { + margin-left: 24px; + margin-right: 24px; + width: 1120px; + height: 51px; + display: flex; + align-items: center; + justify-content: space-between; + } + + header .logo { + width: 153px; + height: 51px; + } + + header .login-button { + width: 128px; + height: 48px; + border-radius: 8px; + border: none; + font-size: 16px; + font-weight: 600; + background-color: rgba(54, 146, 255, 1); + color: rgba(243, 244, 246, 1); + cursor: pointer; + } + + .landingpage-image01 { + background-color: rgba(207, 229, 255, 1); + height: 771px; + width: 100%; + display: flex; + justify-content: center; + } + + .wrap-1 { + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + + .landingpage-image01 img { + width: 744px; + height: 340px; + } + + .landingpage-description { + width: 100%; + height: 260px; + display: flex; + flex-direction: column; + text-decoration: none; + justify-content: center; + align-items: center; + + } + + .landingpage-description a { + text-decoration: none; + width: 357px; + height: 56px; + cursor: pointer; + } + + .p-1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + margin-bottom: 24px; + margin-top: 84px; + } + + .description-button { + cursor: pointer; + width: 357px; + height: 56px; + border-radius: 40px; + background-color: rgba(54, 146, 255, 1); + font-size: 20px; + font-weight: 600; + border: none; + display: flex; + align-items: center; + justify-content: center; + color: rgba(249, 250, 251, 1); + } + + + .landingpage-popular-product { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-popular-product img { + width: 696px; + } + + .landingpage-popular-product-description { + box-sizing: border-box; + width: 696px; + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + } + + .landingpage-popular-product-description p { + display: flex; + flex-direction: column; + } + + .landingpage-popular-product .Hot-item { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } + + .Hot-item-title { + color: rgba(55, 65, 81, 1); + font-size: 32px; + font-weight: 700; + } + + .Hot-item-description { + color: rgba(55, 65, 81, 1); + font-size: 18px; + font-weight: 500; + } + + .landingpage-wanted-product { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-wanted-product img { + width: 696px; + } + + .landingpage-wantedproduct-description { + box-sizing: border-box; + width: 696px; + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: left; + } + + .landingpage-wantedproduct-description p { + text-align: right; + display: flex; + text-align: right; + justify-content: end; + } + + .search { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } + + .search-title { + color: rgba(55, 65, 81, 1); + font-size: 32px; + font-weight: 700; + } + + .search-title span { + padding-left: 0px; + } + + .search-description { + color: rgba(55, 65, 81, 1); + font-size: 18px; + font-weight: 500; + } + + .landingpage-want-to-sell { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-want-to-sell img { + width: 696px; + } + + .landingpage-sell-description { + box-sizing: border-box; + width: 696px; + display: flex; + flex-direction: column; + justify-content: left; + } + + .landingpage-sell-description p { + text-align: left; + } + + .register { + color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 700; + } + + .register-title { + color: rgba(55, 65, 81, 1); + font-size: 32px; + font-weight: 700; + } + + .register-title span { + padding-right: 0; + } + + .register-description { + color: rgba(55, 65, 81, 1); + font-size: 18px; + font-weight: 500; + } + + .landingpage-image05 { + display: flex; + justify-content: center; + margin-top: 300px; + } + + .landingpage-bottom { + width: 100%; + background-color: rgba(207, 229, 255, 1); + height: 927px; + margin-top: 52px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + } + + .landingpage-bottom-wrap { + width: 100%; + height: 927px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + } + + .landingpage-bottom-wrap p { + color: rgba(55, 65, 81, 1); + font-size: 40px; + font-weight: 700; + margin-right: 20px; + margin-top: 201px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .landingpage-bottom-wrap img { + width: 744px; + } + + footer { + height: 160px; + background-color: rgba(17, 24, 39, 1); + display: flex; + justify-content: center; + + } + + .foot { + width: 100%; + height: 20px; + display: flex; + justify-content: center; + } + + .foot div { + display: flex; + flex-direction: row; + } + + .foot-start { + margin-right: 71px; + } + + footer p { + font-size: 16px; + color: rgba(229, 231, 235, 1); + font-weight: 400; + } + + footer p a { + text-decoration: none; + font-size: 16px; + color: rgba(229, 231, 235, 1); + font-weight: 400; + } + + .icons { + display: flex; + gap: 10px; + } + + .middle { + display: flex; + gap: 20px; + margin-right: 71px; + } } -.middle { - display: flex; - gap: 20px; +/* 모바일 버전의 사이즈 */ +@media (max-width: 767px) { + header { + justify-content: center; + display: flex; + margin-bottom: 8px; + padding-top: 8px; + position: sticky; + top: 0; + z-index: 1; + background-color: white; + } + + body { + margin-left: 0; + margin-right: 0; + padding-right: 0; + padding-left: 0; + } + + .head { + margin-left: 16px; + margin-right: 16px; + width: 100%; + height: 51px; + display: flex; + align-items: center; + justify-content: space-between; + } + + header .logo { + width: 110px; + height: 40px; + } + + header .login-button { + width: 100px; + height: 35px; + border-radius: 8px; + border: none; + font-size: 16px; + font-weight: 600; + background-color: rgba(54, 146, 255, 1); + color: rgba(243, 244, 246, 1); + cursor: pointer; + } + + .landingpage-image01 { + background-color: rgba(207, 229, 255, 1); + height: 540px; + width: 100%; + display: flex; + justify-content: center; + } + + .wrap-1 { + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + + .landingpage-image01 img { + width: 100%; + height: 204px; + } + + .landingpage-description { + width: 240px; + display: flex; + flex-direction: column; + text-decoration: none; + justify-content: center; + align-items: center; + text-align: center; + } + + .landingpage-description a { + text-decoration: none; + width: 240px; + height: 48px; + cursor: pointer; + } + + .p-1 { + font-size: 32px; + font-weight: 700; + line-height: 44.8px; + margin-bottom: 24px; + margin-top: 48px; + } + + .description-button { + cursor: pointer; + width: 240px; + height: 48px; + border-radius: 40px; + background-color: rgba(54, 146, 255, 1); + font-size: 18px; + font-weight: 600; + border: none; + display: flex; + align-items: center; + justify-content: center; + color: rgba(249, 250, 251, 1); + } + + + .landingpage-popular-product { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-popular-product img { + width: 344px; + } + + .landingpage-popular-product-description { + box-sizing: border-box; + width: 344px; + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + } + + .landingpage-popular-product-description p { + display: flex; + flex-direction: column; + } + + .landingpage-popular-product .Hot-item { + color: rgba(54, 146, 255, 1); + font-size: 16px; + font-weight: 700; + } + + .Hot-item-title { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 700; + } + + .Hot-item-description { + color: rgba(55, 65, 81, 1); + font-size: 16px; + font-weight: 500; + } + + .landingpage-wanted-product { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-wanted-product img { + width: 344px; + } + + .landingpage-wantedproduct-description { + box-sizing: border-box; + width: 344px; + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: left; + } + + .landingpage-wantedproduct-description p { + text-align: right; + display: flex; + text-align: right; + justify-content: end; + } + + .search { + color: rgba(54, 146, 255, 1); + font-size: 16px; + font-weight: 700; + } + + .search-title { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 700; + } + + .search-title span { + padding-left: 0px; + } + + .search-description { + color: rgba(55, 65, 81, 1); + font-size: 16px; + font-weight: 500; + } + + .landingpage-want-to-sell { + display: flex; + flex-direction: column; + margin-top: 52px; + align-items: center; + justify-content: center; + } + + .landingpage-want-to-sell img { + width: 344px; + } + + .landingpage-sell-description { + box-sizing: border-box; + width: 344px; + display: flex; + flex-direction: column; + justify-content: left; + } + + .landingpage-sell-description p { + text-align: left; + } + + .register { + color: rgba(54, 146, 255, 1); + font-size: 16px; + font-weight: 700; + } + + .register-title { + color: rgba(55, 65, 81, 1); + font-size: 24px; + font-weight: 700; + } + + .register-title span { + padding-right: 0; + } + + .register-description { + color: rgba(55, 65, 81, 1); + font-size: 16px; + font-weight: 500; + } + + .landingpage-image05 { + display: flex; + justify-content: center; + margin-top: 300px; + } + + .landingpage-bottom { + width: 100%; + background-color: rgba(207, 229, 255, 1); + height: 540px; + margin-top: 52px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .landingpage-bottom-wrap { + width: 100%; + height: 540px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + } + + .landingpage-bottom-wrap p { + color: rgba(55, 65, 81, 1); + font-size: 32px; + font-weight: 700; + margin-top: 121px; + margin-left: 0; + margin-right: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .landingpage-bottom-wrap img { + width: 100%; + height: 198px; + } + + footer { + background-color: rgba(17, 24, 39, 1); + display: flex; + justify-content: center; + height: 160px; + } + + .foot { + width: 100%; + display: flex; + flex-direction: column-reverse; + align-items: center; + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + margin-top: 64px; + } + .foot-start{ + margin: 0; + padding: 0; + text-align: left; + width: 301px; + } + + .foot div { + display: flex; + flex-direction: row; + } + + footer p { + font-size: 16px; + color: rgba(103, 103, 103, 1); + font-weight: 400; + } + + footer p a { + text-decoration: none; + font-size: 16px; + color: rgba(229, 231, 235, 1); + font-weight: 400; + } + + .icons { + display: flex; + gap: 10px; + } + + .middle { + display: flex; + gap: 32px; + margin-right: 32px; + } } \ No newline at end of file