codeit-bootcamp-frontend · addiescode-sj · Apr 4, 2025 · Apr 2, 2025 · addiescode-sj · Apr 2, 2025
diff --git a/.DS_Store b/.DS_Store
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>
+    <h1>FAQ PAGE</h1>
+</body>
+</html>
diff --git a/images/Img_home_01.png b/images/Img_home_01.png
diff --git a/images/Img_home_02.png b/images/Img_home_02.png
diff --git a/images/Img_home_03.png b/images/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/images/Img_home_top.png
diff --git a/images/Img_reply_empty.png b/images/Img_reply_empty.png
diff --git a/images/Property 1-1=md.png b/images/Property 1-1=md.png
diff --git a/images/Property 1-1=sm.png b/images/Property 1-1=sm.png
diff --git a/images/Property 1-2=lg.png b/images/Property 1-2=lg.png
diff --git a/images/Property 1-2=md.png b/images/Property 1-2=md.png
diff --git a/images/Property 1-2=sm.png b/images/Property 1-2=sm.png
diff --git a/images/Property 1=Typo.png b/images/Property 1=Typo.png
diff --git a/images/Property 1=md.png b/images/Property 1=md.png
diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png
diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg
diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg
diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg
diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<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/static/pretendard-dynamic-subset.min.css" />
+    <title>판다마켓</title>
+    <link rel="stylesheet" href="styles/reset.css">
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body>
+    <header>
+        <a href="/"><img src="/images/Property 1-2=sm.png" alt="판다마켓 로고"></a>
+        <a href="/login.html"><button class="btn-small-40">로그인</button></a>
+    </header>
+    <section class="hero">
+        <div class="hero-content">
+            <h1 class="hero-title">일상의 모든 물건을<br>거래해 보세요</h1>
+            <a href="items.html"><button class="browse-btn">구경하러 가기</button></a>
+        </div>
+        <div class="hero-image">
+            <img src="images/Img_home_top.png" alt="판다 캐릭터" />
+        </div>
+    </section>
+    <section class="item wrap">
+        <div class="item-container">
+            <div class="item-image">
+                <img src="images/Img_home_01.png" alt="아이템 콘텐츠 이미지">
+            </div>
+            <div class="item-content">
+                <p class="font-blue">Hot item</p>
+                <div class="font-fat">인기 상품을<br>확인해 보세요</div>
+                <div>가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</div>
+            </div>
+        </div>
+    </section>
+    <section class="item wrap">
+        <div class="item-container">
+            <div class="item-content text-right">
+                <p class="font-blue">Search</p>
+                <div class="font-fat">구매를 원하는<br>상품을 검색하세요</div>
+                <div>구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</div>
+            </div>
+            <div class="item-image">
+                <img src="images/Img_home_02.png" alt="아이템 콘텐츠 이미지">
+            </div>
+        </div>
+    </section>
+    <section class="item wrap">
+        <div class="item-container">
+            <div class="item-image">
+                <img src="images/Img_home_03.png" alt="아이템 콘텐츠 이미지">
+            </div>
+            <div class="item-content">
+                <p class="font-blue">Register</p>
+                <div class="font-fat">판매를 원하는<br>상품을 등록하세요</div>
+                <div>어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</div>
+            </div>
+        </div>
+    </section>
+    <section class="hero">
+        <div class="hero-content">
+            <h1 class="hero-title">믿을 수 있는<br>판다마켓 중고 거래</h1>
+        </div>
+        <div class="hero-image">
+            <img src="images/Img_home_bottom.png" alt="판다 캐릭터" />
+        </div>
+    </section>
+    </main>
+    <footer>
+        <div class="footer-credit">© codeit - 2024</div>
+        <div class="footer-policy">
+            <a href="/privacy.html">Privacy Policy</a>
+            <a href="/faq.html">FAQ</a>
+        </div>
+        <div class="footer-sns">
+            <a href="https://www.facebook.com/"><img src="/images/ic_facebook.svg"></a>
+            <a href="https://x.com/?lang=kr"><img src="/images/ic_twitter.svg"></a>
+            <a href="https://www.youtube.com/"><img src="/images/ic_youtube.svg"></a>
+            <a href="https://www.instagram.com/"><img src="/images/ic_instagram.svg"></a>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/items.html b/items.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>
+    <h1>ITEMS PAGE</h1>
+</body>
+</html>
diff --git a/login.html b/login.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>
+    <h1>LOGIN PAGE</h1>
+</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>
+    <h1>PRIVACY PAGE</h1>
+</body>
+</html>
diff --git a/styles/reset.css b/styles/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,156 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Pretendard', sans-serif;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-size: 16px;
+}
+
+.wrap {
+    width: 100%;
+    margin: 0 auto;
+    padding: 32px;
+}
+
+/* 헤더 스타일 */
+header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 16px 32px;
+    background-color: #ffffff;
+}
+
+/* 버튼스타일 */
+.btn-small-40 {
+    padding: 12px 24px;
+    background-color: #3692FF;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.browse-btn {
+    background-color: #3b82f6;
+    color: #F9FAFB;
+    border: none;
+    padding: 16px 124px;
+    border-radius: 40px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 20px;
+    flex-shrink: 0;
+}
+
+/* Hero 섹션 스타일 */
+.hero {
+    width: 100%;
+    background-color: #dbeafe;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 100px 20px 0 20px;
+    margin: 0;
+}
+
+.hero-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #333;
+    line-height: 1.4;
+    margin-bottom: 20px;
+}
+
+.hero-image img {
+    overflow: hidden;
+    width: auto;
+    max-height: 280px;
+    display: block;
+}
+
+/* item section */
+.item {
+    display: flex;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    padding: 60px 20px;
+    margin: 0;
+}
+
+.item img {
+    height: 444px;
+    width: 579px;
+    object-fit: cover;
+}
+
+.item-container {
+    display: flex;
+    background-color: #FCFCFC;
+    position: relative;
+    align-items: center;
+}
+
+.item-content {
+    display: flex;
+    width: 298px;
+    height: 238px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: left;
+    padding-left: 50px;
+}
+
+/* text style */
+.font-blue {
+    color: #3692FF;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.font-normal {
+    color: #374151;
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.font-fat {
+    color: #374151;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 1.4;
+    padding: 15px 0;
+}
+
+/* footer section */
+
+footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #E5E7EB;
+    background-color: #111827;
+    padding: 32px 40px;
+}
+
+.footer-credit {
+    font-weight: 400;
+}
+
+.footer-sns>* {
+    margin: 0 8px;
+}
+
+.footer-policy>* {
+    color: #E5E7EB;
+    margin: 0 10px;
+    text-decoration: none;
+}