codeit-bootcamp-frontend · withyj-codeit · Nov 19, 2024 · Nov 17, 2024 · withyj-codeit · Nov 19, 2024
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png
diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png
diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png
diff --git a/images/home/hero-image.png b/images/home/hero-image.png
diff --git a/images/icons/eye-invisible.svg b/images/icons/eye-invisible.svg
diff --git a/images/icons/eye-visible.svg b/images/icons/eye-visible.svg
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/logo.svg b/images/logo/logo.svg
diff --git a/images/logo/og-image.png b/images/logo/og-image.png
diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg
diff --git a/images/social/google-logo.png b/images/social/google-logo.png
diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg
diff --git a/images/social/kakao-logo.png b/images/social/kakao-logo.png
diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg
diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://panda-market-sample.netlify.app" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:image" content="images/logo/og-image.png" />
+    <meta
+      property="og:description"
+      content="일상의 모든 물건을 거래해 보세요"
+    />
+
+    <title>판다마켓</title>
+    <link rel="icon" href="images/logo/favicon.ico" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="styles/global.css" />
+    <link rel="stylesheet" href="styles/home.css" />
+  </head>
+
+  <body>
+    <header>
+      <a href="index.html" aria-label="홈으로 이동"
+        ><img src="images/logo/logo.svg" alt="판다마켓 로고" width="153"
+      /></a>
+      <a href="login.html" id="loginLink" class="button">로그인</a>
+    </header>
+
+    <main class="with-header">
+      <section id="hero" class="banner">
+        <div class="wrapper">
+          <h1>
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </h1>
+          <a href="items.html" class="button pill-button">구경하러 가기</a>
+        </div>
+      </section>
+
+      <section id="features" class="wrapper">
+        <div class="feature">
+          <img src="images/home/feature1-image.png" alt="인기 상품" />
+          <div class="feature-content">
+            <h2>Hot item</h2>
+            <h1>
+              인기 상품을 <span class="break-on-desktop"><br /></span>확인해
+              보세요
+            </h1>
+            <p class="feature-description">
+              가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div class="feature">
+          <img src="images/home/feature2-image.png" alt="검색 기능" />
+          <div class="feature-content">
+            <h2>Search</h2>
+            <h1>
+              구매를 원하는 <span class="break-on-desktop"><br /></span>상품을
+              검색하세요
+            </h1>
+            <p class="feature-description">
+              구매하고 싶은 물품은 검색해서
+              <br />쉽게 찾아보세요
+            </p>
+          </div>
+        </div>
+        <div class="feature">
+          <img src="images/home/feature3-image.png" alt="판매 상품 등록" />
+          <div class="feature-content">
+            <h2>Register</h2>
+            <h1>
+              판매를 원하는 <span class="break-on-desktop"><br /></span>상품을
+              등록하세요
+            </h1>
+            <p class="feature-description">
+              어떤 물건이든 판매하고 싶은 상품을
+              <br />쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="bottomBanner" class="banner">
+        <div class="wrapper">
+          <h1>
+            믿을 수 있는
+            <br />
+            판다마켓 중고거래
+          </h1>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div id="copyright">©codeit - 2024</div>
+      <div id="footerMenu">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <a
+          href="https://www.facebook.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="판다마켓 페이스북"
+          ><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"
+        /></a>
+        <a
+          href="https://twitter.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="판다마켓 트위터"
+          ><img src="images/social/twitter-logo.svg" alt="트위터" width="20"
+        /></a>
+        <a
+          href="https://www.youtube.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="판다마켓 유튜브"
+          ><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"
+        /></a>
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="판다마켓 인스타그램"
+          ><img
+            src="images/social/instagram-logo.svg"
+            alt="인스타그램"
+            width="20"
+        /></a>
+      </div>
+    </footer>
+  </body>
+</html>