diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 000000000..9a1738e3a 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 000000000..0238aaa47 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 000000000..40a71c77c 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 000000000..3cb63e8c6 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 000000000..465e9f562 Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/Property 1=Default.png b/img/Property 1=Default.png new file mode 100644 index 000000000..a4ad23f00 Binary files /dev/null and b/img/Property 1=Default.png differ diff --git a/img/Property 1=Heart.png b/img/Property 1=Heart.png new file mode 100644 index 000000000..f984fcec5 Binary files /dev/null and b/img/Property 1=Heart.png differ diff --git a/img/Property 1=Typo.png b/img/Property 1=Typo.png new file mode 100644 index 000000000..ccfd704f4 Binary files /dev/null and b/img/Property 1=Typo.png differ diff --git a/img/Property 1=Variant2.png b/img/Property 1=Variant2.png new file mode 100644 index 000000000..9350ce802 Binary files /dev/null and b/img/Property 1=Variant2.png differ diff --git a/img/Property 1=active.png b/img/Property 1=active.png new file mode 100644 index 000000000..b5d22adf1 Binary files /dev/null and b/img/Property 1=active.png differ diff --git a/img/icon/Frame 2609150.png b/img/icon/Frame 2609150.png new file mode 100644 index 000000000..4e324009a Binary files /dev/null and b/img/icon/Frame 2609150.png differ diff --git a/img/icon/Frame 2609260.png b/img/icon/Frame 2609260.png new file mode 100644 index 000000000..e2577d531 Binary files /dev/null and b/img/icon/Frame 2609260.png differ diff --git a/img/icon/ic_facebook.png b/img/icon/ic_facebook.png new file mode 100644 index 000000000..58333d45f Binary files /dev/null and b/img/icon/ic_facebook.png differ diff --git a/img/icon/ic_facebook.svg b/img/icon/ic_facebook.svg new file mode 100644 index 000000000..b9c9d4939 --- /dev/null +++ b/img/icon/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_instagram.png b/img/icon/ic_instagram.png new file mode 100644 index 000000000..7a91d111a Binary files /dev/null and b/img/icon/ic_instagram.png differ diff --git a/img/icon/ic_instagram.svg b/img/icon/ic_instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/img/icon/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_twitter.png b/img/icon/ic_twitter.png new file mode 100644 index 000000000..5df0852de Binary files /dev/null and b/img/icon/ic_twitter.png differ diff --git a/img/icon/ic_twitter.svg b/img/icon/ic_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/img/icon/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_youtube.png b/img/icon/ic_youtube.png new file mode 100644 index 000000000..f51731d40 Binary files /dev/null and b/img/icon/ic_youtube.png differ diff --git a/img/icon/ic_youtube.svg b/img/icon/ic_youtube.svg new file mode 100644 index 000000000..a3a16c512 --- /dev/null +++ b/img/icon/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 000000000..1f47ed01f Binary files /dev/null and b/img/logo.png differ diff --git a/img/signature.png b/img/signature.png new file mode 100644 index 000000000..c68cf1a0c Binary files /dev/null and b/img/signature.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..5dac078c0 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + + + + + 판다마켓 + + + + + +
+ +
+
+
+

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

+ + 구경하러 가기 + +
+ 홈페이지 배너 +
+
+
+ +
+ +
+ 인기 상품 안내 +
+

+ Hot item +

+

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

+
+
+ +
+ 검색 기능 안내 +
+

+ Search +

+

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

+
+
+ +
+ 상품 등록 안내 +
+

+ Register +

+

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

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 000000000..28d2d83ee --- /dev/null +++ b/reset.css @@ -0,0 +1,55 @@ +/* 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; + box-sizing: border-box; +} +/* 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; +} +a { + text-decoration: none; +} +html { + font-size: 10px; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..d9d441c9f --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +@import "reset.css"; + +/* TODO: 반응형 크기 조정 */ + +/* 배너 및 컨텐츠 헤드라인 글귀 */ +.headline { + font-size: 40px; + font-weight: 700; + line-height: 56px; + color: #374151; +} + +/* header */ +nav { + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav h1 { + margin-left: 200px; +} + +.logo { + display: block; + width: 153px; + height: 51px; + font-size: 0; +} + +.logo-img { + width: 100%; +} + +.login-button { + margin-right: 200px; + display: inline-block; + border-radius: 8px; + padding: 12px 20px; + background-color: #3692ff; + font-size: 16px; + font-weight: 600; + color: #fff; +} + +.head-banner { + height: 540px; + width: 100vw; + background-color: #cfe5ff; + border-top: 1px solid #dfdfdf; +} + +.head-banner-wrap { + width: 1200px; + height: 100%; + position: relative; +} + +.head-banner-contents { + position: absolute; + top: 170px; + left: 0; +} + +.head-banner p { + width: 100%; +} + +.head-banner-button { + /* TODO: 버튼 크기 조정 */ + display: inline-block; + padding: 16px 124px; + margin-top: 32px; + border-radius: 40px; + background-color: #3692ff; + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: #fff; + text-align: center; +} + +.head-banner-img { + width: 996px; + height: 447px; + position: absolute; + right: -150px; + bottom: 0; +} + +/* main */ +main, .wrap { + width: 120rem; + margin: 0 auto; +} + +section { + height: 720px; + display: flex; + justify-content: center; + align-items: center; + gap: 64px; +} + +section img { + width: 588px; +} + +section h2 { + font-size: 18px; + font-weight: 700; + line-height: 25px; + color: #3692ff; +} + +section p { + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: #374151; +} + +section p span { + display: block; + font-size: 40px; + font-weight: 700; + line-height: 56px; + color: #374151; + margin: 24px 0; +} + +.flex-reverse { + flex-direction: row-reverse; +} + +/* aside */ +aside { + width: 100vw; + height: 540px; + background-color: #cfe5ff; + margin-top: 241px; +} + +aside > div { + height: 540px; + position: relative; +} + +aside .headline { + position: absolute; + top: 214px; + left: 0; +} + +aside img { + width: 996px; + height: 540px; + position: absolute; + bottom: 0; + right: -150px; +} + +/* footer */ +footer { + width: 100vw; + height: 160px; + padding: 32px 200px; + background-color: #111827; + display: flex; + justify-content: space-between; + align-items: center; + /* TODO: 위치 조정 */ +} + +footer p { + font-size: 16px; + font-weight: 400; + color: #9ca3af; +} + +footer nav ul { + display: flex; +} + +.policy-list { + gap: 30px; +} + +.policy-list a { + font-size: 16px; + font-weight: 400; + color: #e5e7eb; +} + +.sns-list { + gap: 12px; +} \ No newline at end of file