codeit-bootcamp-frontend · dev-kjy · Apr 29, 2024 · Apr 26, 2024 · dev-kjy · Apr 29, 2024
diff --git a/sprint_mission1/image/footer_picture.png b/sprint_mission1/image/footer_picture.png
diff --git a/sprint_mission1/image/header_picture.png b/sprint_mission1/image/header_picture.png
diff --git a/sprint_mission1/image/hot_item_picture.png b/sprint_mission1/image/hot_item_picture.png
diff --git a/sprint_mission1/image/ic_facebook.png b/sprint_mission1/image/ic_facebook.png
diff --git a/sprint_mission1/image/ic_instagram.png b/sprint_mission1/image/ic_instagram.png
diff --git a/sprint_mission1/image/ic_twitter.png b/sprint_mission1/image/ic_twitter.png
diff --git a/sprint_mission1/image/ic_youtube.png b/sprint_mission1/image/ic_youtube.png
diff --git a/sprint_mission1/image/panda_face.png b/sprint_mission1/image/panda_face.png
diff --git a/sprint_mission1/image/panda_market_logo.png b/sprint_mission1/image/panda_market_logo.png
diff --git a/sprint_mission1/image/register_picture.png b/sprint_mission1/image/register_picture.png
diff --git a/sprint_mission1/image/search_picture.png b/sprint_mission1/image/search_picture.png
diff --git a/sprint_mission1/index.html b/sprint_mission1/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>
+    <section class="header-top-line">
+      <div class="logo-set">
+        <img src="image/panda_face.png" alt="판다 얼굴">
+        <a href="/"><img src="image/panda_market_logo.png" alt="판다마켓 로고"></a>
+      </div>
+      <span class="empty-center"></span>
+      <a href="/login" class="btn-login element-click">로그인</a>
+    </section>
+    <section class="header-main">
+      <div class="header-main-phrase">
+        <h1>
+          일상의 모든 물건을<br>
+          거래해 보세요
+        </h1>
+        <a href="/items" class="btn-go-looking element-click">구경하러 가기</a>
+      </div>
+      <img src="image/header_picture.png" alt="상단 그림">
+    </section>
+  </header>
+  <main>
+    <section class="card hot-item align-left">
+      <img src="image/hot_item_picture.png" alt="인기 상품 그림">
+      <div class="card-info">
+        <div class="card-title">Hot item</div>
+        <h1>
+          인기 상품을<br>
+          확인해 보세요
+        </h1>
+        <p class="card-description">
+          가장 HOT한 중고거래 물품을<br>
+          판다 마켓에서 확인해 보세요
+        </p>
+      </div>
+    </section>
+    <section class="card search align-right">
+      <div class="card-info">
+        <div class="card-title">Search</div>
+        <h1>
+          구매를 원하는<br>
+          상품을 검색하세요
+        </h1>
+        <p class="card-description">
+          구매하고 싶은 물품은 검색해서<br>
+          쉽게 찾아보세요
+        </p>
+      </div>
+      <img src="image/search_picture.png" alt="검색 그림">
+    </section>
+    <section class="card register align-left">
+
+      <img src="image/register_picture.png" alt="등록 그림">
+      <div class="card-info">
+        <div class="card-title">Register</div>
+        <h1>
+          판매를 원하는<br>
+          상품을 등록하세요
+        </h1>
+        <p class="card-description">
+          어떤 물건이든 판매하고 싶은 상품을<br>
+          쉽게 등록하세요
+        </p>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <section class="footer-main">
+      <h1>
+        믿을 수 있는<br>
+        판다마켓 중고거래
+      </h1>
+      <img src="image/footer_picture.png" alt="하단 그림">
+    </section>
+    <section class="footer-bottom-line">
+      <div class="footer-line-left">
+        @codeit - 2024
+      </div>
+      <div class="footer-line-center">
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/faq">FAQ</a>
+      </div>
+      <div class="footer-line-right">
+        <a href="https://www.facebook.com" target="_blank">
+          <img src="image/ic_facebook.png" alt="페이스북 아이콘">
+        </a>
+        <a href="https://twitter.com" target="_blank">
+          <img src="image/ic_twitter.png" alt="트위터 아이콘">
+        </a>
+        <a href="https://www.youtube.com" target="_blank">
+          <img src="image/ic_youtube.png" alt="유튜브 아이콘">
+        </a>
+        <a href="https://www.instagram.com" target="_blank">
+          <img src="image/ic_instagram.png" alt="인스타 아이콘">
+        </a>
+      </div>
+    </section>
+  </footer>
+
+
+</body>
+</html>
diff --git a/sprint_mission1/style.css b/sprint_mission1/style.css
@@ -0,0 +1,197 @@
+* {
+	box-sizing: border-box;
+}
+
+:root {
+  --element-gray-color: #374151;
+  --element-sky-color: #3692FF;
+  --btn-hover-color: #1967D6;
+  --btn-active-color: #1251AA;  
+  --btn-visited-color: #9CA3AF;
+  --white-color: #FFFFFF;
+  --bg-sky-color: #CFE5FF;
+  --emelent-gray-color: #9CA3AF;
+  --bg-navy-color: #111827;
+}
+
+body {
+  margin: 0;
+  color: var(--element-gray-color);
+}
+h1 {
+  font-size: 3vw;
+}
+.element-click {
+  cursor: pointer;
+}
+
+.element-click:hover{
+  background-color: var(--btn-hover-color);
+}
+
+.element-click:active{
+  background-color: var(--btn-active-color);
+}
+
+.element-click:visited{
+  background-color: var(--btn-visited-color);
+}
+
+.btn-login {
+  background-color: var(--element-sky-color);
+  color: var(--white-color);
+  text-decoration: none;
+  border-radius: 5px;
+  width: 128px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.btn-go-looking {
+  background-color: var(--element-sky-color);
+  color: var(--white-color);
+  text-decoration: none;
+  border-radius: 99999px;
+  width: 100%;
+  height: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.empty-center{
+  width: 1200px;
+}
+
+.logo-set {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 21px;
+}
+
+.header-top-line {
+  display: flex;
+  justify-content: center;
-  justify-content: center;
+  justify-content: space-between;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  margin-left: 200px;
+  margin-right: 200px;
+  margin-bottom: 10px;
-  margin-top: 10px;
-  margin-left: 200px;
-  margin-right: 200px;
-  margin-bottom: 10px;
+  margin: 10px 200px;
-  margin-top: 10px;
-  margin-left: 200px;
-  margin-right: 200px;
-  margin-bottom: 10px;
+  margin: 10px 200px;
+  gap: 10px;
+}
+
+.header-main {
+  background-color: var(--bg-sky-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header-main img {
+  padding-top: 7%;
+}
+
+.header-main-phrase {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.header-main img {
+  width: 50%;
+}
+
+main {
+  display: block;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card {
+  display: flex;
+  gap: 7vw;
+  padding-top: 10vw;
+  padding-bottom: 10vw;
+}
+
+.card img {
+  width: 40vw;
+  object-fit: contain;
+}
+
+
+.align-right {
+  justify-content: end;
+}
+
+
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.align-right .card-info {
+  align-items: end;
+  text-align: right;
+}
+
+.card-title {
+  font-weight: 800;
+  color: var(--element-sky-color);
+}
+
+.card-description {
+  font-size: 2vw;
+}
+
+.card-right * {
+  margin-block-start: 0.3em;
+  margin-block-end: 0.3em;
+}
+
+.footer-main {
+  margin-top: 100px;
+}
+
+.footer-main {
+  background-color: var(--bg-sky-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer-main img {
+  padding-top: 7%;
+  width: 50%
+}
+
+.footer-bottom-line {
+  background-color: var(--bg-navy-color);
+  color: var(--emelent-gray-color);
+  display: flex;
+  justify-content: space-around;
+  gap: 30px;
+  /* padding: 30px 200px 100px; */
+  padding-top: 30px;
+  padding-bottom: 100px;
+
+
+}
+
+.footer-bottom-line a {
+  text-decoration: none;
+  color: var(--white-color);
+}
+
+.footer-line-center {
+  display: flex;
+  gap: 2vw;
+}