codeit-bootcamp-frontend · dongqui · Jan 16, 2025 · Jan 14, 2025 · dongqui · Jan 16, 2025
diff --git a/images/icon/ic_facebook.png b/images/icon/ic_facebook.png
diff --git a/images/icon/ic_instagram.png b/images/icon/ic_instagram.png
diff --git a/images/icon/ic_twitter.png b/images/icon/ic_twitter.png
diff --git a/images/icon/ic_youtube.png b/images/icon/ic_youtube.png
diff --git a/images/landing/Frame 2609410.png b/images/landing/Frame 2609410.png
diff --git a/images/landing/Img_home_top.png b/images/landing/Img_home_top.png
diff --git a/images/landing/desktop_01.png b/images/landing/desktop_01.png
diff --git a/images/landing/desktop_02.png b/images/landing/desktop_02.png
diff --git a/images/landing/desktop_03.png b/images/landing/desktop_03.png
diff --git a/images/landing/desktop_04.png b/images/landing/desktop_04.png
diff --git a/images/landing/desktop_05.png b/images/landing/desktop_05.png
diff --git a/images/logo/Property 1=Typo.png b/images/logo/Property 1=Typo.png
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property 1=lg.png b/images/logo/Property 1=lg.png
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property 1=md.png b/images/logo/Property 1=md.png
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property 1=sm.png b/images/logo/Property 1=sm.png
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/images/logo/Property [email protected] b/images/logo/Property [email protected]
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <header>
+      <div class="header-wrap">
+        <a href="/" class="logo"
+          ><img src="images/logo/Property 1=sm.png" alt="logo-img"
+        /></a>
+        <a href="/login" class="login-btn basic-btn">로그인</a>
+      </div>
+    </header>
+    <main>
+      <section class="main-banner">
+        <div class="main-banner-wrapper">
+          <div class="main-banner-text">
+            <h2>일상의 모든 물건을<br />거래해 보세요</h2>
+            <a href="/items" class="main-banner-btn basic-btn">구경하러 가기</a>
+          </div>
+          <img
+            src="images/landing/Img_home_top.png"
+            alt="서비스를 소개하는 메인 배너 이미지"
+            class="main-banner-img"
+          />
+        </div>
+      </section>
+      <section class="landing-description">
+        <div class="service-img-container">
+          <img
+            src="images/landing/desktop_02.png"
+            alt="인기상품 확인가능 관련 이미지"
+          />
+        </div>
+        <div class="service-img-container">
+          <img
+            src="images/landing/desktop_03.png"
+            alt="상품 검색 관련 이미지"
+          />
+        </div>
+        <div class="service-img-container">
+          <img
+            src="images/landing/desktop_04.png"
+            alt="상품 등록 관련 이미지"
+          />
+        </div>
+      </section>
+    </main>
+    <footer>
+      <img
+        src="images/landing/desktop_05.png"
+        alt="서비스를 소개하는 하단 배너 이미지"
+      />
+      <div class="footer-background">
+        <div class="footer-container">
+          <p style="color: #9ca3af">@codeit - 2024</p>
+          <div id="footer-links">
+            <a href="/privacy">Privacy Policy</a><a href="/faq">FAQ</a>
+          </div>
+          <div id="footer-web-links">
+            <a href="https://www.facebook.com"
+              ><img src="images/icon/ic_facebook.png" alt="facebook_link"
+            /></a>
+            <a href="https://www.x.com"
+              ><img src="images/icon/ic_twitter.png" alt="twitter_link"
+            /></a>
+            <a href="https://www.youtube.com"
+              ><img src="images/icon/ic_youtube.png" alt="youtube_link"
+            /></a>
+            <a href="https://www.instagram.com"
+              ><img src="images/icon/ic_instagram.png" alt="instagram_link"
+            /></a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,164 @@
+* {
+  box-sizing: border-box;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  height: auto;
+}
+
+body {
+  font-family: "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #ffffff;
+}
+a {
+  text-decoration: none;
+}
+
+header {
+  width: 100%;
+  max-width: 1920px;
+  height: 70px;
+  margin: 0 auto;
+  padding: 9px 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.header-wrap {
+  width: 100%;
+  max-width: 1120px;
+  height: 51px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+section.main-banner {
+  width: 100%;
+  background-color: #cfe5ff;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.main-banner-wrapper {
+  display: flex;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: end;
+  margin-top: 200px;
+  gap: 7px;
+}
+
+.main-banner-text {
+  margin: 40px auto;
+  padding: 0 0 60px;
+  gap: 32px;
+}
+
+.main-banner-text > h2 {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 56px;
+  color: #374151;
+}
+
+.header-wrap > img {
+  flex: 0 0 153px;
+}
+.header-wrap > .login-btn {
+  flex: 0 0 128px;
+  padding: 12px 23px;
+  color: #f3f4f6;
+  font-size: 16px;
+  line-height: 26px;
+  border-radius: 8px;
+}
+
+.basic-btn {
+  font-weight: 600;
+  background-color: #3692ff;
+  text-align: center;
+  text-decoration: none;
+}
+
+.main-banner-btn {
+  width: 100%;
+  padding: 16px 124px;
+  border-radius: 40px;
+  color: #f9fafb;
+  font-size: 20px;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+.landing-description {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.service-img-container {
+  margin: 138px auto;
+}
+footer {
+  background-color: #cfe5ff;
+}
+
+footer > img {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+}
+
+.footer-background {
+  width: 100%;
+  height: 160px;
+  margin: 0 auto;
+  padding: 32px 400px;
+  display: flex;
+  justify-content: center;
+  background-color: #111827;
+  color: #e5e7eb;
+}
+
+.footer-container {
+  width: 1120px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+#footer-links {
+  font-size: 16px;
+  font-weight: 400;
+  display: flex;
+  justify-content: space-between;
+  width: 159px;
+  align-items: center;
+}
+#footer-links > a {
+  color: #e5e7eb;
+}
+#footer-web-links {
+  width: 116px;
+  display: flex;
+  gap: 12px;
+}