Building a Dynamic Login/Signup Page Using HTML, CSS, and JavaScript

3 min readJul 12, 2024

Check out our other tutorial on this link building a responsive navigation bar

Creating a visually appealing and functional login/signup page is a fundamental task for web developers. This tutorial will guide you through the process of building a dynamic login/signup page using HTML, CSS, and JavaScript. We will focus on creating a responsive and interactive user interface that enhances the user experience.

Project Structure

Our project consists of three main files:

index.html - The HTML file that defines the structure of our page.
style.css - The CSS file that styles our page.
app.js - The JavaScript file that adds interactivity to our page.

Explore this dynamic login/signup page demo created with HTML, CSS, and JavaScript. Click to see the interactive user interface in action!

Let’s start by looking at each file in detail.

HTML: Structuring the Page

The index.html file provides the basic structure of our login/signup page. It includes two forms: one for login and one for signup, and a checkbox to toggle between these forms.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login/Signup Page</title>
    <meta name="description" content="Learn how to build a dynamic login/signup page using HTML, CSS, and JavaScript. Follow this step-by-step tutorial to create a responsive and interactive user interface." />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
  </head>
  <body>
    <section class="page">
      <input type="checkbox" name="trans" id="trans" />
      <div class="overlay">
        <h1>Welcome back!</h1>
        <p class="sign">
          Don't have an Account?
          <label for="trans" class="button">Sign Up</label>
        </p>
      </div>
      <div class="form form1">
        <form method="dialog" class="login">
          <h1>Sign In</h1>
          <!-- Social login icons -->
          <div class="anotherlogin">
            <!-- Social login icons here -->
          </div>
          <p>or</p>
          <label for="email" class="email">Email </label>
          <input type="email" name="email" id="email" />
          <label for="password">Password</label>
          <input type="password" />
          <a href="#" class="forgot">Forget password</a>
          <button class="login-btn">Sign In</button>
        </form>
      </div>
      <div class="form form2">
        <form method="dialog" class="sign-up">
          <h1>Sign Up</h1>
          <!-- Social signup icons -->
          <div class="anotherlogin">
            <!-- Social signup icons here -->
          </div>
          <p>or</p>
          <label for="email" class="email">Email </label>
          <input type="email" name="email" id="email" />
          <label for="password">Password</label>
          <input type="password" />
          <button class="signup-btn">Sign Up</button>
        </form>
      </div>
    </section>
    <script src="app.js"></script>
  </body>
</html>

CSS: Styling the Page

The style.css file is responsible for styling our page. It includes styles for the body, forms, buttons, and animations.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background: none;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/Login&signup-page/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.page {
  background-color: #faf3f162;
  border-radius: 20px;
  height: 70%;
  width: 60%;
  box-shadow: 0 0 10px;
  backdrop-filter: blur(10px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.form {
  height: 100%;
  width: 50%;
  padding: 2%;
  backdrop-filter: blur(10px);
}

/* Other styles for .anotherlogin, .overlay, .button, #trans, etc. */

@keyframes hide {
  75% {
    opacity: 0;
  }
  100% {
    left: 25%;
    opacity: 0;
    display: none;
  }
}

@keyframes hide2 {
  75% {
    opacity: 0;
  }
  100% {
    right: 25%;
    opacity: 0;
    display: none;
  }
}

@keyframes visible {
  0% {
    left: 25%;
    opacity: 0;
    display: none;
  }
  25% {
    opacity: 0;
  }
  100% {
    left: 0%;
    opacity: 1;
    display: block;
  }
}

@keyframes visible2 {
  0% {
    right: 25%;
    opacity: 0;
    display: none;
  }
  25% {
    opacity: 0;
  }
  100% {
    right: 0%;
    opacity: 1;
    display: block;
  }
}

JavaScript: Adding Interactivity

The app.js file adds interactivity to our page. It toggles the content of the overlay and the visibility of the forms based on the state of the checkbox.

let checkBox = document.querySelector("#trans");
let overlay = document.querySelector(".overlay");

checkBox.addEventListener("change", () => {
  setTimeout;
  if (checkBox.checked) {
    setTimeout(() => {
      overlay.innerHTML = `<h1>Welcome to the family!</h1>
      <p class="sign">
        Already have an Account?
        <label for="trans" class="button">Sign In</label>
      </p>`;
    }, 200);
  } else {
    setTimeout(() => {
      overlay.innerHTML = `<h1>Welcome back!</h1>
      <p class="sign">
        Don't have an Account?
        <label for="trans" class="button">Sign Up</label>
      </p>`;
    }, 200);
  }
});

Assets

Here are the assets used in this project:

Background Image: hero-image
Overlay Image: image
Social Media Icons: SVG icons for Google, Facebook, and LinkedIn (included inline in index.html)

Conclusion

By following this tutorial, you have created a dynamic and responsive login/signup page. The combination of HTML, CSS, and JavaScript allows for a smooth user experience with a modern look. Feel free to customize the styles and add more features to enhance your page further.

This project demonstrates the power of combining HTML, CSS, and JavaScript to create interactive web pages. Happy coding!