codeit-bootcamp-frontend · GANGYIKIM · Feb 27, 2025 · Feb 27, 2025
diff --git a/faq.html b/faq.html
@@ -0,0 +1 @@
+faq page
diff --git a/images/bottom-section.png b/images/bottom-section.png
diff --git a/images/header-logo.png b/images/header-logo.png
diff --git a/images/hot-item.png b/images/hot-item.png
diff --git a/images/ic_facebook.png b/images/ic_facebook.png
diff --git a/images/ic_instagram.png b/images/ic_instagram.png
diff --git a/images/ic_twitter.png b/images/ic_twitter.png
diff --git a/images/ic_youtube.png b/images/ic_youtube.png
diff --git a/images/main-section.png b/images/main-section.png
diff --git a/images/register.png b/images/register.png
diff --git a/images/search.png b/images/search.png
diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="style.css">
+		<title>판다마켓</title>
+	</head>
+	<body>
+		<!-- header section / 로고, 로그인 -->
+		<header>
+			<div class="banner">
+				<div class="banner-main">
+					<a class="header-logo" href="index.html">
+						<img src="./images/header-logo.png" alt="로고">
+					</a>
+					<a id="login" href="login.html">로그인</a>
+				</div>
+			</div>
+		</header>
+		<!-- main section -->
+		<main>
+			<!-- top section -->
+			<section>
+				<div class="top-section">
+					<div class="top-content">
+						<div class="top-text">
+							<div class="top-title">
+								<h2>일상의 모든 물건을<br>
+									거래해 보세요
+							</h2>
+							<a id="sightsee" href="sightsee.html">구경하러 가기</a>
+							</div>
+						</div>
+							<img src="./images/main-section.png" alt="이미지1">
+					</div>	
+				</div>
+			</section>
+			<!-- middle section -->
+			<div class="middle-section">
+				<div class="hot-item">
+					<img src="./images/hot-item.png" alt="이미지2">
+				</div>
+				<div class="search">
+					<img src="./images/search.png" alt="이미지3">
+				</div>
+				<div class="register">
+					<img src="./images/register.png" alt="이미지4">
+				</div>
+			</div>
+			<!-- gray section -->
+			 <div class="gray-section"></div>
+			<!-- bottom section -->
+			<section>
+				<div class="bottom-section">
+					<div class="bottom-content">
+						<div class="bottom-text">
+							<div class="bottom-title">
+								<h2>믿을 수 있는<br>
+									판다마켓 중고 거래
+							</h2>
+							</div>
+						</div>
+							<img src="./images/bottom-section.png" alt="이미지5">
+					</div>	
+				</div>
+			</section>
+		</main>
+		<!-- footer section -->
+		<footer>
+			<div class="footer-text">
+				<div>@codeit - 2024</div>
+				<div class="footer-main">
+					<a class="privacy" href="privacy.html">Privacy Policy</a>
+					<a class="faq" href="faq.html">FAQ</a>
+				</div>
+				<div class="sns">
+					<a href="https://www.facebook.com" target="_blank"><img src="./images/ic_facebook.png" alt="페이스북"></a>
+					<a href="https://www.twitter.com" target="_blank"><img src="./images/ic_twitter.png" alt="트위터"></a>
+					<a href="https://www.youtube.com" target="_blank"><img src="./images/ic_youtube.png" alt="유튜브"></a>
+					<a href="https://www.instagram.com" target="_blank"><img src="./images/ic_instagram.png" alt="인스타그램"></a>
+				</div>
+			</div>
+		</footer>
+
+	</body>
+</html>
diff --git a/login.html b/login.html
@@ -0,0 +1 @@
+로그인 페이지
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1 @@
+privacy page
diff --git a/sightsee.html b/sightsee.html
@@ -0,0 +1 @@
+구경하기 페이지
diff --git a/style.css b/style.css
@@ -0,0 +1,163 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+  width: 100%;
+  background-color: #FFFFFF;
+}
+
+.banner {
+  display: flex;
+  max-width: 1920px;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 200px;
+}
+
+.banner-main {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-logo img {
+  width: 100px;
+  height: 35px;
+  cursor: pointer;
+}
+
+#login {
+  padding: 10px;
+  width: 90px;
+  height: 35px;
+  font-size: 12px;
+  text-align: center;
+  text-decoration: none;
+  color: #ffffff;
+  background-color: #3692FF;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.top-section,
+.bottom-section {
+  position: relative;
+  width: 100%;
+  height: 350px;
+  background-color: #CFE5FF;
+}
+
+.top-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 80%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.top-text,
+.bottom-text {
+  position: absolute;
+  left: 200px;
+  bottom: 70px;
+}
+
+.top-title h2,
+.bottom-title h2 {
+  width: 200px;
+  height: 50px;
+  font-weight: bold;
+  margin-bottom: 32px;
+  color: #374151;
+  font-size: 22px;
+}
+
+#sightsee {
+  width: 250px;
+  height: 40px;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  padding: 10px;
+  font-size: 14px;
+  color: #FFFFFF;
+  background-color: #3692FF;
+  border-radius: 20px;
+  text-decoration: none;
+}
+
+.top-content img,
+.bottom-content img {
+  position: absolute;
+  bottom: 0;
+  right: 200px;
+  width: 500px;
+  flex: 1;
+}
+
+.middle-section {
+  height: 1200px;
+}
+
+.gray-section {
+  height: 100px;
+  background-color: #f5f5f5;
+}
+
+.hot-item,
+.search,
+.register {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+}
+
+.hot-item img,
+.search img,
+.register img {
+  width: 600px;
+  height: 300px;
+}
+
+footer {
+  position: relative;
+  height: 100px;
+  color: #9CA3AF;
+  background-color: #111827;
+}
+
+.footer-text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 200px;
+}
+
+.privacy,
+.faq {
+  color: #FFFFFF;
+  text-decoration: none;
+}
+
+.privacy {
+  margin: 0 10px;
+}
+
+.faq {
+  margin: 0 10px;
+}