codeit-bootcamp-frontend · Injaeeee · May 23, 2024 · May 23, 2024 · May 24, 2024 · May 29, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/FAQ/index.html b/FAQ/index.html
@@ -0,0 +1,14 @@
+<!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>
+    FAQ
+</body>
+
+</html>
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/Component 2.png b/img/Component 2.png
diff --git a/img/Component 3.png b/img/Component 3.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/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/logo.png b/img/logo.png
diff --git a/img/pandaFace.png b/img/pandaFace.png
diff --git a/img/pandaLogo.png b/img/pandaLogo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,121 @@
+<!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="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <header class="topBar">
+
+        <a href="/" class="logo">
+            <img src="/img/pandaFace.png">
+            <img src="/img/pandaLogo.png">
+        </a>
+        <a class="login" href="login/">로그인</a>
+
+    </header>
+
+    <main>
+        <div class="frame">
+            <div class="content">
+                <div class="frame-text">
+                    일상의 모든 물건을 </br>
+                    거래해보세요
+                </div>
+                <a class="see-more" href="items/">구경하러가기</a>
+            </div>
+            <img class="frame-img" src="/img/Img_home_top.png">
+        </div>
+
+
+        <section class="elements">
+
+            <article class="element">
+
+                <img src="/img/Img_home_01.png">
+                <div class="element-text-left">
+                    <span class="category">Hot item</span>
+                    <p class="element-main-text">인기 상품을 <br />
+                        확인해 보세요 </p>
+                    <p class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
+                        판다 마켓에서 확인해 보세요</p>
+                </div>
+            </article>
+
+            <article class="element">
+
+                <div class="element-text-right">
+                    <span class="category">Search</span>
+                    <p class="element-main-text">구매를 원하는 <br />
+                        상품을 검색하세요</p>
+                    <p class="element-sub-text">
+                        구매하고 싶은 물품은 검색해서 <br />
+                        쉽게 찾아보세요
+                    </p>
+                </div>
+                <img src="img/Img_home_02.png">
+            </article>
+
+            <article class="element">
+                <img src="img/Img_home_03.png">
+                <div class="element-text-left">
+                    <span class="category">Register</span>
+                    <p class="element-main-text">판매를 원하는 <br />
+                        상품을 등록하세요</p>
+                    <p class="element-sub-text">
+                        어떤 물건이든 판매하고 싶은 상품을<br />
+                        쉽게 등록하세요
+                    </p>
+                </div>
+            </article>
+        </section>
+
+        </div>
+
+        <div class="frame">
+            <div class="content">
+                <p class="frame-text">
+                    믿을 수 있는 </br>
+                    판다마켓 중고거래
+            </div>
+            <img class="frame-img2" src="/img/Img_home_bottom.png">
+        </div>
+
+        </div>
+
+        <footer class="bottomBar">
+
+            <span class="footer-text-1"> @codeit - 2024</span>
+            <div class="footer-text-2">
+
+                <a href="privacy_policy/">Privacy Policy</a>
+                <a href="FAQ/">FAQ</a>
+
+            </div>
+            <div class="footer-icon">
+                <a href="https://www.facebook.com/" target="_blank">
+                    <img src="img/ic_facebook.png">
+                </a>
+                <a href="https://x.com/" target="_blank">
+                    <img src="img/ic_twitter.png">
+                </a>
+                <a href="https://www.youtube.com/" target="_blank">
+                    <img src="img/ic_youtube.png">
+                </a>
+                <a href="https://www.instagram.com/" target="_blank">
+                    <img src="img/ic_instagram.png">
+                </a>
+
+
+            </div>
+
+        </footer>
+    </main>
+</body>
+
+</html>
diff --git a/items/index.html b/items/index.html
@@ -0,0 +1,14 @@
+<!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>
+    items
+</body>
+
+</html>
diff --git a/login/index.html b/login/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>login</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body class="loginPage">
+    <a href="./">
+        <div class="logo">
+            <img src="/img/logo.png" />
+        </div>
+    </a>
+
+
+    <main>
+        <form class="login">
+            <div class="login-input">
+                <label for="email">이메일</label>
+                <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요" />
+            </div>
+
+            <div class="login-input">
+                <label for="password">비밀번호</label>
+                <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요" />
+
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-eye-slash" viewBox="0 0 16 16">
+                    <path
+                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z" />
+                    <path
+                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829" />
+                    <path
+                        d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z" />
+                </svg>
+
+            </div>
+
+            <button type="submit" class="login-button">로그인</button>
+
+            <div class="easy-login">
+                <div>간편로그인하기</div>
+                <div class="platform">
+                    <a href="http://www.google.com">
+                        <img src="/img/Component 2.png" alt="구글" />
+                    </a>
+                    <a href="https://www.kakaocorp.com/page/">
+                        <img src="/img/Component 3.png" alt="카카오톡" />
+                    </a>
+                </div>
+            </div>
+
+            <div>
+                판다마켓이 처음이신가요?
+                <a href="/signup/">회원가입</a>
+            </div>
+        </form>
+    </main>
+
+</body>
+
+</html>
diff --git a/login/style.css b/login/style.css
@@ -0,0 +1,111 @@
+* {
+    box-sizing: border-box;
+}
+
+.loginPage {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+
+
+.logo {
+    margin-top: 10px;
+}
+
+.logo img {
+    width: 396px;
+    height: 132px;
+    object-fit: contain;
+}
+
+label {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+input {
+    width: 640px;
+    height: 56px;
+    border-radius: 12px;
+    background-color: #F3F4F6;
+    border: none;
+    color: #9CA3AF;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 15px;
+    outline: none;
+    /* 기본 outline 제거 */
+}
+
+input:focus {
+    border: 2px solid #3692FF;
+
+}
+
+input:focus-out {
+    border: none;
+}
+
+
+.login {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+}
+
+.login-input {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.login-button {
+    width: 640px;
+    height: 56px;
+    border-radius: 40px;
+    background-color: #9CA3AF;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 600;
+    color: #FFFFFF;
+    border: none;
+}
+
+.login-button:hover {
+    background-color: #3692FF;
+}
+
+.easy-login {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 30px;
+    align-items: center;
+    width: 640px;
+    height: 74px;
+    border-radius: 8px;
+    background-color: #E6F2FF;
+}
+
+.platform {
+    display: flex;
+    gap: 20px;
+}
+
+.login-input svg {
+    position: absolute;
+    left: 94%;
+    transform: translateY(350%);
+    pointer-events: none;
+    /* 눈 모양 아이콘 */
+}
diff --git a/privacy_policy/index.html b/privacy_policy/index.html
@@ -0,0 +1,14 @@
+<!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>
+    privacy_policy
+</body>
+
+</html>