login html,css completed

Rajput-xv · Sep 11, 2023 · 0d7a35d · 0d7a35d
1 parent a25f9aa
commit 0d7a35d
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 26 deletions.
diff --git a/login.css b/login.css
@@ -22,12 +22,32 @@ body{
     color: #fff;
     border-radius: 10px;
     padding: 30px 40px;
+    overflow: hidden;
 }
-.wrapper h1{
+.wrapper .login-box {
+    transform: translateX(0);
+}
+.wrapper.active .login-box{
+    transition: none;
+    transform: translateX(-400px);
+}
+
+.wrapper .register-box {
+    position: absolute;
+    transition: none;
+    transform: translate(400px,-400px);
+}
+
+.wrapper.active .register-box{
+    transform: translate(50px,-350px);
+} 
+
+.h1{
     font-size: 36px;
     text-align: center;
 }
-.wrapper .input-box{
+
+.input-box{
     width: 100%;
     height: 60px;
     position: relative;
@@ -49,7 +69,7 @@ body{
     color: #fff;
 
 }
-.wrapper .remember-forgot{
+.remember-forgot{
     display: flex;
     justify-content: space-between;
     font-size: 14.5px;
@@ -67,7 +87,7 @@ margin-right: 3px;
     text-decoration: underline;
     color: red;
 }
-.wrapper .btn{
+.btn{
     width: 100%;
     height: 45px;
     background: #fff;
@@ -79,7 +99,7 @@ margin-right: 3px;
     color: #333;
     font-weight: 700;
 }
-.wrapper .register-link{
+.register-link{
     font-size: 14.5px;
     text-align: center;
     margin: 20px 0 15px;
@@ -93,4 +113,21 @@ margin-right: 3px;
 .register-link p a:hover{
     text-decoration: underline;
     color: blue;
-}
+}
+
+.login-link{
+    font-size: 14.5px;
+    text-align: center;
+    margin: 20px 0 15px;
+
+}
+.login-link p a{
+    color: #fff;
+    text-decoration: none;
+    font-weight: 600;
+}
+.login-link p a:hover{
+    text-decoration: underline;
+    color: blue;
+}
+
diff --git a/login.html b/login.html
@@ -3,31 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>login form</title>
+    <title>Login </title>
     <link rel="stylesheet" href="./login.css">
 </head>
 <body>
     <div class="wrapper">
-        <form action="">
-            <h1>Login </h1>
-            <div class="input-box">
-                <input type="text" placeholder="Username" required>
-            </div>
-            <div class="input-box">
-                <input type="password" placeholder="Password" required>
-            </div>
-            <div class="remember-forgot">
-                <label>
-                    <input type="checkbox">Remember me
-                </label>
-                <a href="#">Forgot password ?</a>
-            </div>
-            <button type="submit" class="btn">Login</button>
+        <div class="login-box">
+            <form action="">
+                <h1>Login </h1>
+                <div class="input-box">
+                    <input type="text" placeholder="Username" required>
+                </div>
+                <div class="input-box">
+                    <input type="password" placeholder="Password" required>
+                </div>
+                <div class="remember-forgot">
+                    <label>
+                        <input type="checkbox">Remember me
+                    </label>
+                    <a href="#">Forgot password ?</a>
+                </div>
+                <button type="submit" class="btn">Login</button>
 
-            <div class="register-link">
-                <p>Don't have an account?<a href="#">Register</a></p>
-            </div>
-        </form>
+                <div class="register-link">
+                    <p>Don't have an account? <a href="#">Register</a></p>
+                </div>
+            </form>
+        </div>
+
+        <div class="register-box" >
+            <form action="">
+                <h1>Registration </h1>
+                <div class="input-box">
+                    <input type="text" placeholder="Username" required>
+                </div>
+                <div class="input-box">
+                    <input type="password" placeholder="Password" required>
+                </div>
+                <div class="remember-forgot">
+                    <label>
+                        <input type="checkbox">I agree to terms & condition
+                    </label>
+                    <!-- <a href="#">Forgot password ?</a> -->
+                </div>
+                <button type="submit" class="btn">Register</button>
+
+                <div class="login-link">
+                    <p>Already have an account? <a href="#">Login</a></p>
+                </div>
+            </form>
+        </div>
+
     </div>
 
 

diff --git a/login.js b/login.js
@@ -0,0 +1,13 @@
+const wrapper = document.querySelector('.wrapper');
+const loginLink = document.querySelector('.login-link');
+const registerLink = document.querySelector('.register-link');
+
+
+registerLink.addEventListener('click', function(){
+    wrapper.classList.add('active');
+})
+
+
+loginLink.addEventListener('click', function(){
+    wrapper.classList.remove('active');
+})