codeit-bootcamp-frontend · seong5 · Feb 27, 2025
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/Property 1=sm.png b/Property 1=sm.png
diff --git a/Rectangle 2993.png b/Rectangle 2993.png
diff --git a/btn_large.png b/btn_large.png
diff --git a/btn_small.png b/btn_small.png
diff --git a/desktop_02.png b/desktop_02.png
diff --git a/desktop_03.png b/desktop_03.png
diff --git a/desktop_04.png b/desktop_04.png
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/index.html b/index.html
@@ -0,0 +1,86 @@
+<!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="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- 네비게이션 -->
+    <header class="nav-bar">
+      <a href="'/'" target="_blank">
+        <img  class="logo" src="Property 1=sm.png">
+      </a>
+      <a href="/login" target="_blank">
+        <img class="login-btn" src="btn_small.png">
+      </a>  
+    </header>
+  <!--본문 시작-->
+  <figure>
+    <div class="home-top">
+      <p class="words"> 일상의 모든 물건을<br>거래해 보세요</p>
+      <img src="Img_home_top.png" class="top-image">
+      <a href="/items" target="_blank">
+        <img class="show-more-btn" src="btn_large.png" alt="구경하러 가기">
+      </a>
+    </div>
+  </figure>
+  <figure class="first-p">
+      <img class="hot-item" src="desktop_02.png">
+  </figure>
+  <figure class="second-p">
+      <img class="search-item" src="desktop_03.png">
+  </figure>
+  <figure class="third-p">
+      <img class="resister-item" src="desktop_04.png">
+  </figure>
+<section>
+  <div class="home-bottom">
+    <p class="bottom-word">믿을 수 있는<br> 판다마켓 중고 거래</p>
+    <img src="Img_home_bottom.png" class="bottom-img">
+  </div>  
+</section>
+
+<!--푸터 시작-->
+<footer class="footer-style">
+  <span class="footer-inner">
+    <span class="codeit-2024">@codeit - 2024</span>
+
+    <!--Privacy Policy , FAQ 시작-->
+    <span class="footer-link">
+      <a href="/privacy">
+        <span class="Policy">Privacy Policy</span>
+      </a>
+      <a href="/faq">
+        <span class="FAQ">FAQ</span>
+      </a>
+    </span>
+
+  <!--소셜미디어 링크 시작-->
+  <div class="social-ic">
+    <a href="https://www.facebook.com/" target="_blank">
+      <span class="ic_fb">
+        <img src="ic_facebook.png">   
+      </span>
+    </a>
+    <a href="https://x.com/" target="_blank">
+      <span class="ic_tw">
+        <img src="ic_twitter.png">
+      </span>
+    </a>
+    <a href="https://www.youtube.com/" target="_blank"> 
+      <span class="ic_yt">
+        <img src="ic_youtube.png">
+      </span>
+    </a>
+    <a href="https://www.instagram.com/" target="_blank"> 
+      <span class="ic_ig">
+        <img src="ic_instagram.png">
+      </span>
+    </a>
+  </span>    
+  </div>
+</footer>  
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,196 @@
+.nav-bar{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1920px;
+  height: 70px;
+  margin: 0 200px;
+
+}
+.logo{
+  width: 153px;
+  height: 51px;
+  cursor: pointer;
+  margin-left: 0;
+}
+
+.login-btn{
+  width: 128px;
+  height: 48px;
+  cursor: pointer;
+  margin: 0 200px;
+}
+
+@media (min-width: 1920px) {
+  .nav-bar{
+    padding: 9px 10vw;
+  }
+
+}
+
+
+.home-top{
+  background-color: #cfe5ff;
+  width: 100%;
+  min-width: 1920px;
+  height: 540px;
+  display:flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.words{
+  font-family: Pretendard;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 56px;
+  color: #374151;
+  width: 357px;
+  height: 112px;
+  margin-bottom: 200px;
+
+}
+
+.top-image{
+  position: relative;
+  width: 746px;
+  height: 340px;
+  margin-right: 360px;
+}
+
+.show-more-btn{
+  position: absolute;
+  top: 470px;
+  left: 30px;
+  width: 357px;
+  height: 56px;
+  padding: 16px 240px;
+  cursor: pointer;
+}
+
+.first-p{
+  width: 1920px;
+  height: 720px;
+  padding: 138px 466px;
+  background-color: #ffffff;
+}
+
+.second-p{
+  width: 1920px;
+  height: 720px;
+  padding: 138px 466px;
+  background-color: #ffffff;
+}
+
+.third-p{
+  width: 1920px;
+  height: 720px;
+  padding: 138px 466px;
+  background-color: #ffffff;
+}
+
+
+.hot-item{
+  width: 988px;
+  height: 444px;
+  display: block;
+  margin: 0 auto;
+  background-color: #fcfcfc;
+}
+
+.search-item{
+  width: 988px;
+  height: 444px;
+  display: block;
+  margin: 0 auto;
+  background-color: #fcfcfc;
+}
+
+.resister-item{
+  width: 988px;
+  height: 444px;
+  display: block;
+  margin: 0 auto;
+  background-color: #fcfcfc;
+}
+
+.home-bottom{
+  background-color: #cfe5ff;
+  width: 100vw;
+  min-width: 1920px;
+  height: 540px;
+  display:flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.bottom-word{
+  font-family: Pretendard;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 56px;
+  color: #374151;
+  width: 357px;
+  height: 112px;
+  margin-bottom: 200px;
+}
+
+.bottom-img{
+  position: relative;
+  width: 746px;
+  height: 340px;
+  margin-right: 360px;
+}
+
+
+.footer-style{
+  background-color: #111827;
+  width: 100vw;
+  min-width: 1920px;
+  height: 160px;
+  color: #9ca3af;
+  padding: 32px 400px;
+}
+
+.footer-inner{
+  width: 1120px;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.codeit-2024{
+  font-family: pretendard;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.footer-link{
+  width: 159px;
+  height: 19px;
+}
+
+.Policy{
+  font-family: pretendard;
+  color: #e5e7eb;
+  font-weight: 400;
+  font-size: 16px;
+  margin-right: 30px;
+}
+
+.FAQ{
+  font-family: pretendard;
+  color: #e5e7eb;
+  font-weight: 400;
+  font-size: 16px;
+  text-align: center;
+}
+
+.social-ic{
+  display: inline;
+  width: 116px;
+  height: 20px;
+}
+
+