diff --git a/assets/icons/ic_facebook.png b/assets/icons/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/assets/icons/ic_facebook.png differ diff --git a/assets/icons/ic_instagram.png b/assets/icons/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/assets/icons/ic_instagram.png differ diff --git a/assets/icons/ic_twitter.png b/assets/icons/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/assets/icons/ic_twitter.png differ diff --git a/assets/icons/ic_youtube.png b/assets/icons/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/assets/icons/ic_youtube.png differ diff --git a/assets/icons/panda_logo.svg b/assets/icons/panda_logo.svg new file mode 100644 index 00000000..d1f6f15d --- /dev/null +++ b/assets/icons/panda_logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/Frame 2608833.png b/assets/images/Frame 2608833.png new file mode 100644 index 00000000..9e20e5c8 Binary files /dev/null and b/assets/images/Frame 2608833.png differ diff --git a/assets/images/Img_home_02.png b/assets/images/Img_home_02.png new file mode 100644 index 00000000..c2d9f422 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..fd69fd94 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..03701fd7 Binary files /dev/null and b/assets/images/Img_home_bottom.png differ diff --git a/assets/images/banner.png b/assets/images/banner.png new file mode 100644 index 00000000..e0cb6c54 Binary files /dev/null and b/assets/images/banner.png differ diff --git a/font.css b/font.css new file mode 100644 index 00000000..43394150 --- /dev/null +++ b/font.css @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Pretendard-Regular'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') + format('woff'); + font-weight: 400; + font-style: normal; +} diff --git a/href_link/FAQ.html b/href_link/FAQ.html new file mode 100644 index 00000000..a13200b7 --- /dev/null +++ b/href_link/FAQ.html @@ -0,0 +1,11 @@ + + + + + + Document + + + FAQ + + diff --git a/href_link/facebook.html b/href_link/facebook.html new file mode 100644 index 00000000..9fb3a178 --- /dev/null +++ b/href_link/facebook.html @@ -0,0 +1,11 @@ + + + + + + Document + + + Facebook + + diff --git a/href_link/instagram.html b/href_link/instagram.html new file mode 100644 index 00000000..6b897a0c --- /dev/null +++ b/href_link/instagram.html @@ -0,0 +1,11 @@ + + + + + + Document + + + instagram + + diff --git a/href_link/item.html b/href_link/item.html new file mode 100644 index 00000000..137fa855 --- /dev/null +++ b/href_link/item.html @@ -0,0 +1,11 @@ + + + + + + Document + + + 구경하기 + + diff --git a/href_link/login.html b/href_link/login.html new file mode 100644 index 00000000..36002d7c --- /dev/null +++ b/href_link/login.html @@ -0,0 +1,11 @@ + + + + + + Document + + + 로그인 + + diff --git a/href_link/privacy_policy.html b/href_link/privacy_policy.html new file mode 100644 index 00000000..b0844519 --- /dev/null +++ b/href_link/privacy_policy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + Privacy_policy + + diff --git a/href_link/twitter.html b/href_link/twitter.html new file mode 100644 index 00000000..5a8e34dd --- /dev/null +++ b/href_link/twitter.html @@ -0,0 +1,11 @@ + + + + + + Document + + + twitter + + diff --git a/href_link/youtube.html b/href_link/youtube.html new file mode 100644 index 00000000..401bd12f --- /dev/null +++ b/href_link/youtube.html @@ -0,0 +1,11 @@ + + + + + + Document + + + youtube + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..5fcca5d7 --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + 판다마켓 + + + +
+ + 로그인 +
+ + +
+
+
+
Search
+
+ 구매를 원하는
+ 상품을 검색하세요 +
+
+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요 +
+
+
+ 상품 검색 배너 +
+
+
+
+
+ 상품 등록 배너 이미지 +
+ Register +
+ 판매를 원하는
+ 상품을 등록하세요 +
+
+ 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 +
+
+
+
+
+
+
믿을 수 있는
판다마켓 중고 거래
+ 팬더둘이 서로 손흔들며 소통하고있는 사진 +
+
+ + + + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..d0d1e6e9 --- /dev/null +++ b/reset.css @@ -0,0 +1,136 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} + +body { + min-height: 100vh; +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..0ecfeb46 --- /dev/null +++ b/style.css @@ -0,0 +1,378 @@ +@import './reset.css'; +@import './font.css'; + +:root { + /* Colors */ + --primary-color: #3692ff; + --text-color: #374151; + --accent-color: #cfe5ff; + --light-bg: #fcfcfc; + + /* Font Sizes */ + --font-size-large: 40px; + --font-size-medium: 24px; + --font-size-small: 18px; + --font-size-base: 16px; +} + +html { + font-family: 'Pretendard-Regular'; +} + +header { + display: flex; + height: 51px; + width: calc(100% - 400px); + margin: 9.5px auto; + padding: 0 200px; + justify-content: space-between; +} + +.logo { + font-weight: 700; + font-size: 25.63px; + display: flex; + gap: 4.75px; + min-width: 150px; + text-decoration: none; + color: var(--primary-color); + align-items: center; + cursor: pointer; +} + +.logo_img { + display: flex; + width: 40px; + height: 40px; +} + +.login { + display: flex; + background-color: var(--primary-color); + width: 128px; + min-width: 128px; + white-space: nowrap; + height: 48px; + justify-content: center; + align-items: center; + border-radius: 8px; + text-decoration: none; + color: #f3f4f6; + cursor: pointer; +} + +.banner { + display: flex; + align-items: end; + justify-content: center; + background-color: var(--accent-color); + width: 100%; + height: 540px; +} + +.banner-container { + display: flex; + align-items: center; + width: 1110px; + height: 340px; +} + +.banner-content { + display: flex; + flex-direction: column; + width: 357px; + height: 260px; + gap: 32px; +} + +.banner-text { + font-weight: 700; + font-size: var(--font-size-large); + color: var(--text-color); + line-height: 140%; +} + +.button { + background-color: var(--primary-color); + padding: 12px 124px; + border-radius: 40px; + color: #f9fafb; + text-decoration: none; + line-height: 32px; + cursor: pointer; +} + +.banner_2 { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 720px; +} + +.banner_2_container { + display: flex; + background-color: var(--light-bg); + width: 988px; + height: 444px; + border-radius: 12px; + overflow: hidden; +} + +.banner-image { + padding: 0 64px 0 23.5px; +} + +.banner-text-right { + margin: 103px 23.5px 103px 0px; +} + +.hot_item { + width: 579px; + height: 100%; +} + +.hot_logo { + font-size: var(--font-size-small); + font-weight: 700; + line-height: 26px; + color: var(--primary-color); +} + +.hot_main { + margin: 12px 24px 0 0; + font-weight: 700; + font-size: var(--font-size-large); + line-height: 140%; + height: 222px; + height: 112px; +} + +.hot_footer { + font-size: var(--font-size-medium); + font-weight: 500; + margin: 24px 0 0 0; + width: 274px; + height: 64px; +} + +.banner3 { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 720px; + text-align: right; + background-color: #ffffff; +} + +.banner3-container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; + height: 444px; + flex-wrap: wrap; + border-radius: 12px; + background-color: var(--light-bg); + overflow: hidden; +} + +.search-section { + flex: 1 1 0; + min-width: 280px; + max-width: 400px; + margin: 103px 64px 103px 14px; + padding-left: 24px; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.banner3-search { + align-self: flex-end; + top: 0; + right: 0; + width: 60px; + height: 26px; + font-size: var(--font-size-small); + font-weight: 700; + color: var(--primary-color); +} + +.banner3-main { + font-weight: 700; + font-size: var(--font-size-large); + line-height: 140%; + letter-spacing: 2%; + text-align: right; + vertical-align: middle; + margin-bottom: 24px; +} + +.banner3-footer { + align-self: flex-end; + font-weight: 500; + font-size: var(--font-size-medium); + line-height: 32px; + letter-spacing: 0%; + text-align: right; + vertical-align: middle; +} + +.banner3-right { + display: flex; + height: 100%; + align-items: center; + right: 0; + margin-right: 14px; + margin-top: -20px; +} + +.banner3-banner { + width: 100%; + height: auto; + max-height: 444px; + object-fit: contain; +} + +.banner4 { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 720px; + margin-bottom: 138px; +} + +.banner4_container { + display: flex; + justify-content: space-between; + align-items: stretch; + gap: 2rem; + height: 444px; + flex-wrap: wrap; + border-radius: 12px; + background-color: var(--light-bg); + overflow: hidden; +} + +.register-section { + width: 359px; + height: 238px; + margin: 103px -7px 103px 64px; + font-weight: 700; + font-size: var(--font-size-small); + line-height: 26px; + letter-spacing: 0%; + vertical-align: middle; + color: var(--primary-color); +} + +.banner4_main { + width: 293px; + height: 112px; + font-weight: 700; + font-size: var(--font-size-large); + line-height: 140%; + letter-spacing: 2%; + vertical-align: middle; + margin-top: 12px; + color: var(--text-color); +} + +.banner4_footer { + width: 336px; + height: 64px; + font-weight: 500; + font-size: var(--font-size-medium); + line-height: 32px; + letter-spacing: 0%; + vertical-align: middle; + margin-top: 24px; + color: var(--text-color); +} + +.banner5 { + display: flex; + justify-content: center; + align-items: flex-end; + width: 100%; + height: 540px; + background-color: var(--accent-color); + margin: 0; + padding: 0; +} + +.banner5_container { + display: flex; + width: 1110px; + height: 397px; +} + +.banner5_left { + width: 297px; + height: 172px; + gap: 10px; + padding-bottom: 60px; + margin: auto; + font-weight: 700; + font-size: var(--font-size-large); + line-height: 140%; + letter-spacing: 0%; + vertical-align: middle; + color: var(--text-color); +} + +footer { + background-color: #111827; + width: 100%; + height: 160px; + display: flex; + align-items: center; +} + +.footer_container { + width: 100%; + max-width: 1120px; + margin: 32px auto 108px; +} + +.footer_content { + display: flex; + color: #9ca3af; + font-size: 14px; + align-items: center; +} + +.footer_content a { + color: #e5e7eb; + text-decoration: none; +} + +.footer_content a:hover { + text-decoration: underline; +} + +span { + font-weight: 400; + font-size: var(--font-size-base); + line-height: 100%; + letter-spacing: 0%; + text-align: center; +} + +.footer_center { + display: flex; + font-weight: 400; + font-size: var(--font-size-base); + line-height: 100%; + text-align: center; + margin: 0 auto; + gap: 30px; +} + +.footer_icons { + display: flex; + gap: 12px; +}