codeit-bootcamp-frontend · addiescode-sj · Apr 4, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/Property [email protected] b/img/Property [email protected]
diff --git a/img/btn_large.png b/img/btn_large.png
diff --git a/img/btn_small_48.png b/img/btn_small_48.png
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <header>
+      <div class="market">
+        <a class="market-icon" href="/"
+          ><img src="img/Property [email protected]" alt=""
+        /></a>
+        <a class="market-login" href="/login"
+          ><img src="img/btn_small_48.png" alt=""
+        /></a>
+      </div>
+    </header>
+    <main>
+      <div class="link">
+        <div class="link-img">
+          <div class="link-img-text">
+            <span
+              >일상의 모든 물건을<br />
+              거래해 보세요</span
+            ><a href="/items"><img src="img/btn_large.png" alt="btn" /></a>
+          </div>
+
+          <img class="link-img-panda" src="img/Img_home_top.png" alt="" />
+        </div>
+      </div>
+      <div class="content">
+        <div class="content-main">
+          <div class="content-box">
+            <img src="img/Img_home_01.png" alt="1" />
+            <div class="content-text">
+              <div class="content-text-item">Hot item</div>
+              <div class="content-text-main">
+                인기 상품을<br />확인해 보세요
+              </div>
+              <div class="content-text-info">
+                가장 HOT한 중고거래 물품을<br />
+                판다 마켓에서 확인해 보세요
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-main">
+          <div class="content-box">
+            <div class="content-text reverse">
+              <div class="content-text-item">Search</div>
+              <div class="content-text-main">
+                구매를 원하는<br />
+                상품을 검색하세요
+              </div>
+              <div class="content-text-info">
+                구매하고 싶은 물품은 검색해서<br />
+                쉽게 찾아보세요
+              </div>
+            </div>
+            <img src="img/Img_home_02.png" alt="2" />
+          </div>
+        </div>
+        <div class="content-main">
+          <div class="content-box">
+            <img src="img/Img_home_03.png" alt="3" />
+            <div class="content-text">
+              <div class="content-text-item">Register</div>
+              <div class="content-text-main">
+                판매를 원하는<br />
+                상품을 등록하세요
+              </div>
+              <div class="content-text-info">
+                어떤 물건이든 판매하고 싶은 상품을<br />
+                쉽게 등록하세요
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="link">
+        <div class="link-img link-bottom">
+          <div class="link-img-text">
+            <span
+              >믿을 수 있는<br />
+              판다마켓 중고 거래</span
+            >
+          </div>
+
+          <img class="link-img-panda" src="img/Img_home_bottom.png" alt="" />
+        </div>
+      </div>
+    </main>
+    <div class="footer">
+      <div class="footer-box">
+        <span class="footer-codeit">©codeit - 2024</span>
+        <div class="footer-faq">
+          <a href="/pricacy">Privacy Policy</a>
+          <a href="/faq">FAQ</a>
+        </div>
+        <div class="footer-sns">
+          <a href="https://www.facebook.com/"
+            ><img src="img/ic_facebook.png" alt=""
+          /></a>
+          <a href="https://x.com/?lang=en"
+            ><img src="img/ic_twitter.png" alt=""
+          /></a>
+          <a href="https://www.youtube.com/"
+            ><img src="img/ic_youtube.png" alt=""
+          /></a>
+          <a href="https://www.instagram.com/"
+            ><img src="img/ic_instagram.png" alt=""
+          /></a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/reset.css 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;
+}