codeit-bootcamp-frontend · addiescode-sj · Mar 18, 2024 · Mar 15, 2024 · Mar 17, 2024 · Mar 17, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Panda Market 만들기
+스프린트 1미션
diff --git a/base.css b/base.css
@@ -0,0 +1,63 @@
+:root {
+    /* background-color */
+    --color-background: #cfe5ff;
+    --color-skyblue-btn-background: #e6f2ff;
+
+    /* color */
+    /* --color-gray900: #1b1d1f;
+    --color-gray800: #26282b;
+    --color-gray600: #454c53;
+    --color-gray500: #72787f;
+    --color-gray400: #9ea4a8;
+    --color-gray200: #e5e7eb;
+    --color-gray100: #e8ebed;
+    --color-gray50: #f7f7f8; */
+
+    --color-cool-gray100: #f3f4f6;
+    --color-cool-gray200: #e5e7eb;
+    --color-cool-gray400: #9ca3af;
+    --color-cool-gray600: #4b5563;
+    --color-cool-gray700: #374151;
+    --color-cool-gray800: #1f2937;
+    --color-cool-gray900: #111827;
+
+    --color-brand-blue: #3692ff;
+    --color-error-red: #f74747;
+
+    --color-alink-blue: #3182f6;
+
+    /* button color */
+    --button-hover-color-blue1: #3792ff;
+    --button-hover-color-blue2: #1867d6;
+    --button-hover-color-blue3: #1151aa;
+    --button-hover-color-gray: #9da3af;
+
+    --color-white: #ffffff;
+    --color-pink: #ff68cc;
+
+    /* button size */
+    --button-login-width: 128px;
+    --button-login-height: 48px;
+
+    /* Desktop input */
+    --desktop-input-width: 640px;
+    --desktop-input-height: 56px;
+
+    --input-border-radius: 12px;
+    --input-background-color-gray100: var(--color-gray100);
+    --input-font-color-gray400: var(--color-cool-gray400);
+    --input-font-color-black: var(--color-gray800);
+    --input-font-size: 16px;
+}
+
+body {
+    font-family: 'pretendard', sans-serif;
+}
+
+button {
+    border: none;
+}
+
+button:hover {
+    cursor: pointer;
+}
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_hot-item.png b/img/Img_home_hot-item.png
diff --git a/img/Img_home_register.png b/img/Img_home_register.png
diff --git a/img/Img_home_search.png b/img/Img_home_search.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/icon/ic_facebook.svg b/img/icon/ic_facebook.svg
diff --git a/img/icon/ic_instagram.svg b/img/icon/ic_instagram.svg
diff --git a/img/icon/ic_twitter.svg b/img/icon/ic_twitter.svg
diff --git a/img/icon/ic_youtube.svg b/img/icon/ic_youtube.svg
diff --git a/img/logo/img_logo.png b/img/logo/img_logo.png
diff --git a/img/logo/logo.png b/img/logo/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>판다마켓</title>
+        <!-- CSS -->
+        <link rel="stylesheet" href="main.css" />
+        <!-- Font -->
+        <script>
+            (function (d) {
+                var config = {
+                        kitId: 'tya5wfu',
+                        scriptTimeout: 3000,
+                        async: true,
+                    },
+                    h = d.documentElement,
+                    t = setTimeout(function () {
+                        h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
+                    }, config.scriptTimeout),
+                    tk = d.createElement('script'),
+                    f = false,
+                    s = d.getElementsByTagName('script')[0],
+                    a;
+                h.className += ' wf-loading';
+                tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+                tk.async = true;
+                tk.onload = tk.onreadystatechange = function () {
+                    a = this.readyState;
+                    if (f || (a && a != 'complete' && a != 'loaded')) return;
+                    f = true;
+                    clearTimeout(t);
+                    try {
+                        Typekit.load(config);
+                    } catch (e) {}
+                };
+                s.parentNode.insertBefore(tk, s);
+            })(document);
+        </script>
+    </head>
+    <body>
+        <!-- header -->
+        <header>
+            <div class="header_wrap">
+                <a href="http://#"><div class="logo"></div></a>
+                <a href="/signin/"><button>로그인</button></a>
+            </div>
+        </header>
+        <main>
+            <!-- Main banner -->
+            <section class="main_banner_bg">
+                <div class="main_banner">
+                    <div class="main_banner wrap">
+                        <span>일상의 모든 물건을<br />거래해 보세요</span>
+                        <a href="/items/"><button>구경하러 가기</button></a>
+                    </div>
+                    <div class="main_banner_img"><img src="./img/Img_home_top.png" alt="구경가는 판다" /></div>
+                </div>
+            </section>
+
+            <!-- Main info -->
+            <section class="main_info_wrap">
+                <div class="main_info_background">
+                    <div class="main_info">
+                        <div class="img_wrap"><img src="./img/Img_home_hot-item.png" alt="hot-item" /></div>
+                        <div class="text_wrap">
+                            <div class="blue-title">Hot item</div>
+                            <div class="title">인기 상품을<br />확인해 보세요</div>
+                            <div class="description">가장 HOT한 중고거래 물품을<br />판다 마켓에서 확인해 보세요</div>
+                        </div>
+                    </div>
+
+                    <div class="main_info_second">
+                        <div class="img_wrap"><img src="./img/Img_home_search.png" alt="hot-item" /></div>
+                        <div class="text_wrap">
+                            <div class="blue-title">Search</div>
+                            <div class="title">구매를 원하는<br />상품을 검색하세요</div>
+                            <div class="description">구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요</div>
+                        </div>
+                    </div>
+
+                    <div class="main_info">
+                        <div class="img_wrap"><img src="./img/Img_home_register.png" alt="hot-item" /></div>
+                        <div class="text_wrap">
+                            <div class="blue-title">Register</div>
+                            <div class="title">판매를 원하는<br />상품을 등록하세요</div>
+                            <div class="description">어떤 물건이든 판매하고 싶은 상품을<br />쉽게 등록하세요</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Bottom banner -->
+            <section class="bottom_banner">
+                <div class="bottom_banner_wrap">
+                    <div class="title_wrap">
+                        <div class="title">믿을 수 있는<br />판다마켓 중고거래</div>
+                    </div>
+                    <div class="img_wrap">
+                        <img src="./img/Img_home_bottom.png" alt="믿을 수 있는 판다마켓" />
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Footer -->
+        <footer>
+            <div class="footer_wrap">
+                <div class="codeit_footer">©codeit - 2024</div>
+                <div class="privacy_footer">
+                    <a href="/privacy/">Privacy Policy</a>
+                    <a href="/faq/">FAQ</a>
+                </div>
+                <div class="codeit_footer">
+                    <a href="http://facebook.com"><img src="./img/icon/ic_facebook.svg" alt="facebook" /></a>
+                    <a href="http://twitter.com"><img src="./img/icon/ic_twitter.svg" alt="twitter" /></a>
+                    <a href="http://youtube.com"><img src="./img/icon/ic_youtube.svg" alt="youtube" /></a>
+                    <a href="http://instagram.com"><img src="./img/icon/ic_instagram.svg" alt="instagram" /></a>
+                </div>
+            </div>
+        </footer>
+    </body>
+</html>