codeit-bootcamp-frontend · JaeSang1998 · Jun 12, 2024 · Jun 4, 2024 · JaeSang1998 · Jun 12, 2024
diff --git a/panda/faq.html b/panda/faq.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAQ</title>
+</head>
+<body>
+    <h1>This is a FAQ.html</h1>
+</body>
+</html>
diff --git a/panda/images/home/img_home_01.png b/panda/images/home/img_home_01.png
diff --git a/panda/images/home/img_home_02.png b/panda/images/home/img_home_02.png
diff --git a/panda/images/home/img_home_03.png b/panda/images/home/img_home_03.png
diff --git a/panda/images/home/img_home_bottom.png b/panda/images/home/img_home_bottom.png
diff --git a/panda/images/home/img_home_top.png b/panda/images/home/img_home_top.png
diff --git a/panda/images/logo/favicon.jpg b/panda/images/logo/favicon.jpg
diff --git a/panda/images/logo/logo.png b/panda/images/logo/logo.png
diff --git a/panda/images/social/ic_facebook.png b/panda/images/social/ic_facebook.png
diff --git a/panda/images/social/ic_instagram.png b/panda/images/social/ic_instagram.png
diff --git a/panda/images/social/ic_twitter.png b/panda/images/social/ic_twitter.png
diff --git a/panda/images/social/ic_youtube.png b/panda/images/social/ic_youtube.png
diff --git a/panda/index.html b/panda/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" as="style" crossorigin 
+  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+  <link rel="icon" href="./images/logo/Favicon.jpg"/>
+  <link rel="stylesheet" href="./styles/style.css"/>
+  <title>판다마켓</title>
+</head>
+<body>
+
+  <header>
+    <div class="nav-container col">
+      <a href="/" >
+        <img class="logo-icon" src="./images/logo/logo.png" alt="판다마켓 로고">
+      </a>
+      <a href="./login.html">
+        <button class="login-button">로그인</button>
+      </a>
+    </div>
+  </header><!--header END-->
+
+  <section id="head" class="headline col">
+    <div class="headline-container">
+      <h2 class="headline-heading">
+        일상의 모든 물건을<br>
+        거래해 보세요
+      </h2>
+      <a href="./items.html">
+        <button class="headline-button">구경하러 가기</button>
+      </a>
+    </div>
+  </section><!--headline END-->
+
+  <section class="content">
+    <img class="content-img" src="./images/home/Img_home_01.png">
+    <div>
+      <p class="strong">Hot item</p>
+      <h1>인기 상품을<br>확인해 보세요</h1>
+      <h2>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</h2>
+    </div>
+  </section><!--content 1 END-->
+
+  <section id="text-right" class="content">
+    <div>
+      <p class="strong">Search</p>
+      <h1>구매를 원하는<br>상품을 검색하세요</h1>
+      <h2>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</h2>
+    </div>
+    <img class="content-img" src="./images/home/Img_home_02.png">
+  </section><!--content 2 END-->
+
+  <section class="content">
+    <img class="content-img" src="./images/home/Img_home_03.png">
+    <div>
+      <p class="strong">Register</p>
+      <h1>판매를 원하는<br>상품을 등록하세요</h1>
+      <h2>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</h2>
+    </div>
+  </section><!--content 3 END-->
+
+  <section id="bottomline-picture" class="headline col">
+    <div class="headline-container">
+      <h2 class="headline-heading">
+        믿을 수 있는<br>
+        판다마켓 중고거래
+      </h2>
+    </div>
+  </section><!--bottom_headline END-->
+
+  <footer class="footer">
+    <div>©codeit - 2024</div>
+    <div class="footer-center">
+      <a href="./privacy.html">Privacy Policy</p>
+      <a href="./faq.html">FAQ</a>
+    </div>
+    <div class="footer-right">
+      <a href="https://www.facebook.com/?locale=ko_KR" target="_blank">
+        <img src="./images/social/ic_facebook.png" alt="페이스북">
+      </a>
+      <a href="https://x.com/?lang=ko&mx=2" target="_blank">
+        <img src="./images/social/ic_twitter.png" alt="트위터">
+      </a>
+      <a href="https://www.youtube.com/" target="_blank">
+        <img src="./images/social/ic_youtube.png" alt="유튜브">
+      </a>
+      <a href="https://www.instagram.com/" target="_blank">
+        <img src="./images/social/ic_instagram.png" alt="인스타그램">
+      </a>
+    </div>
+  </footer><!--footer END-->
+</body>
+</html>
diff --git a/panda/items.html b/panda/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Items</title>
+</head>
+<body>
+    <h1>This is a Items.html</h1>
+</body>
+</html>
diff --git a/panda/login.html b/panda/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>This is a login Page!!!</h1>
+</body>
+</html>
diff --git a/panda/privacy.html b/panda/privacy.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Privacy</title>
+</head>
+<body>
+    <h1>This is a privacy.html</h1>
+</body>
+</html>
diff --git a/panda/styles/style.css b/panda/styles/style.css
@@ -0,0 +1,171 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  word-break: keep-all;
+  font-family: "Pretendard", sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: #E5E7EB;
+}
+
+@media(min-width: 1200px) and (max-width: 1920px){/* 데스크톱 뷰포트 설정*/
+  header {
+    height: 70px;
+    width: 100%;
+    padding: 10px 200px 9px 200px;
+    gap: 0px;
+    border: 0px 0px 1px 0px;
+    opacity: 0px;
+  }
+
+  .nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  left: 200px;
+  opacity: 0px;
+  }
+
+  .login-button {
+    width: 128px;
+    height: 48px;
+    border: 1px solid #3692FF;
+    border-radius: 8px;
+    background-color: #3692FF;
+    padding: 12px 20px;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 19.09px;
+  }
+
+  .login-button:hover {
+    cursor: pointer;
+  }
+
+  .headline {
+    background-color: #CFE5FF;
+    height: 540px;
+    display: flex;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-position: 80% bottom;
+    background-size: 55%;
+  }
+
+  #head {
+    background-image: url('../images/home/Img_home_top.png');
+  }
+
+  .headline-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .headline-heading {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    text-align: left;
+    color: #374151;
+  }
+
+  .headline-button{
+    background-color: #3692FF;
+    width: 357px;
+    height: 56px;
+    padding: 16px 124px 16px 124px;
+    gap: 10px;
+    border-radius: 40px;
+    border: 1px solid #3692FF;
+    opacity: 0px;
+    font-family: Pretendard;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+    text-align: center;
+    color: #ffffff;
+    white-space: nowrap;
+  }
+
+  .headline-button:hover {
+    cursor: pointer;
+  }
+
+  .content {
+    max-width: 1200px;
+    height: 720px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5%;
+  }
+
+  .content-img {
+    width: 588px;
+    height: 444px;
+    flex-shrink : 1;
+    border-radius: 12px;
+  }
+
+  .strong{
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 25.2px;
+    color: #3692FF;
+  }
+
+  .content h1 {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    letter-spacing: 0.02em;
+    color: #374151;
+  }
+
+  .content h2 {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 28.8px;
+    color: #374151;
+  }
+
+  #text-right {
+    text-align: right;
+  }
+
+  #bottomline-picture {
+    background-image: url('../images/home/Img_home_bottom.png');
+  }
+
+  .footer {
+    background-color: #111827;
+    color: #9ca3af;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px 200px 108px 200px;
+    font-size: 16px;
+  }
+
+  .footer-center {
+    display: flex;
+    gap: 30px;
+    color: #E5E7EB;
+  }
+
+  .footer-right {
+    width: 20px;
+    display: flex;
+    gap: 12px;
+  }
+}