commit "Basic-임영주"

codeit-bootcamp-frontend · Aug 10, 2024 · 3b68d2e · 3b68d2e
1 parent 4dc5dd0
commit 3b68d2e
Show file tree

Hide file tree

Showing 18 changed files with 386 additions and 0 deletions.
diff --git a/faq.html b/faq.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓 - FAQ</title>
+    <link rel="icon" href="images/logo/favicon.ico"/>
+    <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="styles/global.css"/>
+</head>
+<body>
+    <h1>임시 FAQ 페이지</h1>
+
+</body>
+</html>
diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png
diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png
diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png
diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png
diff --git a/images/home/hero-image.png b/images/home/hero-image.png
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png
diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg
diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg
diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg
diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!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="icon" href="images/logo/favicon.ico" />
+  <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="styles/global.css" />
+    <link rel="stylesheet" href="styles/home.css" />
+</head>
+<body>
+  <header>
+    <a href="/">
+      <img src="images/logo/panda-market-logo.png"
+      alt="판타마켓 홈"
+      width="153">
+  </a>
+  <a href="login.html" id="loginLinkButton"class="button">로그인</a>
+  </header>
+  <main>
+    <section id="hero" class="banner">
+      <div class="wrapper">
+        <h1>
+          일상의 모든 물건을<br />
+          거래해 보세요
+        </h1>
+        <a href="items.html" class="button pill-button">구경하러 가기</a>
+      </div>
+    </section>
+
+    <section id="features" class="wrapper">
+      <div class="feature">
+      <img
+            src="images/home/feature1-image.png"
+            alt="인기 상품"
+            width="50%"
+          />
+          <div class="feature-content">
+            <h2 class="feature-tag">Hot item</h2>
+            <h1>인기 상품을<br />확인해 보세요</h1>
+            <p class="feature-description">
+              가장 Hot한 중고거래 물품을<br /> 판다마켓에서 확인해 보세요
+            </p>
+          </div>
+          </div>
+          <div class="feature">
+            <div class="feature-content">
+              <h2 class="feature-tag">Search</h2>
+              <h1>구매를 원하는<br />상품을 검색하세요</h1>
+              <p class="feature-description">
+                구매하고 싶은 물품은 검색해서
+                <br />쉽게 찾아보세요
+              </p>
+            </div>
+            <img
+            src="images/home/feature2-image.png"
+            alt="검색 기능"
+            width="50%"
+            />
+          </div>
+          <div class="feature">
+            <img
+            src="igmes/home/feature3-imge.png"
+            alt="판매 상품 목록"
+            width="50%"
+            />
+            <div>
+              <h2 class="feature-tag">Register</h2>
+              <h1>판매를 원하는<br />상품을 등록하세요</h1>
+              <p class="feature-description">
+                어떤 물건이든 판매하고 싶은 상품을
+                <br />쉽게 등록하세요
+              </p>
+            </div>
+          </div>
+    </section>
+
+    <section id="bottomBanner" class="banner">
+    <div class="wrapper">
+      <h1>
+        믿을 수 있는
+        <br />
+        판다마켓 중고거래
+      </h1>
+    </div>
+  </section>
+  </main>
+
+  <footer>
+    <div>©codeit - 2024</div>
+    <div id="footerMenu">
+      <a href="privacy.html">Privacy Policy</a>
+      <a href="faq.html">FAQ</a>
+    </div>
+    <div id="socialMedia">
+      <a
+      href="https://www.facebook.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+      ><img src="images/social/facebook-logo.svg" alt="페이스북" width="20"/></a>
+      <a
+      href="https://www.twitter.com/" target="_blank" rel="noopener noreferrer"
+      ><img src="images/social/twitter-logo.svg" alt="트위터" width="20"/></a>
+      <a
+      href="https://www.instagram.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+      ><img src="images/social/instagram-logo.svg" alt="인스타그램" width="20"/></a>
+      <a
+      href="https://www.youtube.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+      ><img src="images/social/youtube-logo.svg" alt="유튜브" width="20"/></a>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,20 @@
+<!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="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 상품 리스트 페이지</h1>
+  </body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,20 @@
+<!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="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 로그인 페이지</h1>
+  </body>
+</html>
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,20 @@
+<!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="icon" href="images/logo/favicon.ico" />
+    <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="styles/global.css" />
+  </head>
+
+  <body>
+    <h1>임시 이용약관 페이지</h1>
+  </body>
+</html>
diff --git a/styles/global.css b/styles/global.css
@@ -0,0 +1,103 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a{
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: none;
+  outline: none;
+  box-sizing: none;
+  cursor: pointer;
+}
+
+img {
+  vertical-align: bottom;
+}
+
+
+body {
+  color: #374151;
+  word-break: keep-all;
+  font-family: "Pretenderd", sans-serif;
+}
+
+header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 200px;
+  background-color: #ffffff;
+  border-bottom: 1px solid;
+}
+
+footer {
+  background-color: #111827;
+  color: #9ca3af;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 200px 108px 200px;
+  font-size: 16px;
+}
+
+#footerMenu {
+  display: flex;
+  gap: 30px;
+  color: #e5e7eb;
+}
+
+#socialMedia {
+  display: flex;
+  gap: 12px;
+}
+
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  letter-spacing: 0.02em;
+}
+
+.button {
+  background-color: #3692ff;
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button:hover {
+  background-color: #1967d6;
+}
+
+.button:focus {
+  background-color: #1251aa;
+}
+
+.button:disabled {
+  background-color: #9ca3af;
+  cursor: default;
+  pointer-events: none;
+}
+
+.pill-button {
+  font-size: 20px;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 16px 124px;
+}