feat: add singup.html and css

회원가입 페이지 추가, 비밀번호 숨기기 버튼 추가
codeit-bootcamp-frontend · May 9, 2024 · 96715c5 · 96715c5
1 parent 6d1e1dd
commit 96715c5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 10 deletions.
diff --git a/login.html b/login.html
@@ -7,7 +7,7 @@
     <title>판다마켓</title>
     <link rel="stylesheet" href="../styles/reset.css">
     <link rel="stylesheet" href="../styles/fonts.css">
-    <link rel="stylesheet" href="../styles/login.css">
+    <link rel="stylesheet" href="../styles/login-signup.css">
     <link rel="icon" href="../img/logo/favicon.ico" type="image/x-icon">
 </head>
 
@@ -24,14 +24,14 @@ <h1>
             <div class="form__wrapper">
                 <label class="form__label">
                     <p class="label__name">이메일</p>
-                    <input class="label__input" type="email" placeholder="이메일을 입력해주세요" autocomplete="email" required>
+                    <input class="label__input" type="email" name="email" placeholder="이메일을 입력해주세요" autocomplete="email" required>
                 </label>
             </div>
             <div class="form__wrapper">
                 <label class="form__label">
                     <p class="label__name">비밀번호</p>
-                    <input class="label__input" type="password" placeholder="비밀번호를 입력해주세요" required>
-                    <img class="hide-btn" src="../img/icon/btn__visibility-off.svg" alt="비밀번호숨기거나보이기" width="24"
+                    <input class="label__input" type="password" name= "password" placeholder="비밀번호를 입력해주세요" required>
+                    <img class="password__blind-logo" src="../img/icon/btn__visibility-off.svg" alt="비밀번호숨기거나보이기" width="24"
                         height="24" />
                 </label>
             </div>
@@ -47,8 +47,8 @@ <h1>
                     </a>
                 </div>
             </div>
-            <p class="signup">판다마켓이 처음이신가요?
-                <a class="signup__link" href="/signup.html">회원가입</a>
+            <p class="member__check">판다마켓이 처음이신가요?
+                <a class="check__link" href="/signup.html">회원가입</a>
             </p>
         </form>
     </main>

diff --git a/signup.html b/signup.html
@@ -7,11 +7,64 @@
     <title>판다마켓</title>
     <link rel="stylesheet" href="../styles/reset.css">
     <link rel="stylesheet" href="../styles/fonts.css">
-    <link rel="stylesheet" href="../styles/style.css">
+    <link rel="stylesheet" href="../styles/login-signup.css">
     <link rel="icon" href="../img/logo/favicon.ico" type="image/x-icon">
 </head>
 
 <body>
+    <header class="header">
+        <h1>
+            <a href="/">
+                <img src="../img/logo/panda-market-logo.png" class="header__logo" alt="판다마켓" width="396" height="132">
+            </a>
+        </h1>
+    </header>
+    <main class="login__container">
+        <form class="login__form">
+            <div class="form__wrapper">
+                <label class="form__label">
+                    <p class="label__name">이메일</p>
+                    <input class="label__input" type="email" name="email" placeholder="이메일을 입력해주세요" autocomplete="email" required>
+                </label>
+            </div>
+            <div class="form__wrapper">
+                <label class="form__label">
+                    <p class="label__name">닉네임</p>
+                    <input class="label__input" type="text" name="nickname" placeholder="닉네임을 입력해주세요" autocomplete="email" required>
+                </label>
+            </div>
+            <div class="form__wrapper">
+                <label class="form__label">
+                    <p class="label__name">비밀번호</p>
+                    <input class="label__input" type="password" name="password" placeholder="비밀번호를 입력해주세요" required>
+                    <img class="password__blind-logo" src="../img/icon/btn__visibility-off.svg" alt="비밀번호숨기거나보이기" width="24"
+                        height="24" />
+                </label>
+            </div>
+            <div class="form__wrapper">
+                <label class="form__label">
+                    <p class="label__name">비밀번호 확인</p>
+                    <input class="label__input" type="password" name="password-check" placeholder="비밀번호를 다시 한 번 입력해주세요" required>
+                    <img class="password__blind-logo" src="../img/icon/btn__visibility-off.svg" alt="비밀번호숨기거나보이기" width="24" height="24" />
+                </label>
+            </div>
+            <button class="submit-btn" type="submit">회원가입</button>
+            <div class="social__wrapper">
+                <p>간편 로그인하기</p>
+                <div class="social__login">
+                    <a href="https://www.google.com">
+                        <img src="../img/icon/google.svg" class="social__logo" alt="구글로그인" width="42" height="42">
+                    </a>
+                    <a href="https://www.kakaocorp.com/page">
+                        <img src="../img/icon/kakao.svg" class="social__logo" alt="카카오톡로그인" width="42" height="42">
+                    </a>
+                </div>
+            </div>
+            <p class="member__check">이미 회원이신가요?
+                <a class="check__link" href="/login.html">로그인</a>
+            </p>
+        </form>
+    </main>
 </body>
 
 </html>
diff --git a/styles/login.css → styles/login-signup.css b/styles/login.css → styles/login-signup.css
@@ -58,10 +58,11 @@
     outline: 3px solid #3692ff;
 }
 
-.hide-btn {
+.password__blind-logo {
     position: absolute;
     right:24px;
     bottom: 16px;
+    cursor: pointer;
 }
 
 .submit-btn {
@@ -73,6 +74,7 @@
     border-radius: 40px;
     border: none;
     background-color: var(--gray400);
+    cursor: pointer;
 }
 
 .social__wrapper {
@@ -81,6 +83,7 @@
     align-items: center;
     padding: 16px 24px;
     background-color: #e6f2ff;
+    border-radius: 8px;
 }
 
 .social__login {
@@ -92,11 +95,11 @@
     display: block;
 }
 
-.signup {
+.member__check {
     text-align: center;
 }
 
-.signup__link {
+.check__link {
     text-decoration: underline;
 }