codeit-bootcamp-frontend · GANGYIKIM · Mar 3, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/Img_home_01.png b/Img_home_01.png
diff --git a/Img_home_02.png b/Img_home_02.png
diff --git a/Img_home_03.png b/Img_home_03.png
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/faq.html b/faq.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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/home.html b/home.html
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/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/google.png b/img/google.png
diff --git a/img/ic_facebook.png b/img/ic_facebook.png
diff --git a/img/ic_instagram.png b/img/ic_instagram.png
diff --git a/img/ic_twitter.png b/img/ic_twitter.png
diff --git a/img/ic_youtube.png b/img/ic_youtube.png
diff --git a/img/kakaotalk.png b/img/kakaotalk.png
diff --git a/img/logo_big.png b/img/logo_big.png
diff --git a/img/logo_small.png b/img/logo_small.png
diff --git a/img/panda_favicon.png b/img/panda_favicon.png
diff --git a/img/visibility_off.png b/img/visibility_off.png
diff --git a/img/visibility_on.png b/img/visibility_on.png
diff --git a/index.html b/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓</title>
+    <link rel="icon" href="img/panda_favicon.png">
+    <link rel="stylesheet" href="/style/home.css">
+    <link rel="stylesheet" href="/style/reset.css">
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"/>
+</head>
+<body>
+    <header>
+        <nav>
+            <a class="main-page" href="/"><img class="logo" src="img/logo_small.png" alt="판다마켓 로고"></a>
+            <a class="login-button" href="/login.html">로그인</a>
+        </nav>
+    </header>
+
+    <section class="top">
+        <div class="container">
+            <div class="content">
+                    <h2 class="content-title">
+                        일상의 모든 물건을<br>
+                        거래해 보세요
+                    </h2>
+                    <a class="shopping-button" href="/items.html">구경하러 가기</a>
+            </div>
+            <div>
+                <img class="top-img" src="img/Img_home_top.png">
+            </div>
+        </div>
+    </section>
+
+    <main>
+        <section>
+            <div class="container">
+                <img src="img/Img_home_01.png">
+                <div class="content">
+                    <p class="badge">Hot item</p>
+                    <h2 class="content-title">인기 상품을<br>확인해보세요</h2>
+                    <p class="description">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="container">
+                <div class="content right">
+                    <p class="badge">Search</p>
+                    <h2 class="content-title">구매를 원하는<br>상품을 검색하세요</h2>
+                    <p class="description">구매하고 싶은 물품을 검색해서<br>쉽게 찾아보세요</p>
+                </div>
+                <img src="img/Img_home_02.png">
+            </div>
+        </section>
+        <section>
+            <div class="container">
+                <img src="img/Img_home_03.png">
+                <div class="content">
+                    <p class="badge">Register</p>
+                    <h2 class="content-title">판매를 원하는<br>상품을 등록하세요</h2>
+                    <p class="description">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <section class="bottom">
+        <div class="container">
+            <div class="content">
+                <h2 class="content-title">
+                    믿을 수 있는<br>
+                    판다마켓 중고 거래
+                </h2>
+            </div>
+            <div>
+                <img class="bottom-img" src="img/Img_home_bottom.png">
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div class="footer-wrap container">
+            <span class="codeit">@codeit - 2024</span>
+            <div class="link">
+                <a href="/privacy.html">Privacy Policy</a>
+                <a href="/faq.html">FAQ</a>
+            </div>
+            <ul class="sns">
+                <li>
+                    <a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="img/ic_facebook.png" alt="facebook"></a>
+                </li>
+                <li>
+                    <a href="https://x.com/?lang=ko" target="_blank"><img src="img/ic_twitter.png" alt="twitter"></a>
+                </li>
+                <li>
+                    <a href="https://www.youtube.com/" target="_blank"><img src="img/ic_youtube.png" alt="youtube"></a>
+                </li>
+                <li>
+                    <a href="https://www.instagram.com/" target="_blank"><img src="img/ic_instagram.png" alt="instagram"></a>
+                </li>
+            </ul>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/items.html b/items.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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/login.html b/login.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓 - 로그인</title>
+    <link rel="icon" href="img/panda_favicon.png">
+    <link rel="stylesheet" href="/style/login.css">
+    <link rel="stylesheet" href="/style/reset.css">
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"/>
+</head>
+<body>
+    <form>
+        <header>
+            <a href="/"><img class="logo" src="/img/logo_big.png" alt="판다마켓 로고"></a>
+        </header>
+
+        <div>
+            <label for="email">이메일</label>
+            <input id="email" type="email" name="email">
+        </div>
+        <div class="password">
+            <label for="password">비밀번호</label>
+            <input id="password" type="password" name="password">
+            <img class="show-password" src="/img/visibility_off.png">
+        </div>
+        <button class="login-button">로그인</button>
+
+        <div class="quick-login">
+            <span>간편 로그인하기</span>
+            <ul class="sns">
+                <li>
+                    <a href="https://www.google.com"><img src="/img/google.png" alt="Google"></a>
+                </li>
+                <li>
+                    <a href="https://www.kakaocorp.com/page"><img src="/img/kakaotalk.png" alt="Kakao"></a>
+                </li>
+            </ul>
+        </div>
+        <div class="new-member">
+            <span>판다마켓이 처음이신가요?</span>
+            <a class="sign-up" href="/sign-up.html">회원가입</a>
+        </div>
+    </form>
+</body>
+</html>
diff --git a/logo.png b/logo.png
diff --git a/privacy.html b/privacy.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<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/sign-up.html b/sign-up.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓 - 회원가입</title>
+    <link rel="icon" href="img/panda_favicon.png">
+    <link rel="stylesheet" href="/style/sign-up.css">
+    <link rel="stylesheet" href="/style/reset.css">
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"/>
+</head>
+<body>
+    <form>
+        <header>
+            <a href="/"><img class="logo" src="/img/logo_big.png" alt="판다마켓 로고"></a>
+        </header>
+
+        <div>
+            <label for="email">이메일</label>
+            <input id="email" type="email" name="email">
+        </div>
+        <div>
+            <label for="nickname">닉네임</label>
+            <input id="nickname" type="text" name="nickname">
+        </div>
+        <div class="password">
+            <label for="password">비밀번호</label>
+            <input id="password" type="password" name="password">
+            <img class="show-password" src="/img/visibility_off.png">
+        </div>
+        <div class="check-password">
+            <label for="check-password">비밀번호 확인</label>
+            <input id="check-password" type="password" name="check-password">
+            <img class="show-password" src="/img/visibility_off.png">
+        </div>
+        <button class="sign-up-button">회원가입</button>
+
+        <div class="quick-login">
+            <span>간편 로그인하기</span>
+            <ul class="sns">
+                <li>
+                    <a href="https://www.google.com"><img src="/img/google.png" alt="Google"></a>
+                </li>
+                <li>
+                    <a href="https://www.kakaocorp.com/page"><img src="/img/kakaotalk.png" alt="Kakao"></a>
+                </li>
+            </ul>
+        </div>
+        <div class="already-member">
+            <span>이미 회원이신가요?</span>
+            <a class="login" href="/login.html">로그인</a>
+        </div>
+    </form>
+</body>
+</html>
diff --git a/style/global.css b/style/global.css
@@ -0,0 +1,17 @@
+:root {
+	--gray900: #111827;
+ 	--gray800: #1F2937;
+    --gray700: #374151;
+    --gray600: #4B5563;
+    --gray500: #6B7280;
+    --gray400: #9CA3AF;
+    --gray200: #E5E7EB;
+    --gray100: #F3F4F6;
+    --gray50: #F9FAFB;
+
+    --blue: #3692FF;
+    --bluehover:#1967D6;
+    --blueactive: #1251AA;
+
+    --red: #F74747;
+}