codeit-bootcamp-frontend · devToram · Oct 28, 2024 · Oct 26, 2024 · Oct 26, 2024 · devToram
diff --git a/12-Sprint-Mission/Group 33680.png b/12-Sprint-Mission/Group 33680.png
diff --git a/12-Sprint-Mission/Group.png b/12-Sprint-Mission/Group.png
diff --git a/12-Sprint-Mission/Img_home_01.png b/12-Sprint-Mission/Img_home_01.png
diff --git a/12-Sprint-Mission/Img_home_02.png b/12-Sprint-Mission/Img_home_02.png
diff --git a/12-Sprint-Mission/Img_home_03.png b/12-Sprint-Mission/Img_home_03.png
diff --git a/12-Sprint-Mission/Img_home_bottom.png b/12-Sprint-Mission/Img_home_bottom.png
diff --git a/12-Sprint-Mission/PandaMarket.html b/12-Sprint-Mission/PandaMarket.html
@@ -0,0 +1,76 @@
+<!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="style.css">
+  </head>
+
+  <body>
+    <header>
+      <a href="/"><img src="pandamarket.png" alt="판다마켓"></a>
+      <a href="login.html" id="loginButton" class="button">로그인</a>
+    </header>
+
+    <main>
+
+      <section id="tree" class="banner">
+        <div class="picture">
+          <h1>일상의 모든 물건을<br/>거래해 보세요</h1>
+          <a href="items.html" class="button click-button">구경하러 가기</a>
+        </div>
+      </section>
+
+      <section class="picture">
+        <div class="feature">
+          <img src="Img_home_01.png" alt="인기 상품">
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>인기 상품을<br/>확인해 보세요</h1>
+            <p class="feature-description">가장 HOT한 중고거래 물품을<br/>판다마켓에서 확인해 보세요</p>
+          </div>
+        </div>
+
+        <div class="feature">
+          <div class="feature-content">
+            <h2 class="feature-tag">Search</h2>
+            <h1>구매를 원하는<br/>상품을 검색하세요</h1>
+            <p class="feature-description">구매하고 싶은 물품은 검색해서<br/>쉽게 찾아보세요</p>
+          </div>
+          <img src="Img_home_02.png" alt="검색 기능">
+        </div>
+
+        <div class="feature">
+          <img src="Img_home_03.png" alt="판매 상품 등록">
+          <div class="feature-content">
+            <h2 class="feature-tag">Register</h2>
+            <h1>판매를 원하는<br/>상품을 등록하세요</h1>
+            <p class="feature-description"> 어떤 물건이든 판매하고 싶은 상품을<br/>쉽게 등록하세요</p>
+          </div>
+        </div>
+
+      </section>
+
+      <section id="ground" class="banner">
+        <div class="picture">
+          <h1>믿을 수 있는<br/>판다마켓 중고거래</h1>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div>©codeit - 2024</div>
+      <div id="footerMenu">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <a href="https://www.facebook.com/" target="_blank"><img src="ic_facebook.svg" alt="페이스북" /></a>
+        <a href="https://twitter.com/" target="_blank"><img src="ic_twitter.svg" alt="트위터" /></a>
+        <a href="https://www.youtube.com/" target="_blank"><img src="ic_youtube.svg" alt="유튜브" /></a>
+        <a href="https://www.instagram.com/" target="_blank"><img src="ic_instagram.svg" alt="인스타그램"/></a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/12-Sprint-Mission/ic_facebook.svg b/12-Sprint-Mission/ic_facebook.svg
diff --git a/12-Sprint-Mission/ic_instagram.svg b/12-Sprint-Mission/ic_instagram.svg
diff --git a/12-Sprint-Mission/ic_twitter.svg b/12-Sprint-Mission/ic_twitter.svg
diff --git a/12-Sprint-Mission/ic_youtube.svg b/12-Sprint-Mission/ic_youtube.svg
diff --git a/12-Sprint-Mission/pandamarket.png b/12-Sprint-Mission/pandamarket.png
diff --git a/12-Sprint-Mission/style.css b/12-Sprint-Mission/style.css
@@ -0,0 +1,107 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 200px;
+  background-color: #ffffff;
+}
+
+#loginButton {
+  font-size: 20px;
+  border-radius: 10px;
+  padding: 10px 20px;
+}
+
+.picture {
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+h1 {
+  font-size: 50px;
+}
+
+.button {
+  background-color: #3692ff;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+
+.click-button {
+  border-radius: 50px;
+  padding: 20px 120px;
+}
+
+.banner {
+  background-color: #cfe5ff;
+  height: 540px;
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-position: 60% bottom;
+  background-size: 30%;
+}
+
+#tree {
+  background-image: url("Group 33680.png");
+}
+
+#ground {
+  background-image: url("Img_home_bottom.png");
+}
+
+.feature {
+  padding: 138px 0;
+  display: flex;
+  align-items: center;
+  gap: 5%;
+}
+
+.feature-content {
+  display: inline;
+}
+
+.feature-tag {
+  color: #3692ff;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.feature-description {
+  font-size: 22px;
+  margin-top: 25px;
+}
+
+footer {
+  background-color: #111827;
+  color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 50px 200px 100px 200px;
+  font-size: 15px;
+}
+
+#footerMenu {
+  display: flex;
+  gap: 50px;
+}
+
+#socialMedia {
+  display: flex;
+  gap: 12px;
+
+}
diff --git a/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter.png b/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter.png
diff --git a/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter@2x.png b/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter@2x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter@3x.png b/12-Sprint-Mission/스프린트 미션 (1)/ic_twitter@3x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube.png b/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube.png
diff --git a/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube@2x.png b/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube@2x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube@3x.png b/12-Sprint-Mission/스프린트 미션 (2)/ic_youtube@3x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram.png b/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram.png
diff --git a/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram@2x.png b/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram@2x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram@3x.png b/12-Sprint-Mission/스프린트 미션 (3)/ic_instagram@3x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (4)/Property 1=md@2x.png b/12-Sprint-Mission/스프린트 미션 (4)/Property 1=md@2x.png
diff --git a/12-Sprint-Mission/스프린트 미션 (4)/Property 1=md@3x.png b/12-Sprint-Mission/스프린트 미션 (4)/Property 1=md@3x.png
diff --git a/12-Sprint-Mission/스프린트 미션/Group 33680.png b/12-Sprint-Mission/스프린트 미션/Group 33680.png
diff --git a/12-Sprint-Mission/스프린트 미션/Group.png b/12-Sprint-Mission/스프린트 미션/Group.png
diff --git a/12-Sprint-Mission/스프린트 미션/Img_home_01.png b/12-Sprint-Mission/스프린트 미션/Img_home_01.png
diff --git a/12-Sprint-Mission/스프린트 미션/Img_home_02.png b/12-Sprint-Mission/스프린트 미션/Img_home_02.png
diff --git a/12-Sprint-Mission/스프린트 미션/Img_home_03.png b/12-Sprint-Mission/스프린트 미션/Img_home_03.png
diff --git a/12-Sprint-Mission/스프린트 미션/Img_home_03@2x.png b/12-Sprint-Mission/스프린트 미션/Img_home_03@2x.png
diff --git a/12-Sprint-Mission/스프린트 미션/Img_home_bottom.png b/12-Sprint-Mission/스프린트 미션/Img_home_bottom.png
diff --git a/12-Sprint-Mission/스프린트 미션/PandaMarket.html b/12-Sprint-Mission/스프린트 미션/PandaMarket.html
@@ -0,0 +1,76 @@
+<!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="style.css">
+  </head>
+
+  <body>
+    <header>
+      <a href="/"><img src="pandamarket.png" alt="판다마켓"></a>
+      <a href="login.html" id="loginButton" class="button">로그인</a>
+    </header>
+
+    <main>
+
+      <section id="tree" class="banner">
+        <div class="picture">
+          <h1>일상의 모든 물건을<br/>거래해 보세요</h1>
+          <a href="items.html" class="button click-button">구경하러 가기</a>
+        </div>
+      </section>
+
+      <section class="picture">
+        <div class="feature">
+          <img src="Img_home_01.png" alt="인기 상품">
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>인기 상품을<br/>확인해 보세요</h1>
+            <p class="feature-description">가장 HOT한 중고거래 물품을<br/>판다마켓에서 확인해 보세요</p>
+          </div>
+        </div>
+
+        <div class="feature">
+          <div class="feature-content">
+            <h2 class="feature-tag">Search</h2>
+            <h1>구매를 원하는<br/>상품을 검색하세요</h1>
+            <p class="feature-description">구매하고 싶은 물품은 검색해서<br/>쉽게 찾아보세요</p>
+          </div>
+          <img src="Img_home_02.png" alt="검색 기능">
+        </div>
+
+        <div class="feature">
+          <img src="Img_home_03.png" alt="판매 상품 등록">
+          <div class="feature-content">
+            <h2 class="feature-tag">Register</h2>
+            <h1>판매를 원하는<br/>상품을 등록하세요</h1>
+            <p class="feature-description"> 어떤 물건이든 판매하고 싶은 상품을<br/>쉽게 등록하세요</p>
+          </div>
+        </div>
+
+      </section>
+
+      <section id="ground" class="banner">
+        <div class="picture">
+          <h1>믿을 수 있는<br/>판다마켓 중고거래</h1>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div>©codeit - 2024</div>
+      <div id="footerMenu">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="socialMedia">
+        <a href="https://www.facebook.com/" target="_blank"><img src="ic_facebook.svg" alt="페이스북" /></a>
+        <a href="https://twitter.com/" target="_blank"><img src="ic_twitter.svg" alt="트위터" /></a>
+        <a href="https://www.youtube.com/" target="_blank"><img src="ic_youtube.svg" alt="유튜브" /></a>
+        <a href="https://www.instagram.com/" target="_blank"><img src="ic_instagram.svg" alt="인스타그램"/></a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/12-Sprint-Mission/스프린트 미션/ic_facebook.svg b/12-Sprint-Mission/스프린트 미션/ic_facebook.svg
diff --git a/12-Sprint-Mission/스프린트 미션/ic_instagram.svg b/12-Sprint-Mission/스프린트 미션/ic_instagram.svg
diff --git a/12-Sprint-Mission/스프린트 미션/ic_twitter.svg b/12-Sprint-Mission/스프린트 미션/ic_twitter.svg
diff --git a/12-Sprint-Mission/스프린트 미션/ic_youtube.svg b/12-Sprint-Mission/스프린트 미션/ic_youtube.svg
diff --git a/12-Sprint-Mission/스프린트 미션/pandamarket.png b/12-Sprint-Mission/스프린트 미션/pandamarket.png