diff --git a/css/base/common.css b/css/base/common.css new file mode 100644 index 00000000..2e75437a --- /dev/null +++ b/css/base/common.css @@ -0,0 +1,190 @@ +body { + font-family: "Pretendard Variable"; +} + +a { + cursor: pointer; +} + +input { + font-family: "Pretendard Variable"; + font-size: var(--font-size-xs); + color: var(--color-secondary-800); + background-color: var(--color-secondary-100); + padding: 16px 20px; + border-radius: 12px; + height: 56px; + border: none; +} + +input::placeholder { + color: var(--color-secondary-400); + font-size: var(--font-size-xs); +} + +input.success { + outline: 1px solid var(--color-primary-100); +} + +input.error { + outline: 1px solid var(--color-error); +} + +input { + outline: none; +} + +label { + font-size: var(--font-size-sm); + font-weight: 700; + color: var(--color-secondary-800); +} + +.btn { + background-color: var(--color-primary-100); + text-decoration: none; + color: var(--color-secondary-100); + padding: 12px 20px; + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; +} + +.btn-small { + border-radius: var(--border-radius-sm); + min-width: 128px; + height: 48px; + font-size: var(--font-size-xs); +} + +.btn-large { + border-radius: var(--border-radius-lg); + width: 240px; + height: 48px; + font-size: var(--font-size-sm); +} + +.btn a { + text-decoration: none; + color: var(--color-secondary-100); +} + +.btn:disabled { + background-color: var(--color-secondary-400); +} + +.msg { + font-size: 14px; + font-weight: 600; + padding-left: 16px; + display: none; + color: var(--color-error); +} + +.msg.error { + display: block; +} + +/* 폼 관련 공통 CSS */ +.form__container { + display: flex; + justify-content: center; + align-items: center; + padding: 16px; +} + +@media screen and (min-width: 1200px) { + .form__container { + padding: 0; + } +} + +.form__container__content { + flex-grow: 1; + display: flex; + flex-direction: column; + max-width: 400px; + width: 100%; +} + +@media screen and (min-width: 768px) { + .form__container__content { + max-width: 640px; + } +} + +.form__container__content a { + display: block; + text-align: center; +} + +.form__container__logo { + margin-bottom: 20px; + max-width: 198px; +} + +@media screen and (min-width: 768px) { + .form__container__logo { + max-width: 396px; + } +} + +.form__container__label { + display: flex; + flex-direction: column; + margin-bottom: 24px; + gap: 16px; +} + +.form__container__input { + width: 100%; + flex-grow: 1; +} + +.form__container__input__wrap { + position: relative; +} + +.form__container__input__wrap img { + position: absolute; + top: 50%; + right: 20px; + transform: translate(0, -50%); +} + +.form__container button { + margin-bottom: 24px; + width: 100%; +} + +.form__container__banner { + background-color: var(--color-background-light-blue); + border-radius: 8px; + padding: 16px 23px; + font-size: var(--font-size-sm); + font-weight: 500; + color: var(--color-secondary-800); + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} + +.form__container__banner__icon { + display: flex; + gap: 16px; +} + +.form__container__signup { + display: flex; + justify-content: center; + gap: 4px; + font-size: var(--font-size-xxs); + font-weight: 500; + color: var(--color-secondary-800); +} + +.form__container__signup a { + color: var(--color-primary-100); +} diff --git a/css/reset.css b/css/base/reset.css similarity index 58% rename from css/reset.css rename to css/base/reset.css index a9599810..b45c2cf4 100644 --- a/css/reset.css +++ b/css/base/reset.css @@ -4,14 +4,6 @@ box-sizing: border-box; } -input { - border: none; -} - -input:focus { - outline: none; -} - button { border: none; } diff --git a/css/common.css b/css/base/variables.css similarity index 56% rename from css/common.css rename to css/base/variables.css index f06c0dc8..c2a838e6 100644 --- a/css/common.css +++ b/css/base/variables.css @@ -17,38 +17,16 @@ --color-error: #f74747; /* Font Sizes */ - --font-size-xs: 12px; - --font-size-sm: 13px; - --font-size-md: 14px; - --font-size-lg: 16px; - --font-size-2lg: 18px; - --font-size-xl: 20px; - --font-size-2xl: 24px; - --font-size-3xl: 32px; - --font-size-4xl: 40px; + --font-size-xxs: 14px; + --font-size-xs: 16px; + --font-size-sm: 18px; + --font-size-lg: 20px; + --font-size-xl: 24px; + --font-size-2xl: 32px; + --font-size-3xl: 40px; /* Border Radius */ --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 40px; } - -body { - font-family: "Pretendard Variable"; -} - -a { - cursor: pointer; -} - -input::placeholder { - color: var(--color-secondary-400); - font-size: var(--font-size-lg); - font-weight: 400; -} - -input { - color: var(--color-secondary-800); - font-size: var(--font-size-lg); - font-weight: 400; -} diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..f584f621 --- /dev/null +++ b/css/main.css @@ -0,0 +1,382 @@ +header { + padding: 9.5px 0; + background-color: white; + position: sticky; + top: 0; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); +} + +.header__content { + padding: 0 24px; + max-width: 1520px; + margin: 0 auto; + color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; +} + +@media screen and (min-width: 1200px) { + .header__content { + padding: 0 200px; + } +} + +.header__content__logo { + width: 103px; + vertical-align: middle; +} + +@media screen and (min-width: 768px) { + .header__content__logo { + width: 153px; + } +} + +.banner { + background-color: var(--color-background-blue); +} + +.banner__content { + max-width: 1110px; + padding-top: 48px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; +} + +@media screen and (min-width: 768px) { + .banner__content { + padding-top: 84px; + } +} + +@media screen and (min-width: 1200px) { + .banner__content { + padding-top: 200px; + justify-content: space-between; + align-items: flex-end; + flex-direction: row; + } +} + +.banner__content__text { + display: flex; + flex-direction: column; + margin-bottom: 132px; + text-align: center; + align-items: center; +} + +@media screen and (min-width: 768px) { + .banner__content__text { + margin-bottom: 211px; + } +} + +@media screen and (min-width: 1200px) { + .banner__content__text { + margin-bottom: 100px; + align-items: start; + text-align: left; + } +} + +.banner__content__text__title { + font-size: var(--font-size-2xl); + font-weight: 700; + margin-bottom: 18px; + color: var(--color-secondary-700); +} + +@media screen and (min-width: 768px) { + .banner__content__text__title { + font-size: var(--font-size-3xl); + margin-bottom: 24px; + } +} + +.banner__content__img { + max-width: 746px; + width: 120%; +} + +.feature { + padding: 52px 16px 43px; +} + +@media screen and (min-width: 768px) { + .feature { + padding: 24px 24px 4px; + } +} + +@media screen and (min-width: 1200px) { + .feature { + padding: 138px 0px 0px 0px; + } +} + +.feature__content { + max-width: 988px; + margin: 0 auto; + border-radius: var(--border-radius-md); + display: flex; + gap: 24px; + flex-direction: column; + margin-bottom: 40px; +} + +@media screen and (min-width: 768px) { + .feature__content { + margin-bottom: 52px; + } +} + +@media screen and (min-width: 1200px) { + .feature__content { + flex-direction: row; + background-color: #fcfcfc; + align-items: center; + margin: 0 auto 276px auto; + gap: 64px; + } +} + +.feature__content__img { + width: 100%; +} + +@media screen and (min-width: 1200px) { + .feature__content__img { + max-width: 579px; + } +} + +.feature__content__text { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.feature__content__text__point { + font-size: var(--font-size-xs); + font-weight: 700; + color: var(--color-primary-100); +} + +@media screen and (min-width: 768px) { + .feature__content__text__point { + font-size: var(--font-size-sm); + } +} + +.feature__content__text__title { + font-size: var(--font-size-xl); + font-weight: 700; + color: var(--color-secondary-700); + margin-top: 8px; + margin-bottom: 16px; +} + +@media screen and (min-width: 768px) { + .feature__content__text__title { + font-size: var(--font-size-2xl); + margin-top: 16px; + margin-bottom: 24px; + } +} + +@media screen and (min-width: 1200px) { + .feature__content__text__title { + margin-top: 12px; + font-size: var(--font-size-3xl); + } +} + +.feature__content__text__title br { + display: inline-block; + content: " "; +} + +.feature__content__text__subtitle { + font-size: var(--font-size-sm); + font-weight: 500; + color: var(--color-secondary-700); +} + +@media screen and (min-width: 1200px) { + .feature__content__text__subtitle { + font-size: var(--font-size-xl); + } +} + +.feature__content__reverse { + flex-direction: column-reverse; +} + +@media screen and (min-width: 1200px) { + .feature__content__reverse { + flex-direction: row; + } +} + +.search-text { + text-align: right; +} + +/* 하단 배너 */ +.promotion__banner { + background-color: var(--color-background-blue); +} + +.promotion__banner__content { + max-width: 1110px; + padding-top: 121px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; +} + +@media screen and (min-width: 768px) { + .promotion__banner__content { + padding-top: 217px; + } +} + +@media screen and (min-width: 1200px) { + .promotion__banner__content { + justify-content: space-between; + align-items: flex-end; + flex-direction: row; + padding-top: 143px; + } +} + +.promotion__banner__content__title { + font-size: var(--font-size-2xl); + font-weight: 700; + color: var(--color-secondary-700); + margin-bottom: 131px; + text-align: center; +} + +@media screen and (min-width: 768px) { + .promotion__banner__content__title { + font-size: var(--font-size-3xl); + } +} + +@media screen and (min-width: 1200px) { + .promotion__banner__content__title { + margin-bottom: 172.5px; + text-align: left; + } +} + +.promotion__banner__content__img { + max-width: 746px; + width: 100%; +} + +/* 푸터 */ +footer { + background-color: #111827; + padding: 32px 32px 30px 32px; + height: 160px; +} + +@media screen and (min-width: 768px) { + .footer { + padding: 32px 104px 104px 108px; + } +} + +.footer__content { + max-width: 311px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: start; +} + +@media screen and (min-width: 768px) { + .footer__content { + max-width: 536px; + } +} + +@media screen and (min-width: 1200px) { + .footer__content { + max-width: 1120px; + } +} + +.footer__content__menu { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + flex-direction: column-reverse; + gap: 60px; + font-size: var(--font-size-xs); +} + +@media screen and (min-width: 768px) { + .footer__content__menu { + flex-direction: row; + } +} + +@media screen and (min-width: 1200px) { + .footer__content__menu { + gap: 366.5px; + } +} + +.footer__content__copyright { + color: #9ca3af; +} + +.footer__content__link a { + text-decoration: none; + color: #e5e7eb; +} + +.footer__content__link { + display: flex; + gap: 30px; +} + +.footer__content__sns { + display: flex; + gap: 12px; +} + +/* 태블릿 사이즈 이상에서 반응형 */ +@media screen and (min-width: 768px) { + .btn-large { + min-width: 357px; + height: 56px; + font-size: var(--font-size-lg); + } + + /* 첫번째 배너 br 태그 기능 없애기 */ + .banner__content br { + display: inline-block; + content: " "; + } +} + +/* PC 반응형 */ +@media screen and (min-width: 1200px) { + /* 첫번째 배너 br 태그 다시 추가 */ + .banner__content br { + display: block; + } + + .feature__content__text__title br { + display: block; + } +} diff --git a/css/pages/login.css b/css/pages/login.css new file mode 100644 index 00000000..edca6b69 --- /dev/null +++ b/css/pages/login.css @@ -0,0 +1,3 @@ +.login__container { + min-height: 100dvh; +} diff --git a/css/pages/signup.css b/css/pages/signup.css new file mode 100644 index 00000000..5cdca39b --- /dev/null +++ b/css/pages/signup.css @@ -0,0 +1,3 @@ +.signup__container { + margin-top: 60px; +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 57726299..00000000 --- a/css/style.css +++ /dev/null @@ -1,324 +0,0 @@ -header { - padding: 9.5px 0; - background-color: white; - position: sticky; - top: 0; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); -} - -.btn { - background-color: var(--color-primary-100); - text-decoration: none; - color: var(--color-secondary-100); - padding: 12px 20px; - display: flex; - justify-content: center; - align-items: center; - font-weight: 700; -} - -.btn-small { - border-radius: var(--border-radius-sm); - min-width: 128px; - height: 48px; - font-size: var(--font-size-lg); -} - -.btn-large { - border-radius: var(--border-radius-lg); - min-width: 150px; - height: 56px; - width: 100%; - font-size: var(--font-size-xl); -} - -.header__content { - padding: 0 200px; - max-width: 1520px; - margin: 0 auto; - color: #ffffff; - display: flex; - justify-content: space-between; - align-items: center; -} - -.header__content__logo { - width: 153px; -} - -.banner { - background-color: var(--color-background-blue); -} - -.banner__content { - max-width: 1110px; - padding-top: 200px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: flex-end; -} - -.banner__content__text { - display: flex; - flex-direction: column; - margin-bottom: 100px; -} - -.banner__content__text__title { - font-size: var(--font-size-4xl); - font-weight: 700; - margin-bottom: 32px; - color: var(--color-secondary-700); -} - -.banner__content__img { - max-width: 746px; - width: 80%; -} - -.feature { - padding: 138px 0; -} - -.feature__content { - max-width: 988px; - margin: 0 auto; - background-color: #fcfcfc; - border-radius: var(--border-radius-md); - display: flex; - align-items: center; - gap: 64px; -} - -.feature__content__img { - max-width: 579px; - width: 60%; -} - -.feature__content__text { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.feature__content__text__point { - font-size: var(--font-size-2lg); - font-weight: 700; - color: var(--color-primary-100); -} - -.feature__content__text__title { - font-size: var(--font-size-4xl); - font-weight: 700; - color: var(--color-secondary-700); - margin-top: 12px; - margin-bottom: 24px; -} - -.feature__content__text__subtitle { - font-size: var(--font-size-2xl); - font-weight: 500; - color: var(--color-secondary-700); -} - -.text-right { - text-align: right; -} - -/* 하단 배너 */ -.bottom__banner { - background-color: var(--color-background-blue); -} - -.bottom__banner__content { - max-width: 1110px; - padding-top: 143px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: flex-end; -} - -.bottom__banner__content__img { - max-width: 746px; - width: 80%; -} - -.bottom__banner__content__title { - font-size: var(--font-size-4xl); - font-weight: 700; - color: var(--color-secondary-700); - padding-bottom: 172px; -} - -/* 푸터 */ -footer { - background-color: #111827; - padding: 32px 0 108px; -} - -.footer__content { - max-width: 1120px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; -} - -.footer__content__copyright { - font-size: var(--font-size-lg); - font-weight: 400; - color: #9ca3af; -} - -.footer__content__link a { - text-decoration: none; - color: #e5e7eb; - font-size: var(--font-size-lg); - font-weight: 400; -} - -.footer__content__link { - display: flex; - gap: 30px; -} - -.footer__content__sns { - display: flex; - gap: 12px; -} - -/* 회원가입 화면 */ -.form__container.signup__form__container { - min-height: 0; - margin-top: 60px; -} - -/* 로그인 화면, 회원가입 공통 */ - -.form__container { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - min-width: 100vw; -} - -.form__container .signup__form { - display: flex; - justify-content: center; - align-items: center; - min-width: 100vw; -} - -.form__container__content { - flex-grow: 1; - display: flex; - flex-direction: column; - max-width: 640px; -} - -.form__container__content a { - display: block; - text-align: center; -} - -.form__container__logo { - margin-bottom: 20px; -} - -.form__container__label { - display: flex; - flex-direction: column; - font-size: var(--font-size-2lg); - font-weight: 700; - color: var(--color-secondary-800); - gap: 16px; - margin-bottom: 24px; -} - -.form__container__input { - padding: 16px 20px; - border-radius: 12px; - background-color: var(--color-secondary-100); - height: 56px; - flex-grow: 1; -} - -.form__container__input__wrap { - position: relative; - display: flex; -} - -.form__container__input__wrap img { - position: absolute; - top: 50%; - right: 20px; - transform: translate(0, -50%); -} - -.form__container button { - margin-bottom: 24px; -} - -.form__container__banner { - background-color: var(--color-background-light-blue); - border-radius: 8px; - padding: 16px 23px; - font-size: var(--font-size-2lg); - font-weight: 500; - color: var(--color-secondary-800); - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24px; -} - -.form__container__banner__icon { - display: flex; - gap: 16px; -} - -.form__container__signup { - display: flex; - justify-content: center; - gap: 4px; - font-size: var(--font-size-md); - font-weight: 500; - color: var(--color-secondary-800); -} - -.form__container__signup a { - color: var(--color-primary-100); -} - -@media all and (max-width: 1023px) { - .header__content { - padding: 0 20px; - } - - .banner__content { - flex-direction: column; - align-items: center; - } - - .feature { - padding: 70px 0; - } - - .feature__content { - align-items: center; - background: none; - flex-direction: column; - } - - .feature__content__reverse { - flex-direction: column-reverse; - } - - .bottom__banner__content { - flex-direction: column; - align-items: center; - } -} diff --git a/img/Img_home_bottom.png b/img/Img_home_promotion.png similarity index 100% rename from img/Img_home_bottom.png rename to img/Img_home_promotion.png diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index a3e343c7..00000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_facebook.svg b/img/ic_facebook.svg new file mode 100644 index 00000000..b9c9d493 --- /dev/null +++ b/img/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index c47e044d..00000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_instagram.svg b/img/ic_instagram.svg new file mode 100644 index 00000000..0b9337b0 --- /dev/null +++ b/img/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 3f74b730..00000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_twitter.svg b/img/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/img/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 874150b0..00000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git a/img/ic_youtube.svg b/img/ic_youtube.svg new file mode 100644 index 00000000..699b5380 --- /dev/null +++ b/img/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/link_thumb.png b/img/link_thumb.png new file mode 100644 index 00000000..c402e6bb Binary files /dev/null and b/img/link_thumb.png differ diff --git a/img/logo_text.png b/img/logo_text.png new file mode 100644 index 00000000..82c95005 Binary files /dev/null and b/img/logo_text.png differ diff --git a/index.html b/index.html index 9eaad2c4..eb5a7598 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,21 @@ + + + + 판다마켓 - - - + + + +
- + + + + + + 로그인
@@ -48,45 +63,55 @@
+
- + 물품을 구경하는 판다 이미지
Hot item 인기 상품을
확인해 보세요 + >인기 상품을
+ 확인해 보세요 + 가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
-
- - -
+
-
+
Search 구매를 원하는
상품을 검색하세요 + >구매를 원하는
+ 상품을 검색하세요 + 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
- + 상품 검색 이미지
-
- - -
+
- + 상품 등록 이미지
Register 판매를 원하는
상품을 등록하세요 + >판매를 원하는
+ 상품을 등록하세요 + 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 @@ -95,15 +120,15 @@
-
-
- +
+ 믿을 수 있는
판다마켓 중고 거래 판다마켓 하단 배너
@@ -112,25 +137,38 @@