codeit-bootcamp-frontend · addiescode-sj · Mar 18, 2024 · Mar 15, 2024 · addiescode-sj · Mar 18, 2024
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 1=Default.png b/img/Property 1=Default.png
diff --git a/img/Property 1=Heart.png b/img/Property 1=Heart.png
diff --git a/img/Property 1=Typo.png b/img/Property 1=Typo.png
diff --git a/img/Property 1=Variant2.png b/img/Property 1=Variant2.png
diff --git a/img/Property 1=active.png b/img/Property 1=active.png
diff --git a/img/icon/Frame 2609150.png b/img/icon/Frame 2609150.png
diff --git a/img/icon/Frame 2609260.png b/img/icon/Frame 2609260.png
diff --git a/img/icon/ic_facebook.png b/img/icon/ic_facebook.png
diff --git a/img/icon/ic_facebook.svg b/img/icon/ic_facebook.svg
diff --git a/img/icon/ic_instagram.png b/img/icon/ic_instagram.png
diff --git a/img/icon/ic_instagram.svg b/img/icon/ic_instagram.svg
diff --git a/img/icon/ic_twitter.png b/img/icon/ic_twitter.png
diff --git a/img/icon/ic_twitter.svg b/img/icon/ic_twitter.svg
diff --git a/img/icon/ic_youtube.png b/img/icon/ic_youtube.png
diff --git a/img/icon/ic_youtube.svg b/img/icon/ic_youtube.svg
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/signature.png b/img/signature.png
diff --git a/index.html b/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!-- facebook -->
+  <meta
+    name="description"
+    content="일상의 모든 물건을 거래해 보세요"
+  >
+  <meta property="og:image" content="img/signature.png">
+  <meta property="og:title" content="판다마켓">
+  <meta
+      property="og:description"
+      content="일상의 모든 물건을 거래해 보세요"
+  >
+  <meta property="og:url" content="https://hazesite.netlify.app">
+  <!-- twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="img/signature.png">
+  <meta
+      name="twitter:title"
+      content="판다마켓"
+  >
+  <meta
+      name="twitter:description"
+      content="일상의 모든 물건을 거래해 보세요"
+  >
+  <title>판다마켓</title>
+  <link rel="icon" href="img/signature.png">
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+  <header>
+      <nav>
+        <h1>
+          <a class="logo" href="/">
+            <img class="logo-img" src="img/logo.png" alt="홈페이지로 이동"/>
+            판다마켓
+          </a>
+        </h1>
+        <a class="login-button" href="/login">
+          로그인
+        </a>
+      </nav>
+      <div class="head-banner">
+        <div class="wrap head-banner-wrap">
+          <div class="head-banner-contents">
+            <p class="headline">
+              일상의 모든 물건을<br> 거래해 보세요
+            </p>
+            <a class="head-banner-button" href="/items">
+              구경하러 가기
+            </a>  
+          </div>
+          <img class="head-banner-img" src="img/Img_home_top.png" alt="홈페이지 배너"/>
+        </div>
+      </div>
+  </header>
+
+  <main>
+    <!-- hot item -->
+    <section>
+      <img src="img/Img_home_01.png" alt="인기 상품 안내"/>
+      <div class="description">
+        <h2>
+          Hot item
+        </h2>
+        <p>
+          <span class="headline">
+            인기 상품을<br/>
+            확인해 보세요
+          </span>
+          가장 HOT한 중고거래 물품을<br/>
+          판다 마켓에서 확인해 보세요
+        </p>
+      </div>
+    </section>
+    <!-- search -->
+    <section class="flex-reverse">
+      <img src="img/Img_home_02.png" alt="검색 기능 안내"/>
+      <div class="description">
+        <h2>
+          Search
+        </h2>
+        <p>
+          <span class="headline">
+            구매를 원하는<br/>
+            상품을 검색하세요
+          </span>
+          구매하고 싶은 물품은 검색해서<br/>
+          쉽게 찾아보세요
+        </p>
+      </div>
+    </section>
+    <!-- Register -->
+    <section>
+      <img src="img/Img_home_03.png" alt="상품 등록 안내"/>
+      <div class="description">
+        <h2>
+          Register
+        </h2>
+        <p>
+          <span class="headline"> 
+            판매를 원하는<br/>
+            상품을 등록하세요
+          </span>
+          어떤 물건이든 판매하고 싶은 상품을<br/>
+          쉽게 등록하세요
+        </p>
+      </div>
+    </section>
+  </main>
+
+  <!-- 하단 광고 배너 -->
+  <aside>
+    <div class="wrap">
+      <p class="headline">
+        믿을 수 있는<br/>
+        판다마켓 중고거래
+      </p>
+      <img src="img/Img_home_bottom.png" alt="판다마켓 광고 배너"/>
+    </div>
+  </aside>
+
+  <footer>
+    <p>
+      ©codeit - 2024
+    </p>
+    <nav>
+      <ul  class="policy-list">
+        <li>
+          <a href="/privacy">
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a href="/faq">
+            FAQ
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <nav>
+      <ul class="sns-list">
+        <li>
+          <a href="https://www.facebook.com/">
+            <img src="img/icon/ic_facebook.svg" alt="페이스북으로 이동"/>
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/">
+            <img src="img/icon/ic_twitter.svg" alt="트위터로 이동"/>
+          </a>
+        </li>
+        <li>
+          <a href="https://www.youtube.com/">
+            <img src="img/icon/ic_youtube.svg" alt="유튜브로 이동"/>
+          </a>
+        </li>
+        <li>
+          <a href="https://www.instagram.com/">
+            <img src="img/icon/ic_instagram.svg" alt="인스타그램으로 이동"/>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </footer>
+</body>
+</html>
diff --git a/reset.css 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;
+}