codeit-bootcamp-frontend · Sea0Soda · Apr 10, 2025 · Apr 12, 2025
diff --git a/assets/icons/ic_facebook.png b/assets/icons/ic_facebook.png
diff --git a/assets/icons/ic_instagram.png b/assets/icons/ic_instagram.png
diff --git a/assets/icons/ic_twitter.png b/assets/icons/ic_twitter.png
diff --git a/assets/icons/ic_youtube.png b/assets/icons/ic_youtube.png
diff --git a/assets/icons/panda_logo.svg b/assets/icons/panda_logo.svg
diff --git a/assets/images/Frame 2608833.png b/assets/images/Frame 2608833.png
diff --git a/assets/images/Img_home_02.png b/assets/images/Img_home_02.png
diff --git a/assets/images/Img_home_03.png b/assets/images/Img_home_03.png
diff --git a/assets/images/Img_home_bottom.png b/assets/images/Img_home_bottom.png
diff --git a/assets/images/banner.png b/assets/images/banner.png
diff --git a/font.css b/font.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/href_link/FAQ.html b/href_link/FAQ.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    FAQ
+  </body>
+</html>
diff --git a/href_link/facebook.html b/href_link/facebook.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    Facebook
+  </body>
+</html>
diff --git a/href_link/instagram.html b/href_link/instagram.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    instagram
+  </body>
+</html>
diff --git a/href_link/item.html b/href_link/item.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    구경하기
+  </body>
+</html>
diff --git a/href_link/login.html b/href_link/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    로그인
+  </body>
+</html>
diff --git a/href_link/privacy_policy.html b/href_link/privacy_policy.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    Privacy_policy
+  </body>
+</html>
diff --git a/href_link/twitter.html b/href_link/twitter.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    twitter
+  </body>
+</html>
diff --git a/href_link/youtube.html b/href_link/youtube.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    youtube
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <a class="logo" href="/" aria-label="홈페이지로 이동합니다">
+        <img
+          class="logo_img"
+          src="./assets/icons/panda_logo.svg"
+          alt="판다마켓 로고 이미지"
+        />
+        <h1>판다마켓</h1>
+      </a>
+      <a class="login" href="href_link/login.html">로그인</a>
+    </header>
+    <div class="banner">
+      <div class="banner-container">
+        <div class="banner-content">
+          <p class="banner-text">
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </p>
+          <a href="href_link/item.html" class="button">구경하러 가기</a>
+        </div>
+        <img src="assets/images/banner.png" alt="판다마켓 상품 홍보 배너" />
+      </div>
+    </div>
+    <div class="banner_2">
+      <div class="banner_2_container">
+        <div class="banner-image">
+          <img
+            class="hot_item"
+            src="assets/images/Frame 2608833.png"
+            alt="팬더들이 인기 상품을 보고 있는 이미지"
+          />
+        </div>
+        <div class="banner-text-right">
+          <div class="hot_logo">Hot Item</div>
+          <div class="hot_main">
+            인기 상품을<br />
+            확인해 보세요
+          </div>
+          <div class="hot_footer">
+            가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="banner3">
+      <div class="banner3-container">
+        <div class="search-section">
+          <div class="banner3-search">Search</div>
+          <div class="banner3-main">
+            구매를 원하는<br />
+            상품을 검색하세요
+          </div>
+          <div class="banner3-footer">
+            구매하고 싶은 물품은 검색해서<br />
+            쉽게 찾아보세요
+          </div>
+        </div>
+        <div class="banner3-right">
+          <img src="assets/images/Img_home_02.png" alt="상품 검색 배너" />
+        </div>
+      </div>
+    </div>
+    <div class="banner4">
+      <div class="banner4_container">
+        <img
+          class="banner4_img"
+          src="assets/images/Img_home_03.png"
+          alt="상품 등록 배너 이미지"
+        />
+        <div class="register-section">
+          Register
+          <div class="banner4_main">
+            판매를 원하는<br />
+            상품을 등록하세요
+          </div>
+          <div class="banner4_footer">
+            어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="banner5">
+      <div class="banner5_container">
+        <div class="banner5_left">믿을 수 있는<br> 판다마켓 중고 거래</div>
+          <img src="assets/images/Img_home_bottom.png" alt="팬더둘이 서로 손흔들며 소통하고있는 사진" />
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="footer_container">
+        <div class="footer_content">
+          <span>©codeit - 2024</span>
+            <div class="footer_center">
+              <a class="privacy" href="href_link/privacy_policy.html">Privacy Policy</a>
+              <a class="faq" href="href_link/FAQ.html">FAQ</a>
+            </div>
+            <div class="footer_icons">
+              <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
+                <img src="assets/icons/ic_facebook.png" alt="페이스북으로 이동하는 아이콘">
+              </a>
+              <a href="https://x.com/" target="_blank" rel="noopener noreferrer">
+                <img src="assets/icons/ic_twitter.png" alt="트위터로 이동하는 아이콘">
+              </a>
+              <a href="https://youtube.com/" target="_blank" rel="noopener noreferrer">
+                <img src="assets/icons/ic_youtube.png" alt="유튜브로 이동하는 아이콘">
+              </a>
+              <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">
+                <img src="assets/icons/ic_instagram.png" alt="인스타그램으로 이동하는 아이콘">
+              </a>
+            </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,136 @@
+/* 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;
+}
+/* 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;
+}
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+}