Building a Dynamic Login/Signup Page Using HTML, CSS, and JavaScript
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.
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!