codeit-bootcamp-frontend · albottu · Apr 4, 2025
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/hotItem.png b/hotItem.png
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,98 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>판다마켓</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;700&display=swap"
+      rel="stylesheet">
+    <link 
+      href="https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff"
+      rel="stylesheet">
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="header">
+        <a href="/">
+          <img class="logo" src="logo.png" alt="헤더 로고">
+        </a>        
+        <a href="/login" class="login">로그인</a>
+      </div>
+    </header>
+    <main>
+      <section class="banner" id="bannerTop">
+        <div class="block" id="banner-block">
+          <div class="empty" id="empty-left"></div>
+          <div class="content" id="banner-content">
+            <div class="contentbox" id="contentbox1">
+              <p>
+                일상의 모든 물건을<br>
+                거래해보세요.
+              </p>
+              <a href="/items" class="item">구경하러 가기</a>
+            </div>
+            <div class="contentbox" id="contentbox2"></div>
+          </div>
+          <div class="empty" id="empty-right"></div>
+        </div>
+      </section>    
+      <section class="page" id="hot">
+          <div class="content" id="hot-content"></div>
+      </section>
+      <section class="page" id="search">
+        <div class="content" id="search-content"></div>
+      </section>
+      <section class="page" id="register">
+        <div class="content" id="register-content"></div>
+      </section>
+      <div class="hr"></div>
+      <section class="banner" id="bannerBottom">
+        <div class="block" id="banner-block">
+          <div class="empty" id="empty-left"></div>
+          <div class="content" id="banner-content">
+            <div class="contentbox" id="contentbox1">
+              <p>
+                일상의 모든 물건을<br>
+                거래해보세요.
+              </p>
+            </div>
+            <div class="contentbox" id="contentbox2"></div>
+          </div>
+          <div class="empty" id="empty-right"></div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div class="footer">
+        <div clss="copyright">
+            ⓒcodeit - 2024
+        </div>
+        <div class="privAndFaq">
+          <a href="/privacy" class="privacy">
+            Privacy Policy
+          </a>
+          <a href="/faq" class="faq">
+            FAQ
+          </a>
+        </div>
+        <div class="sns">
+          <a href="https://www.facebook.com/" target="_black">
+            <img class="facebook" src="ic_facebook.png"/>
+          </a>
+          <a href="https://www.instagram.com/" target="_black">
+            <img class="twitter" src="ic_twitter.png"/>
+          </a>
+          <a href="https://www.youtube.com/" target="_black">
+            <img class="youtube" src="ic_youtube.png"/>
+          </a>
+          <a href="https://www.instagram.com/" target="_black">
+            <img class="instagram" src="ic_instagram.png"/>
+          </a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/login.png b/login.png
diff --git a/logo.png b/logo.png
diff --git a/register.png b/register.png
diff --git a/search.png b/search.png
diff --git a/style.css b/style.css
@@ -0,0 +1,232 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    font-family: 'Pretendard-Regular', sans-serif;
+    color: #374151;    
+}
+
+body {
+    width: 1920px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+header {
+    margin: 0;
+    padding: 10px 0;
+    height: 70px;
+    background-color: #ffffff;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.header {
+    display: flex;
+    margin: 0 auto;
+    justify-content: space-between;
+    align-items: center;
+    height: 51px;
+    background-color: #ffffff;
+}
+
+.logo {
+    margin-left: 200px;
+    height: 51px;
+}
+
+.login {
+    margin-right: 200px;
+    padding: 12px 23px;
+    border-radius: 8px;
+    background: #3692FF;
+    color: #ffffff;
+    height: 48px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+}
+
+.banner {
+    height: 500px;
+    max-height: 540px;
+    background-color: #CFE5FF;
+}
+
+.block {
+    display: grid;
+    grid-template-columns: 200px auto 200px;
+    min-height: 100%;
+    grid-template-areas:
+      "a b c";
+}
+
+#empty-left {
+    grid-area: a;
+}
+
+.content {
+    grid-area: b;
+}
+
+#empty-right {
+    grid-area: c;
+}
+
+.block .content {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas: "b1 b2";
+}
+
+#contentbox1 {
+    grid-area: b1;
+}
+
+#contentbox2 {
+    grid-area: b2;
+}
+
+.banner .block #contentbox1 p {
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 140%;
+}
+
+.item {
+    margin-bottom: 60px;
+    padding: 16px 124px;
+    border-radius: 40px;
+    background: #3692FF;
+    color: #ffffff;
+    height: 56px; 
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 32px;
+}
+
+.banner #contentbox1 {
+    position: absolute;
+    left: 0;
+    bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#bannerTop .block #contentbox2 {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-image: url('Img_home_top.png');
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-size: contain;    
+    width: 100%;
+    height: 100%;
+}
+
+#bannerBottom .block #contentbox2 {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-image: url('Img_home_bottom.png');
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-size: contain;    
+    width: 100%;
+    height: 100%;
+}
+
+.page {
+    height: 720px;    
+    max-height: 720px;
+}
+
+.page .blcok {
+    grid-template-columns: 200px auto 200px;
+    grid-template-areas:
+      "a b c";
+}
+
+.page .content {
+    margin: 120px auto;
+    width: 988px;
+    height: 444px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#hot-content {
+    background-image: url('hotItem.png');
+}
+
+#search-content {
+    background-image: url('search.png');
+}
+
+#register-content {
+    background-image: url('register.png');
+}
+
+.hr {
+    width: 100%;
+    height: 120px;
+    background-color: #FCFCFC;
+}
+
+footer {
+    height: 160px;
+    background-color: #111827;
+    color: #E5E7EB;
+    font-weight: 400;
+    line-height: 100%;
+}
+
+.footer {
+    width: 1120px;
+    margin: 0 auto;
+    padding: 50px 0;
+    display: flex;
+    justify-content: space-between;    
+}
+
+.copyright {
+    color: #9CA3AF;
+}
+
+.privAndFaq {
+    display: flex;
+    gap: 30px;
+}
+
+.privacy {
+    display: inline-block;
+    color: #E5E7EB;
+    text-decoration: none;
+}
+
+.faq {
+    display: inline-block;
+    color: #E5E7EB;
+    text-decoration: none;
+}
+
+.sns {
+    display: flex;
+    gap: 12px;
+}
+
+.sns a {
+    width: 20px;
+    height: 20px;
+}