codeit-bootcamp-frontend · dongqui · Jan 16, 2025 · Jan 15, 2025 · dongqui · Jan 16, 2025
diff --git a/Image/desktop_01.png b/Image/desktop_01.png
diff --git a/Image/desktop_02.png b/Image/desktop_02.png
diff --git a/Image/desktop_03.png b/Image/desktop_03.png
diff --git a/Image/desktop_04.png b/Image/desktop_04.png
diff --git a/Image/desktop_05.png b/Image/desktop_05.png
diff --git a/Image/ic_facebook.png b/Image/ic_facebook.png
diff --git a/Image/ic_instagram.png b/Image/ic_instagram.png
diff --git a/Image/ic_twitter.png b/Image/ic_twitter.png
diff --git a/Image/ic_youtube.png b/Image/ic_youtube.png
diff --git a/Image/logo.png b/Image/logo.png
diff --git a/Image/판다 얼굴.png b/Image/판다 얼굴.png
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/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="top_container">
+            <img src="image/logo.png" class="logo">
+            <a href="/login.html" class="login">
+                로그인
+            </a>
+        </div>
+        <div class ="layout_container">
+
+        <div class="layout_image">
+            <img src="image/desktop_01.png"> 
+            <a href="/items.html" class="product_view">
+                구경하러가기
+            </a>
+         </div>
+
+        <div class="layout_image">
+            <img src="image/desktop_02.png"> 
+         </div>
+
+         <div class="layout_image">
+            <img src="image/desktop_03.png"> 
+         </div>
+
+         <div class="layout_image">
+            <img src="image/desktop_04.png"> 
+         </div>
+
+         <div class="layout_image">
+            <img src="image/desktop_05.png"> 
+         </div>
+         <footer>
+
+            <div>
+                @codeit - 2024
+            </div>
+
+            <div style="display:flex; gap: 24px;">
+
+                <a href="/privacy.html">
+                    @privacy policy
+                </a>
+                <a href="/faq.html">
+                    FAQ
+                </a>
+            </div style="display: flex">
+
+            <div>
+            <a href="https://www.facebook.com" target="_blank">
+                <img src="image/ic_facebook.png" alt="Facebook">
+              </a>
+
+              <a href="https://www.twitter.com" target="_blank">
+                <img src="image/ic_twitter.png" alt="Twitter">
+              </a>
+
+              <a href="https://www.youtube.com" target="_blank">
+                <img src="image/ic_youtube.png" alt="Youtube">
+              </a>
+
+              <a href="https://www.instagram.com" target="_blank">
+                <img src="image/ic_instagram.png" alt="Instagram">
+              </a>
+            </div>
+
+         </footer>
+         </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,13 @@
+<!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>
+    <div>
+    임시 아이템
+    </div>
+</body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1,14 @@
+<!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>
+    <div>
+        임시로그인
+    </div>
+
+</body>
+</html>
diff --git a/privacy.html b/privacy.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/style.css b/style.css
@@ -0,0 +1,124 @@
+*{
+    box-sizing: border-box;
+}
+
+a {
+    color: inherit; 
+    text-decoration: none;
+}
+.container {
+    width: 100%; 
+  }
+
+.top_container{
+    display: flex;
+    justify-content: space-between;
+}
+footer{
+    background-color: #111827;
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: space-between;
+    color: white;
+
+}
+
+
+  /* 로고 */
+  .logo {
+    height: 50px;
+    width: 125px;
+  }
+
+  /* Spacer: 빈 공간 생성 */
+  .spacer {
+    flex: 1;
+  }
+
+  /* 로그인 */
+  .login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    border: 1px solid #3692FF;
+    border-radius: 10px;
+    color: white;
+    background-color: #3692FF;
+    width: 100px;
+    cursor: pointer;
+  }
+
+  .product_view{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    border: 1px solid #3692FF;
+    border-radius: 999px;
+    color: white;
+    background-color: #3692FF;
+    width: 100px;
+    position: relative;
+    left:405px;
+    width: 360px;
+    bottom: 162px;
+    height: 61px;
+    cursor: pointer;
+
+  }
+  .layout_container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+  }
+
+  .layout_image{
+    padding-top: 10px;
+  }
+
+  /* 화면 크기에 따라 여백 조정 */
+  @media screen and (min-width: 1920px) {
+    body {
+      background-color: skyblue;
+      margin: 0 auto;
+    }
+  }
+
+  /* 화면 너비가 1920px 미만일 때 배경색 없음 */
+  @media screen and (max-width: 1919px) {
+    body {
+      background-color: white; /* 기본 배경색 */
+
+
+    }
+
+    .logo{
+        margin-left: 200px;
+
+    }
+
+
+  }
+
+  /* 화면 너비에 따라 여백 조정 */
+  @media screen and (max-width: 1400px) {
+    .container {
+      padding: 0 100px;
+    }
+  }
+
+  @media screen and (max-width: 1024px) {
+    .container {
+      padding: 0 50px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .container {
+      padding: 0 20px;
+    }
+  }