Merge pull request #17 from kim-1997/Basic-김성빈-sprint2

[김성빈] Sprint2
codeit-bootcamp-frontend · Jan 13, 2025 · 25b8220 · 25b8220
2 parents 140f276 + f501d34
commit 25b8220
Show file tree

Hide file tree

Showing 14 changed files with 444 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -3,8 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="src/assets/css/style.css" />
+    <link rel="stylesheet" href="src/assets/css/main.css" />
     <link rel="stylesheet" href="src/assets/css/font.css" />
+    <link rel="stylesheet" href="src/assets/css/variables.css" />
     <title>판다마켓</title>
   </head>
   <body>
@@ -16,32 +17,34 @@ <h1>
               <span class="blind">판다마켓</span>
             </a>
           </h1>
-          <button>
+          <div>
             <a href="/login.html" class="btn btn--login">
               <span>로그인</span>
             </a>
-          </button>
+          </div>
         </div>
       </header>
       <div class="main-kv">
         <div class="main-kv__wrap">
           <div class="main-kv__contents">
-            <h2>
-              일상의 모든 물건을<br class="mov2" />
-              거래해 보세요
-            </h2>
-            <button class="main-kv__button">
-              <a href="/items.html" class="btn btn--kv">
-                <span>구경하러 가기</span>
-              </a>
-            </button>
+            <div class="main-kv__slogan">
+              <h2>
+                일상의 모든 물건을<br class="mov2" />
+                거래해 보세요
+              </h2>
+              <div class="main-kv__button">
+                <a href="/items.html" class="btn btn--kv">
+                  <span>구경하러 가기</span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <div class="container">
         <section class="main-section">
           <div class="main-section__inner">
-            <div class="main-section__left main-section__left--image">
+            <div class="main-section__left main-section__imagewrap">
               <div class="main-section__image">
                 <img
                   src="src/assets/image/market_img01.jpg"
@@ -73,7 +76,7 @@ <h3 class="main-section__title">
                 구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
               </p>
             </div>
-            <div class="main-section__right main-section__right--image">
+            <div class="main-section__right main-section__imagewrap">
               <div class="main-section__image">
                 <img
                   src="src/assets/image/market_img02.jpg"
@@ -85,7 +88,7 @@ <h3 class="main-section__title">
         </section>
         <section class="main-section">
           <div class="main-section__inner">
-            <div class="main-section__left main-section__left--image">
+            <div class="main-section__left main-section__imagewrap">
               <div class="main-section__image">
                 <img
                   src="src/assets/image/market_img03.jpg"

diff --git a/items.html b/items.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/login.html b/login.html
@@ -1,11 +1,77 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>login</title>
+    <title>판다마켓 | 로그인</title>
+    <link rel="stylesheet" href="src/assets/css/main.css" />
+    <link rel="stylesheet" href="src/assets/css/sub.css" />
+    <link rel="stylesheet" href="src/assets/css/font.css" />
+    <link rel="stylesheet" href="src/assets/css/variables.css" />
   </head>
   <body>
-    <div>login</div>
+    <div class="form-box">
+      <div class="form-box__wrap">
+        <h1>
+          <a href="/" class="form-box__logo">
+            <span class="blind">판다마켓</span>
+          </a>
+        </h1>
+        <form class="form">
+          <div class="form__group">
+            <label for="email">이메일</label>
+            <input
+              type="email"
+              id="email"
+              class="form__input"
+              placeholder="이메일을 입력해주세요"
+            />
+          </div>
+          <div class="form__group">
+            <label for="password">비밀번호</label>
+            <div class="form__visible">
+              <input
+                type="password"
+                id="password"
+                class="form__input"
+                placeholder="비밀번호를 입력해주세요"
+              />
+              <div class="visible-icon"></div>
+            </div>
+          </div>
+          <div class="form__group">
+            <button type="submit" class="form__button">
+              <span>로그인</span>
+            </button>
+          </div>
+        </form>
+        <div class="form-box__simplelogin">
+          <span>간편 로그인 하기</span>
+          <ul class="form-box__social">
+            <li>
+              <a
+                href="https://www.google.com/"
+                class="social-icon social-icon--google"
+              >
+                <span class="blind">구글 로그인 하기</span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.kakaocorp.com/page/"
+                class="social-icon social-icon--kakao"
+              >
+                <span class="blind">카카오톡 로그인 하기</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="form-box__signup">
+          판다마켓이 처음이신가요?
+          <a href="/signup.html">회원가입</a>
+        </div>
+      </div>
+    </div>
+    <script src="src/assets/js/sub.js"></script>
   </body>
 </html>
diff --git a/privacy.html b/privacy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/signup.html b/signup.html
@@ -0,0 +1,98 @@
+<!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="src/assets/css/main.css" />
+    <link rel="stylesheet" href="src/assets/css/sub.css" />
+    <link rel="stylesheet" href="src/assets/css/font.css" />
+    <link rel="stylesheet" href="src/assets/css/variables.css" />
+  </head>
+  <body>
+    <div class="form-box">
+      <div class="form-box__wrap">
+        <h1>
+          <a href="/" class="form-box__logo">
+            <span class="blind">판다마켓</span>
+          </a>
+        </h1>
+        <form class="form">
+          <div class="form__group">
+            <label for="email">이메일</label>
+            <input
+              type="email"
+              id="email"
+              class="form__input"
+              placeholder="이메일을 입력해주세요"
+            />
+          </div>
+          <div class="form__group">
+            <label for="text">닉네임</label>
+            <input
+              type="text"
+              id="text"
+              class="form__input"
+              placeholder="닉네임을 입력해주세요"
+            />
+          </div>
+          <div class="form__group">
+            <label for="password">비밀번호</label>
+            <div class="form__visible">
+              <input
+                type="password"
+                id="password"
+                class="form__input"
+                placeholder="비밀번호를 입력해주세요"
+              />
+              <div class="visible-icon visible-icon1"></div>
+            </div>
+          </div>
+          <div class="form__group">
+            <label for="password2">비밀번호 확인</label>
+            <div class="form__visible">
+              <input
+                type="password"
+                id="password2"
+                class="form__input"
+                placeholder="비밀번호를 다시 한 번 입력해주세요"
+              />
+              <div class="visible-icon visible-icon2"></div>
+            </div>
+          </div>
+          <div class="form__group">
+            <button type="submit" class="form__button">
+              <span>회원가입</span>
+            </button>
+          </div>
+        </form>
+        <div class="form-box__simplelogin">
+          <span>간편 로그인 하기</span>
+          <ul class="form-box__social">
+            <li>
+              <a
+                href="https://www.google.com/"
+                class="social-icon social-icon--google"
+              >
+                <span class="blind">구글 로그인 하기</span>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.kakaocorp.com/page/"
+                class="social-icon social-icon--kakao"
+              >
+                <span class="blind">카카오톡 로그인 하기</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="form-box__signup">
+          이미 회원이신가요?
+          <a href="/login.html">로그인</a>
+        </div>
+      </div>
+    </div>
+    <script src="src/assets/js/sub.js"></script>
+  </body>
+</html>