codeit-bootcamp-frontend · addiescode-sj · Apr 10, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/Property 1=md.png b/img/Property 1=md.png
diff --git a/img/Property [email protected] b/img/Property [email protected]
diff --git a/img/Property [email protected] b/img/Property [email protected]
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/index.css b/index.css
@@ -0,0 +1,175 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: #ffffff;
+  color: #374151;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1120px;
+  margin: 0 auto;
+}
+
+.main-container {
+  padding: 138px 0;
+  display: grid;
+  grid-template-areas: 
+    "hotItem"
+    "search"
+    "register";
+  gap: 276px;
+  width: 100%;
+}
+
+.button {
+  background-color: #3692ff;
+  padding: 16px 124px;
+  border-radius: 9999px;
+  color: #f9fafb;
+  margin-bottom:100px;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.button:hover {
+  background-color: #1251aa
+}
+
+.login {
+  padding: 16px 34px;
+  border-radius: 10px;
+  color: #f3f4f6;
+  margin: 0;
+}
+
+.title-helper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 auto;
+  width: 1110px;
+}
+
+.title {
+  padding: 200px 0 0;
+  background-color: #cfe5ff;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.title-p {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.subtitle {
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 40px;
+}
+
+
+.home {
+  flex-shrink: 0;
+}
+
+
+section {
+  margin: 0 auto;
+}
+
+.badge {
+  font-size: 18px;
+  font-weight: 700;
+  color: #3692ff;
+  line-height: 26px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 140%;
+}
+
+p {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+.hotItem {
+  grid-area: hotItem;
+}
+
+.register {
+  grid-area: register;
+}
+
+.hotItem,
+.search,
+.register {
+  display: flex;
+  justify-content: center;
+  border-radius: 12px;
+  align-items: center;
+  gap: 64px;
+  background-color: #fcfcfc;
+  width: 1110px;
+}
+
+.search {
+  grid-area: search;
+  flex-direction: row-reverse;
+}
+
+.search
+.section-content {
+  text-align: right;
+}
+
+.bottom {
+  background-color: #fcfcfc;
+  padding-top: 138px;
+}
+
+.bottom
+.subtitle {
+  margin-bottom: 160px;
+}
+
+footer {
+  background-color: #111827;
+  height: 160px;
+
+}
+
+.footer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 40px;
+  margin: 0 auto;
+  width: 1110px;
+}
+
+.link {
+  text-decoration: none;
+  color: #e5e7eb;
+}
+
+footer a {
+  padding: 0 10px;
+}
+
+a {
+  cursor: pointer;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,127 @@
+<!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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Titillium+Web:wght@300;600&display=swap"
+      rel="stylesheet">
+    <link rel="stylesheet" href="index.css">
+  </head>
+
+<body>
+  <nav>
+    <div>
+      <a href="/" aria-label="홈으로 이동"><img id="logo" src="img/Property 1=md.png" alt="navbar logo로 둥근 정사각형 안 판다마켓의 캐릭터가 그려져 있는 아이콘 옆에 '판다마켓'이라는 글씨가 써져있다."></a>
+    </div>
+    <a class="button login" href="/login" aria-label="로그인 폼으로 이동">로그인</a>
+  </nav>
+
+  <header>
+    <section class="title">
+      <div class="title-helper">
+        <div class="title-p">
+          <div class="subtitle">
+            일상의 모든 물건을<br>
+            거래해 보세요
+          </div>
+          <a class="button" href="/item" aria-label="상품이 등록되어있는 홈페이지로 이동">
+            구경하러 가기
+          </a>
+        </div>
+        <img class="home" src="img/Img_home_top.png" alt="동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다.">
+      </div>
+    </section>
+  </header>
+
+  <main>
+    <div class="main-container">
+      <section class="hotItem">
+        <img src="img/Img_home_01.png" alt="두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습">
+        <div class="section-content">
+          <label class="badge">
+            Hot item
+          </label>
+          <h2 class="section-title">
+            인기 상품을<br>
+            확인해 보세요
+          </h2>
+          <p>
+            가장 HOT한 중고거래 물품을 <br>
+            판다 마켓에서 확인해보세요
+          </p>
+        </div>
+      </section>
+
+      <section class="search">
+        <img src="img/Img_home_02.png" alt="나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림">
+        <div class="section-content">
+          <label class="badge">
+            Search
+          </label>
+          <h2 class="section-title">
+            구매를 원하는<br>
+            상품을 검색하세요
+          </h2>
+          <p>
+            구매 하고싶은 물건은 검색해서<br>
+            쉽게 찾아보세요
+          </p>
+        </div>
+      </section>
+
+      <section class="register">
+        <img src="img/Img_home_03.png" alt="나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림">
+        <div class="section-content">
+          <label class="badge">
+            Register
+          </label>
+          <h2 class="section-title">
+            판매를 원하는<br>
+            상품을 등록하세요
+          </h2>
+          <p>
+            어떤 물건이든 판매 하고싶은 상품을 <br>
+            쉽게 등록하세요
+          </p>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <div class="bottom">
+    <section class="title">
+      <div class="title-helper">
+        <div class="title-p">
+          <div class="subtitle">
+            믿을 수 있는<br>
+            판다마켓 중고 거래
+          </div>
+        </div>
+        <img class="home" src="img/Img_home_bottom.png" alt="동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다.">
+      </div>
+    </section>
+  </div>
+
+  <footer>
+    <div class="footer">
+      <div>
+        ©codeit - 2024
+      </div>
+      <div>
+        <a class="link" href="/privacy" aria-label="개인정보 처리 방침">Privacy Policy</a>
+        <a class="link" href="/faq" aria-label="FAQ페이지로 이동">FAQ</a>
+      </div>
+      <div class="social-link">
+        <a href="https://www.facebook.com" rel="noopener noreferrer" target="_blank"><img src="img/ic_facebook.png" alt="facebook의 아이콘으로"></a>
+        <a href="https://www.twitter.com" rel="noopener noreferrer" target="_blank"><img src="img/ic_twitter.png" alt="twitter의 아이콘"></a>
+        <a href="https://www.youtube.com" rel="noopener noreferrer" target="_blank"><img src="img/ic_youtube.png" alt="youtube의 아이콘"></a>
+        <a href="https://www.instagram.com" rel="noopener noreferrer" target="_blank"><img src="img/ic_instagram.png" alt="instagram의 아이콘"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>