codeit-bootcamp-frontend · sori4606 · Oct 29, 2024 · Nov 5, 2024 · Nov 12, 2024
diff --git a/12-Sprint-Mission b/12-Sprint-Mission
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>
+    faq 페이지
+  </body>
+</html>
diff --git a/images/bannerPanda.png b/images/bannerPanda.png
diff --git a/images/bottomBannerPanda.png b/images/bottomBannerPanda.png
diff --git a/images/closeEyeIcon.png b/images/closeEyeIcon.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/firstMain.png b/images/firstMain.png
diff --git a/images/googleLogo.png b/images/googleLogo.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/kakaoLogo.png b/images/kakaoLogo.png
diff --git a/images/logoPanda.png b/images/logoPanda.png
diff --git a/images/mainHotItem.png b/images/mainHotItem.png
diff --git a/images/mainRegister.png b/images/mainRegister.png
diff --git a/images/mainSearch.png b/images/mainSearch.png
diff --git a/images/openEyeIcon.png b/images/openEyeIcon.png
diff --git a/images/panda.png b/images/panda.png
diff --git a/images/secondHot.png b/images/secondHot.png
diff --git a/images/secondRegister.png b/images/secondRegister.png
diff --git a/images/secondSearch.png b/images/secondSearch.png
diff --git a/images/thirdMain.png b/images/thirdMain.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/youtube.png b/images/youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script
+      src="https://kit.fontawesome.com/def66b134a.js"
+      crossorigin="anonymous"
+    ></script>
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <header>
+      <div class="headerContainer">
+        <a href="/" rel="rootpage">
+          <img src="images/logoPanda.png" alt="판다 로고 이미지" />
+        </a>
+
+        <div class="headerLogin">
+          <a href="login.html">
+            <button type="button">로그인</button>
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <section>
+        <div class="banner">
+          <div class="banner__container">
+            <div class="banner__container__text">
+              <div>
+                일상의 모든 물건을
+                거래해 보세요
+              </div>
+              <a href="items.html">
+                <button type="button">구경하러 가기</button>
+              </a>
+            </div>
+            <img src="images/bannerPanda.png" alt="첫번째 배너 판다 이미지" />
+            >
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="main-section main-section--hot-items">
+          <div class="main-section__container">
+            <div class="main-section__img-box">
+              <img src="images/mainHotItem.png" alt="메인 hot item 이미지" />
+            </div>
+            <div class="main-section__text-box">
+              <div class="main-section__title">Hot item</div>
+              <div class="main-section__heading">인기 상품을 확인해 보세요</div>
+              <div class="main-section__description">
+                가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="main-section main-section--search">
+          <div class="main-section__container">
+            <div class="main-section__img-box">
+              <img src="images/mainSearch.png" alt="메인 search 이미지" />
+            </div>
+            <div class="main-section__text-box">
+              <div class="main-section__title">Search</div>
+              <div class="main-section__heading">
+                구매를 원하는 상품을 검색하세요
+              </div>
+              <div class="main-section__description">
+                구매하고 싶은 물품은 검색해서 쉽게 찾아보세요
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="main-section main-section--register">
+          <div class="main-section__container">
+            <div class="main-section__img-box">
+              <img src="images/mainRegister.png" alt="메인 register 이미지" />
+            </div>
+            <div class="main-section__text-box">
+              <div class="main-section__title">Register</div>
+              <div class="main-section__heading">
+                판매를 원하는 상품을 등록하세요
+              </div>
+              <div class="main-section__description">
+                어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="bottom-banner">
+          <div class="bottom-banner__container">
+            <div class="bottom-banner__text-box">
+              <div>
+                믿을 수 있는<br />
+                판다마켓 중고 거래
+              </div>
+            </div>
+            <div class="bottom-banner__img-box">
+              <img
+                src="images/bottomBannerPanda.png"
+                alt="하단배너 판다 이미지"
+              />
+            </div>
+            >
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="footer">
+        <div>@codeit - 2024</div>
+        <div>
+          <a href="privacy.html">Privacy Policy</a>
+          <a href="faq.html">FAQ</a>
+        </div>
+        <div>
+          <a href="https://www.facebook.com/" target="_blank">
+            <img src="images/facebook.png" alt="facebookIcon" />
+          </a>
+          <a href="https://x.com/" target="_blank">
+            <img src="images/twitter.png" alt="twitterIcon" />
+          </a>
+          <a href="https://www.youtube.com/" target="_blank">
+            <img src="images/youtube.png" alt="youtubeIcon" />
+          </a>
+          <a href="https://www.instagram.com/" target="_blank">
+            <img src="images/instagram.png" alt="instagramIcon" />
+          </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>item</title>
+  </head>
+  <body>
+    <div>아이템페이지</div>
+  </body>
+</html>