Merge pull request #20 from Oh-hong/Basic-홍준기-sprint1

[홍준기] Sprint 1
codeit-bootcamp-frontend · Apr 29, 2024 · 8417e5c · 8417e5c
2 parents 4dc5dd0 + caed79a
commit 8417e5c
Show file tree

Hide file tree

Showing 14 changed files with 324 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/[홍준기]sprint 1 .css b/[홍준기]sprint 1 .css
@@ -0,0 +1,217 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  position: relative;
+}
+
+body {
+  margin: 0 auto;
+
+}
+
+header {
+  height: 70px;
+
+}
+
+.header-content {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-content: center;
+  margin: 0 200px;
+  padding-top: 10px;
+
+}
+
+#판다마켓 {
+  display: inline-block;
+  width: 153px;
+  height: 51px;
+}
+
+.판다배경 {
+  display: flex;
+  background-color: #CFE5FF;
+  background-size: cover;
+  width: auto;
+  height: 540px;
+}
+
+.background-content {
+  width: 1920px;
+  margin: 0 auto;
+  position: relative;
+
+}
+
+.home-panda {
+
+  position: absolute;
+  left: 701px;
+  top: 93px;
+}
+
+.back-textBox {
+  position: absolute;
+  left: 360px;
+  top: 170px;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.button {
+  border-radius: 40px;
+  border: 1px solid #3692FF;
+  background-color: #3692FF;
+  padding: 16px 124px;
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+main {
+  position: relative;
+  width: 1920px;
+  height: 2160px;
+  margin: 0 auto;
+}
+
+.section1{
+  position: absolute;
+  left: 360px;
+  display: flex;
+  gap: 64px;
+  width: 1200px;
+  height: 720px;
+  align-items: center;
+
+}
+
+
+
+
+.small-text {
+  line-height: 25.2px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #3692FF
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  color: #374151;
+  line-height: 28.8px;
+}
+
+.section2{
+  position: absolute;
+  left: 360px;
+  top: 720px;
+  display: flex;
+  gap: 64px;
+  width: 1200px;
+  height: 720px;
+  align-items: center;
+  flex-direction: row-reverse;
+
+}
+
+.section2-text{
+  text-align: right;
+}
+
+.section3{
+  position: absolute;
+  left: 360px;
+  top: 1440px;
+  display: flex;
+  gap: 64px;
+  width: 1200px;
+  height: 720px;
+  align-items: center;
+  margin-bottom: 138px;
+}
+
+.bottomBackground {
+  display: flex;
+  margin-top: 138px;
+  background-color: #CFE5FF;
+  background-size: cover;
+  width: auto;
+  height: 540px;
+}
+
+#bottom-panda {
+  position: absolute;
+  left: 701px;
+
+}
+
+footer {
+  background-color: #111827;
+  height: 160px;
+  width: 100%;
+  background-size: 100%;
+}
+
+.footer-leftContent {
+  color: #9CA3AF;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19.09px;
+}
+
+.footer-centerContent {
+  font-size: 16px;
+  font-weight: 400;
+  color: #E5E7EB;
+  display: flex;
+  text-decoration: none;
+  gap: 30px;
+}
+
+.footerContent {
+  margin:0 auto;
+  padding-top: 32px;
+  display: flex;
+  justify-content: space-between;
+  width: 1520px;
+
+}
+
+.footer-snsLink {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+#footer-center-text {
+  text-decoration: none;
+  color: #e5e7eb;
+}
+
+.icon {
+  width: 20px;
+
+}
+
+a{
+  text-decoration: none;
+}
diff --git a/[홍준기]sprint 1.html b/[홍준기]sprint 1.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>판다마켓</title>
+  <Link rel = "stylesheet" href = "[홍준기]sprint 1 .css">
+</head>
+<body>
+<header>
+  <div class = "header-content">
+    <a href = "/"><img  id = "판다마켓" src = "image/Property 1=Variant3.png"></a>
+    <a href = "/login"><img id = "login" src = "image/status=Default.png"></a>
+  </div>
+</header>
+
+
+<div class = "판다배경">
+  <div class = "background-content">
+    <div class = "back-textBox">
+      <h1>일상의 모든 물건을<br>
+      거래해 보세요</h1>
+      <a href = "/items">
+      <div class = "button">
+        구경하러가기
+      </div>
+    </a>
+    </div>
+    <img class = "home-panda" src = "image/Img_home_top.png">
+  </div>
+
+
+</div>
+
+<main>
+<div class = "section1">
+<img class = "image" src = "image/Img_home_01.png">
+<div class = "section1-text">
+  <span class = "small-text">Hot item</span><br>
+    <h1>
+      인기 상품을<br>
+      확인해 보세요
+    </h1>
+    <p>가장 HOT한 중고거래 물품을<br>
+    판다 마켓에서 확인해 보세요</p>
+</div>
+</div>
+
+<div class = "section2">
+  <img class = "image" src = "image/Img_home_02.png">
+  <div class = "section2-text">
+    <span class = "small-text">Search</span><br>
+      <h1>
+        구매를 원하는<br>
+        상품을 검색하세요
+      </h1>
+      <p>구매하고 싶은 물품은 검색해서<br>
+      쉽게 찾아보세요</p>
+  </div>
+  </div>
+
+
+  <div class = "section3">
+    <img class = "image" src = "image/Img_home_03.png">
+    <div class = "section1-text">
+      <span class = "small-text">Register</span><br>
+        <h1>
+          판매를 원하는<br>
+          상품을 등록하세요
+        </h1>
+        <p>어떤 물건이든 판매하고 싶은 상품을<br>
+        쉽게 등록하세요</p>
+    </div>
+    </div> 
+
+
+
+
+</main>
+<div class = "bottomBackground">
+  <div class = "background-content">
+    <div class = "back-textBox">
+      <h1>믿을 수 있는 <br>
+      판다마켓 중고거래</h1>
+    </div>
+    <img id = "bottom-panda" src = "image/Img_home_bottom.png">
+  </div>
+</div>
+
+<footer>
+  <div class = "footerContent">
+    <div class = "footer-leftContent">@codeit - 2024</div>
+    <div class = "footer-centerContent">
+      <a id = "footer-center-text" href = "/privacy">Privacy Policy</a>
+      <a id = "footer-center-text" href = "/faq">FAQ</a>
+    </div> 
+    <div class = "footer-snsLink">
+      <a href = "https://www.facebook.com/?locale=ko_KR"><img class = "icon" src = "image/facebook.png"></a>
+      <a href = "https://twitter.com/?lang=ko""><img class = "icon" src = "image/twitter.png"></a>
+      <a href = "https://www.youtube.com/?themeRefresh=1"><img class = "icon" src = "image/youtube.png"></a>
+      <a href = "https://www.instagram.com/"><img class = "icon" src = "image/instagram.png"></a>
+    </div>
+  </div>
+
+
+</footer>
+</body>
+</html>
diff --git a/image/Img_home_01.png b/image/Img_home_01.png
diff --git a/image/Img_home_02.png b/image/Img_home_02.png
diff --git a/image/Img_home_03.png b/image/Img_home_03.png
diff --git a/image/Img_home_bottom.png b/image/Img_home_bottom.png
diff --git a/image/Img_home_top.png b/image/Img_home_top.png
diff --git a/image/Property 1=Variant3.png b/image/Property 1=Variant3.png
diff --git a/image/facebook.png b/image/facebook.png
diff --git a/image/instagram.png b/image/instagram.png
diff --git a/image/status=Default.png b/image/status=Default.png
diff --git a/image/twitter.png b/image/twitter.png
diff --git a/image/youtube.png b/image/youtube.png