Codeit Sprint Mission - week1

codeit-bootcamp-frontend · Apr 26, 2024 · 9ad59a4 · 9ad59a4
1 parent 4dc5dd0
commit 9ad59a4
Show file tree

Hide file tree

Showing 12 changed files with 338 additions and 0 deletions.
diff --git a/week1/image/Img_home_01.png b/week1/image/Img_home_01.png
diff --git a/week1/image/Img_home_02.png b/week1/image/Img_home_02.png
diff --git a/week1/image/Img_home_03.png b/week1/image/Img_home_03.png
diff --git a/week1/image/Img_home_bottom.png b/week1/image/Img_home_bottom.png
diff --git a/week1/image/Img_home_top.png b/week1/image/Img_home_top.png
diff --git a/week1/image/ic_facebook.png b/week1/image/ic_facebook.png
diff --git a/week1/image/ic_instagram.png b/week1/image/ic_instagram.png
diff --git a/week1/image/ic_twitter.png b/week1/image/ic_twitter.png
diff --git a/week1/image/ic_youtube.png b/week1/image/ic_youtube.png
diff --git a/week1/image/logo.png b/week1/image/logo.png
diff --git a/week1/index.html b/week1/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+
+    <!--메인 페이지 헤더-->
+    <header>
+      <a class="header-logo" href="/"><img src="image/logo.png"></a>
+      <a class="header-login" href="/login" >로그인</a>
+    </header>
+
+    <!--메인 페이지 메인-->
+    <main>
+
+      <!--메인 상단 배너-->
+      <div class="main-banner-top">
+        <div class="main-banner-top-container">
+          <div class="main-banner-top-text-area">
+            <p class="main-banner-top-text">
+              일상의 모든 물건을<br>
+              거래해 보세요
+            </p>
+            <a href="/items" class="main-banner-top-button-watch">
+              구경하러 가기
+            </a>
+          </div>
+          <div class="main-banner-top-image"></div>
+        </div>
+      </div>
+
+      <!--메인 중앙 컨텐츠-->
+      <div class="main-container">
+          <div class="main-contents">
+            <div class="main-contents-image" style="background-image:url('image/Img_home_01.png');"></div>
+            <div class="main-contents-text-box">
+              <p class="main-contents-text-tag">
+                Hot item
+              </p>
+              <h1 class="main-contents-text-title">
+                인기 상품을<br>
+                확인해 보세요
+              </h1>
+              <p class="main-contents-text-detail">
+                가장 HOT한 중고거래 물품을<br>
+                판다 마켓에서 확인해 보세요
+              </p>
+            </div>
+          </div>
+          <div class="main-contents">
+            <div class="main-contents-text-box" style="text-align: right;">
+              <p class="main-contents-text-tag">
+                Search
+              </p>
+              <h1 class="main-contents-text-title">
+                구매를 원하는<br>
+                상품을 검색하세요
+              </h1>
+              <p class="main-contents-text-detail">
+                구매하고 싶은 물품은 검색해서<br>
+                쉽게 찾아보세요
+              </p>
+            </div>
+            <div class="main-contents-image" style="background-image:url('image/Img_home_02.png');"></div>
+          </div>
+          <div class="main-contents">
+            <div class="main-contents-image" style="background-image:url('image/Img_home_03.png');"></div>
+            <div class="main-contents-text-box">
+              <p class="main-contents-text-tag">
+                Register
+              </p>
+              <h1 class="main-contents-text-title">
+                판매를 원하는<br>
+                상품을 등록하세요
+              </h1>
+              <p class="main-contents-text-detail">
+                어떤 물건이든 판매하고 싶은 상품을<br>
+                쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+      </div>
+
+      <!--메인 하단 배너-->
+      <div class="main-banner-bottom">
+        <div class="main-banner-bottom-container">
+          <div class="main-banner-bottom-text-area">
+            <p class="main-banner-bottom-text">
+              믿을 수 있는<br>
+              판다마켓 중고거래
+            </p>
+          </div>
+          <div class="main-banner-top-image"></div>
+        </div>
+      </div>
+    </main>
+
+    <!--메인 페이지 푸터-->      
+    <footer>
+      <div class="footer-container">
+        <p class="footer-copyright" style="margin-left: 200px;">
+          ©codeit - 2024
+        </p>
+        <div class="footer-button-area" style="justify-content: center; gap: 20px;">
+          <a class="footer-button" href="/privacy">
+            Privacy Policy
+          </a>
+          <a class="footer-button" href="/faq">
+            FAQ
+          </a>
+        </div>
+        <div class="footer-button-area" style="margin-right: 200px; justify-content: right; gap: 12px;">
+          <a href="https://www.facebook.com/?locale=ko_KR">
+            <img src="image/ic_facebook.png">
+          </a>
+          <a href="https://twitter.com/?lang=ko">
+            <img src="image/ic_twitter.png">
+          </a>
+          <a href="https://www.youtube.com/?themeRefresh=1">
+            <img src="image/ic_youtube.png">
+          </a>
+          <a href="https://www.instagram.com/">
+            <img src="image/ic_instagram.png">
+          </a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/week1/style.css b/week1/style.css
@@ -0,0 +1,206 @@
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+* {
+  font-family: 'Pretendard-Regular';
+}
+
+a {
+  text-decoration-line: none;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+}
+
+button {
+  border: 0px;
+  background: none;
+}
+
+header {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 1920px;
+  min-width: 700px;
+  height: 70px;
+}
+
+.header-logo {
+  margin-left: 200px;
+  width: 153px;
+  height: 51px;
+  margin: 0 auto 0 200px;
+}
+
+.header-login {
+  margin-right: 200px;   
+  width: 88px;
+  height: 16px;
+  padding: 12px 23px;
+  color: white;
+  background-color: #3692FF;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 19px;
+  font-weight: 600;
+  margin: 0 200px 0 auto;
+
+}
+
+.main-banner-top {
+  width: 100%;
+  min-width: 1920px;
+  max-width: 100%;
+  height: 540px;
+  background-color: #CFE5FF;
+}
+
+.main-banner-top-image {
+  position: relative;
+  left: -32px;
+  background-image: url('image/Img_home_top.png');
+  background-size: cover;
+  margin: 93px 0 0;
+  width: 996px;
+  height: 447px;
+}
+
+.main-banner-top-button-watch {
+  display: inline-block;
+  width: 98px;
+  height: 24px;
+  padding: 16px 124px;
+  border-radius: 40px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: center;
+  color: #ffffff;
+  background-color: #3692FF;
+}
+
+.main-banner-top-text {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  margin: 0 0 32px;;
+}
+
+.main-banner-top-text-area {
+  width: 357px;
+  height: 200px;
+}
+.main-banner-top-container {    
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-container {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.main-contents {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 720px;
+}
+
+.main-contents-image {
+  width: 50%;
+  height: 444px;
+}
+
+.main-contents-text-box {
+  padding: 64px;
+}
+
+.main-contents-text-detail {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 28.8px;
+  letter-spacing: 8%;
+}
+
+.main-contents-text-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  letter-spacing: 2%;
+}
+
+.main-contents-text-tag {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 25.2px;
+  color: #3692FF
+}
+
+.main-banner-bottom-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main-banner-bottom-text-area {
+  width: 357px;
+}
+
+.main-banner-bottom-text {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  margin: 0 0 32px;;
+}
+
+.main-banner-bottom {
+  width: 100%;
+  min-width: 1920px;
+  max-width: 100%;
+  height: 540px;
+  background-color: #CFE5FF;
+}
+
+footer {
+  margin: 0 auto;
+  width: 100%;
+  min-width: 1920px;
+  max-width: 100%;
+  height: 70px;
+  background-color: #111827;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1920px;
+  min-width: 700px;
+  height: 70px;
+  margin: 0 auto;
+}
+
+.footer-button-area {
+  display: flex;
+  flex-grow: 1;    
+}
+
+.footer-button-area > a {    
+  color: #E5E7EB;
+}
+
+.footer-copyright {
+  flex-grow: 1;
+  color: #9CA3AF;    
+}