codeit-bootcamp-frontend · GANGYIKIM · Feb 26, 2025 · Feb 24, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,26 +2,30 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- [x] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
+- [x] title은 "판다마켓"로 설정합니다.
+- [x] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
+- [] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
+- [x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
+- [x] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
+- [x] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
+- [x] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
+- [x] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
+- [x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
 
 ### 심화
 
-- [x]
-- []
+- [x] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
 
 ## 주요 변경사항
 
--
--
+- main content 중앙에 고정되도록 레이아웃 변경
 
 ## 스크린샷
 
 ![image](이미지url)
 
 ## 멘토에게
 
--
--
+- min, max 크기 활용 방법을 잘 모르겠습니다.
 - 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Sprint Misson 1
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/landing-page/banner.png b/assets/landing-page/banner.png
diff --git a/assets/landing-page/footer.png b/assets/landing-page/footer.png
diff --git a/assets/landing-page/img/landing/Rectangle 2993.png b/assets/landing-page/img/landing/Rectangle 2993.png
diff --git a/assets/landing-page/img/landing/desktop_01.png b/assets/landing-page/img/landing/desktop_01.png
diff --git a/assets/landing-page/img/landing/desktop_02.png b/assets/landing-page/img/landing/desktop_02.png
diff --git a/assets/landing-page/img/landing/desktop_03.png b/assets/landing-page/img/landing/desktop_03.png
diff --git a/assets/landing-page/img/landing/desktop_04.png b/assets/landing-page/img/landing/desktop_04.png
diff --git a/assets/landing-page/img/landing/mobile_01.png b/assets/landing-page/img/landing/mobile_01.png
diff --git a/assets/landing-page/img/landing/mobile_02.png b/assets/landing-page/img/landing/mobile_02.png
diff --git a/assets/landing-page/img/landing/mobile_03.png b/assets/landing-page/img/landing/mobile_03.png
diff --git a/assets/landing-page/img/landing/mobile_04.png b/assets/landing-page/img/landing/mobile_04.png
diff --git a/assets/landing-page/img/landing/mobile_05.png b/assets/landing-page/img/landing/mobile_05.png
diff --git a/assets/landing-page/img/landing/tablet_01.png b/assets/landing-page/img/landing/tablet_01.png
diff --git a/assets/landing-page/img/landing/tablet_02.png b/assets/landing-page/img/landing/tablet_02.png
diff --git a/assets/landing-page/img/landing/tablet_03.png b/assets/landing-page/img/landing/tablet_03.png
diff --git a/assets/landing-page/img/landing/tablet_04.png b/assets/landing-page/img/landing/tablet_04.png
diff --git a/assets/landing-page/img/landing/tablet_05.png b/assets/landing-page/img/landing/tablet_05.png
diff --git a/assets/landing-page/main-1.png b/assets/landing-page/main-1.png
diff --git a/assets/landing-page/main-2.png b/assets/landing-page/main-2.png
diff --git a/assets/landing-page/main-3.png b/assets/landing-page/main-3.png
diff --git a/assets/logos/Property 1=Typo.png b/assets/logos/Property 1=Typo.png
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property 1=lg.png b/assets/logos/Property 1=lg.png
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property 1=md-1.png b/assets/logos/Property 1=md-1.png
diff --git a/assets/logos/Property 1=md.png b/assets/logos/Property 1=md.png
diff --git a/assets/logos/Property 1=md.svg b/assets/logos/Property 1=md.svg
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property 1=sm-1.png b/assets/logos/Property 1=sm-1.png
diff --git a/assets/logos/Property 1=sm.svg b/assets/logos/Property 1=sm.svg
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/Property [email protected] b/assets/logos/Property [email protected]
diff --git a/assets/logos/nav-logo.png b/assets/logos/nav-logo.png
diff --git a/faq.html b/faq.html
diff --git a/index.html b/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="kr">
-<html lang="kr">
+<html lang="ko">
-<html lang="kr">
+<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" />
+    <script
+      src="https://kit.fontawesome.com/0f08ea7d4a.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <header>
+      <nav class="nav-bar">
+        <a href="/" class="nav-logo">
+          <img src="assets/logos/nav-logo.png" alt="img-nav-logo" />
+        </a>
+        <div class="nav-spacer"></div>
+        <a href="/login" class="nav-login-button"> 로그인 </a>
-        <a href="/login" class="nav-login-button"> 로그인 </a>
+        <a href="/login.html" class="nav-login-button">로그인</a>
-        <a href="/login" class="nav-login-button"> 로그인 </a>
+        <a href="/login.html" class="nav-login-button">로그인</a>
+      </nav>
+      <section class="banner-section">
+        <div class="banner-content">
+          <p class="banner-text">
+            일상의 모든 물건을<br />
+            거래해 보세요
+          </p>
+          <a href="/items" class="banner-button"> 구경하러 가기 </a>
+        </div>
+        <img src="assets/landing-page/banner.png" alt="banner-image" />
+      </section>
+    </header>
+    <main class="main-content">
+      <section>
+        <img
+          src="assets/landing-page/main-1.png"
+          alt="img-hot-item"
+          class="img-hot-item"
+        />
+        <article class="main-content-text">
+          <h2 class="category hot-item">Hot item</h2>
+          <h1 class="title hot-item">
+            인기 상품을<br />
+            확인해보세요
+          </h1>
+          <p class="description hot-item">
+            가장 HOT한 중고거래 물품을<br />
+            판다 마켓에서 확인해 보세요
+          </p>
+        </article>
+      </section>
+      <section>
+        <article class="main-content-text">
+          <h2 class="category search-item">Search</h2>
+          <h1 class="title search-item">
+            구매를 원하는<br />
+            상품을 검색하세요
+          </h1>
+          <p class="description search-item">
+            구매하고 싶은 물품은 검색해서<br />
+            쉽게 찾아보세요
+          </p>
+        </article>
+        <img src="assets/landing-page/main-2.png" alt="search-item" />
+      </section>
+      <section>
+        <img
+          src="assets/landing-page/main-3.png"
+          alt="img-hot-item"
+          class="img-hot-item"
+        />
+        <article class="main-content-text">
+          <h2 class="category hot-item">Hot item</h2>
+          <h1 class="title hot-item">
+            인기 상품을<br />
+            확인해보세요
+          </h1>
+          <p class="description hot-item">
+            가장 HOT한 중고거래 물품을<br />
+            판다 마켓에서 확인해 보세요
+          </p>
+        </article>
+      </section>
+    </main>
+    <footer>
+      <section class="banner-section">
+        <div class="banner-content">
+          <p class="banner-text">
+            믿을 수 있는<br />
+            판다마켓 중고 거래
+          </p>
+        </div>
+        <img src="assets/landing-page/footer.png" alt="footer-image" />
+      </section>
+      <section class="footer-section">
+        <div class="footer-copyright">©codeit - 2024</div>
+        <div class="footer-links">
+          <a href="/privacy">Privacy Policy</a>
+          <a href="/faq">FAQ</a>
+        </div>
+        <div class="footer-social">
+          <a href="https://www.facebook.com"
+            ><i class="fa-brands fa-facebook"></i
+          ></a>
+          <a href="https://www.x.com"><i class="fa-brands fa-twitter"></i></a>
+          <a href="https://www.youtube.com"
+            ><i class="fa-brands fa-youtube"></i
+          ></a>
+          <a href="https://www.instagram.com"
+            ><i class="fa-brands fa-instagram"></i
+          ></a>
+        </div>
-        <div class="footer-social">
-          <a href="https://www.facebook.com"
-            ><i class="fa-brands fa-facebook"></i
-          ></a>
-          <a href="https://www.x.com"><i class="fa-brands fa-twitter"></i></a>
-          <a href="https://www.youtube.com"
-            ><i class="fa-brands fa-youtube"></i
-          ></a>
-          <a href="https://www.instagram.com"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
-        </div>
+        <ul class="footer-social">
+            <li>
+              <a href="https://www.facebook.com">
+                  <i class="fa-brands fa-facebook"></i>
+              </a>
+            </li>
+        </ul>
-        <div class="footer-social">
-          <a href="https://www.facebook.com"
-            ><i class="fa-brands fa-facebook"></i
-          ></a>
-          <a href="https://www.x.com"><i class="fa-brands fa-twitter"></i></a>
-          <a href="https://www.youtube.com"
-            ><i class="fa-brands fa-youtube"></i
-          ></a>
-          <a href="https://www.instagram.com"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
-        </div>
+        <ul class="footer-social">
+            <li>
+              <a href="https://www.facebook.com">
+                  <i class="fa-brands fa-facebook"></i>
+              </a>
+            </li>
+        </ul>
+      </section>
+    </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,147 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 1000px;
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+}
+/* 네비게이션 바 */
+.nav-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav-logo img {
+  flex-shrink: 0;
+  margin-left: 200px;
+}
+
+.nav-spacer {
+  flex: 1;
+}
+
+.nav-login-button {
+  margin-right: 200px;
+  padding: 12px 40px;
+  background-color: #3692ff;
+  color: #fff;
+  border-radius: 8px;
+}
+
+/* 배너 섹션 */
+.banner-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 100px;
+  background-color: #cfe5ff;
+}
+
+.banner-text {
+  font-size: 40px;
+  font-weight: 700;
+  color: #374151;
+}
+
+.banner-button {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  padding: 16px;
+  background-color: #3692ff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 24px;
+  font-weight: 600;
+}
+
+/* 메인 컨텐츠 */
+.main-content {
+  max-width: 1200px;
+  margin: 120px auto;
+}
+.main-content section {
+  min-width: 1200px;
+  width: 100%;
+  padding: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 100px;
+}
+
+.main-content-text {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.main-content .category {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: #3692ff;
+}
+
+.main-content .title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: #374151;
+  margin: 0;
+}
+
+.main-content .description {
+  font-size: 20px;
+  color: #374151;
+}
+
+.main-content-text .hot-item {
+  text-align: left;
+}
+
+.main-content-text .search-item {
+  text-align: right;
+}
+
+.hot-item {
+  text-align: left;
+}
+
+.search-item {
+  text-align: right;
+}
+
+.footer-section {
+  background-color: #111827;
+  height: 100px;
+  display: flex;
+  justify-content: space-around;
+  padding: 24px;
+}
+
+.footer-copyright {
+  color: #9ca3af;
+}
+
+.footer-links,
+.footer-social {
+  display: flex;
+  gap: 12px;
+}
+
+.footer-links a,
+.footer-social a {
+  color: #9ca3af;
+  text-decoration: none;
+}