codeit-bootcamp-frontend · clyde-yoon · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024
diff --git a/faq.html b/faq.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>faq</title>
+  </head>
+  <body></body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- 랜딩 페이지의 url path는 루트 입니다 -->
+    <base href="/" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="7-Sprint-Mission/style.css" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <header>
+      <div class="logo">
+        <img
+          class="panda"
+          src="7-Sprint-Mission/pictures/판다 얼굴.png"
+          alt="판다마켓 로고 "
+        />
+        <p><a href="7-Sprint-Mission/index.html">판다마켓</a></p>
+      </div>
+      <input
+        class="login-button"
+        type="button"
+        value="로그인"
+        onclick="location.href='login.html'"
+      />
+    </header>
+    <div class="top-banner">
+      <div class="banner-container">
+        <div class="top-banner-text">
+          <h1>일상의 모든 물건을 <br />거래해 보세요</h1>
+          <input
+            class="go-buy"
+            type="button"
+            value="구경하러 가기"
+            onclick="location.href='items.html'"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <section class="card-1">
+        <img
+          class="pictures"
+          src="7-Sprint-Mission/pictures/hotitem.png"
+          alt="hotitem"
+        />
+        <div class="card-textgroup card-textgroup1">
+          <div class="category">Hot item</div>
+          <h1>
+            인기 상품을 <br />
+            확인해 보세요
+          </h1>
+          <div class="card-exp">
+            가장 HOT한 중고거래 물품을 <br />판다 마켓에서 확인해 보세요
+          </div>
+        </div>
+      </section>
+
+      <section class="card-2">
+        <div class="card-textgroup card-textgroup2">
+          <div class="category">Search</div>
+          <h1>구매를 원하는 <br />상품을 검색하세요</h1>
+          <div class="card-exp">
+            구매하고 싶은 물품은 검색해서 <br />쉽게 찾아보세요
+          </div>
+        </div>
+        <img
+          class="pictures"
+          src="7-Sprint-Mission/pictures/search.png"
+          alt="search"
+        />
+      </section>
+
+      <section class="card-3">
+        <img
+          class="pictures"
+          src="7-Sprint-Mission/pictures/register.png"
+          alt="register"
+        />
+        <div class="card-textgroup card-textgroup3">
+          <div class="category">Register</div>
+          <h1>판매를 원하는 <br />상품을 등록하세요</h1>
+          <div class="card-exp">
+            어떤 물건이든 판매하고 싶은 상품을 <br />쉽게 등록하세요
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="bottom-banner">
+      <div class="banner-container">
+        <h1>믿을 수 있는 <br />판다마켓 중고거래</h1>
+      </div>
+    </div>
+
+    <footer>
+      <div class="footer-container">
+        <div class="company">@codeit - 2024</div>
+        <div class="policy">
+          <a href="privacy.html">Privacy Policy</a> &nbsp; &nbsp;
+          <a
+            href="faq.html
+        "
+            >FAQ</a
+          >
+        </div>
+        <div class="sns">
+          <a href="https://www.facebook.com/?locale=ko_KR" target="_blank"
+            ><img
+              src="7-Sprint-Mission/pictures/facebook.png"
+              alt="facebook-logo"
+          /></a>
+          <a href="https://twitter.com/?lang=ko" target="_blank"
+            ><img
+              src="7-Sprint-Mission/pictures/twitter.png"
+              alt="twitter-logo"
+          /></a>
+          <a href="https://www.youtube.com/" target="_blank"
+            ><img
+              src="7-Sprint-Mission/pictures/youtube.png"
+              alt="youtube-logo"
+          /></a>
+          <a href="https://www.instagram.com/" target="_blank"
+            ><img
+              src="7-Sprint-Mission/pictures/instargram.png"
+              alt="instargram-logo"
+          /></a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body></body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>로그인</title>
+    <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&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1 class="login-title">로그인</h1>
+    <!-- 여기에 코드를 작성하세요 -->
+    <form action="">
+      <label for="username">아이디 <input type="email" id="username" /></label>
+      <label for="password"
+        >비밀번호 <input type="password" id="password"
+      /></label>
+      <button>로그인</button>
+    </form>
+  </body>
+</html>
diff --git a/pictures/facebook.png b/pictures/facebook.png
diff --git a/pictures/hotitem.png b/pictures/hotitem.png
diff --git a/pictures/instargram.png b/pictures/instargram.png
diff --git a/pictures/register.png b/pictures/register.png
diff --git a/pictures/search.png b/pictures/search.png
diff --git a/pictures/twitter.png b/pictures/twitter.png
diff --git a/pictures/youtube.png b/pictures/youtube.png
diff --git a/pictures/판다 얼굴.png b/pictures/판다 얼굴.png
diff --git a/pictures/판다1.png b/pictures/판다1.png
diff --git a/pictures/판다2.png b/pictures/판다2.png
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Privacy</title>
+  </head>
+  <body></body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,202 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 80px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.panda {
+  width: 40px;
+  height: 40.14px;
+}
+
+.logo a {
+  color: #3692ff;
+  font-weight: 700;
+  font-size: 25.63px;
+  line-height: 34.6px;
+  text-decoration-line: none;
+  cursor: pointer;
+}
+
+.go-buy:hover {
+  background-color: #1250aa;
+}
+
+.login-button {
+  background-color: #3692ff;
+  color: #ffffff;
+  width: 128px;
+  height: 48px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+}
+
+.login-button:hover {
+  background-color: #1250aa;
+}
+
+.top-banner,
+.bottom-banner {
+  background-color: #cfe5ff;
+  width: 100%;
+  height: 540px;
+}
+
+.top-banner {
+  background-image: url('pictures/판다1.png');
+  background-position: 80% 100%;
+  background-repeat: no-repeat;
+  background-size: 996px 447px;
+  display: flex;
+  justify-content: center;
+}
+
+.go-buy {
+  background-color: #3692ff;
+  border-radius: 40px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+  padding: 16px 124px;
+  border: none;
+  cursor: pointer;
+}
+
+.bottom-banner {
+  background-image: url('pictures/판다2.png');
+  background-position: 80% 100%;
+  background-repeat: no-repeat;
+  background-size: 996px 447px;
+  display: flex;
+  justify-content: center;
+}
+
+.banner-container {
+  display: flex;
+  width: 1200px;
+  align-items: center;
+}
+
+.h1 {
+  white-space: nowrap;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 56px;
+
+  color: #374151;
+}
+
+.card-exp {
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 28.8px;
+  color: #374151;
+}
+
+.card-textgroup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.card-2 .card-textgroup2 .category,
+.card-2 .card-textgroup2 h1,
+.card-2 .card-textgroup2 .card-exp {
+  text-align: right;
+}
+.container {
+  margin-top: 100px;
+  margin-bottom: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 200px;
+}
+
+.card-1,
+.card-2,
+.card-3 {
+  display: flex;
+  gap: 40px;
+}
+
+.pictures,
+.card-textgroup {
+  width: 580px;
+}
+
+.card-textgroup .category {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 25.2px;
+  color: #3692ff;
+}
+
+footer {
+  width: 100%;
+}
+.footer-container {
+  background-color: #111827;
+  display: flex;
+  height: 160px;
+  justify-content: space-around;
+}
+
+.company {
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19.09px;
+}
+
+.policy {
+  color: #e5e7eb;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19.09px;
+}
+.policy a {
+  text-decoration-line: none;
+  color: #e5e7eb;
+}
+
+.company,
+.policy,
+.sns {
+  margin-top: 40px;
+}
+
+@media (min-width: 1921px) {
+  .banner-container .container,
+  header {
+    width: 1920px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 1919px) {
+  .logo {
+    margin-left: 200px;
+  }
+  .login-button {
+    margin-right: 200px;
+  }
+}