This tutorial, "Create Website with Login & Registration Form in HTML, CSS, and JavaScript," is designed to guide you through the process of building a fully functional website that allows users to register, log in, and interact with web content securely.
Learning how to create user authentication features is a valuable skill that can be applied to a wide range of web projects, from personal websites to e-commerce platforms and social networks. By the end of this tutorial, you will have gained hands-on experience in developing a secure and user-friendly web application. So, let's embark on this exciting journey of web development and enhance your skill set in HTML, CSS, and JavaScript.
If interested in watching the video before running the code below, you can click the play button to get started.
To create a website login and registration form using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<div class="links">
<ul>
<li><a href="">About</a></li>
<li><a href="">Career</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="login">
<button type="button" class="logins">Login</button>
</div>
</div>
<div class="all_forms">
<div class="cover">
<div class="login_form">
<div class="login_message">
<div class="blend"></div>
<div>
<h1>Welcome Back</h1>
<br>
<p>Please log in using your personal information to stay connected with us.</p>
</div>
</div>
<div class="login_inputs">
<div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
<form>
<h1>LOGIN</h1>
<div>
<input type="email" class="all_inputs">
<label>Email</label>
</div>
<div class="div_p">
<input type="password" class="all_inputs">
<label>Password</label>
</div>
<div><a href="">Forgot password?</a></div>
<div>
<input type="submit" value="Login">
</div>
<div class="footer">
<span>Don't have an account? <a href="" class="signups">Signup</a></span>
</div>
</form>
</div>
</div>
<div class="login_form signup_form">
<div class="login_message login_message2">
<div class="blend"></div>
<div>
<h1>Create Account</h1>
<br>
<p>To become a part of our community, please sign up using your personal information.</p>
</div>
</div>
<div class="login_inputs">
<div class="exit"><img src="close.png" alt="" class="exit_btn"></div>
<form>
<h1>SignUp</h1>
<div>
<input type="email">
<label>Email</label>
</div>
<div class="div_p">
<input type="password">
<label>Password</label>
</div>
<!-- <div><a href="">Forgot password?</a></div> -->
<div>
<input type="submit" value="Sign Up">
</div>
<div class="footer">
<span>Already have an account? <a href="" class="logins">LogIn</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #f2f2f2;
font-family: "Poppins", sans-serif;
background-image: url(hans.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
}
.header {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
position: relative;
top: 30px;
z-index: 10;
color: #fff;
}
.links ul {
list-style: none;
}
.links ul li {
position: relative;
display: inline;
margin: 0 20px;
}
.links ul li::before {
content: "";
position: absolute;
bottom: -7px;
height: 2px;
border-radius: 10px;
background: #fff;
width: 0;
transition: 0.5s;
}
.links ul li:hover::before {
width: 100%;
}
.links ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
}
.login button {
padding: 10px 25px;
border: 1px solid #fff;
color: #fff;
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: 0.5s;
}
.login button:hover {
background: #fff;
color: #000;
}
.all_forms {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
}
.cover {
position: relative;
width: 100%;
height: 100%;
}
.login_form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(0);
width: 800px;
height: 400px;
display: flex;
}
.login_message {
position: relative;
width: 400px;
background-image: url(lap2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.blend {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .9);
}
.login_message div:nth-child(2) {
position: relative;
}
.login_message div p {
width: 350px;
margin: 0 auto;
line-height: 26px;
}
.login_inputs {
width: 400px;
background: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.exit {
position: relative;
float: right;
margin: 10px;
z-index: 1;
}
.exit img {
width: 15px;
cursor: pointer;
}
.login_inputs form {
position: relative;
top: 10px;
padding: 20px;
}
.login_inputs form h1 {
text-align: center;
margin-bottom: 20px;
}
.login_inputs form div {
margin-bottom: 30px;
position: relative;
}
.login_inputs form div input {
width: 100%;
padding: 15px 0;
padding-left: 5px;
border-radius: 5px;
border: none;
outline: none;
border: 1px solid rgba(0, 0, 0, .3);
}
.login_inputs form div label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
font-size: 15px;
color: rgba(0, 0, 0, .8);
}
.login_inputs form div input:focus + label {
top: 10px;
font-size: 10px;
}
.login_inputs form .div_p {
margin-bottom: 15px;
}
.login_inputs form div input[type=submit] {
background: #20b2aa;
color: #fff;
font-size: 17px;
border: none;
cursor: pointer;
}
.login_inputs form div a {
text-decoration: none;
color: #20b2aa;
}
.footer {
text-align: center;
}
.show_login {
animation: rotate 0.5s linear 1;
transform: translate(-50%,-50%) rotate(0) scale(1);
}
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(360deg) scale(0);
}100% {
transform: translate(-50%,-50%) rotate(0) scale(1);
}
}
.signup_form {
transform: translate(-50%,-50%) rotate(0) scale(0);
transition: 1s;
}
.login_message2 {
background-image: url(lap1.jpg);
}
const logins = document.querySelectorAll(".logins");
const cover = document.querySelector(".cover");
const loginForm = document.querySelector(".login_form");
const header = document.querySelector("header")
logins.forEach(log => {
log.addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("show_login");
cover.style.backdropFilter = "blur(3px)";
cover.style.zIndex = "14";
//after your run login finish
signupForm.style.transform = "translate(-50%,-50%) rotate(0) scale(0)";
})
})
const signups = document.querySelectorAll(".signups");
const signupForm = document.querySelector(".signup_form");
signups.forEach(sign => {
sign.addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("show_login");
signupForm.style.transform = "translate(-50%,-50%) rotate(0) scale(1)";
})
})
const all_inputs = document.querySelectorAll(".all_inputs");
all_inputs.forEach(ini => {
ini.addEventListener("focusout", e => {
if(e.target.value !== "") {
let parent = e.currentTarget.parentElement;
let label = parent.querySelector("label")
label.style.top = "10px";
label.style.fontSize = "10px";
}
})
})
const exitBtn = document.querySelectorAll(".exit_btn");
exitBtn.forEach(close => {
close.addEventListener("click", e => {
cover.style.backdropFilter = "none";
cover.style.zIndex = "0";
loginForm.classList.remove("show_login");
signupForm.style.transform = "translate(-50%,-50%) rotate(0) scale(0)";
})
})
0 Comments
We are happy to hear from you.