Responsive Login & Registration form using HTML, CSS & JavaScript

HTML <!--HTML code --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="wrapper"> <div class="container"> <div class="sign-up-container"> <form> <h1>Create Account</h1> <div class="social-links"> <div> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> </div> <div> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div> <div> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> </div> </div> <span>or use your email for registration</span> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <button class="form_btn">Sign Up</button> </form> </div> <div class="sign-in-container"> <form> <h1>Sign In</h1> <div class="social-links"> <div> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> </div> <div> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div> <div> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> </div> </div> <span>or use your account</span> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <button class="form_btn">Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay-left"> <h1>Welcome Back</h1> <p>To keep connected with us please login with your personal info</p> <button id="signIn" class="overlay_btn">Sign In</button> </div> <div class="overlay-right"> <h1>Hello, Friend</h1> <p>Enter your personal details and start journey with us</p> <button id="signUp" class="overlay_btn">Sign Up</button> </div> </div> </div> </div> CSS /* now add css code*/ *{box-sizing: border-box;} body{ font-family: "montserrat",sans-serif; margin: 0; padding: 0; } .wrapper{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #ebecf0; overflow: hidden; } .container{ border-radius: 10px; box-shadow: -5px -5px 10px #fff, 5px 5px 10px #babebc; position: absolute; width: 768px; min-height: 480px; overflow: hidden; } form{ background: #ebecf0; display: flex; flex-direction: column; padding: 0 50px; height: 100%; justify-content: center; align-items: center; } form input{ background: #eee; padding: 16px; margin: 8px 0; width: 85%; border: 0; outline: none; border-radius: 20px; box-shadow: inset 7px 2px 10px #babebc, inset -5px -5px 12px #fff; } button{ border-radius: 20px; border: none; outline: none; font-size: 12px; font-weight: bold; padding: 15px 45px; margin: 14px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: transform 80ms ease-in; } .form_btn{ box-shadow: -5px -5px 10px #fff, 5px 5px 8px #babebc; } .form_btn:active{ box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff; } .overlay_btn{ background-color: #ff4b2b; color: #fff; box-shadow: -5px -5px 10px #ff6b3f, 5px 5px 8px #bf4b2b; } .sign-in-container{ position: absolute; left: 0; width: 50%; height: 100%; transition: all 0.5s; } .sign-up-container{ position: absolute; left: 0; width: 50%; height: 100%; opacity: 0; transition: all 0.5s; } .overlay-left{ display: flex; flex-direction: column; padding: 0 50px; justify-content: center; align-items: center; position: absolute; right: 0; width: 50%; height: 100%; opacity: 0; background-color: #ff4b2b; color: #fff; transition: all 0.5s; } .overlay-right{ display: flex; flex-direction: column; padding: 0 50px; justify-content: center; align-items: center; position: absolute; right: 0; width: 50%; height: 100%; background-color: #ff4b2b; color: #fff; transition: all 0.5s; } .social-links{ margin: 20px 0; } form h1{ font-weight: bold; margin: 0; color: #000; } p{ font-size: 16px; font-weight: bold; letter-spacing: 0.5px; margin: 20px 0 30px; } span{ font-size: 12px; color: #000; letter-spacing: 0.5px; margin-bottom: 10px; } .social-links div{ width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; margin: 0 5px; border-radius: 50%; box-shadow: -5px -5px 10px #fff, 5px 5px 8px #babebc; cursor: pointer; } .social-links a{ color: #000; } .social-links div:active{ box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff; } .social-links a:hover{ color: rgb(75, 248, 84); } .container.right-panel-active .sign-in-container{ transform: translateX(100%); opacity: 0; } .container.right-panel-active .sign-up-container{ transform: translateX(100%); opacity: 1; z-index: 2; } .container.right-panel-active .overlay-left{ transform: translateX(-100%); opacity: 1; z-index: 2; } .container.right-panel-active .overlay-right{ transform: translateX(-100%); opacity: 0; } JavaScript const signUpBtn = document.getElementById("signUp"); const signInBtn = document.getElementById("signIn"); const container = document.querySelector(".container"); signUpBtn.addEventListener("click",() =>{ container.classList.add("right-panel-active"); }) signInBtn.addEventListener("click",() =>{ container.classList.remove("right-panel-active") })