diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..dc165ec4 Binary files /dev/null and b/.DS_Store differ diff --git a/Img/Img_home_01.png b/Img/Img_home_01.png new file mode 100644 index 00000000..6dbb59bb 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..f8df5939 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..e35fa4b9 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..aed1261d 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..92f789c6 Binary files /dev/null and b/Img/Img_home_top.png differ diff --git a/Img/Property 1=Variant3.png b/Img/Property 1=Variant3.png new file mode 100644 index 00000000..1fa247ed Binary files /dev/null and b/Img/Property 1=Variant3.png differ diff --git a/Img/ic_facebook.png b/Img/ic_facebook.png new file mode 100644 index 00000000..58333d45 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..98e24ea6 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..5df0852d 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..f51731d4 Binary files /dev/null and b/Img/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..15b9c2ce --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + + 판다마켓 + + +
+
+ +
+
+
+
+
+
+ 일상의 모든물건을
+ 거래해보세요 +
+ 구경하러 가기 +
+
+ 상단배너이미지 +
+
+
+
+
+ 콘텐츠이미지1 +
+
+ Hot item +
+

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

+

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

+
+
+
+
+
+ Search +
+

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

+

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

+
+ 콘텐츠이미지2 +
+
+ 콘텐츠이미지3 +
+
+ Register +
+

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

+

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

+
+
+
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고거래 +
+
+
+ 하단배너이미지 +
+
+
+
+ +
+ + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..27acba5c --- /dev/null +++ b/reset.css @@ -0,0 +1,43 @@ +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; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..ca51c4e9 --- /dev/null +++ b/style.css @@ -0,0 +1,173 @@ +/* Reset CSS */ +@import "reset.css"; + +* { + box-sizing: border-box; +} +a { + text-decoration: none; + color: #000; + cursor: pointer; +} + +/* Pretendard Font*/ +@font-face { + font-family: 'Pretendard-Regular'; + src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +/* Container */ + +.container { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Pretendard-Regular'; +} + +/* Header */ +.header-wrapper { + width: 100vw; +} +.gnb { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 200px; + max-width: 1920px; +} +.gnb-logo { + display: block; + width: 153px; + height: 51px; +} +.gnb-login { + display: flex; + justify-content: center; + align-items: center; + width: 128px; + height: 48px; + padding: 12px 20px; + background-color: #3692FF; + color: #fff; + border-radius: 8px; + font-size: 16px; + font-weight: 600; +} + +/* Main */ +.content-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} +/* banner */ +.content-Banner-wrapper{ + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + background-color: #CFE5FF; +} +.content-Banner{ + display: flex; + align-items: center; + width: 1200px; + height: 540px; +} +.content-Banner-desc{ + display: flex; + flex-direction: column; + gap: 32px; +} +.content-Banner-text { + width: 357px; + color: #374151; + font-size: 40px; + font-weight: 700; + line-height: 56px; +} +.content-Banner-Btn{ + display: flex; + justify-content: center; + align-items: center; + width: 357px; + height: 56px; + background-color: #3692FF; + color: #fff; + border-radius: 40px; + font-size: 20px; + font-weight: 600; +} + +/* content */ +.contents { + display: flex; + flex-direction: column; + width: 1200px; +} +.content { + display: flex; + align-items: center; + height: 720px; + gap: 64px; +} +.content-rowReverse { + flex-direction: row-reverse; +} +.content-img{ + width: 588px; + height: 444px; +} +.content-text { + display: flex; + flex-direction: column; + gap: 12px; +} +.content-text-label { + font-size: 18px; + font-weight: 700; + color: #3692FF; +} +.content-text-title { + font-size: 40px; + font-weight: 700; + color: #374151; + line-height: 56px; +} +.content-text-desc { + font-size: 24px; + font-weight: 500; + color: #374151; + line-height: 28.8px; +} + +/* Footer */ +.footer-wrapper { + display: flex; + justify-content: space-between; + width: 100vw; + padding: 32px 200px; + height: 160px; + background-color: #111827; + color: #fff; + max-width: 1920px; +} +.footer-copyright { + font-size: 16px; + color: #9CA3AF; +} +.footer-link { + display: flex; + gap: 30px; +} +.footer-link a { + font-size: 16px; + color: #E5E7EB; +} +.footer-sns { + display: flex; + gap: 12px; +} \ No newline at end of file