How to create Responsive Login and Registration form with folding effect using HTML & CSS

The Login Form refers to the page or area where users must input their login credentials such as email, phone number, and password. The Registration Form involves collecting user information to create login credentials for access to a specific page or website.

In the login form area, we can create two input fields: one for the user’s email address or phone number, and another for the password, which is required. In the registration form, we need to include additional input fields such as name, phone number, password, and others.

Let’s take a look at the image of the Login and Registration Form template. You will see only the Login Form initially, but when you click on the signup button, the image on the right side smoothly transitions to reveal the Signup form while the Login Form disappears.

I have developed this Responsive Login and Registration Form using only HTML and CSS, without any JavaScript code involved in its creation. I assure you that all the HTML and CSS code I utilize to build this Form is easy to comprehend.

In the above image, we could only observe that the Login Form whereas Registration Form were concealed behind the image. When I click on the Register now link, that the image elegantly rotates to the left, revealing the Registration Form while the Login Form fades away.

Establish a new folder. You have the freedom to name this folder as you wish, and within this folder, create the specific files.

Generate an index.html file. The file should be named index and have the .html extension.
Create a style.css file. This file must be named style and bear the .css extension.
Then lastly, create images folder, which contains two images for your forms.

To begin, insert the following HTML code into your index.html file. This code encompasses fundamental HTML components such as forms, links, inputs, buttons, and more.

Copy Text

<!DOCTYPE html>
<!-- Created by Coding Jasim |www.codingjasimweb.com-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Login and Registration Form with Fold effect in HTML & CSS | Coding Jasim </title>
    <link rel="stylesheet" href="style.css">
    <!-- CDN Link for Fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="section">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <img src="images/image1.jpg" alt="">
        <div class="text">
          <span class="text-1">Each new friend brings a <br> fresh adventure</span>
          <span class="text-2">Let's connect!</span>
        </div>
      </div>
      <div class="back">
        <img class="backImg" src="images/image2.jpg" alt="">
        <div class="text">
          <span class="text-1">Cover miles of your journey <br> with just a single step</span>
          <span class="text-2">Let's begin!</span>
        </div>
      </div>
    </div>
    <div class="forms">
        <div class="form-content">
          <div class="login-form">
            <div class="title">Login</div>
          <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Type in your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Type in your password" required>
              </div>
              <div class="text"><a href="#">Forgot password?</a></div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Don't have an account? <label for="flip">Register now</label></div>
            </div>
        </form>
      </div>
        <div class="signup-form">
          <div class="title">Signup</div>
        <form action="#">
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                <input type="text" placeholder="Type in your name" required>
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                <input type="text" placeholder="Type in your email" required>
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Type in your password" required>
              </div>
              <div class="button input-box">
                <input type="submit" value="Sumbit">
              </div>
              <div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
            </div>
      </form>
    </div>
    </div>
    </div>
  </div>
</body>
</html>

Copy Text

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(38, 60, 88);
  padding: 30px;
}

.section {
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  perspective: 2700px;
}

.section .cover {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.section #flip:checked ~ .cover {
  transform: rotateY(-180deg);
}

.section #flip:checked ~ .forms .login-form {
  pointer-events: none;
}

.section .cover .front,
.section .cover .back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cover .back {
  transform: rotateY(180deg);
}

.section .cover img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}

.section .cover .text {
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section .cover .text::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  background: #9f1616;
}

.cover .text .text-1,
.cover .text .text-2 {
  z-index: 20;
  font-size: 26px;
  font-weight: 600;
  color: #8df929;
  text-align: center;
}

.cover .text .text-2 {
  font-size: 15px;
  font-weight: 500;
}

.section .forms {
  height: 100%;
  width: 100%;
  background: #fff;
}

.section .form-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-content .login-form,
.form-content .signup-form {
  width: calc(100% / 2 - 25px);
}

.forms .form-content .title {
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.forms .form-content .title:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #7d2ae8;
}

.forms .signup-form .title:before {
  width: 20px;
}

.forms .form-content .input-boxes {
  margin-top: 30px;
}

.forms .form-content .input-box {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}

.form-content .input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.form-content .input-box input:focus,
.form-content .input-box input:valid {
  border-color: #7d2ae8;
}

.form-content .input-box i {
  position: absolute;
  color: #2e6c70;
  font-size: 17px;
}

.forms .form-content .text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.forms .form-content .text a {
  text-decoration: none;
}

.forms .form-content .text a:hover {
  text-decoration: underline;
}

.forms .form-content .button {
  color: #fff;
  margin-top: 40px;
}

.forms .form-content .button input {
  color: #fff;
  background: #2e6c70;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}

.forms .form-content .button input:hover {
  background: #5b13b9;
}

.forms .form-content label {
  color: #5b13b9;
  cursor: pointer;
}

.forms .form-content label:hover {
  text-decoration: underline;
}

.forms .form-content .login-text,
.forms .form-content .sign-up-text {
  text-align: center;
  margin-top: 25px;
}

.section #flip {
  display: none;
}

@media (max-width: 730px) {
  .section .cover {
    display: none;
  }

  .form-content .login-form,
  .form-content .signup-form {
    width: 100%;
  }

  .form-content .signup-form {
    display: none;
  }

  .section #flip:checked ~ .forms .signup-form {
    display: block;
  }

  .section #flip:checked ~ .forms .login-form {
    display: none;
  }
}

If you encounter any issues while crafting your Responsive Login and Registration Form or if your code doesn’t function as intended, you can obtain the source code files for this project at no cost by clicking the download button.