[FE] 스프린트 미션 1

codeit-bootcamp-frontend · Sep 8, 2024 · 545a5aa · 545a5aa
1 parent 4dc5dd0
commit 545a5aa
Show file tree

Hide file tree

Showing 17 changed files with 397 additions and 0 deletions.
diff --git a/11-Sprint-Mission b/11-Sprint-Mission
diff --git a/Img_home_01.png b/Img_home_01.png
diff --git a/Img_home_02.png b/Img_home_02.png
diff --git a/Img_home_03.png b/Img_home_03.png
diff --git a/Img_home_bottom.png b/Img_home_bottom.png
diff --git a/Img_home_top.png b/Img_home_top.png
diff --git a/facebook.svg b/facebook.svg
diff --git a/faq.html b/faq.html
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>판다마켓</title>
+        <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="index.html"><img class="logo" src="logo.svg"></a>
+            <a href="login.html" id="loginbtn"><button class="login">로그인</button></a>
+        </header>
+
+        <main>
+            <section id="ht" class="banner">
+                <div class="dht">
+                    <h2>일상의 모든 물건을<br>거래해 보세요</h2><br>
+                    <a href="items.html" id="itemsbtn"><button class="items">구경하러 가기</button></a>
+                </div>
+                <img class="home_top" src="Img_home_top.png">
+            </section>
+
+            <section class="h01">
+                <div class="dh01">
+                    <img class="home_01" src="Img_home_01.png">
+                    <div class="text01">
+                        <p class="ptitle">Hot item</p><br>
+                        <h2>인기 상품을<br>확인해 보세요</h2><br>
+                        <p class="pcontent">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+                    </div>
+                </div>
+            </section>
+
+            <section class="h02">
+                <div class="dh02">
+                    <div class="text02">
+                        <p class="ptitle">Search</p><br>
+                        <h2>구매를 원하는<br>상품을 검색하세요</h2><br>
+                        <p class="pcontent">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
+                    </div>
+                    <img class="home_02" src="Img_home_02.png">
+                </div>
+            </section>
+
+            <section class="h03">
+                <div class="dh03">
+                    <img class="home_03" src="Img_home_03.png">
+                    <div class="text03">
+                        <p class="ptitle">Register</p><br>
+                        <h2>판매를 원하는<br>상품을 등록하세요</h2><br>
+                        <p class="pcontent">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                    </div>
+                </div>
+            </section>
+
+
+
+            <section id="hb" class="banner">
+                <div class="dhb">
+                    <h2>믿을 수 있는<br>판다마켓 중고 거래</h2>
+                </div>
+                <img class="home_bottom" src="Img_home_bottom.png">
+            </section>
+        </main>
+
+
+
+        <footer>
+            <div id="codeit">@codeit - 2024</div>
+            <div class="footer_menu">
+                <a href="privacy.html">Pricacy Policy</a>
+                <a href="faq.html">FAQ</a>
+            </div>
+            <div class="footer_icon">
+                <a href="https://www.facebook.com/"><img class="facebook" src="facebook.svg"></a>
+                <a href="https://x.com/"><img class="twiter" src="twiter.svg"></a>
+                <a href="https://www.youtube.com/"><img class="youtube" src="youtube.svg"></a>
+                <a href="https://www.instagram.com/"><img class="instargram" src="instargram.svg"></a>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/instargram.svg b/instargram.svg
diff --git a/items.html b/items.html
diff --git a/login.html b/login.html
diff --git a/logo.svg b/logo.svg
diff --git a/privacy.html b/privacy.html
diff --git a/style.css b/style.css
@@ -0,0 +1,274 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-family: Pretendard, sans-serif;
+    word-break: keep-all;
+}
+
+main {
+    margin-top: 70px;
+}
+
+body {
+    background-color: #ffffff;
+}
+
+section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+a {
+    text-decoration: none; 
+    color: inherit;
+}
+
+h2 {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+}
+
+header {
+    position: fixed;
+    width: 100%;
+    max-width: 1920px;
+    height: 70px;
+    background-color: #ffffff;
+    font-weight: 700;
+    padding: 0px 200px;
+    display: flex;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    align-items: center;
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.banner {
+    background-color: #cfe5ff;
+    height: 540px;
+    display: flex;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-position: 80% bottom;
+    background-size: 55%;
+}
+
+.logo {
+    width: 153px;
+    height: 51px;
+}
+
+.login {
+    width: 128px;
+    height: 48px;
+    background-color: #3692FF;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+    padding: 12px 23px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+.items {
+    margin-top: 32px;
+    width: 357px;
+    height: 56px;
+    background-color: #3692FF;
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 32px;
+    border: none;
+    border-radius: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.h01 {
+    padding: 138px 0;
+    display: flex;
+    align-items: center;
+    gap: 5%;
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.h02 {
+    padding: 138px 0;
+    display: flex;
+    align-items: center;
+    gap: 5%;
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.h03 {
+    padding: 138px 0;
+    display: flex;
+    align-items: center;
+    gap: 5%;
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.ptitle {
+    color: #3692ff;
+    font-size: 18px;
+    line-height: 26px;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.pcontent {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
+    margin-top: 24px;
+}
+
+
+/* footer */
+footer {
+    background-color: #111827;
+    color: #9ca3af;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px 200px 108px 200px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.codeit {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 29px;
+}
+
+.footer_meun {
+    font-size: 16px;
+    display: flex;
+    gap: 30px;
+    color: #e5e7eb;
+}
+
+.footer_icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    gap: 12px;
+}
+
+/* 이미지 */
+.home_top {
+    vertical-align: bottom;
+    width: 746px;
+    height: 340px;
+}
+
+.home_01 {
+    width: 579px;
+    height: 444px;
+}
+
+.home_02 {
+    width: 579px;
+    height: 444px;
+}
+
+.home_03 {
+    width: 579px;
+    height: 444px;
+}
+
+.home_bottom {
+    vertical-align: bottom;
+    width: 746px;
+    height: 397px;
+}
+
+/* 항목 배경 */
+.ht {
+    width: 100%; 
+    height: 540px;
+    margin-bottom: 0;
+}
+
+.h01 {
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.h02 {
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.h03 {
+    background-color: #ffffff;
+    width: 100%;
+    height: 720px;
+}
+
+.hb {
+    width: 100%;
+    height: 540px;
+}
+
+.dh01 {
+    background-color: #FCFCFC;
+    width: 988px;
+    height: 444px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dh02 {
+    background-color: #FCFCFC;
+    width: 988px;
+    height: 444px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dh03 {
+    background-color: #FCFCFC;
+    width: 988px;
+    height: 444px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* 글 정렬 */
+.text01 {
+    margin: 0 auto;
+}
+
+.text02 {
+    margin: 0 auto;
+
+}
+
+.text03 {
+    margin: 0 auto;
+}
diff --git a/twiter.svg b/twiter.svg