codeit-bootcamp-frontend · leejyart · Mar 17, 2024 · Mar 15, 2024 · leejyart · Mar 17, 2024
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/©codeit - 2024.png b/images/©codeit - 2024.png
diff --git a/images/판다 얼굴.png b/images/판다 얼굴.png
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다 마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <!-- title -->
+    <header>
+      <div class="logo">
+        <img src="/images/판다 얼굴.png" alt="" />
+        <a class="panda-btn" href="/">판다마켓</a>
+      </div>
+      <button onclick="location.href='/login'" class="btn_small">로그인</button>
+    </header>
+    <!-- top-banner -->
+    <article class="banner-back">
+      <section class="banner">
+        <div class="banner-area">
+          <div class="banner-text">
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </div>
+          <button onclick="location.href='/items'" class="btn_large">
+            구경하러 가기
+          </button>
+        </div>
+        <img class="banner-img-top" src="/images/Img_home_top.png" alt="" />
+      </section>
+    </article>
+    <main>
+      <!-- card1 -->
+      <section class="card">
+        <img src="/images/Img_home_01.png" alt="" />
+        <div class="card-area">
+          <div class="card-logo">Hot item</div>
+          <div class="card-main">
+            <div class="card-title">
+              인기 상품을<br />
+              확인해 보세요
+            </div>
+            <div class="card-text">
+              가장 HOT한 중고거래 물품을<br />
+              판다 마켓에서 확인해 보세요
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- card2 -->
+      <section class="card mid">
+        <div class="card-area">
+          <div class="card-logo mid">Search</div>
+          <div class="card-main">
+            <div class="card-title mid">
+              구매를 원하는<br />
+              상품을 검색하세요
+            </div>
+            <div class="card-text mid">
+              구매하고 싶은 물품은 검색해서<br />
+              쉽게 찾아보세요
+            </div>
+          </div>
+        </div>
+        <img src="/images/Img_home_02.png" alt="" />
+      </section>
+      <!-- card3 -->
+      <section class="card mg-footer">
+        <img src="/images/Img_home_03.png" alt="" />
+        <div class="card-area">
+          <div class="card-logo">Register</div>
+          <div class="card-title">
+            판매를 원하는<br />
+            상품을 등록하세요
+          </div>
+          <div class="card-text">
+            어떤 물건이든 판매하고 싶은 상품을<br />
+            쉽게 등록하세요
+          </div>
+        </div>
+      </section>
+    </main>
+    <!-- footer-banner -->
+    <article class="banner-back">
+      <section class="banner">
+        <div class="banner-area banner-text">
+          믿을 수 있는 <br />
+          판다마켓 중고거래
+        </div>
+        <img
+          class="banner-img-bottom"
+          src="/images/Img_home_bottom.png"
+          alt=""
+        />
+      </section>
+    </article>
+    <!-- footer -->
+    <footer>
+      <section class="footer-area">
+        <img src="/images/©codeit - 2024.png" alt="" />
+        <div class="privacy">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/faq">FAQ</a>
+        </div>
+        <div>
+          <a target="_blank" href="https://www.facebook.com/"
+            ><img src="/images/ic_facebook.png" alt=""
+          /></a>
+          <a target="_blank" href="https://www.twitter.com/"
+            ><img src="/images/ic_twitter.png" alt=""
+          /></a>
+          <a target="_blank" href="https://www.youtube.com/"
+            ><img src="/images/ic_youtube.png" alt=""
+          /></a>
+          <a target="_blank" href="https://www.instagram.com/"
+            ><img src="/images/ic_instagram.png" alt=""
+          /></a>
+        </div>
+      </section>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,199 @@
+/* common */
+* {
+  box-sizing: border-box;
+}
+html {
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  word-break: keep-all;
+}
+body {
+  margin: 0;
+}
+img {
+}
+section {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+.btn_large {
+  width: 355px;
+  height: 56px;
+  top: 20px;
+  left: 20px;
+  border-radius: 40px;
+  color: #FFFFFF;
+  background-color: #3692FF;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+.btn_small {
+  width: 128px;
+  height: 48px;
+  padding: 12px 20px;
+  gap: 10px;
+  color: #FFFFFF;
+  border-radius: 8px;
+  background-color: #3692FF;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: 0em;
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+
+/* header */
+
+header {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 200px;
+  align-items: center;
+  height: 70px;
+}
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.panda-btn {
+  text-decoration: none;
+  color: #3692FF;
+  font-family: ROKAF Sans;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 35px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+
+/* banner */
+
+.banner-back {
+  background-color: #CFE5FF;
+  height: 540px;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+.banner {
+  height: 540px;
+  display: flex;
+  align-items: center;
+}
+.banner-img-top {
+  position: absolute;
+  top: 93px;
+  left: 701px;
+  background-color: #CFE5FF;
+}
+.banner-img-bottom {
+  position: absolute;
+  left: 701px;
+  background-color: #CFE5FF;
+}
+.banner-text {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #374151;
+}
+.banner-area {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+
+/* card */
+
+.card {
+  height: 720px;
+  display: flex;
+  align-items: center;
+  gap: 64px;
+}
+.card-area {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.card-logo {
+  color: #3692FF;
+  display: inline;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+.card-main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.card-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  letter-spacing: 0.02em;
+  text-align: left;
+  color: #374151;
+}
+.card-text {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 29px;
+  letter-spacing: 0.08em;
+  text-align: left;
+  color: #374151;
+}
+.mg-footer {
+  margin-bottom: 138px;
+}
+.mid {
+  justify-content: end;
+  text-align: end;
+}
+
+
+/* footer */
+
+footer {
+  background-color: #111827;
+  width: 1,920px;
+  height: 160px;
+  top: 3448px;
+  padding: 32px 200px 32px 200px;
+  gap: 10px;
+}
+.footer-area {
+  display: flex;
+  justify-content: space-between;
+  height: 20px;
+  max-width: 1520px;
+}
+.privacy {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0em;
+  text-align: center;
+  display: flex;
+  gap: 30px;
+}
+.privacy > a {
+  color: #E5E7EB;
+  text-decoration: none;
+}