codeit-bootcamp-frontend · danmin20 · Apr 29, 2024 · Apr 27, 2024 · danmin20 · Apr 29, 2024
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,142 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  color: #374151;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 10px 200px;
+}
+
+header > h1 {
+  height: 51px;
+}
+
+header > a {
+  display: block;
+  width: 128px;
+  height: 48px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: #fff;
+  background-color: #3692FF;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.container { 
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+h2 {
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.section1, .section3 {
+  position: relative;
+  height: 540px;
+  background-color: #CFE5FF;
+}
+
+.section1 > .bg-img {
+  position: absolute;
+  top: 93px; left: 36.51vw;
+  z-index: 0;
+}
+
+.section1 > .container, .section3 > .container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 32px;
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}
+
+.section1 > .container a {
+  padding: 16px 124px;
+  border-radius: 40px;;
+  background-color: #3692FF;
+  color: #fff; 
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.section2 .container {
+  display: flex;
+  align-items: center;
+  gap: 64px;
+  padding: 138px 0;
+}
+
+.section2 .container.right {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+.section2 .container .subtitle {
+  margin-bottom: 12px;
+  color: #3692FF;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.section2 .container .description {
+  margin-top: 24px;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.section3 > .bg-img {
+  position: absolute;
+  top: 0; left: 36.51vw;
+  z-index: 0;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  width: 100%;
+  height: 160px;
+  padding: 32px 200px;
+  background-color: #111827;
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+footer > div:first-child {
+  flex-basis: 200px;
+  color: #9CA3AF;
+}
+
+footer > .fnav a {
+  color: #9CA3AF;
+  margin-right: 30px;
+}
+
+footer > .sns {
+  flex-basis: 200px;
+  text-align: right;
+}
+
+footer > .sns a {
+  margin-right: 12px;
+}
+
+footer > .fnav a:last-child, footer > .sns a:last-child {
+  margin-right: 0;
+}
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/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/index.html b/index.html
@@ -0,0 +1,152 @@
+<!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" href="css/main.css" />
+  </head>
+  <body>
+    <header>
+      <h1 class="header-logo">
+        <a href="/"
+          ><img
+            src="images/logo.png"
+            alt="판다마켓로고"
+            width="153"
+            height="51"
+        /></a>
+      </h1>
+      <a href="pages/login.html">로그인</a>
+    </header>
+    <main>
+      <section class="section1">
+        <img
+          class="bg-img"
+          src="images/Img_home_top.png"
+          alt="판다이미지"
+          width="996"
+          height="447"
+        />
+        <div class="container">
+          <h2>
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </h2>
+          <a href="pages/items.html">구경하러 가기</a>
+        </div>
+      </section>
+      <section class="section2">
+        <div class="container">
+          <img
+            src="images/Img_home_01.png"
+            alt="인기상품이미지"
+            width="588"
+            height="444"
+          />
+          <div>
+            <div class="subtitle">Hot Item</div>
+            <h2 class="title">
+              인기 상품을<br />
+              확인해 보세요
+            </h2>
+            <p class="description">
+              가장 HOT한 중고거래 물품을<br />
+              판다 마켓에서 확인해 보세요
+            </p>
+          </div>
+        </div>
+        <div class="container right">
+          <img
+            src="images/Img_home_02.png"
+            alt="검색이미지"
+            width="588"
+            height="444"
+          />
+          <div>
+            <div class="subtitle">search</div>
+            <h2 class="title">
+              구매를 원하는<br />
+              상품을 검색하세요
+            </h2>
+            <p class="description">
+              구매하고 싶은 물품은 검색해서<br />
+              쉽게 찾아보세요
+            </p>
+          </div>
+        </div>
+        <div class="container">
+          <img
+            src="images/Img_home_03.png"
+            alt="상품등록이미지"
+            width="588"
+            height="444"
+          />
+          <div>
+            <div class="subtitle">Register</div>
+            <h2 class="title">
+              판매를 원하는<br />
+              상품을 등록하세요
+            </h2>
+            <p class="description">
+              어떤 물건이든 판매하고 싶은 상품을<br />
+              쉽게 등록하세요
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="section3">
+        <img
+          class="bg-img"
+          src="images/Img_home_bottom.png"
+          alt="판다대화이미지"
+          width="996"
+          height="540"
+        />
+        <div class="container">
+          <h2>
+            믿을 수 있는<br />
+            판다마켓 중고거래
+          </h2>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div>©codeit - 2024</div>
+      <div class="fnav">
+        <a href="pages/privacy.html">Privacy Policy</a>
+        <a href="pages/faq.html">FAQ</a>
+      </div>
+      <div class="sns">
+        <a href="https://www.facebook.com/" target="_blank" rel="noopener"
+          ><img
+            src="images/ic_facebook.png"
+            alt="페이스북 아이콘"
+            width="20"
+            height="20"
+        /></a>
+        <a href="https://twitter.com/" target="_blank" rel="noopener"
+          ><img
+            src="images/ic_twitter.png"
+            alt="트위터 아이콘"
+            width="20"
+            height="20"
+        /></a>
+        <a href="https://www.youtube.com/" target="_blank" rel="noopener"
+          ><img
+            src="images/ic_youtube.png"
+            alt="유튜브 아이콘"
+            width="20"
+            height="20"
+        /></a>
+        <a href="https://www.instagram.com/" target="_blank" rel="noopener"
+          ><img
+            src="images/ic_instagram.png"
+            alt="인스타그램 아이콘"
+            width="20"
+            height="20"
+        /></a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/pages/faq.html b/pages/faq.html
@@ -0,0 +1,11 @@
+<!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>
+  faq
+</body>
+</html>
diff --git a/pages/items.html b/pages/items.html
@@ -0,0 +1,11 @@
+<!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>
+  items
+</body>
+</html>
diff --git a/pages/login.html b/pages/login.html
@@ -0,0 +1,11 @@
+<!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>
+  login
+</body>
+</html>
diff --git a/pages/privacy.html b/pages/privacy.html
@@ -0,0 +1,11 @@
+<!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>
+  privacy
+</body>
+</html>