Merge pull request #5 from songmijin824/Basic-송미진

스프린트미션1
codeit-bootcamp-frontend · Jan 8, 2025 · 8a38fc8 · 8a38fc8
2 parents 4dc5dd0 + ac9a10d
commit 8a38fc8
Show file tree

Hide file tree

Showing 57 changed files with 537 additions and 0 deletions.
diff --git a/panda_mall/css/layout.css b/panda_mall/css/layout.css
@@ -0,0 +1,172 @@
+* { box-sizing:border-box; margin:0; }
+
+
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body { font-family: 'Pretendard-Regular'; font-size:15px;  font-weight: 400; color:var(--Secondary); }
+a { text-decoration: none; }
+
+.inner,.box_inner { margin:0 auto;  min-width:325px; max-width:1120px; }
+
+:root {
+  --Primary: #3692FF;
+  --Secondary: #374151;
+  --Secondary_200:#E5E7EB;
+  --Secondary_400:#9CA3AF;
+  --Secondary_900:#111827;
+}
+
+.font_1 { font-size:40px; }
+.font_2 { font-size:24px; }
+.font_3 { font-size:18px; }
+
+header .inner { display:flex; justify-content: space-between; align-items: center; padding:13px 0; }
+header .inner .logo_top {  }
+header .inner .logo_top img { height:40px;  }
+header .inner .logo_top img:last-child { height:35px; }
+header .inner .login_btn {  }
+
+.main_title { width:100%; background-color: #CFE5FF ; height: 540px; }
+.main_title .inner { 
+  position:relative; 
+  height:100%; 
+  background-image: url(/images/Img_home_top.png); 
+  background-position: bottom right; 
+  background-repeat: no-repeat; 
+}
+.main_title h1 { font-weight:700; margin-bottom:25px; }
+.main_title a {  }
+.main_title .text_box { position:absolute; top:40%; left:0; }
+.section { height: 720px;  }
+.section .box_inner { 
+  display:flex; height: 100%; align-items: center; 
+}
+.section .box_inner .box { 
+  display: flex; 
+  align-items: center;
+  justify-content: center;
+  background-color: #FCFCFC;
+  gap: 40px;
+  border-radius: 12px;
+  padding: 0 23px; 
+  cursor: pointer;
+  max-width: 100%;
+}
+.section .box_inner .box img {
+  width: 50%;
+}
+.section .box_inner .box > div {
+  padding:0 23px;
+}
+.section .box_inner .box h4 { 
+  font-weight: 700;
+  color:var(--Primary);
+}
+.section .box_inner .box h1 { 
+  font-weight: 700; 
+  margin-top:12px;
+  margin-bottom:24px;
+}
+.section .box_inner .box p { 
+  font-weight: 500; 
+}
+
+.section._2 .box { text-align: right; flex-direction: row-reverse;}
+
+
+.section._4 { 
+  height:540px; background-color: #CFE5FF; 
+  cursor: pointer;
+}
+
+.section._4 .inner {
+  position:relative; 
+  height:100%; 
+  background-image: url(/images/Img_home_bottom.png); 
+  background-position: bottom right; 
+  background-repeat: no-repeat; 
+  margin-top:138px;
+}
+.section._4 .text_box { position:absolute; top:50%; left:0; }
+.section._4 h1 { 
+  font-weight:700; 
+
+}
+
+footer { 
+  background-color: var(--Secondary_900);
+}
+footer .inner {
+  position:relative;
+  display: flex;
+  justify-content: space-between;
+
+  padding:32px 0 108px;
+}
+footer .inner .left {
+  color:var(--Secondary_400);
+}
+
+footer .inner .center {
+ display:flex;
+ gap: 30px;
+}
+
+footer .inner .center a {
+  color:var(--Secondary_400);
+}
+
+footer .inner .right {
+ display:flex;
+ gap: 10px;
+}
+
+footer .inner .right img {
+
+}
+
+
+@media (max-width: 1919px) {
+   .inner { padding-left:200px!important; padding-right:200px!important; }
+}
+@media (max-width: 1120px) {
+  body { font-size:13px; }
+
+  .font_1 { font-size:2rem; }
+  .font_2 { font-size:1.5rem; }
+  .font_3 { font-size:1rem; }
+
+  .inner { padding-left:24px!important; padding-right:24px!important; }
+  .section { height:500px; }
+
+  .main_title .text_box,
+  .section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; }
+  .section._4 .text_box { top:20%; }
+}
+@media (max-width: 780px) {
+
+  .font_1 { font-size:1.3rem; }
+  .font_2 { font-size:1em; }
+  .font_3 { font-size:0.8rem; }
+  .section._4 .inner, .main_title .inner { background-size: contain; }
+
+  .section { height:auto; }
+  .section .box_inner { padding:100px 0; }
+  .section .box_inner .box { flex-direction:column; width:100%; gap: 10px; align-items: stretch; }
+  .section .box_inner .box > div { padding: 0 0 24px; }
+  .section .box_inner .box > div h1 { margin-top: 12px; margin-bottom: 12px; }
+  .section .box_inner .box > div br { display:none; }
+  .section .box_inner .box img { width:100%; }
+}
+
+@media (max-width: 375px){
+  a.btn._a { padding: 16px 44px; }
+  header .inner .logo_top img:first-child { display:none; }
+  footer .inner .left { position: absolute; top:65px; }
+  .section { height:500px; }
+}
diff --git a/panda_mall/css/ui.css b/panda_mall/css/ui.css
@@ -0,0 +1,10 @@
+
+
+
+.btn { background-color: #3692FF;  color:#fff; }
+.btn:hover { background-color: #1967D6;  color:#fff; }
+.btn:active { background-color: #1251AA; color:#fff; }
+.btn.n_act { background-color: #9CA3AF; color:#fff; }
+
+.btn._a { display:inline-block; padding:16px 124px; border-radius: 50px; }
+.btn._b { display:inline-block; padding:12px 20px;  border-radius: 8px; }
diff --git a/panda_mall/faq.html b/panda_mall/faq.html
@@ -0,0 +1,55 @@
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="robots" content="noindex">
+    <meta name="Keywords" content="판다마켓,쇼핑몰" />
+    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
+
+    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:title" content="판다마켓,쇼핑몰">
+    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
+    <meta property="og:url" content="">
+    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <title>판다마켓 </title>
+    <link rel="stylesheet" href="/css/layout.css">
+    <link rel="stylesheet" href="/css/ui.css">
+  </head>
+  <body>
+    <header> 
+      <div class="inner">
+        <a href="/" class="logo_top">
+          <img src="/images/logo_01.png">
+          <img src="/images/logo_03.png">
+        </a>
+        <div class="login_btn">
+          <a href="/login.html" class="btn _b">로그인</a>
+        </div>
+      </div>
+    </header>
+    <main>
+
+    </main>
+    <footer>
+      <div class="inner">
+        <div class="left">
+          <span>©codeit - 2024</span>
+        </div>
+        <div class="center">
+          <a href="/privacy.html">Privacy Policy</a>
+          <a href="/faq.html">FAQ</a>
+        </div>
+        <div class="right">
+          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
+          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/panda_mall/images/Default_Property 1=Default01.png b/panda_mall/images/Default_Property 1=Default01.png
diff --git a/panda_mall/images/Default_Property 1=Variant202.png b/panda_mall/images/Default_Property 1=Variant202.png
diff --git a/panda_mall/images/Editor_Icon.png b/panda_mall/images/Editor_Icon.png
diff --git a/panda_mall/images/Group_2.png b/panda_mall/images/Group_2.png
diff --git a/panda_mall/images/Group_3.png b/panda_mall/images/Group_3.png
diff --git a/panda_mall/images/Img_home_01.png b/panda_mall/images/Img_home_01.png
diff --git a/panda_mall/images/Img_home_02.png b/panda_mall/images/Img_home_02.png
diff --git a/panda_mall/images/Img_home_03.png b/panda_mall/images/Img_home_03.png
diff --git a/panda_mall/images/Img_home_bottom.png b/panda_mall/images/Img_home_bottom.png
diff --git a/panda_mall/images/Img_home_top.png b/panda_mall/images/Img_home_top.png
diff --git a/panda_mall/images/ic_1_01.png b/panda_mall/images/ic_1_01.png
diff --git a/panda_mall/images/ic_1_02.png b/panda_mall/images/ic_1_02.png
diff --git a/panda_mall/images/ic_1_03.png b/panda_mall/images/ic_1_03.png
diff --git a/panda_mall/images/ic_2_01.png b/panda_mall/images/ic_2_01.png
diff --git a/panda_mall/images/ic_2_02.png b/panda_mall/images/ic_2_02.png
diff --git a/panda_mall/images/ic_2_03.png b/panda_mall/images/ic_2_03.png
diff --git a/panda_mall/images/ic_3_01.png b/panda_mall/images/ic_3_01.png
diff --git a/panda_mall/images/ic_3_02.png b/panda_mall/images/ic_3_02.png
diff --git a/panda_mall/images/ic_3_03.png b/panda_mall/images/ic_3_03.png
diff --git a/panda_mall/images/ic_4_01.png b/panda_mall/images/ic_4_01.png
diff --git a/panda_mall/images/ic_4_02.png b/panda_mall/images/ic_4_02.png
diff --git a/panda_mall/images/ic_4_03.png b/panda_mall/images/ic_4_03.png
diff --git a/panda_mall/images/ic_4_04.png b/panda_mall/images/ic_4_04.png
diff --git a/panda_mall/images/ic_4_05.png b/panda_mall/images/ic_4_05.png
diff --git a/panda_mall/images/ic_4_06.png b/panda_mall/images/ic_4_06.png
diff --git a/panda_mall/images/ic_X.png b/panda_mall/images/ic_X.png
diff --git a/panda_mall/images/ic_arrow_down.png b/panda_mall/images/ic_arrow_down.png
diff --git a/panda_mall/images/ic_back.png b/panda_mall/images/ic_back.png
diff --git a/panda_mall/images/ic_check.png b/panda_mall/images/ic_check.png
diff --git a/panda_mall/images/ic_facebook.png b/panda_mall/images/ic_facebook.png
diff --git a/panda_mall/images/ic_instagram.png b/panda_mall/images/ic_instagram.png
diff --git a/panda_mall/images/ic_plus.png b/panda_mall/images/ic_plus.png
diff --git a/panda_mall/images/ic_plus_2x.png b/panda_mall/images/ic_plus_2x.png
diff --git a/panda_mall/images/ic_search.png b/panda_mall/images/ic_search.png
diff --git a/panda_mall/images/ic_search_darker.png b/panda_mall/images/ic_search_darker.png
diff --git a/panda_mall/images/ic_sort.png b/panda_mall/images/ic_sort.png
diff --git a/panda_mall/images/ic_twitter.png b/panda_mall/images/ic_twitter.png
diff --git a/panda_mall/images/ic_youtube.png b/panda_mall/images/ic_youtube.png
diff --git a/panda_mall/images/image_01.png b/panda_mall/images/image_01.png
diff --git a/panda_mall/images/image_02.png b/panda_mall/images/image_02.png
diff --git a/panda_mall/images/image_03.png b/panda_mall/images/image_03.png
diff --git a/panda_mall/images/image_04.png b/panda_mall/images/image_04.png
diff --git a/panda_mall/images/image_05.png b/panda_mall/images/image_05.png
diff --git a/panda_mall/images/img_badge.png b/panda_mall/images/img_badge.png
diff --git a/panda_mall/images/logo_01.png b/panda_mall/images/logo_01.png
diff --git a/panda_mall/images/logo_02.ico b/panda_mall/images/logo_02.ico
diff --git a/panda_mall/images/logo_02.png b/panda_mall/images/logo_02.png
diff --git a/panda_mall/images/logo_03.png b/panda_mall/images/logo_03.png
diff --git a/panda_mall/images/logo_04.png b/panda_mall/images/logo_04.png
diff --git a/panda_mall/index.html b/panda_mall/index.html
@@ -0,0 +1,110 @@
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="robots" content="noindex">
+    <meta name="Keywords" content="판다마켓,쇼핑몰" />
+    <meta name="Description" content="안녕하세요. 판다마켓입니다." />
+    <meta property="og:image" content="/images/Img_home_01.png">
+    <meta property="og:title" content="판다마켓,쇼핑몰">
+    <meta property="og:description" content="안녕하세요. 판다마켓입니다.">
+    <meta property="og:url" content="">
+    <link rel="shorcut icon" href="/images/logo_02.ico">
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="/css/layout.css">
+    <link rel="stylesheet" href="/css/ui.css">
+  </head>
+  <body>
+    <header> 
+      <div class="inner">
+        <a href="/" class="logo_top">
+          <img src="/images/logo_01.png">
+          <img src="/images/logo_03.png">
+        </a>
+        <div class="login_btn">
+          <a href="/login.html" class="btn _b">로그인</a>
+        </div>
+      </div>
+    </header>
+    <main>
+      <section class="main_title">
+        <div class="inner">
+          <div class="text_box">
+            <h1 class="font_1">
+              일상의 모든 물건을<br>
+              거래해 보세요
+            </h1>
+            <a href="/items.html" class="btn _a">구경하러 가기</a>
+          </div>
+        </div>
+      </section>
+      <section class="section _1">
+        <div class="box_inner">
+          <div class="box">
+            <img src="/images/Img_home_01.png" alt="Hot item">
+            <div>
+              <h4 class="font_3">Hot item</h4>
+              <h1 class="font_1">인기 상품을<br>확인해 보세요</h1>
+              <p class="font_2">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section _2">
+        <div class="box_inner">
+          <div class="box">
+            <img src="/images/Img_home_02.png" alt="Search">
+            <div>
+              <h4 class="font_3">Search</h4>
+              <h1 class="font_1">구매를 원하는<br>
+                상품을 검색하세요</h1>
+              <p class="font_2">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+            </div>
+        </div>
+      </section>
+      <section class="section _3">
+        <div class="box_inner">
+          <div class="box">
+            <img src="/images/Img_home_03.png" alt="Register">
+            <div>
+              <h4 class="font_3">Register</h4>
+              <h1 class="font_1">판매를 원하는<br>상품을 등록하세요</h1>
+              <p class="font_2">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+            </div>
+        </div>
+        </div>
+      </section>
+      <section class="section _4">
+        <div class="inner">
+          <div class="text_box">
+            <h1 class="font_1">
+              믿을 수 있는<br>
+              판다마켓 중고 거래
+            </h1>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="inner">
+        <div class="left">
+          <span>©codeit - 2024</span>
+        </div>
+        <div class="center">
+          <a href="/privacy.html">Privacy Policy</a>
+          <a href="/faq.html">FAQ</a>
+        </div>
+        <div class="right">
+          <a href="https://www.facebook.com/" target="_blank"><img src="/images/ic_facebook.png"></a>
+          <a href="https://x.com/" target="_blank"><img src="/images/ic_twitter.png"></a>
+          <a href="https://www.youtube.com/" target="_blank"><img src="/images/ic_youtube.png"></a>
+          <a href="https://www.instagram.com/" target="_blank"><img src="/images/ic_instagram.png"></a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>