diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..5b0575e5 --- /dev/null +++ b/faq.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 FAQ + + + diff --git a/images/Img_home_01-344.png b/images/Img_home_01-344.png new file mode 100644 index 00000000..251cc70a Binary files /dev/null and b/images/Img_home_01-344.png differ diff --git a/images/Img_home_01-696.png b/images/Img_home_01-696.png new file mode 100644 index 00000000..df5d966a Binary files /dev/null and b/images/Img_home_01-696.png differ diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..f746dc0b Binary files /dev/null and b/images/Img_home_01.png differ diff --git a/images/Img_home_02-344.png b/images/Img_home_02-344.png new file mode 100644 index 00000000..24bee73e Binary files /dev/null and b/images/Img_home_02-344.png differ diff --git a/images/Img_home_02-696.png b/images/Img_home_02-696.png new file mode 100644 index 00000000..3d6c41fb Binary files /dev/null and b/images/Img_home_02-696.png differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png new file mode 100644 index 00000000..030cff02 Binary files /dev/null and b/images/Img_home_02.png differ diff --git a/images/Img_home_03-344.png b/images/Img_home_03-344.png new file mode 100644 index 00000000..ab3b3f67 Binary files /dev/null and b/images/Img_home_03-344.png differ diff --git a/images/Img_home_03-696.png b/images/Img_home_03-696.png new file mode 100644 index 00000000..08b4f989 Binary files /dev/null and b/images/Img_home_03-696.png differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png new file mode 100644 index 00000000..90dcbd06 Binary files /dev/null and b/images/Img_home_03.png differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png new file mode 100644 index 00000000..157e90d8 Binary files /dev/null and b/images/Img_home_bottom.png differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png new file mode 100644 index 00000000..074a73fb Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/images/ic_twitter.png differ diff --git a/images/ic_youtube.png b/images/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/images/ic_youtube.png differ diff --git a/images/logo-100.png b/images/logo-100.png new file mode 100644 index 00000000..3e18897f Binary files /dev/null and b/images/logo-100.png differ diff --git a/images/logo-153.png b/images/logo-153.png new file mode 100644 index 00000000..96f74c0f Binary files /dev/null and b/images/logo-153.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/index.html b/index.html new file mode 100644 index 00000000..1f383487 --- /dev/null +++ b/index.html @@ -0,0 +1,171 @@ + + + + + + 판다마켓 + + + + +
+
+ + + + 판다마켓 로고 + + + +
+
+
+ +
+
+ 두 마리의 팬더가 인기 상품인 초록색 티셔츠를 보고 있는 모습입니다. +
+
Hot item
+

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+ 돋보기로 상품들 중 가운데 상품을 확대해서 보는 모습입니다. +
+
Search
+

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

+

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

+
+
+
+
+
+ 아래에 폴더들이 있고, 그 위에 마법봉으로 가운데의 연필꽂이, 공책, 하트 프레임 안경을 가리키는 모습입니다. +
+
Register
+

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

+

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

+
+
+
+ +
+ + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..10bf0e3f --- /dev/null +++ b/items.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 items + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..d9c3ca0f --- /dev/null +++ b/login.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 로그인 + + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..aa20742e --- /dev/null +++ b/privacy.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 privacy policy + + + diff --git a/styles/common.css b/styles/common.css new file mode 100644 index 00000000..1e9a0e05 --- /dev/null +++ b/styles/common.css @@ -0,0 +1,43 @@ +@charset "utf-8"; +html { + font-size: 16px; +} +body { + font-family: "Pretendard", sans-serif; + background: var(--background-light); + overflow-x: hidden; +} +a { + font-size: 1rem; +} +h2 { + font-size: 2.5rem; + line-height: 1.4; + color: var(--text-primary); +} + +/* layout */ +.content { + padding-top: 4.375rem; +} + +.inner { + width: var(--inner-width); + margin: 0 auto; +} + +/* button */ +.btn { + text-align: center; +} + +.btn-primary { + background: var(--primary-color); + color: #fff; +} +.btn-primary:hover { + background: var(--primary-hover-color); +} +.btn-primary:active { + background: var(--primary-click-color); +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..7304499b --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,42 @@ +@charset "utf-8"; +* { + margin: 0; + padding: 0; + color: inherit; +} +*, +:after, +:before { + box-sizing: border-box; +} +:root { + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + cursor: default; + line-height: 1.5; + overflow-wrap: break-word; + -moz-tab-size: 4; + tab-size: 4; +} +html, +body { + height: 100%; +} +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +button { + background: none; + border: 0; + cursor: pointer; +} +a { + text-decoration: none; + color: inherit; + cursor: pointer; +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 00000000..2f0b8e87 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,319 @@ +@charset "utf-8"; +@import "reset.css"; +@import "common.css"; +@import "variables.css"; + +/* header */ +header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 4.375rem; + padding: 0 12.5rem; + z-index: 9; + background: #fff; + display: flex; +} + +header .inner { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0.625rem 0; +} + +header .logo { + width: 9.625rem; + height: 3.25rem; +} + +header .login-button { + display: inline-flex; + justify-content: center; + align-items: center; + width: 8rem; + height: 3rem; + padding: 0.75rem 1.5rem; + border-radius: 8px; +} + +/* section */ +section { + padding: 8.625rem 0; + background: #fff; +} + +section .inner { + display: flex; + align-items: center; + justify-content: center; + width: var(--inner-width-small); + gap: 4rem; + background: var(--background-light); + border-radius: 20px; + overflow: hidden; +} + +section .inner img { + width: 36.25rem; +} + +section .info .info-label { + margin-bottom: 0.75rem; + font-size: 1.125rem; + font-weight: 700; + color: var(--primary-color); +} + +section .info h2 { + margin-bottom: 1.5rem; +} + +section .info p { + font-size: 1.5rem; + font-weight: 500; + line-height: 2rem; + color: var(--text-primary); +} + +.section-search { + text-align: right; +} +.section-search .inner img { + order: 2; +} + +.section-register .inner { + justify-content: flex-start; +} + +/* banner */ +.banner { + background: #cfe5ff; +} + +.banner .inner { + height: 33.75rem; + background-repeat: no-repeat; + background-position: right bottom; + background-size: 46.625rem; +} + +.banner.top .inner { + background-image: url("../../images/Img_home_top.png"); +} + +.banner.bottom { + margin-top: 8.625rem; +} + +.banner.bottom .inner { + background-image: url("../images/Img_home_bottom.png"); +} + +.banner .info { + padding-top: 15rem; +} + +.banner.bottom .banner .info { + padding-top: 16rem; +} + +.banner .info h2 { + margin-bottom: 2rem; +} + +.banner .info a { + display: inline-block; + margin-bottom: 6.25rem; + padding: 1rem 7.75rem; + border-radius: 40px; + font-size: 1.25rem; +} + +/* footer */ +footer { + background: #111827; + color: #e5e7eb; +} + +footer .inner { + display: flex; + justify-content: space-between; + padding: 2rem 0 6.75rem; +} + +.copyright { + color: #9ca3af; +} + +.footer-menu { + display: flex; + gap: 1.875rem; +} + +.sns { + display: flex; + gap: 0.75rem; +} + +/*=== responsive ===*/ +/* desktop */ +@media (max-width: 1600px) { + html { + font-size: 15px; + } +} + +@media (max-width: 1280px) { + html { + font-size: 14px; + } +} + +@media (max-width: 1120px) { + .inner { + width: 100%; + } + + .banner .info { + padding: 15rem 1.5rem 0; + } +} + +/* tablet */ +@media (max-width: 1024px) { + header { + padding: 0 1.5rem; + } + + .banner .inner { + margin: 0; + background-size: 60vw; + background-position: 40vw bottom; + } + + section .inner { + width: 100%; + background: #fff; + } + + .section-register .inner { + justify-content: center; + } + + section .inner img { + width: 50%; + } + + footer .inner { + width: 100%; + padding: 2rem 1.5rem 6.75rem; + } +} + +/* large mobile */ +@media (max-width: 767px) { + .inner { + width: 100%; + } + + .banner.top { + margin-bottom: 1.5rem; + height: 55rem; + } + + .banner.bottom { + margin-top: 4rem; + height: 66.214rem; + } + + .banner .inner { + height: 100%; + background-size: 100%; + background-position: center bottom; + } + + .banner .info { + padding-top: 6rem; + text-align: center; + } + .banner.bottom .info { + padding-top: 14.286rem; + } + + section { + margin-bottom: 3.25rem; + padding: 0 1.5rem; + } + + section .inner { + flex-direction: column; + align-items: flex-start; + border-radius: 0; + gap: 1.5rem; + } + section.section-search .inner { + align-items: flex-end; + } + + section .inner img { + width: 100%; + } + + .section-search .inner img { + order: 0; + } +} + +/* mobile */ +@media (max-width: 480px) { + .banner.top, + .banner.bottom { + height: 540px; + } + + .banner .info { + width: 240px; + margin: 0 auto; + padding: 3.429rem 0 0; + } + + .banner.bottom .info { + padding-top: 8.571rem; + } + + .banner .info h2 { + font-size: 2.286rem; + } + + .banner .info a { + width: 100%; + padding: 10px; + } + + h2 { + font-size: 1.714rem; + } + + section .info h2 { + margin-bottom: 1.143rem; + } + + section .info p { + font-size: 1.143rem; + } + + footer .inner { + flex-wrap: wrap; + gap: 1.5rem; + } + + .copyright { + order: 3; + width: 100%; + gap: 1.714rem; + } +} diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 00000000..77d0ffb7 --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,14 @@ +@charset "utf-8"; +:root { + /* colors */ + --primary-color: #3692ff; + --primary-hover-color: #1967d6; + --primary-click-color: #1251aa; + --text-primary: #374151; + --background-light: #fcfcfc; + + /* layout */ + --inner-width: 70rem; + --inner-width-small: 61.75rem; + --spacing-large: 8.625rem; +}