파일추가

codeit-bootcamp-frontend · Oct 26, 2024 · 546f0ab · 546f0ab
1 parent 4dc5dd0
commit 546f0ab
Show file tree

Hide file tree

Showing 21 changed files with 351 additions and 0 deletions.
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/Property 1=sm.png b/Property 1=sm.png
diff --git a/Property 1=sm@2x.png b/Property 1=sm@2x.png
diff --git a/Property 1=sm@3x.png b/Property 1=sm@3x.png
diff --git a/ic_facebook.png b/ic_facebook.png
diff --git a/ic_facebook@2x.png b/ic_facebook@2x.png
diff --git a/ic_facebook@3x.png b/ic_facebook@3x.png
diff --git a/ic_instagram.png b/ic_instagram.png
diff --git a/ic_instagram@2x.png b/ic_instagram@2x.png
diff --git a/ic_instagram@3x.png b/ic_instagram@3x.png
diff --git a/ic_twitter.png b/ic_twitter.png
diff --git a/ic_youtube.png b/ic_youtube.png
diff --git a/ic_youtube@2x.png b/ic_youtube@2x.png
diff --git a/ic_youtube@3x.png b/ic_youtube@3x.png
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>판다마켓</title>
+    <meta charset="utf-8">
+    <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=Poppins:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+  <body>
+    <header id="top">
+      <div></div>
+     <div class="market">
+
+      <a href="/"><img class="face" src="Property 1=sm.png" alt="판다마켓"></a>
+      <a class="login" href="/login" target="_blank">로그인</a>
+     </div>
+     <div></div>
+    </header>
+    <main>
+    <div class="change">
+      <div class="size">
+       <div id="do">
+        <p class="go">
+         일상의 모든 물건을</br>
+         거래해 보세요
+        </p>
+        <a class="see" href="/items">구경하러 가기</a>
+       </div>
+      <img src="Img_home_top.png">
+      </div>  
+    </div>
+   <div class="main">
+    <div class="item">
+      <div class="soso">
+       <img src="Img_home_01.png">
+       <div class="very">
+        <div class="Hot">Hot item</div>
+        <div class="cool">
+        인기 상품을</br> 확인해 보세요
+        </div>
+        <div class="cold">
+        가장 HOT한 중고거래 물품을</br>
+        판다 마켓에서 확인해 보세요
+        </div>
+        </div>
+      </div>
+    </div>
+    <div class="eye">
+      <div class="leg">
+        <div class="finger">
+        <div class="nose">Search</div>
+        <div class="eat">
+         구매를 원하는</br>
+         상품을 검색하세요
+        </div>
+        <div class="arm">
+         구매하고 싶은 물품은 검색해서</br>쉽게 찾아보세요
+        </div>
+        </div>
+        <img src="Img_home_02.png">
+        </div>
+    </div>  
+    <div class="item">
+      <div class="soso">
+        <img src="Img_home_03.png">
+        <div class="very">
+        <div class="Hot">Register</div>
+        <div class="cool">
+        판매를 원하는 </br>
+        상품을 등록하세요
+        </div>
+        <div class="cold">
+        어떤 물건이든 판매하고 싶은 상품을</br>
+        쉽게 등록하세요
+        </div>
+        </div>
+      </div>
+    </div>
+   </div>
+   </main>
+   <div class="line"></div>     
+    <div class="change">
+      <div class="size">
+        <div class="go">
+        믿을 수 있는</br>
+        판다마켓 중고 거래
+        </div>
+      <img src="Img_home_bottom.png">
+      </div>  
+    </div>
+
+    <footer class="console">
+    <div class="home">
+    <div>©codeit - 2024</div>
+    <div class="it">
+    <div>
+      <a class="hoot" href="/privacy">Privacy Policy</a>
+    </div>
+    <div><a class="chu" href="/faq">FAQ</a></div>
+    </div>
+    <div class="link">
+    <a href="https://ko-kr.facebook.com" target="_blank"><img src="ic_facebook.png"></a>
+    <a href="https://twitter.com" target="_blank"><img src="ic_twitter.png"></a>
+    <a href="https://youtube.com" target="_blank"><img src="ic_youtube.png"></a>
+    <a href="https://www.instagram.com" target="_blank"><img src="ic_instagram.png"></a>
+    </div>
+    </div>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,239 @@
+*{box-sizing: border-box;}
+
+body{
+margin: 0;
+padding:0;
+width: 100%;
+
+
+
+#top{
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:70px;
+ gap:10px;
+ background-color: #ffffff;
+ display:grid;
+ grid-template-columns: minmax(200px, 1fr) minmax(720px, 1120px) minmax(200px, 1fr);
+
+}
+.face{
+
+    cursor: pointer;
+}
+.market{
+    display:flex;
+    justify-content:space-between;
+    align-items: center;
+    height:100%;
+    grid-column:2;
+
+}
+
+
+.login{
+  display:block;
+  background-color: #3692ff;
+  border: none;
+  border-radius: 8px;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 50px;
+  width:128px;
+  height: 48px;
+  padding: 12ox 23px;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+
+}
+
+.change{
+    display:flex;
+    flex-direction: center;
+    height: 540px;
+    background-color: #CFE5FF;
+    justify-content: center;
+}
+.size{
+    display:flex;
+    width:1110px;
+    height:340px;
+    position:relative;
+    top:200px;
+    gap:7px;
+
+}
+#do{
+    width: 357px;
+    height: 260px;
+}
+.go{
+    height:112px;
+    font-size:40px;
+    line-height:56px;
+    font-weight:700;
+}
+.see{
+    background-color: #3692ff;
+    font-size:20px;
+    font-weight: 600;
+    line-height: 32px;
+    text-align:center;
+    border: none;
+    border-radius: 40px;
+    padding: 16px 110px;
+    gap:10px;
+    width: 357px;
+    height:56px;
+    text-decoration: none;
+    color: #ffffff;
+    cursor: pointer;
+}
+.main{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.item{
+
+   height:720px;
+   padding:138px 466px;
+   gap:10px
+}
+.soso{
+    width:988px;
+    height:444px;
+    border:1px solid #ffffff;
+    border-radius:12px;
+    gap:64px;
+    background-color:#FCFCFC;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+
+.very{
+   width:359px;
+   height:238px;
+   padding-right: 24px;
+   display:flex;
+   flex-direction: column;
+   gap:24px;
+}
+.Hot{
+   width: 80px;
+   height: 26px;
+   font-size:18px;
+   font-weight: 700;
+   line-height: 26px;
+   color:#3692ff;
+}
+.cool{
+  width:350px;
+  height:112px;
+  font-size:40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: #374151;
+
+}
+.cold{
+   width:350px;
+   height:64px;
+   font-size:21px;
+   font-weight:500;
+   line-height:32px;
+   color:#374151;
+
+}
+.eye{
+    height:720px;
+    padding:138px 466px;
+    gap:10px
+}
+.leg{
+    width:988px;
+    height:444px;
+    border:1px solid #ffffff;
+    border-radius:12px;
+    gap:64px;
+    background-color:#FCFCFC;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+.nose{
+
+    height: 26px;
+    font-size:18px;
+    font-weight: 700;
+    line-height: 26px;
+    color:#3692ff;
+}
+.eat{
+    width:320px;
+    height:112px;
+    font-size:38px;
+    font-weight: 700;
+    line-height: 56px;
+    color: #374151;
+
+}
+.arm{
+    width:320px;
+    height:64px;
+    font-size:22px;
+    font-weight:500;
+    line-height:32px;
+    color:#374151;
+}
+.finger{
+    text-align: right;
+    display:flex;
+    flex-direction: column;
+    gap: 24px;
+}
+.line{
+    width:100%;
+    height:138px;
+    background-color: #f3f4f6;
+}
+.console{
+
+  top: 3448px;
+  padding:32px 400px;
+  gap: 10px;
+  background-color: #111827;
+  height:160px;
+
+}
+.home{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  bottom: 108px;
+  top:32px;
+  color:#ffffff;
+
+}
+.it{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  gap:30px;
+
+}
+.link{
+    cursor: pointer;
+}
+
+.hoot ,
+.chu{
+    text-decoration: none;
+    color: #ffffff
+}
diff --git a/판다 얼굴.png b/판다 얼굴.png