Merge pull request #22 from dkozowlk/Basic-김태욱

[김태욱]Sprint1
codeit-bootcamp-frontend · Jan 14, 2025 · 2c70c84 · 2c70c84
2 parents 4dc5dd0 + 62df85c
commit 2c70c84
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 0 deletions.
diff --git a/Faq.html b/Faq.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/SMstyle.css b/SMstyle.css
@@ -0,0 +1,171 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+body {
+    color: #374151;
+    word-break: keep-all;
+    font-family: "Pretendard", sans-serif;
+    }
+
+img {
+    vertical-align: bottom;
+    }
+
+h1 {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 56px;
+    letter-spacing: 0.02em;
+    }
+
+/* 헤더 부분 */
+    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;
+        }
+
+            #logo {
+                width: 150px;
+            }
+            a {
+                text-decoration: none;
+                color: inherit;
+                cursor: pointer;
+            }
+            /* 버튼 부분 */
+            .button {
+                background-color: #3692ff;
+                color: #ffffff;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+            }
+                .button:hover {
+                    background-color: #1967d6;
+                }
+
+                .button:focus {
+                    background-color: #1251aa;
+                }
+
+                .button:disabled {
+                    background-color: #9ca3af;
+                    cursor: default;
+                    pointer-events: none;
+                }
+
+                #loginbutton.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%;
+                    }
+
+                    #mainbanner {
+                        background-image: url("pandamain.png");
+                        }
+                    .goitem {
+                        font-size: 20px;
+                        font-weight: 700;
+                        border-radius: 999px;
+                        padding: 16px 124px;
+                        }
+
+                    .banner .goitem {
+                        margin-top: 32px;
+                        }
+            /* 섹션 메인 베너 부분 */
+            /* 섹션 홈로그 영역 */
+            #hotitem {
+                padding-bottom: 138px;
+                }
+
+            .bannerwrap {
+                max-width: 1200px;
+                margin: 0 auto;
+                width: 100%;
+                }
+                .itempack {
+                    padding: 138px 0;
+                    display: flex;
+                    align-items: center;
+                    gap: 5%;
+                    }
+
+                    .homelogo {
+                        width: 50%;
+                        }
+
+                    .itemcheck {
+                        flex: 1;
+                        }
+
+                        .itemtag {
+                        color: #3692ff;
+                        font-size: 18px;
+                        line-height: 25px;
+                        font-weight: 700;
+                        margin-bottom: 12px;
+                        }
+
+                        .besthotitem {
+                            font-size: 24px;
+                            font-weight: 500;
+                            line-height: 120%;
+                            letter-spacing: 0.08em;
+                            margin-top: 24px;
+                            }
+            /* 섹션 홈로그 영역 */
+        /*섹션 부분*/
+    /* 바텀 배너 부분*/
+        #bottomBanner {
+            background-image: url("lastpanda.png")
+            }
+    /* 바텀 배너 부분*/  
+/* 메인 부분 */
+/*푸터 부분*/
+footer {
+    background-color: #111827;
+    color: #9ca3af;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px 200px 108px 200px;
+    font-size: 16px;
+    }
+
+    #footeMenu {
+        display: flex;
+        gap: 30px;
+        color: #e5e7eb;
+        }
+
+    #Media {
+        display: flex;
+        gap: 12px;
+        }
+/*푸터 부분*/
diff --git a/homelogo1.png b/homelogo1.png
diff --git a/homelogo2.png b/homelogo2.png
diff --git a/homelogo3.png b/homelogo3.png
diff --git a/homepage.html b/homepage.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/ic_facebook.png b/ic_facebook.png
diff --git a/ic_instagram.png b/ic_instagram.png
diff --git a/ic_twitter.png b/ic_twitter.png
diff --git a/ic_youtube.png b/ic_youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,109 @@
+<!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" href="SMstyle.css">
+</head>
+<body>
+   <header>
+            <a herf="homepage.html">
+                <img src="logo1.png" id="logo">
+            </a>
+            <a herf="login.html" class="button"id="loginbutton" >로그인</a>
+   </header>
+   <main>
+        <section id="mainbanner" class="banner">
+            <div class="bannerwrap">
+                <h1>
+                    일상의 모든 물건을<br>
+                    거래해 보세요
+                </h1>
+                <a href="items.html" class="goitem button">구경하러 가기</a>
+            </div>
+        </section>
+        <section id="hotitem" class="bannerwrap">
+            <div class="itempack">
+                <img src="homelogo1.png" class="homelogo">
+                <div class="itemcheck">
+                    <h2 class="itemtag">
+                        Hot item
+                    </h2>
+                    <h1>
+                        인기상품을<br>
+                        확인해 보세요
+                    </h1>
+                    <p class="besthotitem">
+                        가장 HOT한 중고거래 물품을<br>
+                        판다마켓에서 확인해 보세요
+                    </p>
+                </div>    
+            </div>
+            <div class="itempack">
+                <div class="itemcheck">
+                    <h2 class="itemtag">
+                        Search
+                    </h2>
+                    <h1>구매를 원하는<br>
+                    상품을 검색하세요
+                    </h1>
+                    <p class="besthotitem">
+                        구매하고 싶은 물품은 검색해서<br>
+                        쉽게 찾아보세요
+                    </p>
+                </div>
+                <img src="homelogo2.png" class="homelogo">
+            </div>
+            <div class="itempack">
+                <img src="homelogo3.png"  class="homelogo">
+                <div class="itemcheck">
+                    <h2 class="itemtag">
+                        Register
+                    </h2>
+                    <h1>
+                        판매를 원하는<br>
+                        상품을 등록하세요
+                    </h1>
+                    <p class="besthotitem">
+                        어떤 물건이든 판매하고 싶은 상품을<br>
+                        쉽게 등록하세요.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <section id="bottomBanner" class="banner">
+            <div class="bannerwrap">
+                <h1>
+                    믿을 수있는<br>
+                    판다마켓 중고거래 
+                </h1>
+            </div>
+        </section>
+   </main>
+   <footer>
+        <div>
+            @codeit - 2024
+        </div>
+        <div id="footeMenu">
+            <a href="Faq.html">
+                FAQ
+            </a>
+        </div>
+        <div id="media">
+            <a href="https://www.facebook.com/">
+                <img src="ic_facebook.png">
+            </a>
+            <a href="https://twitter.com/">
+                <img src="ic_twitter.png">
+            </a>
+            <a href="https://www.youtube.com/">
+                <img src="ic_youtube.png">
+            </a>
+            <a href="https://www.instagram.com/">
+                <img src="ic_instagram.png">
+            </a>
+        </div>
+   </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/lastpanda.png b/lastpanda.png
diff --git a/login.html b/login.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/logo1.png b/logo1.png
diff --git a/logo2.png b/logo2.png
diff --git a/logo3.png b/logo3.png
diff --git a/pandamain.png b/pandamain.png