codeit-bootcamp-frontend · GANGYIKIM · Feb 25, 2025 · Feb 22, 2025 · Feb 22, 2025 · Feb 22, 2025
diff --git a/Img_home_01.png b/Img_home_01.png
diff --git a/Img_home_02.png b/Img_home_02.png
diff --git a/Img_home_03.png b/Img_home_03.png
diff --git a/Img_home_bottom.png b/Img_home_bottom.png
diff --git a/Img_home_top.png b/Img_home_top.png
diff --git a/home.css b/home.css
@@ -0,0 +1,151 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  font-family: 'Pretendard', sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: 100%;
+}
+
+header {
+  max-width: 1520px;
+  min-width: 1120px;
+  width: 100%;
+  padding: 9px 200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.login_button {
+  width: 128px;
+  height: 48px;
+  padding: 12px 23px;
+  border-radius: 8px;
+  background-color: #3692FF;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+  color: #F3F4F6;
+  line-height: 26px;
+}
+
+.top, .bottom {
+  height: 540px;
+  background-color: #CFE5FF;
+}
+
+.top {
+  padding-top: 200px;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+main section {
+  padding: 138px 0;
+}
+
+main .container {
+  display: flex;
+  justify-content: center;
+  gap: 48px;
+  width: 988px;
+  height: 444px;
+  margin: 0 auto;
+  border-radius: 12px;
+  background-color: #FCFCFC;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 32px;
+}
+
+.content.right {
+  text-align: right;
+}
+
+.badge {
+  font-size: 18px;
+  font-weight: 700;
+  color: #3692FF;
+  line-height: 26px;
+}
+
+.content-title {
+  margin: 0;
+  font-size: 40px;
+  font-weight: 700;
+  color: #374151;
+  line-height: 56px;
+}
+
+.shopping-button {
+  width: 360px;
+  height: 56px;
+  padding: 16px 124px;
+  border-radius: 40px;
+  background-color: #3692FF;
+  font-size: 20px;
+  font-weight: 600;
+  text-decoration: none;
+  color: #F9FAFB;
+}
+
+.description {
+  font-size: 24px;
+  font-weight: 500;
+  color: #374151;
+  line-height: 32px;
+}
+
+.bottom {
+  padding-top: 143px;
+}
+
+footer {
+  height: 160px;
+  padding: 32px 0;
+  background-color: #111827;
+}
+
+footer .container{
+  max-width: 1520px;
+  min-width: 1120px;
+  width: 100%;
+  padding: 0 200px;
+  display: flex;
+  justify-content: space-between;
+}
+
+footer .codeit {
+  color: #9CA3AF;
+}
+
+footer .link {
+  display: flex;
+  gap: 30px;
+}
+
+footer .link a {
+  text-decoration: none;
+  color: #E5E7EB;
+}
+
+footer .sns {
+  display: flex;
+  gap: 12px;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="home.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"/>
+</head>
+<body>
+    <header>
+            <a class="main_page" href="/"><img class="logo" src="logo.png" alt="판다마켓 로고"></a>
+            <a class="login_button" href="/login">로그인</a>
+    </header>
+
+    <section class="top">
+        <div class="container">
+            <div class="content">
+                    <h1 class="content-title">
+                        일상의 모든 물건을<br>
+                        거래해 보세요
+                    </h1>
+                    <a class="shopping-button" href="/items">구경하러 가기</a>
+            </div>
+            <img src="Img_home_top.png">
+        </div>
+    </section>
+
+    <main>
+        <section>
+            <div class="container">
+                <img src="Img_home_01.png">
+                <div class="content">
+                    <p class="badge">Hot item</p>
+                    <h1 class="content-title">인기 상품을<br>확인해보세요</h1>
+                    <p class="description">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="container">
+                <div class="content right">
+                    <p class="badge">Search</p>
+                    <h1 class="content-title">구매를 원하는<br>상품을 검색하세요</h1>
+                    <p class="description">구매하고 싶은 물품을 검색해서<br>쉽게 찾아보세요</p>
+                </div>
+                <img src="Img_home_02.png">
+            </div>
+        </section>
+        <section>
+            <div class="container">
+                <img src="Img_home_03.png">
+                <div class="content">
+                    <p class="badge">Register</p>
+                    <h1 class="content-title">판매를 원하는<br>상품을 등록하세요</h1>
+                    <p class="description">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <section class="bottom">
+        <div class="container">
+            <div class="content">
+                <h1 class="content-title">
+                    믿을 수 있는<br>
+                    판다마켓 중고 거래
+                </h1>
+            </div>
+            <img src="Img_home_bottom.png">
+        </div>
+    </section>
+
+    <footer>
+        <div class="footer-wrap container">
+            <span class="codeit">@codeit - 2024</span>
+            <div class="link">
+                <a href="/privacy">Privacy Policy</a>
+                <a href="/faq">FAQ</a>
+            </div>
+            <div class="sns">
+                <a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="ic_facebook.png" alt="facebook"></a>
+                <a href="https://x.com/?lang=ko" target="_blank"><img src="ic_twitter.png" alt="twitter"></a>
+                <a href="https://www.youtube.com/" target="_blank"><img src="ic_youtube.png" alt="youtube"></a>
+                <a href="https://www.instagram.com/" target="_blank"><img src="ic_instagram.png" alt="instagram"></a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/ic_facebook.png b/ic_facebook.png
diff --git a/ic_instagram.png b/ic_instagram.png
diff --git a/ic_twitter.png b/ic_twitter.png
diff --git a/ic_youtube.png b/ic_youtube.png
diff --git a/logo.png b/logo.png