Slide Sign In/Sign Up form | sign in login form - codewihrandom

Slide Sign In/Sign Up form | sign in login form - codewihrandom

Slide Sign In/Sign Up form | sign in login form - codewihrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Slide Sign In/Sign Up form. We use HTML, and javascript for this Slide Sign In/Sign Up form. Hope you enjoy our blog so let's start with a basic HTML structure for a Slide Sign In/Sign Up form. 

HTML code for sign in login form

 <div class="container right-panel-active">  
      <!-- Sign Up -->  
      <div class="container__form container--signup">  
           <form action="#" class="form" id="form1">  
                <h2 class="form__title">Sign Up</h2>  
                <input type="text" placeholder="User" class="input" />  
                <input type="email" placeholder="Email" class="input" />  
                <input type="password" placeholder="Password" class="input" />  
                <button class="btn">Sign Up</button>  
           </form>  
      </div>  
      <!-- Sign In -->  
      <div class="container__form container--signin">  
           <form action="#" class="form" id="form2">  
                <h2 class="form__title">Sign In</h2>  
                <input type="email" placeholder="Email" class="input" />  
                <input type="password" placeholder="Password" class="input" />  
                <a href="#" class="link">Forgot your password?</a>  
                <button class="btn">Sign In</button>  
           </form>  
      </div>  
      <!-- Overlay -->  
      <div class="container__overlay">  
           <div class="overlay">  
                <div class="overlay__panel overlay--left">  
                     <button class="btn" id="signIn">Sign In</button>  
                </div>  
                <div class="overlay__panel overlay--right">  
                     <button class="btn" id="signUp">Sign Up</button>  
                </div>  
           </div>  
      </div>  
 </div>  
There is all HTML code for the Slide Sign In/Sign Up form. Now, you can see output without CSS, then we write css & javascript for the Slide Sign In/Sign Up form.
output

CSS Code for sign in login form

 :root {  
      /* COLORS */  
      --white: #e9e9e9;  
      --gray: #333;  
      --blue: #0367a6;  
      --lightblue: #008997;  
      /* RADII */  
      --button-radius: 0.7rem;  
      /* SIZES */  
      --max-width: 758px;  
      --max-height: 420px;  
      font-size: 16px;  
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,  
           Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;  
 }  
 body {  
      align-items: center;  
      background-color: var(--white);  
      background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");  
      background-attachment: fixed;  
      background-position: center;  
      background-repeat: no-repeat;  
      background-size: cover;  
      display: grid;  
      height: 100vh;  
      place-items: center;  
 }  
 .form__title {  
      font-weight: 300;  
      margin: 0;  
      margin-bottom: 1.25rem;  
 }  
 .link {  
      color: var(--gray);  
      font-size: 0.9rem;  
      margin: 1.5rem 0;  
      text-decoration: none;  
 }  
 .container {  
      background-color: var(--white);  
      border-radius: var(--button-radius);  
      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),  
           0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);  
      height: var(--max-height);  
      max-width: var(--max-width);  
      overflow: hidden;  
      position: relative;  
      width: 100%;  
 }  
 .container__form {  
      height: 100%;  
      position: absolute;  
      top: 0;  
      transition: all 0.6s ease-in-out;  
 }  
 .container--signin {  
      left: 0;  
      width: 50%;  
      z-index: 2;  
 }  
 .container.right-panel-active .container--signin {  
      transform: translateX(100%);  
 }  
 .container--signup {  
      left: 0;  
      opacity: 0;  
      width: 50%;  
      z-index: 1;  
 }  
 .container.right-panel-active .container--signup {  
      animation: show 0.6s;  
      opacity: 1;  
      transform: translateX(100%);  
      z-index: 5;  
 }  
 .container__overlay {  
      height: 100%;  
      left: 50%;  
      overflow: hidden;  
      position: absolute;  
      top: 0;  
      transition: transform 0.6s ease-in-out;  
      width: 50%;  
      z-index: 100;  
 }  
 .container.right-panel-active .container__overlay {  
      transform: translateX(-100%);  
 }  
 .overlay {  
      background-color: var(--lightblue);  
      background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");  
      background-attachment: fixed;  
      background-position: center;  
      background-repeat: no-repeat;  
      background-size: cover;  
      height: 100%;  
      left: -100%;  
      position: relative;  
      transform: translateX(0);  
      transition: transform 0.6s ease-in-out;  
      width: 200%;  
 }  
 .container.right-panel-active .overlay {  
      transform: translateX(50%);  
 }  
 .overlay__panel {  
      align-items: center;  
      display: flex;  
      flex-direction: column;  
      height: 100%;  
      justify-content: center;  
      position: absolute;  
      text-align: center;  
      top: 0;  
      transform: translateX(0);  
      transition: transform 0.6s ease-in-out;  
      width: 50%;  
 }  
 .overlay--left {  
      transform: translateX(-20%);  
 }  
 .container.right-panel-active .overlay--left {  
      transform: translateX(0);  
 }  
 .overlay--right {  
      right: 0;  
      transform: translateX(0);  
 }  
 .container.right-panel-active .overlay--right {  
      transform: translateX(20%);  
 }  
 .btn {  
      background-color: var(--blue);  
      background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);  
      border-radius: 20px;  
      border: 1px solid var(--blue);  
      color: var(--white);  
      cursor: pointer;  
      font-size: 0.8rem;  
      font-weight: bold;  
      letter-spacing: 0.1rem;  
      padding: 0.9rem 4rem;  
      text-transform: uppercase;  
      transition: transform 80ms ease-in;  
 }  
 .form > .btn {  
      margin-top: 1.5rem;  
 }  
 .btn:active {  
      transform: scale(0.95);  
 }  
 .btn:focus {  
      outline: none;  
 }  
 .form {  
      background-color: var(--white);  
      display: flex;  
      align-items: center;  
      justify-content: center;  
      flex-direction: column;  
      padding: 0 3rem;  
      height: 100%;  
      text-align: center;  
 }  
 .input {  
      background-color: #fff;  
      border: none;  
      padding: 0.9rem 0.9rem;  
      margin: 0.5rem 0;  
      width: 100%;  
 }  
 @keyframes show {  
      0%,  
      49.99% {  
           opacity: 0;  
           z-index: 1;  
      }  
      50%,  
      100% {  
           opacity: 1;  
           z-index: 5;  
      }  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output 
Slide Sign In/Sign Up form | sign in login form - codewihrandom

Now add javascript for click button & functionality for slide in.

Javascript code for Slide Sign In/Sign Up form 

 const signInBtn = document.getElementById("signIn");  
 const signUpBtn = document.getElementById("signUp");  
 const fistForm = document.getElementById("form1");  
 const secondForm = document.getElementById("form2");  
 const container = document.querySelector(".container");  
 signInBtn.addEventListener("click", () => {  
      container.classList.remove("right-panel-active");  
 });  
 signUpBtn.addEventListener("click", () => {  
      container.classList.add("right-panel-active");  
 });  
 fistForm.addEventListener("submit", (e) => e.preventDefault());  
 secondForm.addEventListener("submit", (e) => e.preventDefault());  
Final output
Slide Sign In/Sign Up form | sign in login form - codewihrandom


Slide Sign In/Sign Up form | sign in login form - codewihrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Slide Sign In/Sign Up form. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Slide Sign In/Sign Up form using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

2 Comments

  1. hi can I ask you a question. I try to copy and paste but the output is difference from your output.

    ReplyDelete
    Replies
    1. Can you explain a bit more about the difference

      Delete

Post a Comment

Previous Post Next Post