codeit-bootcamp-frontend · dev-kjy · Apr 29, 2024 · Apr 24, 2024 · Apr 25, 2024 · Apr 25, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/btn_large.png b/images/btn_large.png
diff --git a/images/btn_small.png b/images/btn_small.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!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="style.css">
+</head>
+<body>
+
+  <header>
+    <a href="/" class="logo click"> <img src="images/logo.png"> </a>
+    <div class="login">
+     <a class="click" href="/login"> 로그인 </a>      
+    </div>
+
+  </header>
+
+  <section class="home-top">
+    <div class="container-1920">
+        <div>
+          <p class="phrase">일상의 모든 물건을<br> 거래해 보세요</p>
+          <div class="more"> 
+            <a class="click" href="/items" class="click"> 구경하러 가기 </a> 
+          </div>
+        </div>
+        <div>
+          <img class="img" src="images/Img_home_top.png">
+        </div>
+    </div>
+  </section>
+
+  <section class="home-main">
+    <img class="img" src="images/Img_home_01.png">
+
+    <div class="home-main-text left">
+      <p class="title">Hot item</p>
+      <p class="phrase">인기 상품을<br> 확인해 보세요</p>
+      <p class="description">가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해 보세요</p>        
+    </div>        
+
+    <div class="home-main-text right">
+      <p class="title">Search</p>
+      <p class="phrase">구매를 원하는<br> 상품을 검색하세요</p>
+      <p class="description">구매하고 싶은 물품은 검색해서<br> 쉽게 찾아보세요</p>
+    </div>
+
+    <img class="img" src="images/Img_home_02.png">
+
+    <img class="img" src="images/Img_home_03.png">
+
+    <div class="home-main-text left">
+      <p class="title">Register</p>
+      <p class="phrase">판매를 원하는<br> 상품을 등록하세요</p>
+      <p class="description">어떤 물건이든 판매하고 싶은 상품을<br> 쉽게 등록하세요</p>
+    </div>          
+  </section>
+
+  <section class="home-bottom">
+    <div class="container-1920">
+      <div>
+        <p class="phrase">믿을 수 있는<br> 판다마켓 중고거래</p>          
+      </div>
+      <div>
+        <img class="img" src="images/Img_home_bottom.png">   
+      </div> 
+    </div>
+  </section>
+
+  <footer>
+    <p class="copyright">©codeit - 2024</p>
+    <div class="privacy-and-faq">
+      <a class="click" href="/privacy">Privacy Policy</a>
+      <a class="click" href="/faq">FAQ</a>
+    </div>
+    <div class="social-link">
+      <a class="click" href="https://www.facebook.com/" target="_blank"> <img src="images/ic_facebook.png"> </a>
+      <a class="click" href="https://twitter.com/" target="_blank"> <img src="images/ic_twitter.png"> </a>
+      <a class="click" href="https://www.youtube.com/" target="_blank"> <img src="images/ic_youtube.png"> </a>
+      <a class="click" href="https://www.instagram.com/" target="_blank"> <img src="images/ic_instagram.png"> </a>
+    </div>
+  </footer>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,164 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.click {
+  cursor: pointer;
+}
+
+.logo {
+  width: 153px;
+  height: 51px;
+}
+
+.login {
+  background-color: #3692FF;
+  border-radius: 8px;
+  width: 128px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login .click {
+  color: #FFFFFF;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.more {
+  background-color: #3692FF;
+  width: 357px;
+  height: 56px;
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.more .click {
+  color: #FFFFFF;
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+header,
+footer {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+header {
+  height: 70px;
+  padding: 0 200px;
+  align-items: center;
+}
+
+.home-top,
+.home-bottom {
+  background-color: #CFE5FF;
+  width: 100%;
+  height: 540px;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.container-1920 {
+  max-width: 1920px;
+  min-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+.home-top .img,
+.home-bottom .img{
+  max-width: 996px;
+  height: auto;
+  position: absolute;
+  bottom: 0;
+}
+
+.home-main {
+  max-width: 1200px;
+  margin: 138px auto 276px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 276px 0;
+}
+
+.home-main .img {
+  width: 588px;
+  height: 444px;
+  margin: 0 auto;
+}
+
+.home-main-text {
+  padding: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.home-main-text.right {
+  text-align: right;
+}
+
+.home-main .title {
+  color: #3692FF;
+  font-size: 18px;
+  font-weight: 700;
+  margin: 10px 0;
+}
+
+.phrase {
+  color: #374151;
+  font-size: 40px;
+  font-weight: 700;
+  min-width: 290px;
+  margin: 20px 0;
+}
+
+.home-main .description {
+  color: #374151;
+  font-size: 24px;
+  font-weight: 500;
+  margin: 10px 0;
+}
+
+footer {
+  background-color: #111827;
+  height: 160px;
+  padding: 50px 200px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+footer .copyright {
+  color: #9CA3AF;
+}
+
+footer .privacy-and-faq {
+  display: grid;
+  grid-template: 19px / 100px 29px;
+  gap: 0 30px
+}
+
+footer .privacy-and-faq > a {
+  color: #E5E7EB;
+  text-decoration: none;
+}
+
+footer .social-link {
+  display: grid;
+  grid-template: 20px / repeat(4, 20px);
+  gap: 0 12px;
+}