codeit-bootcamp-frontend · 201steve · May 31, 2024 · May 27, 2024 · 201steve · May 30, 2024
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/btn_large/status=Default.png b/images/btn_large/status=Default.png
diff --git a/images/btn_large/status=click.png b/images/btn_large/status=click.png
diff --git a/images/btn_large/status=hover.png b/images/btn_large/status=hover.png
diff --git a/images/btn_large/status=inactive.png b/images/btn_large/status=inactive.png
diff --git a/images/btn_small/status=Default.png b/images/btn_small/status=Default.png
diff --git a/images/btn_small/status=click.png b/images/btn_small/status=click.png
diff --git a/images/btn_small/status=hover.png b/images/btn_small/status=hover.png
diff --git a/images/btn_small/status=inactive.png b/images/btn_small/status=inactive.png
diff --git a/images/logo/Property 1=Typo.png b/images/logo/Property 1=Typo.png
diff --git a/images/logo/Property 1=Variant3.png b/images/logo/Property 1=Variant3.png
diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico
diff --git a/images/logo/판다 얼굴 아이콘.png b/images/logo/판다 얼굴 아이콘.png
diff --git a/images/social/ic_facebook.png b/images/social/ic_facebook.png
diff --git a/images/social/ic_instagram.png b/images/social/ic_instagram.png
diff --git a/images/social/ic_twitter.png b/images/social/ic_twitter.png
diff --git a/images/social/ic_youtube.png b/images/social/ic_youtube.png
diff --git a/s-m-1-style.css b/s-m-1-style.css
@@ -0,0 +1,146 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    color: #374151;
+    word-break: keep-all;
+    font-family: Pretendard, 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 #dfdfdf;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+img {
+    vertical-align: bottom;
+}
+
+.button {
+    background-color: #3692FF;
+    color: #ffffff;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #1967d6;
+}
+
+#login-link-button {
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 8px;
+    padding: 11.5px 23px;
+}
+
+.banner {
+    background-color: #cfe5ff;
+    height: 540px;
+    display: flex;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-position: 80% bottom;
+    background-size: 55%;
+}
+
+#top {
+    background-image: url(images/Img_home_top.png);
+}
+
+.wrap {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+h1 {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    letter-spacing: 0.02em;
+}
+
+.pill-button {
+    font-size: 20px;
+    font-weight: 700;
+    border-radius: 999px;
+    margin-top: 32px;
+    padding: 16px 124px;
+}
+
+#contents {
+    padding-bottom: 138px;
+}
+
+.content {
+    padding: 138px 0;
+    display: flex;
+    align-items: center;
+    gap: 5%;
+}
+
+.content:nth-child(2) {
+    text-align: right;
+}
+
+.content-text {
+    flex: 1;
+}
+
+.content-tag {
+    color: #3692ff;
+    font-size: 18px;
+    line-height: 25px;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.content-description {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.08em;
+    margin-top: 24px;
+}
+
+#bottom {
+    background-image: url(images/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-text {
+    display: flex;
+    gap: 30px;
+    color: #e5e7eb;
+}
+
+#social-media {
+    display: flex;
+    gap: 12px;
+}
+
diff --git a/sprint-mission-1.html b/sprint-mission-1.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>판다마켓 </title>
+    <link rel="icon" href="images/logo/favicon.ico">
+    <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="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <a href="/">
+            <img src="images/logo/Property 1=Variant3.png" alt="판다마켓 홈" width="153">
+        </a>
+        <a href="/login" id="login-link-button" class="button">로그인</a>
+    </header>
+    <main>
+        <section id="top" class="banner">
+            <div class="wrap">
+                <h1>
+                일상의 모든 물건을<br>
+                거래해 보세요
+                </h1>
+                <a href="/items" class="button pill-button">구경하러 가기</a>
+            </div>
+        </section>
+        <section id="contents" class="wrap">    
+            <div class="content">
+                <img src="images/Img_home_01.png" alt="인기 상품 커버" width="50%">
+                <div class="content-text">
+                    <h2 class="content-tag">Hot item</h2>
+                    <h1>
+                        인기 상품을<br>
+                        확인해 보세요
+                    </h1>
+                    <p class="content-description">
+                        가장 HOT한 중고거래 물품을<br>
+                        판다마켓에서 확인해 보세요
+                    </p>
+                </div>
+            </div>
+            <div class="content">
+                <div class="content-text">
+                    <h2 class="content-tag">Search</h2>
+                    <h1>
+                        구매를 원하는<br>
+                        상품을 검색하세요
+                    </h1>
+                    <p class="content-description">
+                        구매하고 싶은 물품은 검색해서<br>
+                        쉽게 찾아보세요
+                    </p>
+                </div>
+                <img src="images/Img_home_02.png" alt="검색 커버" width="50%">
+            </div>
+            <div class="content">
+                <img src="images/Img_home_03.png" alt="등록 커버" width="50%">
+                <div class="content-text">
+                    <h2 class="content-tag">Register</h2>
+                    <h1>
+                        판매를 원하는<br>
+                        상품을 등록하세요
+                    </h1>
+                    <p class="content-description">
+                        어떤 물건이든 판매하고 싶은 상품을<br>
+                        쉽게 등록하세요
+                    </p>
+                </div>
+            </div>
+        </section>
+        <section id="bottom" class="banner">
+            <div class="wrap">
+                <h1>
+                    믿을 수 있는<br>
+                    판다마켓 중고거래
+                </h1>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div>©codeit - 2024</div>
+        <div id="footer-text">
+            <a href="/privacy">Privacy Policy</a>
+            <a href="/faq">FAQ</a>
+        </div>
+        <div id="social-media">
+            <a href="https://www.facebook.com/" target="_blank">
+                <img src="images/social/ic_facebook.png" alt="페이스북" width="20">
+            </a>
+            <a href="https://www.twitter.com/" target="_blank">
+                <img src="images/social/ic_twitter.png" alt="트위터" width="20">
+            </a>
+            <a href="https://www.youtube.com/" target="_blank">
+                <img src="images/social/ic_youtube.png" alt="유튜브" width="20">
+            </a>
+            <a href="https://www.instagram.com/" target="_blank">
+                <img src="images/social/ic_instagram.png" alt="인스타그램" width="20">
+            </a>
+        </div>
+    </footer>
+</body>
+</html>