codeit-bootcamp-frontend · GANGYIKIM · Aug 19, 2024 · Aug 9, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/index.html b/index.html
@@ -5,167 +5,18 @@
   <title>판다마켓</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="판다마켓 1주차">
+  <meta name="description" content="판다마켓 구경오라이">
 
-  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="/src/assets/img/panda_head.svg">
+
+  <link rel="stylesheet" href="/src/styles/base.css">
 </head>
 
 <body>
 
-  <header>
-    <div class="header-container">
-      <a href="./">
-        <img src="assets/img/Property 1=sm.png" alt="logo-image">
-      </a>
-
-      <button class="login-btn cursor-pointer btn" type="button" onclick="location.href='./login'">로그인</button>
-    </div>
-  </header>
-
-  <main>
-    <section class="section-top-bottom">
-      <div class="container-top-bottom">
-
-        <div class="container-top-div">
-          <h3 class="h3-top-bottom">
-            일상의 모든 물건을<br>
-            거래해 보세요
-          </h3>
-          <button class="container-top-btn-01 cursor-pointer btn" type="button" onclick="location.href='./items'">구경하러
-            가기</button>
-        </div>
-
-        <img src="assets/img/Img_home_top.png" alt="top-section-img">
-      </div>
-    </section>
-
-
-    <section class="section-main">
-      <div class="container-main">
-
-        <img src="assets/img/Img_home_01.png" alt="section-01-img">
-
-        <div class="container-content">
-          <label for="section-01__container__div__h3">Hot Item</label>
-          <h3 class="h3-main">
-            인기 상품을<br>
-            확인해 보세요
-          </h3>
-          <p>
-            가장 HOT한 중고거래 물품을<br>
-            판다 마켓에서 확인해 보세요
-          </p>
-        </div>
-
-      </div>
-    </section>
-
-
-    <section class="section-main">
-      <div class="container-main">
-
-        <div class="container-content">
-          <label for="section-02__container__div__h3">Search</label>
-          <h3 class="h3-main">
-            구매를 원하는<br>
-            상품을 검색하세요
-          </h3>
-          <p>
-            구매하고 싶은 물품은 검색해서<br>
-            쉽게 찾아보세요
-          </p>
-        </div>
-
-        <img src="assets/img/Img_home_02-1.png" alt="section-02-img">
-
-      </div>
-    </section>
-
-
-    <section class="section-main">
-      <div class="container-main">
-
-        <img src="assets/img/Img_home_03.png" alt="section-03-img">
-
-        <div class="container-content">
-          <label for="section-03__container__div__h3">Register</label>
-          <h3 class="h3-main">
-            판매를 원하는<br>
-            상품을 등록하세요
-          </h3>
-          <p>
-            어떤 물건이든 판매하고 싶은 상품을<br>
-            쉽게 등록하세요
-          </p>
-        </div>
-
-      </div>
-    </section>
-
-    <section class="section-top-bottom">
-      <div class="container-top-bottom c-bottom">
-
-        <div>
-          <h3 class="h3-top-bottom">
-            믿을 수 있는<br>
-            판다마켓 중고 거래
-          </h3>
-        </div>
-
-        <img src="assets/img/Img_home_bottom.png" alt="bottom-section-img">
-
-      </div>
-    </section>
-
-  </main>
-
-  <footer class="footer">
-    <div class="footer-container">
-
-      <div>
-        <p class="footer-p" style="color: #9CA3AF;">&#x24D2;codeit - 2024</p>
-      </div>
-
-      <div style="display: flex; gap: 30px;">
-        <p class="footer-p"><a href="./privacy" style="color: #E5E7EB;">Privacy Policy</a></p>
-        <p class="footer-p"><a href="./faq" style="color: #E5E7EB;">FAQ</a></p>
-      </div>
-
-      <div>
-        <nav>
-          <ul>
-            <li class="cursor-pointer"><a href="https://www.facebook.com/codeit.kr" target="_blank"
-                rel="noopener noreferrer"><img src="assets/img/ic_facebook.png" alt="facebook-icon"></a></li>
-            <li class="cursor-pointer"><a href="https://x.com/codeitkr" target="_blank" rel="noopener noreferrer"><img
-                  src="assets/img/ic_twitter.png" alt="x-icon"></a></li>
-            <li class="cursor-pointer"><a href="https://www.youtube.com/channel/UCCM79CPm2WbBYTRaiNEExbg"
-                target="_blank" rel="noopener noreferrer"><img src="assets/img/ic_youtube.png" alt="youtube-icon"></a>
-            </li>
-            <li class="cursor-pointer"><a href="https://www.instagram.com/codeit_kr/" target="_blank"
-                rel="noopener noreferrer"><img src="assets/img/ic_instagram.png" alt="instagram-icon"></a></li>
-          </ul>
-        </nav>
-      </div>
-
-    </div>
-  </footer>
-
-
-  <script>
-    window.addEventListener('scroll', () => {
-      localStorage.setItem('scrollPosition', window.scrollY);
-    });
-
-    window.addEventListener('load', () => {
-      const savedPosition = localStorage.getItem('scrollPosition');
-      if (savedPosition !== null) {
-        window.scrollTo(0, parseInt(savedPosition, 10));
-      }
-    });
-
-
-  </script>
+  <div data-include-html="/src/pages/home.html"></div>
 
+  <script src="/src/js/IncludeHtml.js"></script>
 </body>
 
 </html>
diff --git a/src/assets/img/Img_home_01.png b/src/assets/img/Img_home_01.png
diff --git a/src/assets/img/Img_home_02-1.png b/src/assets/img/Img_home_02-1.png
diff --git a/src/assets/img/Img_home_03.png b/src/assets/img/Img_home_03.png
diff --git a/src/assets/img/Img_home_bottom.png b/src/assets/img/Img_home_bottom.png
diff --git a/src/assets/img/Img_home_top.png b/src/assets/img/Img_home_top.png
diff --git a/src/assets/img/btn_visibility_off.svg b/src/assets/img/btn_visibility_off.svg
diff --git a/src/assets/img/btn_visibility_on.svg b/src/assets/img/btn_visibility_on.svg
diff --git a/src/assets/img/hamster1.jpg b/src/assets/img/hamster1.jpg
diff --git a/src/assets/img/hamster2.jpg b/src/assets/img/hamster2.jpg
diff --git a/src/assets/img/hamster3.jpg b/src/assets/img/hamster3.jpg
diff --git a/src/assets/img/ic_facebook.png b/src/assets/img/ic_facebook.png
diff --git a/src/assets/img/ic_google.png b/src/assets/img/ic_google.png
diff --git a/src/assets/img/ic_instagram.png b/src/assets/img/ic_instagram.png
diff --git a/src/assets/img/ic_kakao.png b/src/assets/img/ic_kakao.png
diff --git a/src/assets/img/ic_twitter.png b/src/assets/img/ic_twitter.png
diff --git a/src/assets/img/ic_youtube.png b/src/assets/img/ic_youtube.png
diff --git a/src/assets/img/logo_lg.png b/src/assets/img/logo_lg.png
diff --git a/src/assets/img/logo_md.png b/src/assets/img/logo_md.png
diff --git a/src/assets/img/logo_sm.png b/src/assets/img/logo_sm.png
diff --git a/src/assets/img/logo_typo.png b/src/assets/img/logo_typo.png
diff --git a/src/assets/img/panda_head.svg b/src/assets/img/panda_head.svg
diff --git a/src/components/Footer.html b/src/components/Footer.html
@@ -0,0 +1,31 @@
+<footer class="footer">
+  <div class="footer-content">
+    <div>
+      <p class="footer-letter" style="color: #9CA3AF;">&#x24D2;codeit - 2024</p>
+    </div>
+    <div style="display: flex; gap: 30px;">
+      <p class="footer-letter"><a href="/src/pages/privacy" style="color: #E5E7EB;">Privacy Policy</a></p>
+      <p class="footer-letter"><a href="/src/pages/faq" style="color: #E5E7EB;">FAQ</a></p>
+    </div>
+    <div>
+      <nav>
+        <ul>
+          <a href="https://www.facebook.com/codeit.kr" target="_blank" rel="noopener noreferrer">
+            <li><img src="/src/assets/img/ic_facebook.png" alt="페이스북"></li>
+          </a>
+          <a href="https://x.com/codeitkr" target="_blank" rel="noopener noreferrer">
+            <li><img src="/src/assets/img/ic_twitter.png" alt="X"></li>
+          </a>
+          <a href="https://www.youtube.com/channel/UCCM79CPm2WbBYTRaiNEExbg" target="_blank" rel="noopener noreferrer">
+            <li><img src="/src/assets/img/ic_youtube.png" alt="유튜브">
+            </li>
+          </a>
+          <a href="https://www.instagram.com/codeit_kr/" target="_blank" rel="noopener noreferrer">
+            <li><img src="/src/assets/img/ic_instagram.png" alt="인스타그램"></li>
+          </a>
+        </ul>
+      </nav>
+    </div>
+
+  </div>
+</footer>
diff --git a/src/components/Header.html b/src/components/Header.html
@@ -0,0 +1,8 @@
+<header>
+  <div class="header">
+    <a href="/src/">
+      <img src="/src/assets/img/logo_sm.png" alt="로고 이미지">
+    </a>
+    <a href="/src/pages/login/"><button class="login-btn is-cursor-pointer btn" type="button">로그인</button></a>
+  </div>
+</header>
diff --git a/src/components/Home.html b/src/components/Home.html
@@ -0,0 +1,79 @@
+<main>
+  <section class="top-bottom">
+    <div class="top-bottom-content">
+      <div class="top-letter-wrapper">
+        <h3>
+          일상의 모든 물건을<br>
+          거래해 보세요
+        </h3>
+        <a href="/src/pages/items/"><button class="top-btn is-cursor-pointer btn" type="button">구경하러 가기</button></a>
+      </div>
+      <img src="/src/assets/img/img_home_top.png" alt="배너 이미지">
+    </div>
+  </section>
+
+  <section class="main-items">
+    <div class="item-content">
+      <img src="/src/assets/img/img_home_01.png" alt="인기 이미지">
+      <div class="item-letter-wrapper">
+        <h5>Hot Item</h5>
+        <h3 id="first-label" class="item-big-letter">
+          인기 상품을<br>
+          확인해 보세요
+        </h3>
+        <p>
+          가장 HOT한 중고거래 물품을<br>
+          판다 마켓에서 확인해 보세요
+        </p>
+      </div>
+    </div>
+  </section>
+
+
+  <section class="main-items">
+    <div class="item-content">
+      <div class="item-letter-wrapper">
+        <h5>Search</h5>
+        <h3 id="second-label" class="item-big-letter">
+          구매를 원하는<br>
+          상품을 검색하세요
+        </h3>
+        <p>
+          구매하고 싶은 물품은 검색해서<br>
+          쉽게 찾아보세요
+        </p>
+      </div>
+      <img src="/src/assets/img/img_home_02-1.png" alt="구매 이미지">
+    </div>
+  </section>
+
+  <section class="main-items">
+    <div class="item-content">
+      <img src="/src/assets/img/img_home_03.png" alt="판매 이미지">
+      <div class="item-letter-wrapper">
+        <h5>Register</h5>
+        <h3 id="third-label" class="item-big-letter">
+          판매를 원하는<br>
+          상품을 등록하세요
+        </h3>
+        <p>
+          어떤 물건이든 판매하고 싶은 상품을<br>
+          쉽게 등록하세요
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section class="top-bottom">
+    <div class="top-bottom-content bottom-content">
+      <div>
+        <h3>
+          믿을 수 있는<br>
+          판다마켓 중고 거래
+        </h3>
+      </div>
+      <img src="/src/assets/img/img_home_bottom.png" alt="소개 이미지">
+    </div>
+  </section>
+
+</main>
diff --git a/src/components/faq/Faq.html b/src/components/faq/Faq.html
@@ -0,0 +1,9 @@
+<div style="display: flex; flex-direction: column; align-items: center;">
+  <img src="/src/assets/img/hamster1.jpg" width="768px" height="524px">
+  <br>
+  <br>
+  <p style="font-size: 3rem;">멀보노?</p>
+  <br>
+  <br>
+  <a href="/src/"><button style="cursor: pointer; background-color: beige; color: blueviolet; border-radius: 24px; width: 128px; height: 64px;" type="button">돌아가기</button></a>
+</div>
diff --git a/src/components/items/Items.html b/src/components/items/Items.html
@@ -0,0 +1,9 @@
+<div style="display: flex; flex-direction: column; align-items: center;">
+  <img src="/src/assets/img/hamster2.jpg" width="768px" height="524px">
+  <br>
+  <br>
+  <p style="font-size: 3rem;">멀보노?</p>
+  <br>
+  <br>
+  <a href="/src/"><button style="cursor: pointer; background-color: beige; color: blueviolet; border-radius: 24px; width: 128px; height: 64px;" type="button">돌아가기</button></a>
+</div>