Merge pull request #9 from ouranos1/part1--김광호--sprint-1

[김광호] Sprint1
codeit-bootcamp-frontend · Apr 28, 2024 · 2a297fc · 2a297fc
2 parents 4dc5dd0 + 1832462
commit 2a297fc
Show file tree

Hide file tree

Showing 17 changed files with 320 additions and 0 deletions.
diff --git a/Privacy.html b/Privacy.html
diff --git a/cssfile.css b/cssfile.css
@@ -0,0 +1,218 @@
+body{
+  padding: 0;
+  margin: 0;
+  font-family: Pretendard;
+  border: 0;
+}
+
+p{
+  margin: 0;
+}
+
+header{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --button-color: #3692ff;
+  --backgrount-color: #cfe5ff;
+  --button-text-color: #ffffff;
+  --header-title-text-color: #374151;
+}
+
+a{
+  cursor: pointer;
+  text-decoration-line: none;
+}
+
+.button{
+  background-color: var(--button-color);
+}
+
+.first-layer{
+  background-color: var(--backgrount-color);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-layer-container{
+  background-color: var(--backgrount-color);
+  width: 1920px;
+  height: 540px;
+  background-image: url("images/home/hero-image.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 701px bottom;
+}
+
+.header-title{
+  margin-left: 360px;
+  display: flex;
+  margin-top: 70px;
+  gap: 32px;
+}
+
+.header-size{
+  width: 1920px;
+}
+
+.header-title-text > p{
+  display: flex;
+  gap: 32px;
+  font-size: 40px;
+  line-height: 56px;
+  width: 700px;
+  color: var(--header-title-text-color);
+  margin: 0 0 32px;
+}
+.header-title-text > .button{
+  border-radius: 40px;
+  padding: 16px 124px;
+  color: var(--button-text-color);
+  font-size: 20px;
+  line-height: 24px;
+}
+
+nav{
+  margin: 0 200px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+nav > a > img{
+  width: 153px;
+  height: 51px;
+  margin-right: auto;
+}
+nav > .button{
+  margin: 10px;
+  border-radius: 8px;
+  padding: 12px 20px 12px 20px;
+  font-size: 16px;
+  line-height: 19.09px;
+  color: var(--button-text-color);
+
+}
+
+main{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+section{
+  width: 1200px;
+  height: 720px;
+  margin-top: 138px;
+}
+
+.container{
+  display: flex;
+  gap: 64px;
+}
+
+.container > img{
+  width: 588px;
+  height: 444px;
+}
+
+section{
+  --section-h5-color: #3692ff;
+  --section-h2-p-color: #374151;
+}
+
+.section-text{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.section-text > h5{
+  font-size: 18px;
+  color: var(--section-h5-color);
+  line-height: 25.2px;
+}
+.section-text > h2{
+  font-size: 40px;
+  line-height: 56px;
+  color: var(--section-h2-p-color);
+  font-weight: 700;
+}
+.section-text > p{
+  font-size: 24px;
+  line-height: 28.8px;
+  font-weight: 500;
+  color: var(--section-h2-p-color);
+
+}
+#section2-text{
+  align-items: flex-end;
+  text-align: right;
+}
+
+footer{
+  --banner-background-color: #cfe5ff;
+  --banner-p-color: #374151;
+  --pang-end-background-color: #111827;
+  --page-end-p1-color: #9ca3af;
+  --page-end-p2-color: #e5e7eb;
+}
+
+.banner{
+  display: flex;
+  justify-content: center;
+  background-color: var(--banner-background-color);
+}
+
+.banner-container > p{
+  margin: 214px 0;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: var(--banner-p-color);
+}
+
+.banner-container{
+  width: 1200px;
+  height: 540px;
+  background-image: url("images/home/bottom-banner-image.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 100% bottom;
+}
+
+.page-end{
+  background-color: var(--pang-end-background-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 160px;
+  padding:32px 200px 32px 200px;
+}
+
+.page-end > a > img{
+  width: 20px;
+  height: 20px;
+}
+
+.p1{
+  color: var(--page-end-p1-color);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19.09px;
+}
+.p2{
+  display: flex;
+  gap: 30px;
+}
+
+.p2 > a > p{
+  color: var(--page-end-p2-color);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19.09px;
+}
diff --git a/faq.html b/faq.html
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png
diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png
diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png
diff --git a/images/home/hero-image.png b/images/home/hero-image.png
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png
diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg
diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg
diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg
diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg
diff --git a/items.html b/items.html
diff --git a/login.html b/login.html
diff --git a/mainpage.html b/mainpage.html
@@ -0,0 +1,83 @@
+<!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="cssfile.css">
+</head>
+<body>
+  <header>
+    <div class="header-size">
+      <nav>
+        <a href="/"><img src="images/logo/panda-market-logo.png"></a>
+        <a class="button" href="login.html">로그인</a>
+      </nav>
+    </div>
+    <div class="first-layer">
+      <div class="first-layer-container">
+        <div class="header-title">
+          <div class="header-title-text">
+            <p>일상의 모든 물건을<br> 거래해 보세요</p>
+            <a class="button" href="items.html">구경하러가기</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <main>
+    <section>
+      <div class="container">
+        <img src="images/home/feature1-image.png">
+        <div class="section-text">
+          <h5>Hot item</h5>
+          <h2>인기 상품을<br> 확인해 보세요</h2>
+          <p>가장 HOT한 중고거래 물품을<br> 판다 마켓에서 확인해 보세요</p>
+        </div>
+      </div>
+    </section>
+    <section>
+      <div class="container">
+        <div class="section-text" id="section2-text">
+          <h5>Search</h5>
+          <h2>구매를 원하는<br>상품을 검색하세요</h2>
+          <p>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+        </div>
+        <img src="images/home/feature2-image.png">
+      </div>
+    </section>
+    <section>
+      <div class="container">
+        <img src="images/home/feature3-image.png">
+        <div class="section-text">
+          <h5>Register</h5>
+          <h2>판매를 원하는<br>상품을 등록하세요</h2>
+          <p>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <div class="banner">
+      <div class="banner-container">
+        <p>믿을 수 있는 <br>판다마켓 중고거래</p>
+      </div>
+    </div>
+    <div class="page-end">
+      <div class="p1">
+        <p>©codeit - 2024</p>
+      </div>
+      <div class="p2">
+        <a href="Privacy.html"><p>Privacy Policy</p></a>
+        <a href="faq.html"><p>FAQ</p></a>
+      </div>
+      <div class="social-img">
+        <a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="images/social/facebook-logo.svg"></a>
+        <a href="https://twitter.com/?lang=ko" target="_blank"><img src="images/social/twitter-logo.svg"></a>
+        <a href="https://www.youtube.com/?app=desktop&hl=ko" target="_blank"><img src="images/social/youtube-logo.svg"></a>
+        <a href="https://www.instagram.com/" target="_blank"><img src="images/social/instagram-logo.svg"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>