파트1 스프린트 미션1

codeit-bootcamp-frontend · Mar 15, 2024 · da92061 · da92061
1 parent 4dc5dd0
commit da92061
Show file tree

Hide file tree

Showing 16 changed files with 398 additions and 0 deletions.
diff --git a/faq.html b/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>FAQ</title>
+  </head>
+  <body>
+    <h1>FAQ</h1>
+  </body>
+</html>
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/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/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
+    <title>판다마켓</title>
+    <!-- 글꼴 CDN -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
+  </head>
+  <body>
+    <!-- header 시작 -->
+    <header>
+      <div onclick="location.href = '/'">
+        <img class="logo" src="img/logo.png" alt="판다마켓 로고" />
+      </div>
+      <div class="login-btn-container">
+        <a href="signin.html" class="login-btn">로그인</a>
+      </div>
+    </header>
+    <!-- header 끝 -->
+    <!-- 베너 시작 -->
+    <div class="home-top-container">
+      <div class="home-top">
+        <p class="home-top-title">일상의 모든 물건을<br />거래해 보세요</p>
+        <div class="home-top-btn">
+          <a href="items.html" class="items-btn">구경하러 가기</a>
+        </div>
+      </div>
+      <img
+        src="img/Img_home_top.png"
+        alt="상단 베너 판다 이미지"
+        class="home-top-img"
+      />
+    </div>
+    <!-- 베너 끝 -->
+    <!-- 메인 시작 -->
+    <main>
+      <!-- 1 -->
+      <section>
+        <img src="img/Img_home_01.png" href="메인 이미지1" class="main-img" />
+        <div class="main-container">
+          <p class="main-topic">Hot Item</p>
+          <p class="main-title">
+            인기 상품을<br />
+            확인해 보세요
+          </p>
+          <p class="main-content">
+            가장 HOT한 중고거래 물품을<br />
+            판다 마켓에서 확인해 보세요
+          </p>
+        </div>
+      </section>
+      <!-- 2 -->
+      <section class="right">
+        <!-- <img src="img/Img_home_02.png" href="메인 이미지2" class="main-img" /> -->
+        <div class="main-container-right">
+          <p class="main-topic">Search</p>
+          <p class="main-title">
+            구매를 원하는<br />
+            상품을 검색하세요
+          </p>
+          <p class="main-content">
+            구매하고 싶은 물품은 검색해서<br />
+            쉽게 찾아보세요
+          </p>
+        </div>
+        <img src="img/Img_home_02.png" href="메인 이미지2" class="main-img" />
+      </section>
+      <!-- 3 -->
+      <section>
+        <img src="img/Img_home_03.png" href="메인 이미지3" class="main-img" />
+        <div class="main-container">
+          <p class="main-topic">Register</p>
+          <p class="main-title">
+            판매를 원하는<br />
+            상품을 등록하세요
+          </p>
+          <p class="main-content">
+            어떤 물건이든 판매하고 싶은 상품을<br />
+            쉽게 등록하세요
+          </p>
+        </div>
+      </section>
+    </main>
+    <!-- 메인 끝 -->
+    <div class="home-bottom-container">
+      <p class="home-bottom">믿을 수 있는<br />판다마켓 중고거래</p>
+      <img
+        class="home-bottom-img"
+        src="img/Img_home_bottom.png"
+        alt="판다 중고거래 이미지"
+      />
+    </div>
+    <footer>
+      <div class="footer-container">
+        <p class="footer-codeit">@codeit - 2024</p>
+        <div class="footer-center">
+          <a href="/privacy.html" class="footer-privacy">Privacy Policy</a>
+          <a href="/faq.html" class="footer-faq">FAQ</a>
+        </div>
+        <div class="footer-ic">
+          <a href="https://www.facebook.com" target="_blank"
+            ><img src="img/ic_facebook.png" alt="페이스북"
+          /></a>
+          <a href="https://twitter.com" target="_blank"
+            ><img src="img/ic_twitter.png" alt="트위터"
+          /></a>
+          <a href="https://www.youtube.com" target="_blank"
+            ><img src="img/ic_youtube.png" alt="유튜브"
+          /></a>
+          <a href="https://www.instagram.com" target="_blank">
+            <img src="img/ic_instagram.png" alt="인스타그램"
+          /></a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/items.html b/items.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>Items</title>
+  </head>
+  <body>
+    <h1>Items</h1>
+  </body>
+</html>
diff --git a/privacy.html b/privacy.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>Privacy</title>
+  </head>
+  <body>
+    <h1>Privacy</h1>
+  </body>
+</html>
diff --git a/signin.html b/signin.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>signin</title>
+  </head>
+  <body>
+    <h1>signin</h1>
+  </body>
+</html>