diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..6965b1f6 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..d3101fd5 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..ef5972b3 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..21315764 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..37972831 Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/Property 1=sm@2x.png b/img/Property 1=sm@2x.png new file mode 100644 index 00000000..fd87db90 Binary files /dev/null and b/img/Property 1=sm@2x.png differ diff --git a/img/btn_large.png b/img/btn_large.png new file mode 100644 index 00000000..2cb5ae85 Binary files /dev/null and b/img/btn_large.png differ diff --git a/img/btn_small_48.png b/img/btn_small_48.png new file mode 100644 index 00000000..fbc8a4f3 Binary files /dev/null and b/img/btn_small_48.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..e811a4fd --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ + + + + + + + + 판다마켓 + + +
+
+ + +
+
+
+
+
+
+ 일상의 모든 물건을
+ 거래해 보세요btn +
+ + +
+
+
+
+
+ 1 +
+
Hot item
+
+ 인기 상품을
확인해 보세요 +
+
+ 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요 +
+
+
+
+
+
+
+
Search
+
+ 구매를 원하는
+ 상품을 검색하세요 +
+
+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요 +
+
+ 2 +
+
+
+
+ 3 +
+
Register
+
+ 판매를 원하는
+ 상품을 등록하세요 +
+
+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +
+
+
+
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고 거래 +
+ + +
+
+
+
+
+ ©codeit - 2024 +
+ Privacy Policy + FAQ +
+
+ + + + +
+
+
+ + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..58f413be --- /dev/null +++ b/reset.css @@ -0,0 +1,133 @@ +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; +} + +input:focus { + outline: none; +} + +a { + color: inherit; + text-decoration: none; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..1b09ea80 --- /dev/null +++ b/style.css @@ -0,0 +1,191 @@ +@import "reset.css"; + +header { + height: 70; + gap: 10px; + padding-top: 9px; + + padding-bottom: 9px; + + border-bottom-width: 1px; +} + +.market { + display: flex; + justify-content: space-around; + align-items: center; + margin: 0; +} + +.market-icon img { + width: 153px; + height: 51px; + margin-left: 200px; +} + +.market-login img { + width: 128px; + height: 48px; + margin-right: 200px; +} + +.link { + display: flex; + justify-content: center; + align-items: end; + width: 100%; + height: 540px; + background-color: rgba(207, 229, 255, 1); +} + +.link-img { + display: flex; + flex: 1 1 auto; + justify-content: center; + align-items: center; +} + +.link-bottom { + gap: 79px; +} + +.link-img-text { + display: flex; + flex-direction: column; + + padding-bottom: 60px; + gap: 32px; +} + +.link-img-text span { + font-family: "Pretendard"; + font-weight: 700; + font-size: 40px; + line-height: 140%; + letter-spacing: 0%; + vertical-align: middle; + color: rgba(55, 65, 81, 1); +} + +.link-img-panda { + display: block; +} + +.content { + display: flex; + justify-content: center; + flex-direction: column; + background-color: rgba(255, 255, 255, 1); +} + +.content-main { + display: flex; + justify-content: center; + align-items: center; + height: 720px; +} + +.content-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 12px; + gap: 64px; + width: 988px; + height: 444px; + background-color: rgba(252, 252, 252, 1); +} + +.content-text { + display: flex; + flex-direction: column; + padding-right: 24px; + gap: 12px; +} + +.content-text.reverse { + text-align: right; +} + +.content-text-item { + font-family: "Pretendard"; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0%; + vertical-align: middle; + color: rgba(54, 146, 255, 1); +} + +.content-text-main { + font-family: "Pretendard"; + font-weight: 700; + font-size: 40px; + line-height: 140%; + letter-spacing: 2%; + vertical-align: middle; + color: rgba(55, 65, 81, 1); + margin-bottom: 10px; +} + +.content-text-info { + font-family: "Pretendard"; + font-weight: 500; + font-size: 24px; + line-height: 32px; + letter-spacing: 0%; + vertical-align: middle; + color: rgba(55, 65, 81, 1); +} + +.footer { + display: flex; + justify-content: center; + width: 100%; + height: 160px; + gap: 10px; + padding-top: 32px; + padding-bottom: 32px; + background-color: rgba(17, 24, 39, 1); +} + +.footer-box { + display: flex; + justify-content: space-between; + align-items: center; + width: 1120px; + height: 20px; + color: rgba(156, 163, 175, 1); +} + +.footer-codeit { + font-family: "Pretendard"; + font-weight: 400; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; +} + +.footer-faq { + display: flex; + justify-content: center; + font-family: "Pretendard"; + font-weight: 400; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + gap: 30px; +} + +.footer-sns { + display: flex; + justify-content: center; + gap: 12px; +} + +.footer-sns img { + width: 20px; + height: 20px; +}