diff --git a/css/components/articles.css b/css/components/articles.css new file mode 100644 index 00000000..02ef91da --- /dev/null +++ b/css/components/articles.css @@ -0,0 +1,42 @@ +.main-article { + display: flex; + justify-content: center; + align-items: center; + padding: 50px 0; +} + +.main-article-container { + display: flex; + width: 988px; + height: 444px; +} + +.main-article__text { + display: flex; + flex-direction: column; + justify-content: center; + background-color: #fcfcfc; + gap: 24px; + padding: 30px 40px; + h5 { + font-size: 18px; + font-weight: 700; + line-height: 26px; + color: #3692ff; + } + h2 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + } + p { + font-size: 24px; + line-height: 32px; + font-weight: 500; + } +} + +.main-article__text2 { + align-items: flex-end; + text-align: right; +} diff --git a/css/components/banner.css b/css/components/banner.css new file mode 100644 index 00000000..be88e34c --- /dev/null +++ b/css/components/banner.css @@ -0,0 +1,53 @@ +.main-banner { + display: flex; + justify-content: center; + background-color: #cfe5ff; + width: 100%; + height: 540px; +} + +banner { + display: flex; + align-items: flex-end; + justify-content: center; + width: 100%; + max-width: 1920px; + height: 100%; +} + +.main-banner__content { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 357px; + height: 260px; + font-size: 40px; + font-weight: 700; + line-height: 56px; + gap: 32px; + margin-bottom: 40px; + a { + width: 100%; + } + button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 56px; + border-radius: 40px; + background-color: #3692ff; + color: #ffffff; + cursor: pointer; + } +} + +.main-banner-bottom__content { + margin-bottom: 0; +} + +@media (max-width: 1920px) { + banner { + width: calc(100% - 400px); + } +} diff --git a/css/components/footer.css b/css/components/footer.css new file mode 100644 index 00000000..8e9f6c3f --- /dev/null +++ b/css/components/footer.css @@ -0,0 +1,29 @@ +footer { + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 160px; + background-color: #111827; +} + +.footer-container { + display: flex; + align-items: center; + justify-content: space-between; + width: 1120px; + color: #ffffff; + font-size: 16px; + line-height: 19.09px; + font-weight: 400; +} + +.footer-middle { + display: flex; + gap: 30px; +} + +.footer-right { + display: flex; + gap: 12px; +} diff --git a/css/components/nav.css b/css/components/nav.css new file mode 100644 index 00000000..83476977 --- /dev/null +++ b/css/components/nav.css @@ -0,0 +1,37 @@ +header { + display: flex; + justify-content: center; +} + +nav { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + max-width: 1920px; + height: 70px; + padding: 9px 0; + a { + height: 100%; + } + img { + height: 100%; + } + button { + width: 128px; + height: 48px; + padding: 0.5rem 1.45rem; + border-radius: 8px; + border: none; + color: #ffffff; + background-color: #3692ff; + cursor: pointer; + } +} + +@media (max-width: 1920px) { + nav { + justify-content: space-between; + width: calc(100% - 400px); + } +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..45a05ecf --- /dev/null +++ b/css/reset.css @@ -0,0 +1,129 @@ +/* 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; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..fb2f7d3b --- /dev/null +++ b/css/style.css @@ -0,0 +1,33 @@ +@import "reset.css"; + +/* components */ +@import "components/nav.css"; +@import "components/banner.css"; +@import "components/articles.css"; +@import "components/footer.css"; + +@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; +} + +* { + box-sizing: border-box; +} + +body { + font-family: "Pretendard-Regular"; + width: 100vw; +} + +button { + border: none; +} + +a { + text-decoration: none; + color: inherit; +} diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..249652e3 Binary files /dev/null and b/img/Img_home_01.png differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png new file mode 100644 index 00000000..84d8629f Binary files /dev/null and b/img/Img_home_02.png differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png new file mode 100644 index 00000000..eb0d6cd2 Binary files /dev/null and b/img/Img_home_03.png differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 00000000..58b29043 Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 00000000..7ce56caa Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..8248f602 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3c10d0d5 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + + + 판다마켓 + + +
+ +
+ +
+
+ +
+

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

+ +
+ + +
+ +
+
+
+ +
+
Hot item
+

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

+

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

+
+
+
+
+
+
+
Search
+

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

+

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

+
+ +
+
+
+
+ +
+
Register
+

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

+

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

+
+
+
+
+
+
+ +
+

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

+
+ + +
+
+ + +