codeit-bootcamp-frontend · SeungHyunOK · Jul 28, 2024 · Aug 2, 2024
diff --git a/8-Sprint-Mission.code-workspace b/8-Sprint-Mission.code-workspace
@@ -0,0 +1,13 @@
+{
+  "folders": [
+	{
+		"path": "."
+	},
+	{
+		"path": "../../../../Downloads/FE-Sprint-Mission2-week2"
+	}
+],
+  "settings": {
+    "liveServer.settings.multiRootWorkspaceName": "8-Sprint-Mission"
+  }
+}
diff --git a/faq.html b/faq.html
@@ -0,0 +1,32 @@
+<!-- 
+    <VS Code에서 HTML 기본구조 자동생성하기>
+
+    - `!` 입력 후 tab 키를 누르면 HTML 기본 양식이 입력됩니다.
+
+    - 이때, <html lang="en"> 부분을 매번 lang="ko"로 바꾸는 것이 번거로우니 양식을 바꿔봅시다.
+      command/ctrl + 쉼표 를 눌러 VS Code 설정창을 열고 emmet을 검색해 주세요. 
+      스크롤을 내려 Emmet: Variables 섹션에 Add Item을 누르고 lang Item의 Value를 ko로 바꿔 입력해 주세요. 
+      마지막으로 Add Item 버튼을 눌러 저장하면 끝!
+-->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 기본 양식 생성 후, 제목을 수정하고 해당 페이지에 적용할 파비콘 및 스타일시트를 추가해 주세요. -->
+    <title>판다마켓 - FAQ</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" />
+  </head>
+
+  <body>
+    <h1>임시 FAQ 페이지</h1>
+  </body>
+</html>
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/icon/EyeClose.svg b/images/icon/EyeClose.svg
diff --git a/images/icon/EyeOpen.svg b/images/icon/EyeOpen.svg
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png
diff --git a/images/social/GoogleIcon.svg b/images/social/GoogleIcon.svg
diff --git a/images/social/KakaoIcon.svg b/images/social/KakaoIcon.svg
diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg
diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg
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,130 @@
+<!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="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="/"
+        ><img
+          src="images/logo/panda-market-logo.png"
+          alt="판다마켓 홈"
+          width="153"
+      /></a>
+      <a href="signIn.html" id="loginLinkButton" class="button">로그인</a>
+    </header>
+    <main>
+      <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="인기 상품"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>인기 상품을<br />확인해 보세요</h1>
+            <p class="feature-description">
+              가장 HOT한 중고거래 물품을<br />판다마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div class="feature">
+          <div class="feature-content">
+            <h2 class="feature-tag">Search</h2>
+            <h1>구매를 원하는<br />상품을 검색하세요</h1>
+            <p class="feature-description">
+              구매하고 싶은 물품은 검색해서
+              <br />쉽게 찾아보세요
+            </p>
+          </div>
+          <img
+            src="images/home/feature2-image.png"
+            alt="검색 기능"
+            width="50%"
+          />
+        </div>
+        <div class="feature">
+          <img
+            src="images/home/feature3-image.png"
+            alt="판매 상품 등록"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Register</h2>
+            <h1>판매를 원하는<br />상품을 등록하세요</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>©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"
+          ><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"
+        /></a>
+        <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"
+          ><img src="images/social/twitter-logo.svg" alt="트위터" width="20"
+        /></a>
+        <a
+          href="https://www.youtube.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"
+        /></a>
+        <a
+          href="https://www.instagram.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          ><img
+            src="images/social/instagram-logo.svg"
+            alt="인스타그램"
+            width="20"
+        /></a>
+      </div>
+    </footer>
+  </body>
+</html>