codeit-bootcamp-frontend · addiescode-sj · Apr 3, 2025 · Mar 31, 2025 · Apr 2, 2025
diff --git a/faq.html b/faq.html
diff --git a/global.css b/global.css
@@ -0,0 +1,7 @@
+body {
+  font-family: "Pretendard-Regular", Arial, Helvetica, sans-serif;
+  padding: 0;
+  margin: 0;
+}
+
+
diff --git a/image/Img_home_01.png b/image/Img_home_01.png
diff --git a/image/Img_home_02.png b/image/Img_home_02.png
diff --git a/image/Img_home_03.png b/image/Img_home_03.png
diff --git a/image/Img_home_bottom.png b/image/Img_home_bottom.png
diff --git a/image/Img_home_top.png b/image/Img_home_top.png
diff --git a/image/ic_facebook.png b/image/ic_facebook.png
diff --git a/image/ic_instagram.png b/image/ic_instagram.png
diff --git a/image/ic_twitter.png b/image/ic_twitter.png
diff --git a/image/ic_youtube.png b/image/ic_youtube.png
diff --git a/image/logo.png b/image/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="global.css" />
+  <title>판다마켓</title>
+</head>
+
+<body>
+  <header>
+    <nav class="nav-content">
+      <a href="/">
+        <img src="image/logo.png" alt="판다마켓 로고" />
+      </a>
+      <a href="/login">
+        <button class="login-button">로그인</button>
+      </a>
+    </nav>
+  </header>
+  <main>
+    <section class="hero">
+      <div class="hero-content">
+        <div>
+          <h1 class="hero-text">
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </h1>
+          <a href="/items">
+            <button class="hero-button">구경하러 가기</button>
+          </a>
+        </div>
+        <img src="image/Img_home_top.png" alt="판다마켓 히어로 이미지" />
+      </div>
+    </section>
+    <article class="feature-section">
+      <div class="feature">
+        <img src="image/Img_home_01.png" alt="카드 이미지 1번" />
+        <div class="feature-content">
+          <span>Hot Item</span>
+          <h2>
+            인기 상품을<br />
+            확인해 보세요
+          </h2>
+          <p>
+            가장 HOT한 중고거래 물품을<br />
+            판다마켓에서 확인해 보세요
+          </p>
+        </div>
+      </div>
+    </article>
+    <article class="feature-section">
+      <div class="feature">
+        <div class="feature-content-rev">
+          <span>Search</span>
+          <h2>
+            구매를 원하는<br />
+            상품을 검색하세요
+          </h2>
+          <p>
+            구매하고 싶은 물품은 검색해서<br />
+            쉽게 찾아보세요
+          </p>
+        </div>
+        <img src="image/Img_home_02.png" alt="카드 이미지 2번" />
+      </div>
+    </article>
+    <article class="feature-section">
+      <div class="feature">
+        <img src="image/Img_home_03.png" alt="카드 이미지 3번" />
+        <div class="feature-content">
+          <span>Register</span>
+          <h2>
+            판매를 원하는<br />
+            상품을 등록하세요
+          </h2>
+          <p>
+            어떤 물건이든 판매하고 싶은 상품을<br />
+            쉽게 등록하세요
+          </p>
+        </div>
+      </div>
+    </article>
+  </main>
+  <footer>
+    <div class="footer-content">
+      <h1>
+        믿을 수 있는<br />
+        판다마켓 중고거래
+      </h1>
+      <img src="image/Img_home_bottom.png" alt="판다마켓 푸터 이미지" />
+    </div>
+    <div class="footer-info">
+      <div class="footer-info-content">
+        <div class="footer-copyright">
+          <span>©codeit - 2024</span>
+        </div>
+        <div class="footer-menu">
+          <a href="/privacy.html"><span>Privacy Policy</span></a>
+          <a href="/faq.html"><span>FAQ</span></a>
+        </div>
+        <div class="footer-social">
+          <a href="https://facebook.com" target="_blank"><img src="image/ic_facebook.png" width="20px" height="20px"
+              alt="판다마켓 페이스북" /></a>
+          <a href="https://x.com" target="_blank"><img src="image/ic_twitter.png" width="20px" height="20px"
+              alt="판다마켓 트위터" /></a>
+          <a href="https://youtube.com" target="_blank"><img src="image/ic_youtube.png" width="20px" height="20px"
+              alt="판다마켓 유튜브" /></a>
+          <a href="https://instagram.com" target="_blank"><img src="image/ic_instagram.png" width="20px" height="20px"
+              alt="판다마켓 인스타그램" /></a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</body>
+
+</html>
diff --git a/items.html b/items.html
diff --git a/login.html b/login.html
diff --git a/privacy.html b/privacy.html
diff --git a/style.css b/style.css
@@ -0,0 +1,191 @@
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff") format("woff");
+}
+
+:root {
+  --primary-color: #3692ff;
+}
+
+header {
+  background-color: #fff;
+  height: 70px;
+  padding: 9px;
+  display: flex;
+  justify-content: center;
+}
+
+header img {
+  height: 51px;
+  cursor: pointer;
+}
+
+.nav-content {
+  width: 1120px;
+  margin: 0px 200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.login-button {
+  background-color: var(--primary-color);
+  width: 128px;
+  height: 48px;
+  border-radius: 8px;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+}
+
+.hero {
+  height: 540px;
+  background-color: #cfe5ff;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+}
+
+.hero-content {
+  width: 1120px;
+  display: flex;
+  justify-content: center;
+}
+
+.hero-text {
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 140%;
+}
+
+.hero-button {
+  height: 56px;
+  padding: 16px 124px;
+  background-color: var(--primary-color);
+  color: #fff;
+  border: 0;
+  border-radius: 40px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+  cursor: pointer;
+}
+
+.hero img {
+  height: 340px;
+}
+
+.feature-section {
+  height: 720px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.feature {
+  height: 444px;
+  background-color: #fcfcfc;
+  display: flex;
+  align-items: center;
+  gap: 64px;
+  border-radius: 12px;
+  padding: 0px 12px;
+}
+
+.feature-content {
+  display: flex;
+  flex-direction: column;
+  margin-right: 24px;
+  width: 350px;
+}
+
+.feature-content-rev {
+  display: flex;
+  text-align: end;
+  flex-direction: column;
+  margin-left: 24px;
+  width: 350px;
+}
+
+.feature span {
+  color: var(--primary-color);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+}
+
+.feature h2 {
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 140%;
+  letter-spacing: 2%;
+  margin: 0;
+}
+
+.feature p {
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #cfe5ff;
+}
+
+.footer-content {
+  width: 1120px;
+  height: 540px;
+  display: flex;
+  justify-content: end;
+  align-items: end;
+  gap: 69px;
+}
+
+.footer-content h1 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 140%;
+  margin: 0;
+}
+
+.footer-info {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  background-color: #111827;
+  height: 160px;
+  padding: 32px 0px;
+}
+
+.footer-info-content {
+  width: 1120px;
+  height: fit-content;
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer-copyright {
+  color: #9ca3af;
+}
+
+.footer-menu {
+  color: #fff;
+  display: flex;
+  gap: 30px;
+}
+
+.footer-social {
+  display: flex;
+  gap: 12px;
+}
+
+.footer-social img {
+  cursor: pointer;
+}