codeit-bootcamp-frontend · hoody-jellybean · Aug 12, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 6, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# 🐼 판다마켓
+
+> 일상의 모든 물건을 믿고 거래할 수 있는 **중고 거래 플랫폼**
+
+- [판다마켓 바로가기](https://pandamarket-jsh-git.netlify.app/)
+- 코드잇 스프린트 FE-10 스프린트 미션
+- 2024.08.05.(월) ~ 개발 진행 중
+
+<br />
+
+## 기술 스택
+
+- **개발**
+  - HTML, CSS
+- **IDE**
+  - Visual Studio Code
+- **배포**
+  - Netlify
diff --git a/faq.html b/faq.html
@@ -0,0 +1,21 @@
+<!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="/images/logo_icon.png" />
+    <link rel="apple-touch-icon" href="/images/logo_icon.png" />
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="/init.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>FAQ</h1>
+  </body>
+</html>
diff --git a/images/explain_1.png b/images/explain_1.png
diff --git a/images/explain_2.png b/images/explain_2.png
diff --git a/images/explain_3.png b/images/explain_3.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/logo_icon.png b/images/logo_icon.png
diff --git a/images/logo_lg.png b/images/logo_lg.png
diff --git a/images/logo_md.png b/images/logo_md.png
diff --git a/images/logo_sm.png b/images/logo_sm.png
diff --git a/images/panda_1.png b/images/panda_1.png
diff --git a/images/panda_2.png b/images/panda_2.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/youtube.png b/images/youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<!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="/images/logo_icon.png" />
+    <link rel="apple-touch-icon" href="/images/logo_icon.png" />
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="/init.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <a href="/"><img src="/images/logo_sm.png" alt="판다마켓 바로가기" /></a>
+      <a class="head-login" href="/login.html">로그인</a>
+    </header>
+    <main>
+      <section class="banner">
+        <div class="banner-content">
+          <span>일상의 모든 물건을<br />거래해 보세요</span>
+          <a href="/items.html">구경하러 가기</a>
+        </div>
+        <img src="/images/panda_1.png" alt="" />
+      </section>
+      <section class="cards">
+        <div class="card">
+          <img src="/images/explain_1.png" alt="" />
+          <div class="card-content">
+            <span class="keyword">Hot Item</span>
+            <span class="title">인기 상품을<br />확인해 보세요</span>
+            <span class="sub">
+              가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요
+            </span>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-content">
+            <span class="keyword">Serch</span>
+            <span class="title">구매를 원하는<br />상품을 검색하세요</span>
+            <span class="sub">
+              구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
+            </span>
+          </div>
+          <img src="/images/explain_2.png" alt="" />
+        </div>
+        <div class="card">
+          <img src="/images/explain_3.png" alt="" />
+          <div class="card-content">
+            <span class="keyword">Register</span>
+            <span class="title">판매를 원하는<br />상품을 등록하세요</span>
+            <span class="sub">
+              어떤 물건이든 판매하고 싶은<br />상품을 쉽게 등록하세요
+            </span>
+          </div>
+        </div>
+      </section>
+      <section class="banner">
+        <div class="banner-content">
+          <span>믿을 수 있는<br />판다마켓 중고 거래</span>
+        </div>
+        <img src="/images/panda_2.png" alt="" />
+      </section>
+    </main>
+    <footer>
+      <div class="foot-copy">
+        <span>&copy;codeit - 2024</span>
+      </div>
+      <div class="foot-link">
+        <a href="/privacy.html">Privacy Policy</a>
+        <a href="/faq.html">FAQ</a>
+      </div>
+      <div class="foot-sns">
+        <a href="http://www.facebook.com" target="_blank">
+          <img src="/images/facebook.png" alt="페이스북 바로가기" />
+        </a>
+        <a href="http://twitter.com" target="_blank">
+          <img src="/images/twitter.png" alt="트위터 바로가기" />
+        </a>
+        <a href="http://www.youtube.com" target="_blank">
+          <img src="/images/youtube.png" alt="유튜브 바로가기" />
+        </a>
+        <a href="http://www.instagram.com" target="_blank">
+          <img src="/images/instagram.png" alt="인스타그램 바로가기" />
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/init.css b/init.css
@@ -0,0 +1,61 @@
+:root {
+  /* Color - Primary */
+  --blue-100: #3682ff;
+  --blue-200: #1967d6;
+  --blue-300: #1251aa;
+
+  /* Color - Secondary */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  /* Color - Error */
+  --red: #f74747;
+}
+
+:root {
+  /* Font - Size */
+  --size-4xl: 40px;
+  --size-3xl: 32px;
+  --size-2xl: 24px;
+  --size-xl: 20px;
+  --size-2lg: 18px;
+  --size-lg: 16px;
+  --size-md: 14px;
+  --size-sm: 13px;
+  --size-xs: 12px;
+
+  /* Font - Line Height */
+  --line-4xl: 52px;
+  --line-3xl: 42px;
+  --line-2xl: 32px;
+  --line-xl: 32px;
+  --line-2lg: 26px;
+  --line-lg: 26px;
+  --line-md: 24px;
+  --line-sm: 22px;
+  --line-xs: 18px;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Pretendard", sans-serif;
+}
+
+:link,
+:active,
+:visited {
+  color: black;
+  text-decoration: none;
+}
+
+:is(a, button):hover {
+  cursor: pointer;
+}
diff --git a/items.html b/items.html
@@ -0,0 +1,21 @@
+<!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="/images/logo_icon.png" />
+    <link rel="apple-touch-icon" href="/images/logo_icon.png" />
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="/init.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Items</h1>
+  </body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,21 @@
+<!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="/images/logo_icon.png" />
+    <link rel="apple-touch-icon" href="/images/logo_icon.png" />
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="/init.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Log In</h1>
+  </body>
+</html>
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,21 @@
+<!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="/images/logo_icon.png" />
+    <link rel="apple-touch-icon" href="/images/logo_icon.png" />
+    <title>판다마켓</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
+    />
+    <link rel="stylesheet" href="/init.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Privacy</h1>
+  </body>
+</html>