codeit-bootcamp-frontend · hoody-jellybean · Aug 11, 2024 · Aug 10, 2024 · hoody-jellybean · Aug 11, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/1.png b/1.png
diff --git a/10-Sprint-Mission b/10-Sprint-Mission
diff --git a/2.png b/2.png
diff --git a/3.png b/3.png
diff --git a/footimage.png b/footimage.png
diff --git a/headimage.png b/headimage.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,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>판다마켓</title>
+</head>
+<body>
+  <header>
+    <div class="header">
+      <div class="title">
+        <img src="panda.png">
+        <h1 class="name">
+          <a href="https://10-sprintmission1.netlify.app/">판다마켓</a>
+        </h1>
+      </div>
+      <div class="login">
+        <a href="https://10-sprintmission1.netlify.app/login">로그인</a>
+      </div>
+    </div>
+  </header>
+  <main>
+    <div class="part1">
+      <div class="mention">
+        <h1>
+          일상의 모든 물건을<br>
+          거래해 보세요
+        </h1>
+        <div class="look">
+          <a href="https://10-sprintmission1.netlify.app/items">구경하러 가기</a>
+        </div>
+      </div>
+      <img src="headimage.png" class="headimage">
+    </div>
+    <div class="part2-1">
+      <div class="box1">
+        <img class="img" src="1.png">
+        <div class="explain">
+          <div class="explain_box1">
+            <div class="explain_title">
+              Hot item
+            </div>
+            <h1>
+              인기 상품을<br>
+              확인해 보세요
+            </h1>
+            <h2>
+              가장 HOT한 중고거래 물품을<br>
+              판다 마켓에서 확인해 보세요
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="part2-2">
+      <div class="box2">
+        <div class="explain">
+          <div class="explain_box2">
+            <div class="explain_title">
+              Search
+            </div>
+            <h1>
+              구매를 원하는<br>
+              상품을 검색하세요
+            </h1>
+            <h2>
+              구매하고 싶은 물품은 검색해서<br>
+              쉽게 찾아보세요
+            </h2>
+          </div>
+        </div>
+        <img class="img" src="2.png">
+      </div>
+    </div>
+    <div class="part2-1">
+      <div class="box1">
+        <img class="img" src="3.png">
+        <div class="explain">
+          <div class="explain_box1">
+            <div class="explain_title">
+              Register
+            </div>
+            <h1>
+              판매를 원하는<br>
+              상품을 등록하세요
+            </h1>
+            <h2>
+              어떤 물건이든 판매하고 싶은 상품을<br>
+              쉽게 등록하세요
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="empty_space"></div>
+    <div class="part1">
+      <div class="mention">
+        <h1>
+          믿을 수 있는<br>
+          판다마켓 중고 거래
+        </h1>
+      </div>
+      <img src="footimage.png" class="footimage">
+    </div>
+  </main>
+  <footer>
+    <div class="part3">
+      <div class="information">
+        <h3>
+          ©codeit - 2024
+        </h3>
+        <div>
+          <h3>
+            <a href="/privacy">Privacy Policy</a>
+          </h3>
+          <h3>
+            <a href="/faq">FAQ</a>
+          </h3>
+        </div>
+        <div class="icons">
+          <a href="https://www.facebook.com/" target="_blank"><img src="ic_facebook.png" class="icon"></a>
+          <a href="https://www.twitter.com/" target="_blank"><img src="ic_twitter.png" class="icon"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="ic_youtube.png" class="icon"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="ic_instagram.png" class="icon"></a>
+        </div>
+        </h3>
+      </div>      
+    </div>
+  </footer>
+
+</body>
+</html>
diff --git a/panda.png b/panda.png
diff --git a/style.css b/style.css
@@ -0,0 +1,222 @@
+* {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: inherit; 
+}
+
+body {
+  width: 1920px;
+  padding: 0px;
+  margin: 0px;
+}
+
+header {
+  width: 1920px;
+  height: 70px;
+  position: relative;
+}
+
+.header {
+  width: 1120px;
+  height: 51px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  margin: 9.5px 400px;
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 56px;
+}
+
+h2 {
+  font-weight: 500;
+  font-size: 24px;
+  color: #374151;
+}
+
+h3 {
+  font-size: 16px;
+  font-weight: 400;
+  color: #e5e7e8;
+}
+
+.name {
+  font-weight: 700;
+  font-size: 25.63px;
+  margin-left: 10px;
+  color: #3682ff;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.login {
+  font-weight: 600;
+  font-size: 16px;
+  color: #f3f4f6;
+  width: 128px;
+  height: 48px;
+  padding: 12px 23px 12px 23px;
+  border: solid;
+  border-radius: 8px;
+  background-color: #3692ff;
+  text-align: center;
+}
+
+.part1 {
+  background-color: #cfe5ff;
+  width: 100%;
+  height: 540px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.part2-1 {
+  width: 1920px;
+  height: 720px;
+  position: relative;
+}
+
+.part2-2 {
+  width: 1920px;
+  height: 720px;
+  position: relative;
+}
+
+.part3 {
+  background-color: #111827;
+  width: 1920px;
+  height: 160px;
+  position: relative;
+  display: flex;
+}
+
+.empty_space {
+  width: 1920px;
+  height: 138px;
+  background-color: #fcfcfc;
+}
+.part3 .information > div {
+  width: 159px;
+  display: flex;
+  justify-content: space-between;
+}
+.headimage, .footimage {
+  width: 746px;
+  height: 340px;
+}
+
+.mention{
+  width: 357px;
+  height: 26opx;
+  padding: 0px 0px 60px 0px;
+  margin: 40px 0px;
+  color: #374151
+}
+
+.look {
+  width: 357px;
+  height: 56px;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 40px;
+  background-color: #3682ff;
+  color: white;
+  padding: 16px 120px;   /*124px로 하면 마지막 글자가 자꾸 내려가요 */
+}
+
+.box1 {
+  width: 955px;
+  height: 444px;
+  background-color: #fcfcfc;
+  position: absolute;
+  top: 138px;
+  left: 360px;
+  display: flex;
+}
+
+.box2 {
+  width: 955px;
+  height: 444px;
+  background-color: #fcfcfc;
+  position: absolute;
+  top: 138px;
+  right: 360px;
+  display: flex;
+}
+
+.img {
+  width: 588px;
+  height: 444px
+}
+
+.explain {
+  width: 367px;
+  height: 238px;
+}
+
+.explain_box1 {
+  margin-top:103px;
+  margin-bottom: 103px;
+  margin-left: 40px;
+}
+
+.explain_box2 {
+  margin-top:103px;
+  margin-bottom: 103px;
+  margin-right: 40px;
+}
+
+.part2-2 .explain_box2 {
+  text-align: right;
+}
+
+.explain_title {
+  color:#3682ff;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 26px;
+}
+
+.information {
+  width: 1120px;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  top: 20px;
+  left: 400px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+
+.icons {
+  width: 116px;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (min-width: 1920px) {
+  .part1 {
+    width: 100%;
+  }
+}
+
+/* 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요. */