finish signin page

codeit-bootcamp-frontend · Feb 24, 2024 · 35de417 · 35de417
1 parent f61b524
commit 35de417
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -9,6 +9,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  color: var(--black);
 }
 
 header {
@@ -17,7 +18,6 @@ header {
   display: flex;
   flex-direction: column;
   align-items: center;
-  box-shadow: 0px 1px rgba(1, 1, 1, 0.1);
 }
 
 footer {
@@ -59,6 +59,9 @@ a {
   padding: 10px 30px;
 }
 
+/* 메인 홈페이지 스타일 */
+/*-----------------------------------------------*/
+
 .login__button {
   background: var(--primary-gradient);
   border-radius: 8px;
@@ -67,7 +70,6 @@ a {
   align-items: center;
   font-size: 22px;
   font-weight: 600;
-  margin-right: 30px;
 }
 
 .login__button,
@@ -87,7 +89,6 @@ a {
 .header__content h1 {
   font-size: 65px;
   text-align: center;
-  color: var(--black);
 }
 
 .header__content span {
@@ -130,7 +131,6 @@ a {
 
 .main__card--text h2 {
   font-size: 50px;
-  color: var(--black);
 }
 
 .main__card--text p {
@@ -181,3 +181,104 @@ a {
 .social-media a {
   padding: 10px;
 }
+
+/* 로그인 페이지 스타일 */
+/*-----------------------------------------------*/
+
+.signin__container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray-lighter);
+}
+
+.signin__container .logo {
+  width: 220px;
+}
+
+.signin__container--header {
+  margin-bottom: 30px;
+}
+
+.goto__signup {
+  margin-left: 30px;
+  color: var(--primary);
+  padding: 0;
+  font-weight: 600;
+}
+
+.form__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+input {
+  width: 400px;
+  height: 60px;
+  border-radius: 8px;
+  border: 1px solid var(--gray);
+  padding-left: 10px;
+}
+
+#email :focus,
+#password :focus {
+  border-color: var(--primary);
+}
+
+#submit {
+  color: var(--white);
+}
+
+.social-login__container {
+  width: 400px;
+  height: 60px;
+  background-color: var(--gray-light);
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.social-login {
+  display: flex;
+}
+
+.social-login__button {
+  padding: 5px;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.google {
+  background-color: var(--white);
+}
+
+.kakao {
+  background-color: #f5e14b;
+}
+
+.password__box {
+  position: relative;
+}
+
+.password_eye {
+  position: absolute;
+  right: 20px;
+  top: 23px;
+}
diff --git a/image/google_logo.svg b/image/google_logo.svg
diff --git a/image/kakao_logo.svg b/image/kakao_logo.svg
diff --git a/image/password_eye.svg b/image/password_eye.svg
diff --git a/pages/signin/index.html b/pages/signin/index.html
@@ -3,7 +3,66 @@
   <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 In</title>
   </head>
-  <body></body>
+  <body>
+    <div class="signin__container">
+      <header class="signin__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>
+        </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>
+          <input
+            class="login__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>