Sprint Mission 1

codeit-bootcamp-frontend · Sep 8, 2024 · 1e96b0d · 1e96b0d
1 parent 7a503ab
commit 1e96b0d
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 0 deletions.
diff --git a/코드잇 스프린트 미션 1/faq.html b/코드잇 스프린트 미션 1/faq.html
diff --git a/코드잇 스프린트 미션 1/image/contents/Img_home_01.png b/코드잇 스프린트 미션 1/image/contents/Img_home_01.png
diff --git a/코드잇 스프린트 미션 1/image/contents/Img_home_02.png b/코드잇 스프린트 미션 1/image/contents/Img_home_02.png
diff --git a/코드잇 스프린트 미션 1/image/contents/Img_home_03.png b/코드잇 스프린트 미션 1/image/contents/Img_home_03.png
diff --git a/코드잇 스프린트 미션 1/image/contents/Img_home_bottom.png b/코드잇 스프린트 미션 1/image/contents/Img_home_bottom.png
diff --git a/코드잇 스프린트 미션 1/image/contents/Img_home_top.png b/코드잇 스프린트 미션 1/image/contents/Img_home_top.png
diff --git a/코드잇 스프린트 미션 1/image/logo/Property 1=sm.png b/코드잇 스프린트 미션 1/image/logo/Property 1=sm.png
diff --git a/코드잇 스프린트 미션 1/image/logo/favicon-16x16.png b/코드잇 스프린트 미션 1/image/logo/favicon-16x16.png
diff --git a/코드잇 스프린트 미션 1/image/sns/ic_facebook.png b/코드잇 스프린트 미션 1/image/sns/ic_facebook.png
diff --git a/코드잇 스프린트 미션 1/image/sns/ic_instagram.png b/코드잇 스프린트 미션 1/image/sns/ic_instagram.png
diff --git a/코드잇 스프린트 미션 1/image/sns/ic_twitter.png b/코드잇 스프린트 미션 1/image/sns/ic_twitter.png
diff --git a/코드잇 스프린트 미션 1/image/sns/ic_youtube.png b/코드잇 스프린트 미션 1/image/sns/ic_youtube.png
diff --git a/코드잇 스프린트 미션 1/index.css b/코드잇 스프린트 미션 1/index.css
@@ -0,0 +1,125 @@
+* { 
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: "Pretendard Variable", sans-serif;
+  color: #374151;
+}
+
+a {
+  text-decoration: none; 
+  color: inherit; /* 링크 색깔 없애기 */
+}
+
+/* header */
+
+header {
+  width: 100%;
+  height: 70px;
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #DFDFDF;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 200px;
+}
+
+#header-banner {
+  height: 540px;
+  background-color: #CFE5FF;
+  display: flex;
+  align-items: center;
+  padding: 200px 405px 0 405px;
+}
+
+/* 창을 줄여도 로그인 버튼이 줄어들지 않게 하려면 어떻게 해야하나요? */
+
+#loginbutton {
+  min-width: 128px; 
+  height: 48px;
+  background-color: #3692FF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #F3F4F6;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.banner .text {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-bottom: 60px;
+}
+
+.watch-button {
+  width: 357px; 
+  height: 56px;
+  background-color: #3692FF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #F9FAFB;
+  border-radius: 40px;
+}
+
+/* main */
+
+.first, .second, .third {
+  width: 1920px; 
+  height: 720px;
+  display: flex;
+  align-items: center;
+  padding: 138px 466px;
+  gap: 64px;
+}
+
+.second .text {
+  text-align: right;
+}
+
+
+.keyword {
+  color: #3692FF;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+/* footer */
+
+#footer-banner {
+  height: 540px;
+  background-color: #CFE5FF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+footer {
+  background-color: #111827;
+  padding: 32.5px 200px 108px 200px;
+  color: #9CA3AF;
+  font-weight: 400;
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#footerlink {
+  display: flex;
+  gap: 30px;
+  color: #E5E7EB;
+}
+
+#snslink {
+  display: flex;
+  gap: 12px;
+}
diff --git a/코드잇 스프린트 미션 1/index.html b/코드잇 스프린트 미션 1/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="image/logo/favicon-16x16.png">
+  <title>판다마켓</title>
+  <link rel="stylesheet" href="index.css">
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
+</head>
+<body>
+  <header>
+    <a href="/"><img src="image/logo/Property 1=sm.png" alt="판다마켓로고"></a>
+    <a href="login.html" id="loginbutton">로그인</a>
+  </header>
+
+  <main>
+    <div id="header-banner" class="banner">
+      <div class="text">
+        <h1>일상의 모든 물건을<br>거래해 보세요</h1>
+        <a href="items.html" class="watch-button">구경하러 가기</a>
+      </div>
+      <img src="image/contents/Img_home_top.png">
+    </div>
+
+    <div class="first">
+      <img src="image/contents/Img_home_01.png">
+      <div class="text">
+        <p class="keyword">Hot Item</p>
+        <h1>인기 상품을<br>확인해 보세요</h1>
+        <p>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+      </div>
+    </div>
+
+    <div class="second">
+      <div class="text">
+        <p class="keyword">Search</p>
+        <h1>구매를 원하는<br>상품을 검색하세요</h1>
+        <p>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+      </div>
+      <img src="image/contents/Img_home_02.png">
+    </div>
+
+    <div class="third">
+      <img src="image/contents/Img_home_03.png">
+      <div class="text">
+        <p class="keyword">Register</p>
+        <h1>판매를 원하는<br>상품을 등록하세요</h1>
+        <p>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+      </div>
+    </div>
+
+    <div id="footer-banner" class="banner">
+      <div class="text">
+        <h1>믿을 수 있는<br>판다마켓 중고 거래</h1>
+      </div>
+      <img src="image/contents/Img_home_bottom.png">
+    </div>
+  </main>
+
+    <footer>
+      <div>@codeit - 2024</div>
+      <div id="footerlink">
+        <a href="privacy.html">Privacy Policy</a>
+        <a href="faq.html">FAQ</a>
+      </div>
+      <div id="snslink">
+        <a href="https://www.facebook.com/" target="_blank"><img src="/image/sns/ic_facebook.png" alt="페이스북"></a>
+        <a href="https://x.com/?lang=ko/" target="_blank"><img src="/image/sns/ic_twitter.png" alt="트위터"></a>
+        <a href="https://www.youtube.com/" target="_blank"><img src="/image/sns/ic_youtube.png" alt="유튜브"></a>
+        <a href="https://www.instagram.com/" target="_blank"><img src="/image/sns/ic_instagram.png" alt="인스타그램"></a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/코드잇 스프린트 미션 1/items.html b/코드잇 스프린트 미션 1/items.html
diff --git a/코드잇 스프린트 미션 1/login.html b/코드잇 스프린트 미션 1/login.html
diff --git a/코드잇 스프린트 미션 1/privacy.html b/코드잇 스프린트 미션 1/privacy.html
diff --git a/코드잇 스프린트 미션 1/sns-icon - 바로 가기.lnk b/코드잇 스프린트 미션 1/sns-icon - 바로 가기.lnk