diff --git a/panda-market/assets/.DS_Store b/panda-market/assets/.DS_Store index 54e37478..e0ef6592 100644 Binary files a/panda-market/assets/.DS_Store and b/panda-market/assets/.DS_Store differ diff --git a/panda-market/assets/images/img_landing.png b/panda-market/assets/images/img_landing.png new file mode 100644 index 00000000..48eab3e2 Binary files /dev/null and b/panda-market/assets/images/img_landing.png differ diff --git a/panda-market/assets/images/panda_face.svg b/panda-market/assets/images/panda_face.svg new file mode 100644 index 00000000..3cd5e4b9 --- /dev/null +++ b/panda-market/assets/images/panda_face.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/panda-market/assets/styles/signup.css b/panda-market/assets/styles/auth.css similarity index 62% rename from panda-market/assets/styles/signup.css rename to panda-market/assets/styles/auth.css index 40c1335e..34620bbb 100644 --- a/panda-market/assets/styles/signup.css +++ b/panda-market/assets/styles/auth.css @@ -1,4 +1,6 @@ -/* signup.css */ +/* auth.css */ + +/* 기본 설정 */ * { box-sizing: border-box; } @@ -8,26 +10,42 @@ padding: 0; } -.signup-page { - display: flex; - width: 100%; - max-width: 1920px; - padding: 231px 0; - justify-content: center; - align-items: center; - background: #fcfcfc; +label, +span { + color: var(--secondary-800); } -.signup-container { +input { display: flex; width: 640px; flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 12px 16px; + gap: 10px; + border-radius: 12px; + outline: none; + border: 2px solid rgba(49, 130, 246, 0); + background: var(--Cool-Gray-100, #f3f4f6); + box-sizing: border-box; +} + +input::placeholder { + color: var(--Secondary-400, #9ca3af); +} + +/* 공통 레이아웃 */ +.auth-page { + display: flex; + width: 100%; + height: 100%; + /* padding: 231px 0; */ + justify-content: center; align-items: center; - gap: 40px; - flex-shrink: 0; + background: #fcfcfc; } -.signup-logo { +.auth-container { display: flex; width: 640px; flex-direction: column; @@ -36,12 +54,12 @@ flex-shrink: 0; } -.signup-logo img { +.auth-logo img { width: 396px; height: 132px; } -.signup-form { +.auth-form { display: flex; flex-direction: column; align-items: center; @@ -56,25 +74,6 @@ gap: 16px; } -label { - color: var(--secondary-800); -} - -input { - display: flex; - width: 640px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - padding: 12px 16px; - gap: 10px; - border-radius: 12px; - outline: none; - border: 2px solid rgba(49, 130, 246, 0); - background: var(--Cool-Gray-100, #f3f4f6); - box-sizing: border-box; -} - .password-wrapper, .password-check-wrapper { width: 100%; @@ -96,22 +95,6 @@ input { cursor: pointer; } -.btn-signup { - display: flex; - width: 640px; - height: 56px; - padding: 16px 124px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 40px; - border: none; - background: var(--primary-100); - color: var(--Cool-Gray-100, #f3f4f6); - text-align: center; - cursor: pointer; -} - .easy-login { display: flex; width: 640px; @@ -123,7 +106,6 @@ input { border-radius: 8px; border: none; background: #e6f2ff; - box-sizing: border-box; } .sns-buttons { @@ -145,10 +127,57 @@ input { } span { - color: var(--secondary-800); white-space: nowrap; } +/* 로그인 */ +.btn-login { + display: flex; + width: 640px; + height: 56px; + padding: 16px 124px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 40px; + border: none; + background: var(--Secondary-400, #9ca3af); + color: white; + text-align: center; + cursor: pointer; +} + +.join-guide { + color: var(--secondary-800); + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 24px; +} + +.join-guide a { + color: var(--primary-100); + line-height: normal; + text-decoration-line: underline; +} + +/* 회원가입 */ +.btn-signup { + display: flex; + width: 640px; + height: 56px; + padding: 16px 124px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 40px; + border: none; + background: var(--Secondary-400, #9ca3af); + color: white; + text-align: center; + cursor: pointer; +} + .login-guide { color: var(--secondary-800); font-size: 14px; @@ -161,9 +190,43 @@ span { color: var(--primary-100); line-height: normal; text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-skip-ink: none; - text-decoration-thickness: auto; - text-underline-offset: auto; - text-underline-position: from-font; +} + +@media (max-width: 768px) { + .auth-page { + height: 100%; + overflow-y: hidden; + padding: 0 16px; + } + + .auth-container { + width: 100%; + max-width: 400px; + gap: 16px; + } + + .auth-logo img { + width: 196px; + } + + input, + .btn-login, + .form-group, + .easy-login, + .btn-signup { + width: 100%; + max-width: 400px; + } + + .easy-login { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 16px; + width: 343px; + height: 74px; + padding: 16px 23px; + border-radius: 8px; + background: #e6f2ff; + } } diff --git a/panda-market/assets/styles/login.css b/panda-market/assets/styles/login.css deleted file mode 100644 index e934d5c7..00000000 --- a/panda-market/assets/styles/login.css +++ /dev/null @@ -1,165 +0,0 @@ -/* login.css */ -* { - box-sizing: border-box; -} - -.body { - margin: 0; - padding: 0; -} - -.login-page { - display: flex; - width: 100%; - max-width: 1920px; - padding: 231px 0; - justify-content: center; - align-items: center; - background: #fcfcfc; -} - -.login-container { - display: flex; - width: 640px; - flex-direction: column; - align-items: center; - gap: 40px; - flex-shrink: 0; -} - -.login-logo { - display: flex; - width: 640px; - flex-direction: column; - align-items: center; - gap: 40px; - flex-shrink: 0; -} - -.login-logo img { - width: 396px; - height: 132px; -} - -.login-form { - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; - align-self: stretch; -} - -.form-group { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; -} - -label { - color: var(--secondary-800); -} - -input { - display: flex; - width: 640px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - padding: 12px 16px; - gap: 10px; - border-radius: 12px; - outline: none; - border: 2px solid rgba(49, 130, 246, 0); - background: var(--Cool-Gray-100, #f3f4f6); -} - -.password-wrapper { - width: 100%; - position: relative; -} - -.password-wrapper input { - padding-right: 40px; -} - -.btn-toggle-password { - position: absolute; - right: 24px; - top: 50%; - transform: translateY(-50%); - background: none; - border: none; - cursor: pointer; -} - -.btn-login { - display: flex; - width: 640px; - height: 56px; - padding: 16px 124px; - justify-content: center; - align-items: center; - gap: 10px; - border-radius: 40px; - border: none; - background: var(--primary-100); - color: var(--Cool-Gray-100, #f3f4f6); - text-align: center; - cursor: pointer; -} - -.easy-login { - display: flex; - width: 640px; - height: 74px; - padding: 16px 23px; - flex-direction: row; - align-items: center; - gap: 10px; - border-radius: 8px; - border: none; - background: #e6f2ff; -} - -.sns-buttons { - display: flex; - justify-content: flex-end; - gap: 16px; - width: 100%; -} - -.btn-sns { - width: 42px; - height: 42px; - background: none; - border: none; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -span { - color: var(--secondary-800); - white-space: nowrap; -} - -.join-guide { - color: var(--secondary-800); - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 24px; -} - -.join-guide a { - color: var(--primary-100); - line-height: normal; - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-skip-ink: none; - text-decoration-thickness: auto; - text-underline-offset: auto; - text-underline-position: from-font; -} diff --git a/panda-market/assets/styles/main.css b/panda-market/assets/styles/main.css index 47cddc78..a70a1da4 100644 --- a/panda-market/assets/styles/main.css +++ b/panda-market/assets/styles/main.css @@ -3,13 +3,23 @@ box-sizing: border-box; } +.body, +html { + margin: 0; + padding: 0; + overflow-x: hidden; + max-width: 100vw; +} + main { padding-top: 70px; } -.body { - margin: 0; +.container { + max-width: 100%; + width: 100%; padding: 0; + margin: 0 auto; } /* header */ @@ -31,18 +41,20 @@ main { justify-content: space-between; align-items: center; width: 100%; - height: 100%; max-width: 1200px; padding: 0 clamp(16px, 6vw, 24px); margin: 0 auto; } -.logo img { - width: 153px; +.header-logo { + display: flex; + align-items: center; + gap: 8px; height: 51px; + padding: 5px 0; } -.login-btn { +.header-login-btn { background-color: var(--primary-100); color: white; border: none; @@ -53,28 +65,28 @@ main { display: flex; align-items: center; justify-content: center; - gap: 10px; cursor: pointer; + transition: background-color 0.3s ease; } -.login-btn:hover { +.header-login-btn:hover { background-color: var(--primary-200); } +/* banner */ .main-banner, .sub-banner { - position: relative; display: flex; justify-content: center; align-items: end; - width: 100vw; + width: 100%; height: 540px; flex-shrink: 0; background: #cfe5ff; } .main-banner-wrapper { - display: inline-flex; + display: flex; align-items: center; gap: 7px; } @@ -82,11 +94,11 @@ main { .main-banner-left, .sub-banner-left { display: flex; - padding-bottom: 60px; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(16px, 2vw, 32px); + padding-bottom: 60px; } .main-banner-text, @@ -99,6 +111,8 @@ main { line-height: 140%; white-space: nowrap; margin-bottom: 32px; + display: flex; + flex-direction: column; } .browse-btn { @@ -113,6 +127,7 @@ main { text-decoration: none; white-space: nowrap; cursor: pointer; + transition: background-color 0.3s ease; } .browse-btn:hover { @@ -124,16 +139,41 @@ main { display: flex; width: 746px; height: 340px; - padding-right: 0px; justify-content: center; align-items: center; } -/* 공통 카드 섹션 */ +.sub-banner-wrapper { + display: flex; + justify-content: space-between; + align-items: flex-end; + max-width: 1200px; + margin: 0 auto; + padding-top: 60px; + height: 100%; +} + +.sub-banner-left { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: auto; + padding-top: 200px; + gap: 32px; +} + +.sub-banner-image { + display: flex; + justify-content: center; + align-items: flex-end; + height: 100%; +} + +/* info-card */ .info-card-section { background: #fff; display: flex; - padding: 138px 466px; + padding: 138px; flex-direction: column; justify-content: center; align-items: center; @@ -171,7 +211,7 @@ main { .info-card-title { color: var(--Secondary-700, #374151); - font-family: "pretendard"; + font-family: "pretendard", sans-serif; font-size: 40px; font-style: normal; font-weight: 700; @@ -197,39 +237,10 @@ main { align-items: flex-end; } -.sub-banner-wrapper { - display: flex; - justify-content: space-between; - align-items: flex-end; - max-width: 1200px; - margin: 0 auto; - padding-top: 60px; - padding-bottom: 0; - height: 100%; -} - -.sub-banner-left { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: auto; - padding-top: 200px; - gap: 32px; -} - -.sub-banner-image { - display: flex; - justify-content: center; - align-items: flex-end; - height: 100%; -} - +/* footer */ .footer { background-color: var(--secondary-900); color: var(--Secondary-400, #9ca3af); - line-height: normal; - font-size: 16px; - font-weight: 400; height: 160px; display: flex; justify-content: center; @@ -244,24 +255,34 @@ main { padding-top: 32px; } +.footer-text { + display: flex; + flex-direction: row; + align-items: center; + gap: 250px; +} + .copyright { text-align: left; + font-size: 16px; + font-weight: 400; + line-height: normal; } .footer-links { display: flex; text-align: center; gap: 30px; - transition: color 0.3s ease; } .footer-links > a { text-decoration: none; - color: var(--Secondary-400, #9ca3af); /* 링크 색상도 설정 */ + color: var(--Secondary-400, #9ca3af); + transition: color 0.3s ease; } .footer-links > a:hover { - color: #ffffff; /* 호버 시 색상 변경 */ + color: #ffffff; } .footer-sns-links { @@ -269,10 +290,284 @@ main { justify-content: flex-end; align-items: center; gap: 12px; +} + +.footer-sns-links > a { text-decoration: none; } -.footer-sns-links > img { +.footer-sns-links > a > img { width: 20px; height: 20px; } + +/* responsive styles */ +/* Tablet */ +@media (min-width: 768px) and (max-width: 1199px) { + .header-inner { + padding: 0 24px; + } + + .main-banner { + height: fit-content; + padding: 0; + width: 100%; + } + + .main-banner-wrapper { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 24px; + margin-top: 48px; + } + + .main-banner-left { + align-items: center; + } + + .main-banner-text, + .sub-banner-text { + text-align: center; + font-family: Pretendard; + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 140%; + } + + .browse-btn-wrapper { + display: flex; + justify-content: center; + width: 100%; + } + + .main-banner-image, + .sub-banner-image { + width: 100%; + padding: 0; + } + + .info-card-section { + padding: 24px; + } + + .info-card, + .info-card.reverse { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 24px; + width: 100%; + max-width: 696px; + } + + .info-card.reverse { + text-align: right; + align-items: flex-end; + } + + .info-card-title br { + display: none; + } + + .info-card-image { + width: 696px; + } + + .sub-banner { + flex-direction: column; + justify-content: space-between; + align-items: center; + height: auto; + padding: 28px; + padding-bottom: 0; + } + + .sub-banner-wrapper { + flex-direction: column; + justify-content: center; + align-items: center; + gap: 200px; + height: 100%; + width: 100%; + padding-bottom: 0; + } + + .footer-text { + display: flex; + flex-direction: row; + align-items: center; + gap: 150px; + } +} + +/* mobile */ +@media (max-width: 767px) { + body { + overflow-x: hidden; + } + + .header-inner { + padding: 0 16px; + } + + .logo-icon { + display: none; + } + + .main-banner, + .sub-banner { + flex-direction: column; + align-items: center; + height: auto; + padding: 32px 16px 0; + } + + .main-banner-wrapper, + .sub-banner-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + gap: 16px; + } + + .main-banner-left, + .sub-banner-left { + align-items: center; + text-align: center; + padding-bottom: 0; + margin: 0; + } + + .sub-banner-left { + padding-top: 60px; + } + + .main-banner-text, + .sub-banner-text { + font-size: 24px; + line-height: 1.4; + margin-bottom: 12px; + white-space: normal; + } + + .browse-btn-wrapper { + display: flex; + justify-content: center; + width: 100%; + } + + .browse-btn { + display: flex; + justify-content: center; + align-items: center; + padding: 12px 71px; + font-size: 16px; + width: 200px; + margin-bottom: 100px; + } + + .main-banner-image, + .sub-banner-image { + width: 100%; + height: auto; + justify-content: center; + align-items: center; + } + + .main-banner-image img, + .sub-banner-image img { + width: 100%; + max-width: 448px; + height: auto; + display: block; + } + + .info-card-section { + padding: 52px 15px; + } + + .info-card, + .info-card.reverse { + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 24px; + width: 100%; + max-width: 344px; + } + + .info-card.reverse { + text-align: right; + align-items: flex-end; + } + + .info-card-text { + gap: 8px; + } + + .info-card-title br { + display: none; + } + + .info-card-title { + font-family: Pretendard; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; + } + + .info-card-description { + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 26px; + } + + .info-card-image { + width: 100%; + height: 100%; + } + + .info-card-image img { + width: 344px; + } + + .sub-banner-text { + text-align: center; + font-family: Pretendard; + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 140%; + margin-bottom: 100px; + } + + .footer { + width: 100%; + } + + .footer-text { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 60px; + } + + .footer-links { + order: 1; + } + + .copyright { + order: 2; + } + + .footer-sns-links { + margin-top: 32px; + } +} diff --git a/panda-market/index.html b/panda-market/index.html index 17b3fbd0..1c15c73a 100644 --- a/panda-market/index.html +++ b/panda-market/index.html @@ -1,6 +1,11 @@ + + + + + 판다마켓 @@ -20,122 +25,129 @@
- - +
- -
-
-
-

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

- - 구경하러 가기 - -
-
- 메인 배너 이미지 -
-
+
+ +
+
+
+

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

+
+ + 구경하러 가기 + +
+
+
+ 메인 배너 이미지 +
+
- -
-
-
- 인기 상품 이미지 + +
+
+
+ 인기 상품 이미지 +
+
+ Hot item + 인기 상품을
확인해 보세요 +

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

+
-
- Hot item -

인기 상품을
확인해 보세요

-

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

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

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

+
-
- Search -

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

-

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

-
-
-
+ - -
-
-
- 상품 등록 이미지 -
-
- Register -

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

-

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

+ +
+
+
+ 상품 등록 이미지 +
+
+ Register + 판매를 원하는
상품을 등록하세요 +

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

+
-
-
+ - -
-
-
-

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

-
-
- 서브 배너 이미지 -
-
-
- - + +
diff --git a/panda-market/login.html b/panda-market/login.html index 48af4577..cf4aabe8 100644 --- a/panda-market/login.html +++ b/panda-market/login.html @@ -13,26 +13,37 @@ - + + -
-
+
+
- -