codeit-bootcamp-frontend · Sophia-parang · Apr 3, 2025 · Apr 3, 2025 · Apr 3, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/Mission01/.DS_Store b/Mission01/.DS_Store
diff --git a/Mission01/Icon/.DS_Store b/Mission01/Icon/.DS_Store
diff --git a/Mission01/Icon/Panda-logo-md.png b/Mission01/Icon/Panda-logo-md.png
diff --git a/Mission01/Icon/Panda-logo-sm.png b/Mission01/Icon/Panda-logo-sm.png
diff --git a/Mission01/Icon/Pandan-logo-lg.png b/Mission01/Icon/Pandan-logo-lg.png
diff --git a/Mission01/Icon/ic_facebook.png b/Mission01/Icon/ic_facebook.png
diff --git a/Mission01/Icon/ic_instagram.png b/Mission01/Icon/ic_instagram.png
diff --git a/Mission01/Icon/ic_twitter.png b/Mission01/Icon/ic_twitter.png
diff --git a/Mission01/Icon/ic_youtube.png b/Mission01/Icon/ic_youtube.png
diff --git a/Mission01/Image/Img_home_01.png b/Mission01/Image/Img_home_01.png
diff --git a/Mission01/Image/Img_home_02.png b/Mission01/Image/Img_home_02.png
diff --git a/Mission01/Image/Img_home_03.png b/Mission01/Image/Img_home_03.png
diff --git a/Mission01/Image/Img_home_bottom.png b/Mission01/Image/Img_home_bottom.png
diff --git a/Mission01/Image/Img_home_top.png b/Mission01/Image/Img_home_top.png
diff --git a/Mission01/faq.html b/Mission01/faq.html
diff --git a/Mission01/index.html b/Mission01/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="style.css">
+
+<body>
+    <div class="container">
+        <header>
+            <nav class="gnb">
+                <a href="index.html">
+                    <img src="Icon/Panda-logo-md.png" class="panda-logo-md" alt="판다마켓 로고">
+                </a>
+                <a href="login.html" class="login-button is-clickable button-deco">로그인</a>
+            </nav>
+            <section class="banner">
+                <div class="banner-wrapper">
+                    <div class="intro-text">
+                        <h2>
+                            일상의 모든 물건을 <br> 거래해 보세요
+                        </h2>
+                        <a href="items.html" class="search is-clickable button-deco">구경하러 가기</a>
+                    </div>
+                    <img src="Image/Img_home_top.png" alt="판다마켓 Top" class="banner-image-top">
+                </div>
+            </section>
+        </header>
+        <main class="contents">
+            <section class="content">
+                <img src="Image/Img_home_01.png" alt="Hot item" class="content-img">
+                <div class="content-text">
+                    <h4>Hot item</h4>
+                    <h2>인기 상품을<br>확인해 보세요</h2>
+                    <h3>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</h3>
+                </div>
+            </section>
+            <section class="content">
+                <div class="content-text content-right">
+                    <h4>Search</h4>
+                    <h2>구매를 원하는<br>상품을 검색하세요</h2>
+                    <h3>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</h3>
+                </div>
+                <img src="Image/Img_home_02.png" alt="search" class="content-img">
+            </section>
+            <section class="content">
+                <img src="Image/Img_home_03.png" alt="register" class="content-img">
+                <div class="content-text">
+                    <h4>Register</h4>
+                    <h2>판매를 원하는<br>상품을 등록하세요</h2>
+                    <h3>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</h3>
+                </div>
+            </section>
+        </main>
+        <footer>
+            <section class="banner">
+                <div class="banner-wrapper">
+                    <h2>
+                        믿을 수 있는<br>판다마켓 중고 거래
+                    </h2>
+                    <img src="Image/Img_home_bottom.png" alt="판다마켓 Bottom" class="banner-image-bottom">
+                </div>
+            </section>
+            <section class="footer-bottom">
+                <div class="footer-bottom-contents">
+                    <div class="copyright">
+                        &#169codeit - 2024
+                    </div>
+                    <ul class="footer-list">
+                        <li><a href="privacy.html">Privacy Policy</a></li>
+                        <li><a href="faq.html">FAQ</a></li>
+                    </ul>
+                    <ul class="footer-list">
+                        <li><a href="https://www.facebook.com" target="_blank"><img src="Icon/ic_facebook.png"
+                                    alt="페이스북" class="social-logo"></a></li>
+                        <li><a href="https://x.com" target="_blank"><img src="Icon/ic_twitter.png" alt="트위터"
+                                    class="social-logo"></a></li>
+                        <li><a href="https://www.youtube.com" target="_blank"><img src="Icon/ic_youtube.png" alt="유튜브"
+                                    class="social-logo"></a>
+                        </li>
+                        <li><a href="https://www.instagram.com" target="_blank"><img src="Icon/ic_instagram.png"
+                                    alt="인스타그램" class="social-logo"></a></li>
+
+                    </ul>
+                </div>
+            </section>
+        </footer>
+    </div>
+</body>
+
+</html>
diff --git a/Mission01/items.html b/Mission01/items.html
diff --git a/Mission01/login.html b/Mission01/login.html
diff --git a/Mission01/privacy.html b/Mission01/privacy.html
diff --git a/Mission01/style.css b/Mission01/style.css
@@ -0,0 +1,197 @@
+body {
+    font-family: 'Pretendard', sans-serif;
+    margin: 10px 0 0;
+}
+
+
+
+/* Layout */
+.container {
+    margin: 0 auto;
+}
+
+.gnb {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1120px;
+    padding: 0 200px;
+    margin: 0 auto;
+}
+
+.banner {
+    display: flex;
+    flex-direction: row;
+    padding: clamp(66px, 13vw, 200px) 0 0;
+    width: 100%;
+    background-color: #cfe5ff;
+}
+
+.banner-wrapper {
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+}
+
+.intro-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.contents {
+    width: clamp(370px, 77vw, 1120px);
+    margin: 0 auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: clamp(320px, 68vw, 988px);
+    height: clamp(148px, 30vw, 444px);
+    margin: clamp(46px, 9.5vw, 138px) auto;
+    border-radius: 12px;
+    background-color: #fcfcfc;
+}
+
+.content-right {
+    text-align: right;
+}
+
+.content-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-right: clamp(3px, 0.6vw, 10px);
+    padding-left: clamp(6px, 1.3vw, 20px);
+}
+
+.bottom-line {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-bottom {
+    background-color: #111827;
+
+}
+
+.footer-bottom-contents {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: clamp(3px, 0.6vw, 10px) clamp(6px, 1.3vw, 20px) clamp(10px, 2.2vw, 32px);
+}
+
+.footer-list {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    gap: 12px;
+
+}
+
+
+
+
+/* Typo */
+
+h2 {
+    font-weight: 700;
+    font-size: clamp(13px, 2.7vw, 40px);
+    line-height: 140%;
+    color: #374151;
+}
+
+h3 {
+    font-weight: 500;
+    font-size: clamp(8px, 1.6vw, 24px);
+    line-height: clamp(10px, 2.2vw, 32px);
+    color: #374151;
+}
+
+h4 {
+    font-weight: 700;
+    font-size: clamp(6px, 1.2vw, 18px);
+    line-height: clamp(8px, 1.8vw, 26px);
+    color: #3692ff;
+}
+
+.footer-list a {
+    color: #e5e7eb;
+    text-decoration: none;
+    font-weight: 400;
+    font-size: clamp(5px, 1.1vw, 16px);
+    line-height: 100%;
+}
+
+.copyright {
+    font-weight: 400;
+    font-size: clamp(5px, 1.1vw, 16px);
+    line-height: 100%;
+    color: #9ca3af;
+}
+
+
+
+
+/* Component */
+
+.panda-logo-md {
+    width: clamp(51px, 10vw, 153px);
+    height: auto;
+}
+
+.button-deco {
+    background-color: #3692ff;
+    color: #f3f4f6;
+    text-decoration: none;
+    font-size: clamp(5px, 1.1vw, 16px);
+    font-weight: 600;
+}
+
+.login-button {
+
+    padding: clamp(4px, 0.8vw, 12px) clamp(7px, 1.5vw, 23px);
+    border-radius: 8px;
+}
+
+.search {
+    padding: clamp(5px, 1.2vw, 16px) clamp(41px, 8.6vw, 124px);
+    border-radius: 40px;
+    font-size: clamp(6px, 1.3vw, 20px);
+    font-weight: 600;
+    line-height: clamp(11px, 2.2vw, 32px);
+}
+
+.banner-image-top {
+    width: clamp(248px, 51vw, 746px);
+    height: auto;
+}
+
+.banner-image-bottom {
+    width: clamp(248px, 51vw, 746px);
+    height: auto;
+}
+
+.content-img {
+    width: clamp(193px, 40vw, 579px);
+    height: 100%;
+}
+
+.social-logo {
+    width: clamp(6px, 1.3vw, 20px);
+    height: auto;
+}
+
+.is-clickable {
+    cursor: pointer;
+}