diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 00000000..c183d239 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/icons/icon_facebook.svg b/assets/icons/icon_facebook.svg new file mode 100644 index 00000000..80c7b6e0 --- /dev/null +++ b/assets/icons/icon_facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/icon_instagram.svg b/assets/icons/icon_instagram.svg new file mode 100644 index 00000000..cfb0e998 --- /dev/null +++ b/assets/icons/icon_instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/icons/icon_x.svg b/assets/icons/icon_x.svg new file mode 100644 index 00000000..6443e91c --- /dev/null +++ b/assets/icons/icon_x.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/icon_youtube.svg b/assets/icons/icon_youtube.svg new file mode 100644 index 00000000..9985cf83 --- /dev/null +++ b/assets/icons/icon_youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/Img_home_01.png b/assets/images/Img_home_01.png new file mode 100644 index 00000000..80e73fcd Binary files /dev/null and b/assets/images/Img_home_01.png differ diff --git a/assets/images/Img_home_02.png b/assets/images/Img_home_02.png new file mode 100644 index 00000000..caa5d0b5 Binary files /dev/null and b/assets/images/Img_home_02.png differ diff --git a/assets/images/Img_home_03.png b/assets/images/Img_home_03.png new file mode 100644 index 00000000..203c06b8 Binary files /dev/null and b/assets/images/Img_home_03.png differ diff --git a/assets/images/Img_home_bottom.png b/assets/images/Img_home_bottom.png new file mode 100644 index 00000000..710baa77 Binary files /dev/null and b/assets/images/Img_home_bottom.png differ diff --git a/assets/images/Img_home_top.png b/assets/images/Img_home_top.png new file mode 100644 index 00000000..1b6401f1 Binary files /dev/null and b/assets/images/Img_home_top.png differ diff --git a/assets/logos/logo_lg.png b/assets/logos/logo_lg.png new file mode 100644 index 00000000..41e594cd Binary files /dev/null and b/assets/logos/logo_lg.png differ diff --git a/assets/logos/logo_md.png b/assets/logos/logo_md.png new file mode 100644 index 00000000..497c2bd0 Binary files /dev/null and b/assets/logos/logo_md.png differ diff --git a/assets/logos/logo_sm.png b/assets/logos/logo_sm.png new file mode 100644 index 00000000..7296dda9 Binary files /dev/null and b/assets/logos/logo_sm.png differ diff --git a/assets/logos/logo_typo.png b/assets/logos/logo_typo.png new file mode 100644 index 00000000..7e94a17d Binary files /dev/null and b/assets/logos/logo_typo.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..79953f5c --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + 판다마켓 + + + + + + + + + + + + + + + + + + + + + + + +
+ + 로그인 +
+ +
+ + +
+
+
+ 인기 상품 +
+

Hot item

+

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

+

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

+
+
+
+ +
+
+ 상품 검색 +
+

Search

+

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

+

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

+
+
+
+ +
+
+ 상품 등록 +
+

Register

+

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

+

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

+
+
+
+
+ + +
+ + + + diff --git a/styles/banner.css b/styles/banner.css new file mode 100644 index 00000000..71465421 --- /dev/null +++ b/styles/banner.css @@ -0,0 +1,37 @@ +.banner { + display: flex; + align-items: flex-end; + justify-content: center; + background-color: #cfe5ff; + height: 540px; +} + +.banner__container { + display: flex; + align-items: center; + justify-content: center; + gap: 7px; +} + +.banner__content { + display: flex; + flex-direction: column; + justify-content: center; + color: var(--secondary-700); + gap: 32px; + padding-bottom: 60px; +} + +.banner__button { + width: 357px; + height: 56px; + padding: 12px 124px; + background-color: var(--primary-100); + color: var(--secondary-50); + border-radius: 40px; + text-decoration: none; +} + +.banner__image { + width: 746px; +} diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 00000000..604ca2e8 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,37 @@ +.footer { + height: 160px; + background-color: var(--secondary-900); + color: var(--secondary-400); + padding: 32px 400px; + line-height: 19.09px; +} + +.footer__container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer__nav { + display: flex; + gap: 30px; +} + +.footer__link { + color: var(--secondary-200); + text-decoration: none; +} + +.footer__link:hover { + color: var(--secondary-50); +} + +.footer__sns { + display: flex; + gap: 12px; +} + +.footer__icon img { + width: 20px; + height: 20px; +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..e4c6249d --- /dev/null +++ b/styles/header.css @@ -0,0 +1,37 @@ +.header { + height: 70px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #dfdfdf; + padding: 9.5px 200px; + background-color: #ffffff; + margin: 0 auto; + position: sticky; + top: 0; +} + +picture { + display: flex; + align-items: center; +} + +.header__logo img { + width: 153px; +} + +.header__login { + width: 128px; + height: 48px; + padding: 12px 23px; + color: white; + background-color: var(--primary-100); + border-radius: 8px; + text-decoration: none; + text-align: center; + cursor: pointer; +} + +.header__login:hover { + background-color: var(--primary-200); +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..6448ac38 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,281 @@ +:root { + /* Primary color */ + --primary-100: #3692ff; + --primary-200: #1967d6; + --primary-300: #1251aa; + + /* Secondary color */ + --secondary-50: #f9fafb; + --secondary-100: #f3f4f6; + --secondary-200: #e5e7eb; + --secondary-400: #9ca3af; + --secondary-500: #6b7280; + --secondary-600: #4b5563; + --secondary-700: #374151; + --secondary-800: #1f2937; + --secondary-900: #111827; + + /* Error color */ + --error-500: #f74747; + + /* Disable color */ + --disable-400: #9ca3af; + + /* Font style */ + --font-primary: 'Pretendard Variable', sans-serif; + --font-size-base: 16px; +} + +body { + min-width: 350px; + overflow-x: hidden; +} + +/* 정보 섹션 반응형(테블릿) */ +@media (max-width: 1010px) { + .info { + margin: 24px; + gap: 52px; + } + + .info__container { + height: 750px; + gap: 52px; + } + + .info__wrapper { + width: 696px; + height: 750px; + flex-direction: column; + gap: 24px; + } + + .info__title br { + display: none; + } + + .info__image { + width: 696px; + height: 524px; + } + + .info__content { + align-self: flex-start; + padding-left: 24px; + } + + .info__wrapper--reverse .info__content { + align-self: flex-end; + padding-right: 24px; + } +} + +/* 정보 섹션 반응형(모바일) */ +@media (max-width: 725px) { + .info { + margin: 52px 15px; + gap: 40px; + } + + .info__container { + height: 440px; + gap: 40px; + } + + .info__wrapper { + width: 344px; + height: 440px; + gap: 40px; + } + + .info__content { + gap: 8px; + } + + .info__image { + width: 344px; + height: 259px; + } + + .info__category { + font-size: 16px !important; + } + + .info__title { + font-size: 24px !important; + line-height: 32px !important; + margin-bottom: 8px; + } + + .info__description { + font-size: 16px !important; + line-height: 26px !important; + } + + .info__content { + padding-left: 10px; + } + + .info__wrapper--reverse .info__content { + padding-right: 10px; + } +} + +/* 헤더 반응형(모바일), 푸터 반응형(모바일) */ +@media (max-width: 480px) { + .header { + padding: 9.5px 5%; + } + + .header__logo img { + width: 103px; + } + + .footer { + padding: 32px 16px; + } + + .footer__container { + display: grid; + align-items: center; + text-align: center; + gap: 24px; + grid-template-columns: 1fr / 1fr; + grid-template-rows: auto auto; + } + + .footer__nav { + grid-column: 1; + grid-row: 1; + } + + .footer__sns { + grid-column: 2; + grid-row: 1; + } + + .footer__copyright { + grid-column: 1; + grid-row: 2; + text-align: left; + } +} + +/* 배너 섹션 반응형(테블릿), 헤더 반응형(테블릿) */ +@media (max-width: 1135px) { + .header { + padding: 9.5px 10%; + } + + .banner { + flex-direction: column; + align-items: center; + justify-content: flex-end; + height: 771px; + } + + .bottom_banner { + height: 927px; + } + + .banner__container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 211px; + } + + .banner__title br { + display: none; + } + + .banner__content { + gap: 24px; + padding-bottom: 0px; + align-items: center; + } + + .banner__image { + width: 744px; + height: 340px; + } + + .bottom_banner .banner__container { + text-align: center; + gap: 217px; + } + + .bottom_banner .banner__title br { + display: inline; + } + + .bottom_banner .banner__image { + width: 744px; + height: 397px; + } +} + +/* 배너 섹션 반응형(모바일) */ +@media (max-width: 765px) { + .banner { + height: 540px; + overflow: hidden; + } + + .bottom_banner { + height: 540px; + } + + .banner__container { + gap: 132px; + } + + .banner__content { + gap: 18px; + } + + .banner__title { + font-size: 32px !important; + line-height: 44.8px !important; + text-align: center; + } + + .banner__title br { + display: inline; + } + + .banner__button { + width: 240px; + height: 48px; + padding: 12px 71px; + font-size: 18px !important; + line-height: 26px !important; + } + + .banner__image { + width: 448px; + height: 204px; + } + + .bottom_banner .banner__title { + font-size: 32px !important; + line-height: 44.8px !important; + } + + .bottom_banner .banner__container { + gap: 131px; + } + + .bottom_banner .banner__image { + width: 375px; + height: 198px; + } +} + +/* 푸터 반응형(테블릿) */ +@media (max-width: 1300px) { + .footer { + padding: 32px 24px; + } +} diff --git a/styles/info.css b/styles/info.css new file mode 100644 index 00000000..3c82784c --- /dev/null +++ b/styles/info.css @@ -0,0 +1,55 @@ +.info { + display: flex; + flex-direction: column; + align-items: center; + background-color: #ffffff; +} + +.info__container { + height: 720px; + display: flex; + align-items: center; + justify-content: center; +} + +.info__wrapper { + width: 988px; + height: 444px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 64px; + background-color: #fcfcfc; + border-radius: 12px; +} + +.info__wrapper--reverse { + flex-direction: row-reverse; + text-align: right; +} + +.info__content { + display: flex; + flex-direction: column; + gap: 12px; +} + +.info__image { + width: 579px; + height: 444px; +} + +.info__category { + color: var(--primary-100); + font-size: 18px !important; +} + +.info__title { + color: var(--secondary-700); + letter-spacing: 0.02em; + margin-bottom: 12px; +} + +.info__description { + color: var(--secondary-700); +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..9fb0b6b0 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,12 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + font-family: var(--font-primary); + font-size: var(--font-size-base); + line-height: 1.5; +} diff --git a/styles/typography.css b/styles/typography.css new file mode 100644 index 00000000..6888947c --- /dev/null +++ b/styles/typography.css @@ -0,0 +1,51 @@ +/* Common font weights */ +.font-bold { + font-weight: 700; +} + +.font-semibold { + font-weight: 600; +} + +.font-medium { + font-weight: 500; +} + +.font-regular { + font-weight: 400; +} + +/* Font size utilities */ +.text-4xl { + font-size: 40px; + line-height: 56px; +} + +.text-3xl { + font-size: 32px; + line-height: 42px; +} +.text-2xl { + font-size: 24px; + line-height: 32px; +} +.text-xl { + font-size: 20px; + line-height: 32px; +} +.text-lg { + font-size: 16px; + line-height: 26px; +} +.text-md { + font-size: 14px; + line-height: 24px; +} +.text-sm { + font-size: 13px; + line-height: 22px; +} +.text-xs { + font-size: 12px; + line-height: 18px; +}