codeit-bootcamp-frontend · kiJu2 · Apr 29, 2024 · Apr 25, 2024 · Apr 26, 2024 · Apr 26, 2024
diff --git a/faq.html b/faq.html
diff --git a/images/Group 19-1.png b/images/Group 19-1.png
diff --git a/images/Group 19-2.png b/images/Group 19-2.png
diff --git a/images/Group 19.png b/images/Group 19.png
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Group [email protected] b/images/Group [email protected]
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/Property 1=Typo.png b/images/Property 1=Typo.png
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/Property 1=Variant3.png b/images/Property 1=Variant3.png
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/Property [email protected] b/images/Property [email protected]
diff --git a/images/btn_visibility_off_24px.svg b/images/btn_visibility_off_24px.svg
diff --git a/images/btn_visibility_on_24px-1.svg b/images/btn_visibility_on_24px-1.svg
diff --git a/images/btn_visibility_on_24px-2.svg b/images/btn_visibility_on_24px-2.svg
diff --git a/images/btn_visibility_on_24px.svg b/images/btn_visibility_on_24px.svg
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/logo.png b/images/logo.png
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/[email protected] b/images/[email protected]
diff --git a/images/판다 얼굴.png b/images/판다 얼굴.png
diff --git a/images/판다 얼굴@2x.png b/images/판다 얼굴@2x.png
diff --git a/images/판다 얼굴@3x.png b/images/판다 얼굴@3x.png
diff --git a/index.html b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
-<html lang="en">
+<html lang="ko">
-<html lang="en">
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>판다마켓</title>
+  <link rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+      <div class="gnb">
+        <div class="gnb-logo">
+          <img src="images/판다 얼굴.png" alt="판다얼굴로고">
-          <img src="images/판다 얼굴.png" alt="판다얼굴로고">
+          <img src="images/판다 얼굴.png" alt="판다 얼굴 로고">
-          <img src="images/판다 얼굴.png" alt="판다얼굴로고">
+          <img src="images/판다 얼굴.png" alt="판다 얼굴 로고">
+          <a href="/"><img src="images/logo.png" alt="판다마켓로고"></a>
+        </div>
+          <a class="gnb-login" href="login.html">로그인</a>
+      </div>
+      <div class="section01 image-top">
-      <div class="section01 image-top">
+  <section class="landing-section__image--left">
-      <div class="section01 image-top">
+  <section class="landing-section__image--left">
+        <div class="visual-text">
+          <h1>일상의 모든 물건을<br> 거래해 보세요</h1>
+          <a href="items.html">구경하러 가기</a>
+        </div>
+      </div>
+  </header>
+
+  <main>
+    <div class="container">
+      <div class="wrapper">
+        <div class="section02 hot-item">
+          <div class="section02-content">
+            <img class="section02-img" src="images/Img_home_01.png" alt="인기상품 확인 이미지">
+            <div class="section02-text">
+              <span>Hot item</span>
+              <h1 class="section02-title">인기 상품을<br>
+              확인해 보세요</h1>
+              <p>가장 HOT한 중고거래 물품을<br>
+              판다 마케에서 확인해 보세요</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="section02 search ">
+          <div class="section02-content section02-content--reverse">
+            <img class="section02-img" src="images/Img_home_02.png" alt="인기상품 확인 이미지">
+            <div class="section02-text">
+              <span>Search</span>
+              <h1 class="section02-title">구매를 원하는<br>
+              상품을 검색하세요</h1>
+              <p>구매하고 싶은 물품은 검색해서<br>
+              쉽게 찾아보세요</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="section02 register">
+          <div class="section02-content">
+            <img class="section02-img" src="images/Img_home_03.png" alt="인기상품 확인 이미지">
+            <div class="section02-text">
+              <span>Register</span>
+              <h1 class="section02-title">판매를 원하는<br>
+              상품을 등록하세요</h1>
+              <p>어떤 물건이든 판매하고 싶은 상품을<br>
+              쉽게 등록하세요</p>
+            </div>
+        </div>
+        </div>
+      </div>
+
+      <div class="section01 image-bottom">
+        <div class="visual-text">
+          <h1>믿을 수 있는<br> 
+          판다마켓 중고거래</h1>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <footer>
+    <div class="footer-content">
+      <span>@codeit - 2024</span>
+      <div class="privacy-faq">
+        <a href="privacy.html"><span>Privacy Policy</span></a>
-        <a href="privacy.html"><span>Privacy Policy</span></a>
+        <a href="privacy.html">Privacy Policy</a>
-        <a href="privacy.html"><span>Privacy Policy</span></a>
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html"><span>FAQ</span></a>
+      </div>
+      <div class="footer-icons">
+        <a href="https://www.facebook.com" target="_blank"><img src="images/ic_facebook.png" alt="페이스북 로고"></a>
+        <a href="https://www.twitter.com" target="_blank"><img src="images/ic_twitter.png" alt="트위터 로고"></a>
+        <a href="https://www.youtube.com" target="_blank"><img src="images/ic_youtube.png" alt="유튜브 로고"></a>
+        <a href="https://www.instagram.com" target="_blank"><img src="images/ic_instagram.png" alt="인스타그램 로고"></a>
+    </div>
+   </div>
+  </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
diff --git a/login.html b/login.html
diff --git a/privacy.html b/privacy.html
diff --git a/style.css b/style.css
@@ -0,0 +1,191 @@
+:root {
+  --header-btn-bgcolor : #3692ff;
+  --header-btn-bgcolor--hover :#1251AA;
+  --section01-bg-color : #cfe5ff;
+  --section01-h1-color: #374151;
+  --section02-span-color :#3692ff;
+  --section02-p-color : #374151;
+  --section02-title-color : #374151;
+  --footer-bg-color : #111827;
+  --footer-text01 : #9CA3AF;
+  --footer-text02 : #E5E7EB;
+  --white : #ffffff;
+}
+
+* {
+  box-sizing:border-box;
+  margin: 0;
+}
+
+body {
+  font-family: 'Pretendard', sans-serif;
+  }
+
+.gnb {
+  margin:0px 200px;
+}
+
+.gnb,
+.gnb-logo {
+  display: flex;
+  align-items: center;
+}
+
+.gnb {
+  justify-content: space-between;
+  height: 70px;
+}
+
+.gnb-login {
+  text-decoration: none;
+  color:var(--white);
+  background-color: var(--header-btn-bgcolor);
+  border-radius: 8px;
+  padding:12px 20px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.gnb-login:hover {
+    background-color: var(--header-btn-bgcolor--hover)
+  }
+
+.gnb-logo img {
+  margin-right: 10px;
+}
+
+.section01 {
+  height: 540px;
+  background-color: var(--section01-bg-color);
+  background-repeat: no-repeat;
+  background-size:55%;
+  background-position: right 20% bottom;
+  display: flex;
+  justify-content:left;
+  align-items: center;
+}
+
+.image-top {
+  background-image: url("images/img_home_top.png");
+}
+
+.image-bottom {
+  background-image: url("images/img_home_bottom.png");
+}
+
+.visual-text {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.visual-text h1 {
+  font-size: 40px;
+  line-height: 56px;
+  margin-bottom: 32px;
+  font-weight: 700;
+  color:var(--section01-h1-color);
+}
+
+.visual-text a {
+  text-decoration: none;
+  color:var(--white);
+  background-color: var(--header-btn-bgcolor);
+  border-radius: 9999px;
+  padding:16px 124px;
+  display: inline-block;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.visual-text a:hover {
+  background-color: var(--header-btn-bgcolor--hover)
+}
+
+.wrapper {
+  width: 100%;
+  max-width: 1200px;
+  margin:0 auto;
+}
+
+.section02 {
+  padding:100px 0px;
+}
+
+.section02-content--reverse {
+  justify-content: end;
+  flex-direction: row-reverse;
+  text-align: end;
+}
+
+.section02-content {
+  display: flex;
+  align-items: center;
+  gap:40px;
+}
+
+.section02-img {
+  width: 50%;
+  height: 50%;
+}
+
+.section02-text span {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 25.2px;
+  color: var(--section02-span-color)
+}
+
+.section02-title {
+  font-size: 40px;
+  margin:12px 0px 24px;
+  line-height: 56px;
+  font-weight: 700;
+  color:var(--section02-title-color)
+}
+
+.section02-text p {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 28.8px;
+  color:var(--section02-p-color)
+}
+
+.search {
+  justify-content: end;
+}
+
+footer {
+  height: 160px;
+  background-color: var(--footer-bg-color);
+  color:var(--white);
+  padding:32px 200px;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19.09px;
+}
+
+.footer-content > span {
+  color:var(--footer-text01);
+  margin-right: 30px;
+}
+
+.privacy-faq a {
+  color: var(--footer-text02);
+  text-decoration:none;
+  margin-right: 30px;
+}
+
+.footer-icons {
+  flex-shrink: 0;
+}
+
+.footer-icons a {
+  margin-right: 13px;
+}