diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/img/base/favicon.ico b/assets/img/base/favicon.ico new file mode 100644 index 000000000..9fecc692d Binary files /dev/null and b/assets/img/base/favicon.ico differ diff --git a/assets/img/base/main_logo.svg b/assets/img/base/main_logo.svg new file mode 100644 index 000000000..3799efba4 --- /dev/null +++ b/assets/img/base/main_logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/img/icons/icon_facebook.svg b/assets/img/icons/icon_facebook.svg new file mode 100644 index 000000000..b9c9d4939 --- /dev/null +++ b/assets/img/icons/icon_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/icon_instagram.svg b/assets/img/icons/icon_instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/assets/img/icons/icon_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/icon_twitter.svg b/assets/img/icons/icon_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/assets/img/icons/icon_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/icon_youtube.svg b/assets/img/icons/icon_youtube.svg new file mode 100644 index 000000000..699b53803 --- /dev/null +++ b/assets/img/icons/icon_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/img/landing/banner_hero_img.svg b/assets/img/landing/banner_hero_img.svg new file mode 100644 index 000000000..687771db6 --- /dev/null +++ b/assets/img/landing/banner_hero_img.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/landing/banner_img_bottom.svg b/assets/img/landing/banner_img_bottom.svg new file mode 100644 index 000000000..8aac2a059 --- /dev/null +++ b/assets/img/landing/banner_img_bottom.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/landing/landing_content_01.svg b/assets/img/landing/landing_content_01.svg new file mode 100644 index 000000000..56aa00384 --- /dev/null +++ b/assets/img/landing/landing_content_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/landing/landing_content_02.svg b/assets/img/landing/landing_content_02.svg new file mode 100644 index 000000000..4137dc0bc --- /dev/null +++ b/assets/img/landing/landing_content_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/landing/landing_content_03.svg b/assets/img/landing/landing_content_03.svg new file mode 100644 index 000000000..93e003c37 --- /dev/null +++ b/assets/img/landing/landing_content_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css/base.css b/css/base.css new file mode 100644 index 000000000..55497bf92 --- /dev/null +++ b/css/base.css @@ -0,0 +1,115 @@ +@charset "utf-8"; + +html { + font-size: 62.5%; +} + +body { + background: #fcfcfc; + font-family: "Pretendard", sans-serif; + font-size: 1.6rem; + line-height: 1.3; + color: var(--color-seondary-800); +} + +.root:has(.header) { + padding-top: 7rem; +} + +.inner { + max-width: calc(112rem + var(--gutter) * 2); + margin: 0 auto; + padding: 0 var(--gutter); +} + +/* layout - header */ + +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + height: 7rem; + padding: 0 calc(20rem - var(--gutter)); + border-bottom: 1px solid var(--color-grey); + background: #ffffff; + + @media (max-width: 1200px) { + padding: 0; + } +} + +.header .nav { + display: flex; + align-items: center; + height: 100%; +} + +.header .logo { + display: block; + height: 5.1rem; + margin-right: 3.2rem; +} + +.header .logo a { + display: block; + height: 100%; +} + +.header .logo img { + width: auto; + height: 100%; +} + +.header .util { + flex: none; + margin-left: auto; +} + +.header .util .login-btn { + width: 12.8rem; +} + +/* footer */ + +.footer { + background: var(--color-seondary-900); + color: var(--color-seondary-400); + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + padding: 32px 200px 108px 200px; +} + +.footer .inner { + display: flex; + justify-content: space-between; + align-items: center; + + @media (max-width: 1200px) { + flex-direction: column; + align-items: flex-start; + gap: 3rem; + } +} + +.footer .copyright { + color: var(--color-seondary-400); +} + +.footerMenu { + display: flex; + gap: 30px; + color: var(--color-seondary-200); +} + +.sns { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + width: 100%; + height: 2rem; +} \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 000000000..09e3c9c9c --- /dev/null +++ b/css/main.css @@ -0,0 +1,239 @@ +@charset "utf-8"; + +/* base - button */ + +[class^="btn-"] { + display: flex; + justify-content: center; + align-items: center; + background: var(--color-primary-100); + color: var(--color-white); +} + +[class^="btn-"]:hover { + background: var(--color-primary-200); +} + +[class^="btn-"]:active { + background: var(--color-primary-300); +} + +[class^="btn-"]:disabled { + background: var(--color-seondary-400); + cursor: not-allowed; +} + +.btn-xlarge { + width: 100%; + height: 5.6rem; + border-radius: 9999px; + font-size: 2rem; + font-weight: 600; +} + +.btn-large { + width: 35.7rem; + height: 5.6rem; + border-radius: 9999px; + font-size: 2rem; + font-weight: 600; +} + +.btn-middle { + width: 24rem; + height: 4.8rem; + border-radius: 9999px; + font-size: 1.8rem; + font-weight: 600; +} + +[class^="btn-small"] { + width: 8.8rem; + height: 4.2rem; + border-radius: 8px; + font-size: 1.6rem; + font-weight: 600; +} + +#loginButton { + height: 4.8rem; +} + +/* banner */ +.banner { + position: relative; + height: 54rem; + padding: 0 calc(20rem - var(--gutter)); + background: #cfe5ff; + + @media (max-width: 1200px) { + height: auto; + padding: 0; + } +} + +.banner .inner { + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + + @media (max-width: 1440px) { + justify-content: flex-start; + padding-top: 10rem; + } + + @media (max-width: 1200px) { + align-items: center; + text-align: center; + } +} + +.banner .banner-content { + position: relative; + z-index: 1; + margin-bottom: 10rem; +} + +.banner .banner-title { + margin-bottom: 3.2rem; + font-size: 4rem; + font-weight: 700; + line-height: 1.4; + letter-spacing: 0.08rem; + color: var(--color-seondary-700); + + @media (max-width: 1200px) { + font-size: 3.4rem; + letter-spacing: -0.06rem; + } +} + +.banner .banner-img { + position: absolute; + right: 2.4rem; + bottom: 0; + width: min(55vw, 74.6rem); + + @media (max-width: 1200px) { + position: relative; + right: auto; + bottom: auto; + width: 100%; + margin: 0; + } +} + + +/* feature */ + +.feature { + padding: 13.8rem 0; + background: #fff; + + @media (max-width: 1200px) { + padding: 4rem 0 8rem; + } +} + +.feature .inner { + max-width: calc(98.8rem + var(--gutter) * 2); +} + +.feature-card { + overflow: hidden; + display: flex; + align-items: center; + gap: 6.4rem; + height: 44.4rem; + border-radius: 12px; + background: #fcfcfc; + + @media (max-width: 1200px) { + display: block; + height: auto; + border-radius: 0; + background: none; + } +} + +.feature-card .feature-image { + @media (max-width: 1200px) { + overflow: hidden; + margin-bottom: 4rem; + border-radius: 12px; + } +} + +.feature-card .feature-image img { + width: 100%; + height: 100%; + object-fit: cover; + + @media (max-width: 1200px) { + height: auto; + object-fit: unset; + } +} + +.feature-card .feature-content { + display: flex; + flex-direction: column; + justify-content: center; + flex: 0 0 34.5rem; + padding-right: 4rem; + word-break: keep-all; +} + +.feature-card .feature-keyword { + margin-bottom: 1.2rem; + color: var(--color-primary-100); + font-size: 1.8rem; + font-weight: 700; +} + +.feature-card .feature-title { + margin-bottom: 2.4rem; + font-size: 4rem; + font-weight: 700; + line-height: 1.4; + color: var(--color-seondary-700); + + @media (max-width: 1200px) { + margin-bottom: 1.8rem; + font-size: 3rem; + } +} + +.feature-card .feature-description { + font-size: 2.4rem; + font-weight: 500; + color: var(--color-seondary-700); + + @media (max-width: 1200px) { + font-size: 2rem; + } +} + +.feature:nth-child(2) { + text-align: right; +} + +/* footer banner */ + +#footerBanner { + margin-top: 13.8rem; + + @media (max-width: 1200px) { + margin-top: 0; + } +} + +#footerBanner .banner-content { + margin-bottom: 17.2rem; +} + +#footerBanner .banner-title { + margin-bottom: 0; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..3f5b312a1 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,83 @@ +@charset "utf-8"; +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +/* prettier-ignore */ +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 */ +/* prettier-ignore */ +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; +} + +/* additional reset css */ +*, +*::before, +*::after { + box-sizing: border-box; +} +a { + color: inherit; + text-decoration: none; +} +button { + margin: 0; + padding: 0; + background: transparent; + border: none; + cursor: pointer; + font: inherit; + color: inherit; +} +img { + vertical-align: top; +} +input { + padding: 0; + margin: 0; + border: none; + font: inherit; +} \ No newline at end of file diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 000000000..26aae1d01 --- /dev/null +++ b/css/variables.css @@ -0,0 +1,24 @@ +@charset "utf-8"; + +:root { + --color-primary-300: #1251aa; + --color-primary-200: #1967d6; + --color-primary-100: #3692ff; + + --color-seondary-900: #111827; + --color-seondary-800: #1f2937; + --color-seondary-700: #374151; + --color-seondary-600: #4b5563; + --color-seondary-500: #6b7280; + --color-seondary-400: #9ca3af; + --color-seondary-200: #e5e7eb; + --color-seondary-100: #f3f4f6; + --color-seondary-50: #f9fafb; + + --color-error: #f74747; + --color-white: #fff; + --color-grey: #dfdfdf; + --color-black: #4b5563; + + --gutter: 2.4rem; +} \ No newline at end of file diff --git a/html/faq.html b/html/faq.html new file mode 100644 index 000000000..23a02fb23 --- /dev/null +++ b/html/faq.html @@ -0,0 +1,25 @@ + + + + + + + 판다마켓 - FAQ + + + + + + + + + + + + + + +

임시 FAQ 페이지

+ + \ No newline at end of file diff --git a/html/index.html b/html/index.html new file mode 100644 index 000000000..44cc1474b --- /dev/null +++ b/html/index.html @@ -0,0 +1,180 @@ + + + + + + + 판다마켓 + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + +
+
+
+
+
+ 인기 상품을 확인해 보세요 +
+ +
+

Hot item

+

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

+

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

+
+
+
+
+ +
+
+
+
+

Search

+

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

+

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

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

Register

+

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

+

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

+
+
+
+
+
+ + +
+ + +
+ + \ No newline at end of file diff --git a/html/items.html b/html/items.html new file mode 100644 index 000000000..fadb6d4c9 --- /dev/null +++ b/html/items.html @@ -0,0 +1,25 @@ + + + + + + + 판다마켓 - 상품 + + + + + + + + + + + + + + +

임시 상품 페이지

+ + \ No newline at end of file diff --git a/html/login.html b/html/login.html new file mode 100644 index 000000000..49b74cbc1 --- /dev/null +++ b/html/login.html @@ -0,0 +1,25 @@ + + + + + + + 판다마켓 - 로그인 + + + + + + + + + + + + + + +

임시 로그인 페이지

+ + \ No newline at end of file diff --git a/html/privacy.html b/html/privacy.html new file mode 100644 index 000000000..36732fedd --- /dev/null +++ b/html/privacy.html @@ -0,0 +1,25 @@ + + + + + + + 판다마켓 - 이용약관 + + + + + + + + + + + + + + +

임시 이용약관 페이지

+ + \ No newline at end of file