finish signup page and optimize classname

codeit-bootcamp-frontend · Feb 28, 2024 · 67773d1 · 67773d1
1 parent 631b4df
commit 67773d1
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -62,7 +62,7 @@ a {
 /* 메인 홈페이지 스타일 */
 /*-----------------------------------------------*/
 
-.login__button {
+.sign__button {
   background: var(--primary-gradient);
   border-radius: 8px;
   display: flex;
@@ -72,7 +72,7 @@ a {
   font-weight: 600;
 }
 
-.login__button,
+.sign__button,
 .home__button :hover {
   cursor: pointer;
 }
@@ -182,10 +182,10 @@ a {
   padding: 10px;
 }
 
-/* 로그인 페이지 스타일 */
+/* 로그인/회원가입 페이지 스타일 */
 /*-----------------------------------------------*/
 
-.signin__container {
+.sign__container {
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -195,15 +195,15 @@ a {
   background-color: var(--gray-lighter);
 }
 
-.signin__container .logo {
+.sign__container .logo {
   width: 220px;
 }
 
-.signin__container--header {
+.sign__container--header {
   margin-bottom: 30px;
 }
 
-.goto__signup {
+.goto__sign {
   margin-left: 30px;
   color: var(--primary);
   padding: 0;
@@ -262,7 +262,8 @@ input {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 10px;
+  margin-right: 5px;
+  box-shadow: 1px 2px 2px var(--gray);
 }
 
 .google {

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
       <a class="home__button" href="./index.html"
         ><img src="./image/logo.svg"
       /></a>
-      <a class="login__button" href="./pages/signin/index.html">로그인</a>
+      <a class="sign__button" href="./pages/signin/index.html">로그인</a>
     </nav>
 
     <header>

diff --git a/pages/signin/index.html b/pages/signin/index.html
@@ -8,14 +8,14 @@
     <title>Sign In</title>
   </head>
   <body>
-    <div class="signin__container">
-      <header class="signin__container--header">
+    <div class="sign__container">
+      <header class="sign__container--header">
         <a href="../../index.html"
           ><img class="logo" src="../../image/logo.svg"
         /></a>
         <div>
           <span>회원이 아니신가요?</span>
-          <a class="goto__signup" href="../signup/index.html">회원 가입하기</a>
+          <a class="goto__sign" href="../signup/index.html">회원 가입하기</a>
         </div>
       </header>
       <main class="form__container">
@@ -40,7 +40,7 @@
             <img class="password_eye" src="../../image/password_eye.svg" />
           </div>
           <input
-            class="login__button"
+            class="sign__button"
             id="submit"
             type="submit"
             value="로그인"

diff --git a/pages/signup/index.html b/pages/signup/index.html
@@ -3,7 +3,77 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../../css/style.css" />
+    <link rel="stylesheet" href="../../css/_variables.css" />
     <title>Sign Up</title>
   </head>
-  <body></body>
+  <body>
+    <div class="sign__container">
+      <header class="sign__container--header">
+        <a href="../../index.html"
+          ><img class="logo" src="../../image/logo.svg"
+        /></a>
+        <div>
+          <span>이미 회원이신가요?</span>
+          <a class="goto__sign" href="../signin/index.html">로그인 하기</a>
+        </div>
+      </header>
+      <main class="form__container">
+        <form>
+          <label for="email">이메일</label>
+          <input
+            id="email"
+            type="email"
+            name="email"
+            placeholder="이메일을 입력해주세요."
+            required
+          />
+          <label for="password">비밀번호</label>
+          <div class="password__box">
+            <input
+              id="password"
+              type="password"
+              name="password"
+              placeholder="비밀번호를 입력해주세요."
+              required
+            />
+            <img class="password_eye" src="../../image/password_eye.svg" />
+          </div>
+          <label for="password-validation">비밀번호 확인</label>
+          <div class="password__box">
+            <input
+              id="password-validation"
+              type="password"
+              name="password-validation"
+              placeholder="비밀번호를 한번 더 입력해주세요."
+              required
+            />
+            <img class="password_eye" src="../../image/password_eye.svg" />
+          </div>
+          <input
+            class="sign__button"
+            id="submit"
+            type="submit"
+            value="회원가입"
+          />
+        </form>
+        <div class="social-login__container">
+          <!--현재는 디자인만 존재 추후에 기능 추가 예정-->
+          <span>다른 방식으로 가입하기</span>
+          <div class="social-login">
+            <a
+              class="social-login__button google"
+              href="https://www.google.com/"
+              ><img src="../../image/google_logo.svg"
+            /></a>
+            <a
+              class="social-login__button kakao"
+              href="https://www.kakaocorp.com/page/"
+              ><img src="../../image/kakao_logo.svg"
+            /></a>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
 </html>