codeit-bootcamp-frontend · addiescode-sj · Apr 10, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/Property 1=md.png b/img/Property 1=md.png
diff --git a/img/Property 1=md@2x.png b/img/Property 1=md@2x.png
diff --git a/img/Property 1=md@3x.png b/img/Property 1=md@3x.png
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/index.css b/index.css
@@ -0,0 +1,182 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: #ffffff;
+  color: #374151;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1120px;
+  margin: 0 auto;
+}
+
+.main {
+  padding: 138px 0;
+  display: grid;
+  grid-template-areas: 
+    "hotItem"
+    "search"
+    "register";
+  gap: 276px;
+  width: 100%;
+}
+
+#login {
+  padding: 16px 34px;
+  background-color: #3692ff;
+  border-radius: 8px;
+  color: #f3f4f6;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+#login:hover {
+  background-color: #1251aa; 
+}
+
+.omg {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 auto;
+  width: 1110px;
+}
+
+.title {
+  padding: 200px 0 0;
+  background-color: #cfe5ff;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.title-p {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+#p {
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 40px;
+}
+
+#button {
+  background-color: #3692ff;
+  padding: 16px 124px;
+  border-radius: 9999px;
+  color: #f9fafb;
+  margin-bottom:100px;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+#button:hover {
+  background-color: #1251aa
+}
+
+
+.home {
+  flex-shrink: 0;
+}
+
+
+section {
+  margin: 0 auto;
+}
+
+.blue-font {
+  font-size: 18px;
+  font-weight: 700;
+  color: #3692ff;
+  line-height: 26px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 140%;
+}
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.hotItem {
+  grid-area: hotItem;
+}
+
+.register {
+  grid-area: register;
+}
+
+.hotItem,
+.register {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  background-color: #fcfcfc;
+  width: 1110px;
+}
+
+.search {
+  grid-area: search;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+  background-color: #fcfcfc;
+  width: 1110px;
+}
+
+.search
+.section-text {
+  text-align: right;
+}
+
+.bottom {
+  background-color: #fcfcfc;
+  padding-top: 138px;
+}
+
+.bottom
+#p {
+  margin-bottom: 160px;
+}
+
+footer {
+  background-color: #111827;
+  height: 160px;
+
+}
+
+.footer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 40px;
+  margin: 0 auto;
+  width: 1110px;
+}
+
+.cccc {
+  text-decoration: none;
+  color: #e5e7eb;
+}
+
+a {
+  cursor: pointer;
+  padding: 0 10px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,125 @@
+<!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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Titillium+Web:wght@300;600&display=swap"
+      rel="stylesheet">
+    <link rel="stylesheet" href="index.css">
+  </head>
+
+<body>
+  <header>
+    <div>
+      <a href="/"><img id="logo" src="img/Property 1=md.png"></a>
+    </div>
+    <a id="login" href="/login">로그인</a>
+  </header>
+
+  <main>
+    <section class="title">
+      <div class="omg">
+        <div class="title-p">
+          <div id="p">
+            일상의 모든 물건을<br>
+            거래해 보세요
+          </div>
+          <a id="button" href="/item">
+            구경하러 가기
+          </a>
+        </div>
+        <img class="home" src="img/Img_home_top.png">
+      </div>
+    </section>
+
+    <div class="main">
+      <section class="hotItem">
+        <img src="img/Img_home_01.png">
+        <div class="section-text">
+          <label class="blue-font">
+            Hot item
+          </label>
+          <h2 class="section-title">
+            인기 상품을<br>
+            확인해 보세요
+          </h2>
+          <p>
+            가장 HOT한 중고거래 물품을 <br>
+            판다 마켓에서 확인해보세요
+          </p>
+        </div>
+      </section>
+
+      <section class="search">
+        <img src="img/Img_home_02.png">
+        <div class="section-text">
+          <label class="blue-font">
+            Search
+          </label>
+          <h2 class="section-title">
+            구매를 원하는<br>
+            상품을 검색하세요
+          </h2>
+          <p>
+            구매 하고싶은 물건은 검색해서<br>
+            쉽게 찾아보세요
+          </p>
+        </div>
+      </section>
+
+      <section class="register">
+        <img src="img/Img_home_03.png">
+        <div class="section-text">
+          <label class="blue-font">
+            Register
+          </label>
+          <h2 class="section-title">
+            판매를 원하는<br>
+            상품을 등록하세요
+          </h2>
+          <p>
+            어떤 물건이든 판매 하고싶은 상품을 <br>
+            쉽게 등록하세요
+          </p>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <div class="bottom">
+    <section class="title">
+      <div class="omg">
+        <div class="title-p">
+          <div id="p">
+            믿을 수 있는<br>
+            판다마켓 중고 거래
+          </div>
+        </div>
+        <img class="home" src="img/Img_home_bottom.png">
+      </div>
+    </section>
+  </div>
+
+  <footer>
+    <div class="footer">
+      <div>
+        ©codeit - 2024
+      </div>
+      <div>
+        <a  class="cccc" href="/privacy">Privacy Policy</a>
+        <a  class="cccc" href="/faq">FAQ</a>
+      </div>
+      <div class="link">
+        <a href="https://www.facebook.com" target="_blank"><img src="img/ic_facebook.png"></a>
+        <a href="https://www.twitter.com" target="_blank"><img src="img/ic_twitter.png"></a>
+        <a href="https://www.youtube.com" target="_blank"><img src="img/ic_youtube.png"></a>
+        <a href="https://www.instagram.com" target="_blank"><img src="img/ic_instagram.png"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>