diff --git a/index.html b/index.html new file mode 100644 index 0000000..428a8f9 --- /dev/null +++ b/index.html @@ -0,0 +1,199 @@ + + + + + + + + + + 판다마켓 + + + + + + + + + +
+
+
+

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

+ 구경하러가기 +
+
+ 헤더 이미지 +
+
+
+ +
+
+
+ link_save_img +
+
Hot item
+ + 인기 상품을 +
+ 확인해보세요 + +

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

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

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

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

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

+
+
+
+
+
+
+
+

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

+
+
+ 바텀헤더 이미지 +
+
+
+ + + diff --git a/pages/faq.html b/pages/faq.html new file mode 100644 index 0000000..c5b3e00 --- /dev/null +++ b/pages/faq.html @@ -0,0 +1,12 @@ + + + + + + FQA + + + + FQA 페이지에용 + + diff --git a/pages/items.html b/pages/items.html new file mode 100644 index 0000000..f22ffd0 --- /dev/null +++ b/pages/items.html @@ -0,0 +1,12 @@ + + + + + + items + + + + 아이템 페이지에용 + + diff --git a/pages/privacy.html b/pages/privacy.html new file mode 100644 index 0000000..f97d90f --- /dev/null +++ b/pages/privacy.html @@ -0,0 +1,12 @@ + + + + + + Privacy + + + + 프라이버시 페이지에용 + + diff --git a/pages/signin.html b/pages/signin.html new file mode 100644 index 0000000..c961c6e --- /dev/null +++ b/pages/signin.html @@ -0,0 +1,12 @@ + + + + + + 로그인 + + + + 로그인 페이지에용 + + diff --git a/src/assets/image/Header-Content-Image.png b/src/assets/image/Header-Content-Image.png new file mode 100644 index 0000000..85a793c Binary files /dev/null and b/src/assets/image/Header-Content-Image.png differ diff --git a/src/assets/image/home_01-image.png b/src/assets/image/home_01-image.png new file mode 100644 index 0000000..e4e9c3c Binary files /dev/null and b/src/assets/image/home_01-image.png differ diff --git a/src/assets/image/home_02-image.png b/src/assets/image/home_02-image.png new file mode 100644 index 0000000..1bdd747 Binary files /dev/null and b/src/assets/image/home_02-image.png differ diff --git a/src/assets/image/home_03-image.png b/src/assets/image/home_03-image.png new file mode 100644 index 0000000..0994c0e Binary files /dev/null and b/src/assets/image/home_03-image.png differ diff --git a/src/assets/image/home_bottom-iamge.png b/src/assets/image/home_bottom-iamge.png new file mode 100644 index 0000000..e563f39 Binary files /dev/null and b/src/assets/image/home_bottom-iamge.png differ diff --git a/src/assets/svg/Logo-Large.svg b/src/assets/svg/Logo-Large.svg new file mode 100644 index 0000000..7c2d736 --- /dev/null +++ b/src/assets/svg/Logo-Large.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/svg/Logo-Small.svg b/src/assets/svg/Logo-Small.svg new file mode 100644 index 0000000..bdb3c4d --- /dev/null +++ b/src/assets/svg/Logo-Small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/X-icon.svg b/src/assets/svg/X-icon.svg new file mode 100644 index 0000000..ada9a50 --- /dev/null +++ b/src/assets/svg/X-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/default-profile-icon.svg b/src/assets/svg/default-profile-icon.svg new file mode 100644 index 0000000..acc9826 --- /dev/null +++ b/src/assets/svg/default-profile-icon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/facebook-icon.svg b/src/assets/svg/facebook-icon.svg new file mode 100644 index 0000000..9261570 --- /dev/null +++ b/src/assets/svg/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/inquiry_empty-icon.svg b/src/assets/svg/inquiry_empty-icon.svg new file mode 100644 index 0000000..b087d0d --- /dev/null +++ b/src/assets/svg/inquiry_empty-icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/instagram-icon.svg b/src/assets/svg/instagram-icon.svg new file mode 100644 index 0000000..bb6820d --- /dev/null +++ b/src/assets/svg/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/plus-icon.svg b/src/assets/svg/plus-icon.svg new file mode 100644 index 0000000..5bb9abf --- /dev/null +++ b/src/assets/svg/plus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/reply_empty-icon.svg b/src/assets/svg/reply_empty-icon.svg new file mode 100644 index 0000000..dbac501 --- /dev/null +++ b/src/assets/svg/reply_empty-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/twitter-icon.svg b/src/assets/svg/twitter-icon.svg new file mode 100644 index 0000000..3d1ede5 --- /dev/null +++ b/src/assets/svg/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/youtube-icon.svg b/src/assets/svg/youtube-icon.svg new file mode 100644 index 0000000..1d332e7 --- /dev/null +++ b/src/assets/svg/youtube-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/style/index.css b/src/style/index.css new file mode 100644 index 0000000..8906f18 --- /dev/null +++ b/src/style/index.css @@ -0,0 +1,273 @@ +@import "./reset.css"; + +/* header */ +.header_nav { + max-width: 192rem; + margin: auto; + padding-left: 20rem; + padding-right: 20rem; + top: 0; + + position: sticky; + display: flex; + align-items: center; + + background-color: var(--White); +} + +.header_category { + width: 100%; + margin-left: 3.2rem; + + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.category_btn { + padding: 2.4rem 1.6rem; + + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: normal; + + color: var(--Cool-Gray600); +} + +.login_btn { + height: 4.2rem; + padding: 1.2rem 2.3rem; + border-radius: 0.8rem; + + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + flex-shrink: 0; + + background: var(--Brand-Blue); + color: var(--White); + + font-size: 1.6rem; + font-weight: 600; +} + +.header_section { + width: 100%; + height: 54rem; + position: relative; + + background-color: #cfe5ff; +} +.header_container { + width: 100%; + height: 100%; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.header_title { + padding-right: 6.2rem; + + color: var(--Cool-Gray700); + font-size: 4rem; + font-weight: 700; + line-height: 140%; +} + +.header_btn { + margin-top: 3.2rem; + padding: 1.6rem 12.4rem; + border-radius: 4rem; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + background: var(--Brand-Blue); + color: var(--White); + + font-size: 2rem; + font-weight: 600; + line-height: 24px; +} + +.header_wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.header_img_container { + margin-left: -1.4rem; + padding-top: 3rem; + margin-top: 9.3rem; + + display: flex; + flex-direction: row; +} + +/* section */ +main { + max-width: 120rem; + margin: 0 auto; + flex-shrink: 0; +} + +section { + display: flex; + justify-content: center; + align-items: center; +} + +.section_container_left { + width: 100%; + padding: 13.8rem 0; + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.section_container_right { + width: 100%; + padding: 13.8rem 0; + + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +.section_wrapper { + display: flex; + align-items: center; + flex-direction: row; +} + +.text_content_left { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-right: 6.4em; +} + +.text_content_right { + margin-left: 6.4rem; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.section_badge { + color: var(--brand-blue, #3692ff); + font-family: Pretendard; + font-size: 1.8rem; + font-style: normal; + font-weight: 700; + line-height: 140%; +} + +.section_title { + margin-top: 1.2rem; + margin-bottom: 2.4rem; + + font-size: 4rem; + font-style: normal; + font-weight: 700; + line-height: 140%; + letter-spacing: 0.08rem; + color: var(--Cool-Gray700); +} + +.section_summary { + font-size: 2.4rem; + font-style: normal; + font-weight: 500; + line-height: 120%; + letter-spacing: 0.192rem; + color: var(--Cool-Gray700); +} + +.section_img { + width: 58.8rem; + height: 44.4rem; + + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +/* bottom_header */ +.bottom_header_img_container { + display: flex; + flex-direction: row; +} + +.bottom_header_section { + width: 100%; + height: 54rem; + margin-top: 13.8rem; + + position: relative; + + background-color: #cfe5ff; +} + +/* footer */ +footer { + width: 100%; + height: 16rem; + padding-top: 3.2rem; + + display: flex; + justify-content: center; + + background-color: var(--Cool-Gray900); +} + +.footer_wrapper { + width: 100%; + max-width: 192rem; + height: fit-content; + padding: 0 10.4rem; + + display: grid; + grid-template: "copyright explain sns_icon"; + justify-content: space-between; +} + +.copyright { + grid-area: copyright; + + font-size: 1.6rem; + color: var(--Cool-Gray400); +} + +.explain { + grid-area: explain; + padding-right: 1.8rem; + display: flex; + column-gap: 3rem; +} + +.footer_link { + font-size: 1.6rem; + color: var(--Cool-Gray400); +} + +.sns_icon { + grid-area: sns_icon; + height: 2rem; + display: flex; + column-gap: 1.2rem; +} diff --git a/src/style/reset.css b/src/style/reset.css new file mode 100644 index 0000000..c3e6391 --- /dev/null +++ b/src/style/reset.css @@ -0,0 +1,44 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + vertical-align: top; + font-family: "Pretendard"; +} + +:root { + --White: #ffffff; + --Cool-Gray50: #f9fafb; + --Cool-Gray100: #f3f4f6; + --Cool-Gray200: #e5e7eb; + --Cool-Gray300: #d1d5db; + --Cool-Gray400: #9ca3af; + --Cool-Gray500: #6b7280; + --Cool-Gray600: #4b5563; + --Cool-Gray700: #374151; + --Cool-Gray800: #1f2937; + --Cool-Gray900: #111827; + --gray-gray500: #737373; + --error-red: #f74747; + --Brand-Blue: #3182f6; + --brand-blue: #3692ff; +} + +html, +body { + position: relative; + background-color: --var(--White); + font-size: 62.5%; + overflow-x: hidden; +} + +button { + outline: none; + cursor: pointer; +} + +a { + text-decoration: none; + cursor: pointer; + color: inherit; +}