diff --git a/assets/Img_home_01.png b/assets/Img_home_01.png
new file mode 100644
index 00000000..a2d4be5f
Binary files /dev/null and b/assets/Img_home_01.png differ
diff --git a/assets/Img_home_02.png b/assets/Img_home_02.png
new file mode 100644
index 00000000..faccb9f7
Binary files /dev/null and b/assets/Img_home_02.png differ
diff --git a/assets/Img_home_03.png b/assets/Img_home_03.png
new file mode 100644
index 00000000..ef5972b3
Binary files /dev/null and b/assets/Img_home_03.png differ
diff --git a/assets/Img_home_bottom.png b/assets/Img_home_bottom.png
new file mode 100644
index 00000000..31853d71
Binary files /dev/null and b/assets/Img_home_bottom.png differ
diff --git a/assets/Img_home_top.png b/assets/Img_home_top.png
new file mode 100644
index 00000000..83a4881c
Binary files /dev/null and b/assets/Img_home_top.png differ
diff --git a/assets/favicon.ico b/assets/favicon.ico
new file mode 100644
index 00000000..6fe205b2
Binary files /dev/null and b/assets/favicon.ico differ
diff --git a/assets/ic_facebook.png b/assets/ic_facebook.png
new file mode 100644
index 00000000..58333d45
Binary files /dev/null and b/assets/ic_facebook.png differ
diff --git a/assets/ic_instagram.png b/assets/ic_instagram.png
new file mode 100644
index 00000000..98e24ea6
Binary files /dev/null and b/assets/ic_instagram.png differ
diff --git a/assets/ic_twitter.png b/assets/ic_twitter.png
new file mode 100644
index 00000000..5df0852d
Binary files /dev/null and b/assets/ic_twitter.png differ
diff --git a/assets/ic_youtube.png b/assets/ic_youtube.png
new file mode 100644
index 00000000..f51731d4
Binary files /dev/null and b/assets/ic_youtube.png differ
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 00000000..733c1cfe
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/logo_mo.png b/assets/logo_mo.png
new file mode 100644
index 00000000..2c73c9dc
Binary files /dev/null and b/assets/logo_mo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..78c5ca7d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/assets/favicon.ico">
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <header>
+      <nav>
+        <h1>
+          <a href="/" class="logo">
+            <img src="/assets/logo.png" alt="판다마켓 로고" />
+          </a>
+        </h1>
+        <a href="login.html" class="btn btn-login">로그인</a>
+      </nav>
+    </header>
+    <main>
+      <section class="main-banner">
+        <div class="banner-wrap">
+          <div class="banner-content">
+            <h2>
+              일상의 모든 물건을<br />
+              거래해 보세요
+            </h2>
+            <a href="items.html" class="btn btn-items">구경하러 가기</a>
+          </div>
+          <img src="assets/Img_home_top.png" alt="배너 이미지" />
+        </div>
+      </section>
+      <section class="main-content">
+        <div class="content-wrap">
+          <div class="content-item">
+            <img
+              src="assets/Img_home_01.png"
+              alt="인기 상품을 확인하는 이미지"
+            />
+            <div class="content-text">
+              <p class="badge">Hot item</p>
+              <h2>
+                인기 상품을<br />
+                확인해보세요
+              </h2>
+              <p class="content-desc">
+                가장 핫한 중고거래 물품을<br />
+                판다 마켓에서 확인해 보세요
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="content-wrap">
+          <div class="content-item reverse">
+            <img src="assets/Img_home_02.png" alt="상품 검색 이미지" />
+            <div class="content-text">
+              <p class="badge">Search</p>
+              <h2>
+                구매를 원하는<br />
+                상품을 검색하세요
+              </h2>
+              <p class="content-desc">
+                구매하고 싶은 물품은 검색해서<br />
+                쉽게 찾아보세요
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="content-wrap">
+          <div class="content-item">
+            <img src="assets/Img_home_03.png" alt="판매 등록 이미지" />
+            <div class="content-text">
+              <p class="badge">Register</p>
+              <h2>
+                판매를 원하는<br />
+                상품을 등록하세요
+              </h2>
+              <p class="content-desc">
+                어떤 물건이든 판매하고 싶은 상품을<br />
+                쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="main-bottom">
+        <div class="bottom-wrap">
+          <div class="bottom-content">
+            <h2>
+              믿을 수 있는<br />
+              판다마켓 중고 거래
+            </h2>
+          </div>
+          <img src="assets/Img_home_bottom.png" alt="배너 이미지" />
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="footer-container">
+        <div class="footer-copyright">
+          <p>&copy; codeit - 2024</p>
+        </div>
+        <nav class="footer-links">
+          <ul>
+            <li><a href="privacy.html">Privacy Policy</a></li>
+            <li><a href="faq.html">FAQ</a></li>
+          </ul>
+        </nav>
+        <ul class="footer-social">
+          <li>
+            <a
+              href="https://www.facebook.com/?locale=ko_KR"
+              target="_blank"
+              aria-label="Facebook"
+            >
+              <img src="assets/ic_facebook.png" alt="Facebook" />
+            </a>
+          </li>
+          <li>
+            <a href="https://x.com" target="_blank" aria-label="Twitter">
+              <img src="assets/ic_twitter.png" alt="Twitter" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.youtube.com"
+              target="_blank"
+              aria-label="Youtube"
+            >
+              <img src="assets/ic_youtube.png" alt="Youtube" />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.instagram.com"
+              target="_blank"
+              aria-label="Instagram"
+            >
+              <img src="assets/ic_instagram.png" alt="Instagram" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..35330ad9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,267 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  ul,
+  ol {
+    list-style: none;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  font-family: "Pretendard", sans-serif;
+}
+
+/* haeder 영역 */
+header {
+  width: 100%;
+  max-width: 1920px;
+  min-height: 70px;
+  padding: 9px 0;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.logo > img {
+  vertical-align: middle;
+}
+
+.btn {
+  background-color: #3692ff;
+  color: #f3f4f6;
+}
+
+.btn-login {
+  width: 128px;
+  height: 48px;
+  font-weight: 600;
+  padding: 12px 23px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: center;
+  line-height: 26px;
+}
+
+.btn-login:hover {
+  background-color: #1967d6;
+}
+
+.btn-login:active {
+  background-color: #1251aa;
+}
+
+/* aria-disabled="true" 속성을 사용하여 버튼 비활성화 */
+.btn-login[aria-disabled="true"] {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* main 영역 banner */
+.main-banner {
+  padding-top: 200px;
+  height: 540px;
+  background-color: #cfe5ff;
+}
+
+.banner-wrap {
+  display: flex;
+  height: 340px;
+  justify-content: center;
+}
+
+.banner-content {
+  display: grid;
+  width: 357px;
+  height: 230px;
+  margin-top: 40px;
+  vertical-align: middle;
+}
+
+.banner-content h2 {
+  color: #374151;
+  height: 112px;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.btn-items {
+  background-color: #3692ff;
+  width: 357px;
+  height: 56px;
+  padding: 16px 124px;
+  border-radius: 40px;
+}
+
+.btn-items:hover {
+  background-color: #1967d6;
+}
+
+.btn-items:active {
+  background-color: #1251aa;
+}
+
+/* aria-disabled="true" 속성을 사용하여 버튼 비활성화 */
+.btn-items[aria-disabled="true"] {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.banner-wrap img {
+  width: 746px;
+  height: 340px;
+}
+
+/* main 영역 content */
+.main-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.content-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 720px;
+}
+
+.content-layout {
+  height: 720px;
+}
+
+.content-item {
+  display: flex;
+  align-items: center;
+  background-color: #fcfcfc;
+  border-radius: 12px;
+}
+
+.content-item img {
+  width: 579px;
+  height: 444px;
+  padding-left: 20px;
+}
+
+.reverse {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+.reverse img {
+  padding-left: 0px;
+  padding-right: 14px;
+}
+
+.content-text {
+  display: flex;
+  height: 238px;
+  padding-left: 64px;
+  padding-right: 23.5px;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.content-text .badge {
+  color: #3692ff;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.content-text h2 {
+  color: #374151;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 56px;
+}
+
+.content-text .content-desc {
+  color: #374151;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+}
+
+/* main bottom */
+.main-bottom {
+  padding-top: 143px;
+  height: 540px;
+  background-color: #cfe5ff;
+}
+
+.bottom-wrap {
+  display: flex;
+  height: 340px;
+  justify-content: center;
+}
+
+.bottom-wrap img {
+  height: 397px;
+}
+
+.bottom-content {
+  display: flex;
+  align-items: center;
+  margin-right: 69px;
+}
+
+.bottom-content h2 {
+  color: #374151;
+  height: 112px;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+/* footer 영역 */
+footer {
+  max-width: 1920px;
+  height: 160px;
+  background-color: #111827;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 36px 0 0 0;
+  max-width: 1120px;
+}
+
+.footer-copyright {
+  color: #9ca3af;
+}
+
+.footer-links > ul {
+  display: flex;
+  gap: 30px;
+}
+
+.footer-links a {
+  color: #e5e7eb;
+}
+
+.footer-social {
+  display: flex;
+  gap: 12px;
+}
