diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..d0657a18 Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/bannerImg01.png b/images/bannerImg01.png new file mode 100644 index 00000000..8c91880c Binary files /dev/null and b/images/bannerImg01.png differ diff --git a/images/bannerImg02.png b/images/bannerImg02.png new file mode 100644 index 00000000..1c636fa3 Binary files /dev/null and b/images/bannerImg02.png differ diff --git a/images/bannerImg03.png b/images/bannerImg03.png new file mode 100644 index 00000000..51a2e7ec Binary files /dev/null and b/images/bannerImg03.png differ diff --git a/images/bottomBanner.png b/images/bottomBanner.png new file mode 100644 index 00000000..4a5f85b2 Binary files /dev/null and b/images/bottomBanner.png differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 00000000..c84470d2 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 00000000..8b95aaf0 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/kv.png b/images/kv.png new file mode 100644 index 00000000..074a73fb Binary files /dev/null and b/images/kv.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..cd99d116 Binary files /dev/null and b/images/logo.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 00000000..77d3f6fd Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 00000000..19bc084f Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..88ec0920 --- /dev/null +++ b/index.html @@ -0,0 +1,186 @@ + + + + + + 판다마켓 + + + + + +
+

+ + 판다마켓 + +

+ +
+
+
+
+ 판다마켓 메인 판다 캐릭터 이미지 + +
+

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

+ +
+
+
+ +
+ 판다마켓 메인 판다 캐릭터 이미지 +
+ 믿을 수 있는
+ 판다마켓 중고 거래 +
+
+
+ + + diff --git a/page/faq.html b/page/faq.html new file mode 100644 index 00000000..0a6c2d74 --- /dev/null +++ b/page/faq.html @@ -0,0 +1,11 @@ + + + + + + Document + + + faq + + diff --git a/page/instagram.html b/page/instagram.html new file mode 100644 index 00000000..6b897a0c --- /dev/null +++ b/page/instagram.html @@ -0,0 +1,11 @@ + + + + + + Document + + + instagram + + diff --git a/page/items.html b/page/items.html new file mode 100644 index 00000000..1ea20598 --- /dev/null +++ b/page/items.html @@ -0,0 +1,11 @@ + + + + + + items + + + items + + diff --git a/page/login.html b/page/login.html new file mode 100644 index 00000000..11fcf6b0 --- /dev/null +++ b/page/login.html @@ -0,0 +1,11 @@ + + + + + + Document + + + login + + diff --git a/page/privacy.html b/page/privacy.html new file mode 100644 index 00000000..509fc14a --- /dev/null +++ b/page/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + privacy + + diff --git a/page/twitter.html b/page/twitter.html new file mode 100644 index 00000000..5a8e34dd --- /dev/null +++ b/page/twitter.html @@ -0,0 +1,11 @@ + + + + + + Document + + + twitter + + diff --git a/page/youtube.html b/page/youtube.html new file mode 100644 index 00000000..401bd12f --- /dev/null +++ b/page/youtube.html @@ -0,0 +1,11 @@ + + + + + + Document + + + youtube + + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..46d61ef0 --- /dev/null +++ b/reset.css @@ -0,0 +1,72 @@ +/* reset.css */ + +/* 박스 사이징 설정 */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* 기본 글꼴 상속 */ +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + font-size: 16px; +} + +/* 블록 요소 기본값 초기화 */ +body { + margin: 0; +} + +/* 리스트 스타일 제거 */ +ul, +ol { + list-style: none; +} + +/* 링크 스타일 초기화 */ +a { + text-decoration: none; + color: inherit; +} + +/* 버튼 초기화 */ +button, +input, +textarea, +select { + font: inherit; + border: none; + background: none; + outline: none; + cursor: pointer; +} + +/* 이미지 초기화 */ +img { + max-width: 100%; + height: auto; + display: block; +} + +/* 테이블 스타일 초기화 */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* 기본 헤딩 및 텍스트 스타일 초기화 */ +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; + font-weight: normal; +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..1f06dd82 --- /dev/null +++ b/style.css @@ -0,0 +1,366 @@ +:root { + --main-color: #3692ff; + --banner-background-color: #fcfcfc; + --title-color: #374151; + --main_background-color: #cfe5ff; +} +body { + font-family: "Pretendard", sans-serif; + background: var(--banner-background-color); +} +.container { + width: 100%; +} +.title { + color: var(--title-color); +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; + min-width: 300px; + position: sticky; + top: 0; + z-index: 10; + background: #fff; + padding: 3px 10px; + transition: 0.3s; +} +.nav .login-btn { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main-color); + color: #fff; + border-radius: 8px; +} +.nav .login-btn a { + display: block; + text-align: center; + width: 128px; + height: 48px; + line-height: 48px; +} + +.kv-section { + background-color: var(--main_background-color); + height: 540px; + position: relative; +} +.kv-section .key-visual { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.kv-section .kv-inner { + padding-top: 46px; +} +.kv-section .kv-info { + position: relative; + z-index: 2; + text-align: center; +} +.kv-section .kv-inner .title { + font-weight: bold; + font-size: 32px; + line-height: 1.4; + padding-bottom: 18px; + width: 260px; + margin: 0 auto; +} +.kv-section .kv-inner .btn { + width: 240px; + text-align: center; + height: 48px; + background-color: var(--main-color); + border-radius: 50px; +} +.kv-section .kv-inner .btn a { + font-size: 18px; + color: #fff; + width: 100%; + display: flex; + height: 100%; + justify-content: center; + align-items: center; +} + +.banner-section { + background-color: #fff; + margin-bottom: 138px; +} +.banner-section .banner-inner { + display: flex; + flex-direction: column; + padding: 100px 0; +} +.banner-section .card { + margin: 100px auto; + display: flex; + overflow: hidden; + background-color: var(--banner-background-color); + align-items: center; + gap: 24px; + flex-direction: column; + justify-content: left; +} +.banner-section .card.hot-item { + margin-top: 0; +} +.banner-section .card.sell-item { + margin-bottom: 0; +} +.banner-section .card .badge { + color: var(--main-color); + font-weight: bold; + font-size: 16px; +} +.banner-section .card .title { + font-size: 24px; + font-weight: bold; + padding: 12px 0 24px; +} +.banner-section .card .desc { + line-height: 1.4; +} +.banner-section .card.search-item { + flex-direction: column; +} +.banner-section .card .card-info { + width: 100%; + padding-left: 20px; + padding-bottom: 20px; +} +.banner-section .card.search-item .card-info { + text-align: right; + padding-right: 20px; + padding-bottom: 20px; + padding-left: 0; +} + +.pandaMarketBannerSection { + position: relative; + height: 540px; + background-color: var(--main_background-color); +} +.pandaMarketBannerSection .panda-image { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} +.pandaMarketBannerSection .title { + font-weight: bold; + text-align: center; + padding-top: 121px; + font-size: 32px; +} + +.footer { + background-color: #111827; + color: #fff; + padding: 32px 16px 65px; +} + +.footer .footer_inner { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + text-align: center; + gap: 9px 0; +} +.footer .footer_inner .footer-item.copyright { + grid-column: 1; + grid-row: 2; + text-align: left; +} +.footer .footer_inner .footer-item.support-content { + grid-column: span 2; + grid-row: 1; + display: flex; + gap: 25px; +} +.footer .footer_inner .footer-item.icons-wrap { + grid-column: 3; + grid-row: 1; + display: flex; + gap: 10px; + justify-content: flex-end; +} +.footer .footer_inner .footer-item .icon a { + width: 20px; + display: block; + height: 20px; +} + +/* 모바일 (기본 스타일) */ + +/* 태블릿 이상 */ +@media (min-width: 768px) { + header { + padding: 10px 24px; + } + .kv-section { + height: 771px; + } + .kv-section .kv-inner .title { + font-size: 40px; + width: 100%; + padding-bottom: 24px; + } + .kv-section .kv-inner { + padding-top: 84px; + } + .kv-section .kv-inner .btn { + width: 357px; + height: 56px; + } + .kv-section .kv-inner .btn a { + font-size: 20px; + } + .banner-section .card .badge { + font-size: 18px; + } + .banner-section .card .title { + font-size: 32px; + } + .banner-section .card .desc { + font-size: 18px; + } + .pandaMarketBannerSection { + height: 927px; + } + .pandaMarketBannerSection .title { + padding-top: 201px; + font-size: 40px; + } + .footer .footer_inner { + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: unset; + } + + .footer .footer_inner .footer-item.copyright { + grid-column: 1; + grid-row: initial; + } + .footer .footer_inner .footer-item.support-content { + justify-content: center; + grid-column: 2; + grid-row: 1; + } +} + +/* 데스크탑 이상 */ +@media (min-width: 1024px) { + header { + padding: 9.5px 200px; + } + .kv-section { + height: 540px; + } + .kv-section .key-visual { + transform: translateX(-20%); + } + .kv-section .kv-inner { + padding-top: 240px; + } + .kv-section .kv-info { + transform: translateX(-143%); + width: 357px; + left: 50%; + text-align: left; + } + .kv-section .kv-inner .title { + width: 333px; + margin: 0; + } + .banner-section .card { + flex-direction: row; + gap: 55px; + width: 988px; + margin-bottom: 138px; + height: 444px; + border-radius: 12px; + } + .banner-section .card .img-wrap { + flex-shrink: 0; + } + .banner-section .card .card-info { + padding: 0; + } + .banner-section .card.search-item .card-info { + padding: 0; + text-align: right; + } + .banner-section .card.search-item .title { + margin-left: auto; + width: 300px; + } + .banner-section .card.search-item .desc { + width: 289px; + margin-left: auto; + } + + .banner-section .card.search-item .title { + font-size: 40px; + font-weight: 600; + } + .banner-section .card .desc { + font-size: 24px; + } + .banner-section .card.search-item { + flex-direction: row-reverse; + } + .banner-section .card .title { + line-height: 1.3; + } + .pandaMarketBannerSection { + height: 540px; + } + .pandaMarketBannerSection .panda-image { + width: 746px; + transform: translateX(-20%); + } + .pandaMarketBannerSection .title { + padding-top: 255px; + text-align: left; + position: relative; + left: 50%; + transform: translateX(-35%); + } + .footer { + height: 160px; + } + .footer .footer_inner { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: unset; + } + .footer .footer_inner .footer-item.copyright { + grid-column: 2; + grid-row: 1; + } + .footer .footer_inner .footer-item.support-content { + justify-content: center; + grid-column: 4; + grid-row: 1; + } + .footer .footer_inner .footer-item.icons-wrap { + grid-column: 6; + grid-row: 1; + } +}