codeit-bootcamp-frontend · Il9 · Mar 18, 2024 · Mar 15, 2024 · Il9 · Mar 16, 2024
diff --git a/images/content2.png b/images/content2.png
diff --git a/images/content3.png b/images/content3.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/insta.png b/images/insta.png
diff --git a/images/login.png b/images/login.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/panda.png b/images/panda.png
diff --git a/images/panda2.png b/images/panda2.png
diff --git a/images/x.png b/images/x.png
diff --git a/images/youtube.png b/images/youtube.png
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!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/pretendard@v1.3.6/dist/web/static/pretendard.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="gnb">
+        <a href="/">
+            <img class="logo" src= "images/logo.png">
+        </a>
+        <a href="/signin" class="login">로그인</a>
+    </header>
+    <section class="main-banner">
+        <div class="banner">
+            <h2 class="banner-text">
+                일상의 모든 물건을<br>
+                거래해 보세요.
+            </h2>
+            <a href="/items" target="_blank" class="banner-link">구경하러 가기</a>
+        </div>
+        <img class="banner-panda" src="images/panda.png" width="996px" height="447px">
+    </section>
+    <section class="section1">
+        <img class="content1" src="images/content1.png" width="588px" height="444px">
+        <div class="content-text">
+            <span>Hot item</span>
+            <h2>
+                인기상품을<br>
+                확인해 보세요
+            </h2>
+            <p>
+                가장 HOT한 중고거래 물품을<br>
+                판다 마켓에서 확인해 보세요  
+            </h3>
+        </div>
+    </section>
+    <section class="section2">
+        <div class="content-text">
+            <span>Search item</span>
+            <h2>
+                구매를 원하는<br>
+                상품을 검색하세요
+            </h2>
+            <p>
+                구매하고 싶은 물품은 검색해서<br>
+                쉽게 찾아보세요
+            </h3>
+        </div>
+        <img class="content3" src="images/content2.png" width="588px" height="444px">
+    </section>
+    <section class="section1">
+        <img class="content3" src="images/content3.png" width="588px" height="444px">
+        <div class="content-text">
+            <span>Register</span>
+            <h2>
+                판매를 원하는<br>
+                상품을 등록하세요
+            </h2>
+            <p>
+                어떤 물건이든 판매하고 싶은 상품을<br>
+                쉽게 등록하세요
+            </h3>
+        </div>        
+    </section>
+    <section class="main-banner">
+        <div class="banner">
+            <h2 class="banner-text">
+                믿을 수 있는<br>
+                판다마켓 중고거래
+            </h2>
+        </div>
+        <img class="bottom-banner-panda" src="images/panda2.png" width="996px" height="540px">
+    </section>
+    <footer class="footer">
+        <div class="bottom-banner">
+            <p class="codeit"> @codeit-2024 </p>
+            <div class="faq">
+                <a href="/privacy" class="faq">Privacy Policy</a>
+                <a href="/faq" class="faq">FAQ</a>
+            </div>
+            <div class="sns">
+                <a href="#" target="_blank">
+                    <img src="images/facebook.png">
+                </a>
+                <a href="#" target="_blank">
+                    <img src="images/x.png">
+                </a>
+                <a href="#" target="_blank">
+                    <img src="images/youtube.png">
+                </a>
+                <a href="#" target="_blank">
+                    <img src="images/insta.png">
+                </a>
+            </div>
+         </div>
+    </footer>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,134 @@
+
+html {
+    font-family: Pretendard, sans-serif;
+}
+
+body{
+    margin:0;
+}
+
+.gnb {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin:0 200px;
+}
+.gnb .logo {
+    width: 153px;
+    height: 51px;
+}
+.gnb .login {
+    border-radius: 8px;
+    background-color: #3692FF;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 600;
+    padding:12px 20px 12px 20px;
+    gap:10px;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.main-banner {
+    background-color: #CFE5FF;
+    width: 100%;
+    height: 540px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.banner {
+    display: flex;
+    flex-direction: column;
+}
+.banner-panda {
+    margin-top:93px;
+}
+.banner-text {
+    font-size: 40px;
+    font-weight: 700;
+    width: 355px;
+}
+.banner-link {
+    border-radius: 40px;
+    background-color: #3692FF;
+    font-size: 20px;
+    font-weight: 600;
+    color: #ffffff;
+    text-decoration: none;
+    padding:16px;
+    gap: 32px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.section1 {
+    width: 1200px;
+    display: flex;
+    align-items: center;
+    gap: 64px;
+    margin-top:138px;
+    margin-left:360px;
+    margin-bottom:138px;
+}
+.section2 {
+    width:1200px;
+    display: flex;
+    align-items: center;
+    gap:64px;
+    margin-top: 138px;
+    margin-left: 591px;
+    text-align: right;
+}
+
+.content-text span {
+    color:#3692FF;
+    font-size: 18px;
+    font-weight: 700;
+}
+.content-text h2 {
+    color: #374151;
+    font-size: 40px;
+    font-weight: 700;
+}
+.content-text p {
+    color: #374151;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.footer {
+    width: auto;
+    height: 160px;
+    background-color: #111827;
+    padding:32px 200px 32px 200px;
+}
+.bottom-banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap:30px;
+}
+.bottom-banner .codeit {
+    color: #9CA3AF;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+}
+.bottom-banner .faq {
+    color: #E5E7EB;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    gap:30px;
+    cursor: pointer;
+}
+.bottom-banner .sns {
+    display: flex;
+    gap:12px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}