• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Create Website with Login & Registration Form in HTML CSS and JavaScript
If you’re new to web development, creating a website with login and registration forms is an excellent way to learn and practice basic skills like designing a navigation menu bar, creating a website homepage, and building login and registration forms.
In this blog post, I’ll guide you through the process of creating a responsive website with login and registration forms using HTML, CSS, and JavaScript. By completing this project, you’ll gain practical experience and learn essential web development concepts like DOM manipulation, event handling, conditional statements, and more.
In this project, the website’s homepage features a navigation bar and a login button. When you click on the button, a login form will popup with a cool blurred background effect. The form has an image on the left and input fields on the right side. If you want to sign up instead, simply click on the sign-up link and you’ll be taken to the registration form.
Steps to Create Website with Login & Registration Form
To build a Drawing App using HTML CSS & JavaScript, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website with Login and Registration Form | CodingNepal</title>
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<nav class="navbar">
<span class="hamburger-btn material-symbols-rounded">menu</span>
<a href="#" class="logo">
<img src="images/logo.jpg" alt="logo">
<h2>CodingNepal</h2>
</a>
<ul class="links">
<span class="close-btn material-symbols-rounded">close</span>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<button class="login-btn">LOG IN</button>
</nav>
</header>
<div class="blur-bg-overlay"></div>
<div class="form-popup">
<span class="close-btn material-symbols-rounded">close</span>
<div class="form-box login">
<div class="form-details">
<h2>Welcome Back</h2>
<p>Please log in using your personal information to stay connected with us.</p>
</div>
<div class="form-content">
<h2>LOGIN</h2>
<form action="#">
<div class="input-field">
<input type="text" required>
<label>Email</label>
</div>
<div class="input-field">
<input type="password" required>
<label>Password</label>
</div>
<a href="#" class="forgot-pass-link">Forgot password?</a>
<button type="submit">Log In</button>
</form>
<div class="bottom-link">
Don't have an account?
<a href="#" id="signup-link">Signup</a>
</div>
</div>
</div>
<div class="form-box signup">
<div class="form-details">
<h2>Create Account</h2>
<p>To become a part of our community, please sign up using your personal information.</p>
</div>
<div class="form-content">
<h2>SIGNUP</h2>
<form action="#">
<div class="input-field">
<input type="text" required>
<label>Enter your email</label>
</div>
<div class="input-field">
<input type="password" required>
<label>Create password</label>
</div>
<div class="policy-text">
<input type="checkbox" id="policy">
<label for="policy">
I agree the
<a href="#" class="option">Terms & Conditions</a>
</label>
</div>
<button type="submit">Sign Up</button>
</form>
<div class="bottom-link">
Already have an account?
<a href="#" id="login-link">Login</a>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website with Login and Registration Form | CodingNepal</title> <!-- Google Fonts Link For Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <header> <nav class="navbar"> <span class="hamburger-btn material-symbols-rounded">menu</span> <a href="#" class="logo"> <img src="images/logo.jpg" alt="logo"> <h2>CodingNepal</h2> </a> <ul class="links"> <span class="close-btn material-symbols-rounded">close</span> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Courses</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> <button class="login-btn">LOG IN</button> </nav> </header> <div class="blur-bg-overlay"></div> <div class="form-popup"> <span class="close-btn material-symbols-rounded">close</span> <div class="form-box login"> <div class="form-details"> <h2>Welcome Back</h2> <p>Please log in using your personal information to stay connected with us.</p> </div> <div class="form-content"> <h2>LOGIN</h2> <form action="#"> <div class="input-field"> <input type="text" required> <label>Email</label> </div> <div class="input-field"> <input type="password" required> <label>Password</label> </div> <a href="#" class="forgot-pass-link">Forgot password?</a> <button type="submit">Log In</button> </form> <div class="bottom-link"> Don't have an account? <a href="#" id="signup-link">Signup</a> </div> </div> </div> <div class="form-box signup"> <div class="form-details"> <h2>Create Account</h2> <p>To become a part of our community, please sign up using your personal information.</p> </div> <div class="form-content"> <h2>SIGNUP</h2> <form action="#"> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Create password</label> </div> <div class="policy-text"> <input type="checkbox" id="policy"> <label for="policy"> I agree the <a href="#" class="option">Terms & Conditions</a> </label> </div> <button type="submit">Sign Up</button> </form> <div class="bottom-link"> Already have an account? <a href="#" id="login-link">Login</a> </div> </div> </div> </div> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Importing Google font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
width: 100%;
background: url("images/hero-bg.jpg") center/cover no-repeat;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 10;
padding: 0 10px;
}
.navbar {
display: flex;
padding: 22px 0;
align-items: center;
max-width: 1200px;
margin: 0 auto;
justify-content: space-between;
}
.navbar .hamburger-btn {
display: none;
color: #fff;
cursor: pointer;
font-size: 1.5rem;
}
.navbar .logo {
gap: 10px;
display: flex;
align-items: center;
text-decoration: none;
}
.navbar .logo img {
width: 40px;
border-radius: 50%;
}
.navbar .logo h2 {
color: #fff;
font-weight: 600;
font-size: 1.7rem;
}
.navbar .links {
display: flex;
gap: 35px;
list-style: none;
align-items: center;
}
.navbar .close-btn {
position: absolute;
right: 20px;
top: 20px;
display: none;
color: #000;
cursor: pointer;
}
.navbar .links a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: 0.1s ease;
}
.navbar .links a:hover {
color: #19e8ff;
}
.navbar .login-btn {
border: none;
outline: none;
background: #fff;
color: #275360;
font-size: 1rem;
font-weight: 600;
padding: 10px 18px;
border-radius: 3px;
cursor: pointer;
transition: 0.15s ease;
}
.navbar .login-btn:hover {
background: #ddd;
}
.form-popup {
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
width: 100%;
opacity: 0;
pointer-events: none;
max-width: 720px;
background: #fff;
border: 2px solid #fff;
transform: translate(-50%, -70%);
}
.show-popup .form-popup {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, opacity 0.1s;
}
.form-popup .close-btn {
position: absolute;
top: 12px;
right: 12px;
color: #878484;
cursor: pointer;
}
.blur-bg-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 10;
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: 0.1s ease;
}
.show-popup .blur-bg-overlay {
opacity: 1;
pointer-events: auto;
}
.form-popup .form-box {
display: flex;
}
.form-box .form-details {
width: 100%;
color: #fff;
max-width: 330px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login .form-details {
padding: 0 40px;
background: url("images/login-img.jpg");
background-position: center;
background-size: cover;
}
.signup .form-details {
padding: 0 20px;
background: url("images/signup-img.jpg");
background-position: center;
background-size: cover;
}
.form-box .form-content {
width: 100%;
padding: 35px;
}
.form-box h2 {
text-align: center;
margin-bottom: 29px;
}
form .input-field {
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
}
.input-field input {
height: 100%;
width: 100%;
background: none;
outline: none;
font-size: 0.95rem;
padding: 0 15px;
border: 1px solid #717171;
border-radius: 3px;
}
.input-field input:focus {
border: 1px solid #00bcd4;
}
.input-field label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
color: #4a4646;
pointer-events: none;
transition: 0.2s ease;
}
.input-field input:is(:focus, :valid) {
padding: 16px 15px 0;
}
.input-field input:is(:focus, :valid)~label {
transform: translateY(-120%);
color: #00bcd4;
font-size: 0.75rem;
}
.form-box a {
color: #00bcd4;
text-decoration: none;
}
.form-box a:hover {
text-decoration: underline;
}
form :where(.forgot-pass-link, .policy-text) {
display: inline-flex;
margin-top: 13px;
font-size: 0.95rem;
}
form button {
width: 100%;
color: #fff;
border: none;
outline: none;
padding: 14px 0;
font-size: 1rem;
font-weight: 500;
border-radius: 3px;
cursor: pointer;
margin: 25px 0;
background: #00bcd4;
transition: 0.2s ease;
}
form button:hover {
background: #0097a7;
}
.form-content .bottom-link {
text-align: center;
}
.form-popup .signup,
.form-popup.show-signup .login {
display: none;
}
.form-popup.show-signup .signup {
display: flex;
}
.signup .policy-text {
display: flex;
margin-top: 14px;
align-items: center;
}
.signup .policy-text input {
width: 14px;
height: 14px;
margin-right: 7px;
}
@media (max-width: 950px) {
.navbar :is(.hamburger-btn, .close-btn) {
display: block;
}
.navbar {
padding: 15px 0;
}
.navbar .logo img {
display: none;
}
.navbar .logo h2 {
font-size: 1.4rem;
}
.navbar .links {
position: fixed;
top: 0;
z-index: 10;
left: -100%;
display: block;
height: 100vh;
width: 100%;
padding-top: 60px;
text-align: center;
background: #fff;
transition: 0.2s ease;
}
.navbar .links.show-menu {
left: 0;
}
.navbar .links a {
display: inline-flex;
margin: 20px 0;
font-size: 1.2rem;
color: #000;
}
.navbar .links a:hover {
color: #00BCD4;
}
.navbar .login-btn {
font-size: 0.9rem;
padding: 7px 10px;
}
}
@media (max-width: 760px) {
.form-popup {
width: 95%;
}
.form-box .form-details {
display: none;
}
.form-box .form-content {
padding: 30px 20px;
}
}
/* Importing Google font - Open Sans */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { height: 100vh; width: 100%; background: url("images/hero-bg.jpg") center/cover no-repeat; } header { position: fixed; width: 100%; top: 0; left: 0; z-index: 10; padding: 0 10px; } .navbar { display: flex; padding: 22px 0; align-items: center; max-width: 1200px; margin: 0 auto; justify-content: space-between; } .navbar .hamburger-btn { display: none; color: #fff; cursor: pointer; font-size: 1.5rem; } .navbar .logo { gap: 10px; display: flex; align-items: center; text-decoration: none; } .navbar .logo img { width: 40px; border-radius: 50%; } .navbar .logo h2 { color: #fff; font-weight: 600; font-size: 1.7rem; } .navbar .links { display: flex; gap: 35px; list-style: none; align-items: center; } .navbar .close-btn { position: absolute; right: 20px; top: 20px; display: none; color: #000; cursor: pointer; } .navbar .links a { color: #fff; font-size: 1.1rem; font-weight: 500; text-decoration: none; transition: 0.1s ease; } .navbar .links a:hover { color: #19e8ff; } .navbar .login-btn { border: none; outline: none; background: #fff; color: #275360; font-size: 1rem; font-weight: 600; padding: 10px 18px; border-radius: 3px; cursor: pointer; transition: 0.15s ease; } .navbar .login-btn:hover { background: #ddd; } .form-popup { position: fixed; top: 50%; left: 50%; z-index: 10; width: 100%; opacity: 0; pointer-events: none; max-width: 720px; background: #fff; border: 2px solid #fff; transform: translate(-50%, -70%); } .show-popup .form-popup { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.1s; } .form-popup .close-btn { position: absolute; top: 12px; right: 12px; color: #878484; cursor: pointer; } .blur-bg-overlay { position: fixed; top: 0; left: 0; z-index: 10; height: 100%; width: 100%; opacity: 0; pointer-events: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: 0.1s ease; } .show-popup .blur-bg-overlay { opacity: 1; pointer-events: auto; } .form-popup .form-box { display: flex; } .form-box .form-details { width: 100%; color: #fff; max-width: 330px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .login .form-details { padding: 0 40px; background: url("images/login-img.jpg"); background-position: center; background-size: cover; } .signup .form-details { padding: 0 20px; background: url("images/signup-img.jpg"); background-position: center; background-size: cover; } .form-box .form-content { width: 100%; padding: 35px; } .form-box h2 { text-align: center; margin-bottom: 29px; } form .input-field { position: relative; height: 50px; width: 100%; margin-top: 20px; } .input-field input { height: 100%; width: 100%; background: none; outline: none; font-size: 0.95rem; padding: 0 15px; border: 1px solid #717171; border-radius: 3px; } .input-field input:focus { border: 1px solid #00bcd4; } .input-field label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #4a4646; pointer-events: none; transition: 0.2s ease; } .input-field input:is(:focus, :valid) { padding: 16px 15px 0; } .input-field input:is(:focus, :valid)~label { transform: translateY(-120%); color: #00bcd4; font-size: 0.75rem; } .form-box a { color: #00bcd4; text-decoration: none; } .form-box a:hover { text-decoration: underline; } form :where(.forgot-pass-link, .policy-text) { display: inline-flex; margin-top: 13px; font-size: 0.95rem; } form button { width: 100%; color: #fff; border: none; outline: none; padding: 14px 0; font-size: 1rem; font-weight: 500; border-radius: 3px; cursor: pointer; margin: 25px 0; background: #00bcd4; transition: 0.2s ease; } form button:hover { background: #0097a7; } .form-content .bottom-link { text-align: center; } .form-popup .signup, .form-popup.show-signup .login { display: none; } .form-popup.show-signup .signup { display: flex; } .signup .policy-text { display: flex; margin-top: 14px; align-items: center; } .signup .policy-text input { width: 14px; height: 14px; margin-right: 7px; } @media (max-width: 950px) { .navbar :is(.hamburger-btn, .close-btn) { display: block; } .navbar { padding: 15px 0; } .navbar .logo img { display: none; } .navbar .logo h2 { font-size: 1.4rem; } .navbar .links { position: fixed; top: 0; z-index: 10; left: -100%; display: block; height: 100vh; width: 100%; padding-top: 60px; text-align: center; background: #fff; transition: 0.2s ease; } .navbar .links.show-menu { left: 0; } .navbar .links a { display: inline-flex; margin: 20px 0; font-size: 1.2rem; color: #000; } .navbar .links a:hover { color: #00BCD4; } .navbar .login-btn { font-size: 0.9rem; padding: 7px 10px; } } @media (max-width: 760px) { .form-popup { width: 95%; } .form-box .form-details { display: none; } .form-box .form-content { padding: 30px 20px; } }
last,paste the script.js
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const navbarMenu = document.querySelector(".navbar .links");
const hamburgerBtn = document.querySelector(".hamburger-btn");
const hideMenuBtn = navbarMenu.querySelector(".close-btn");
const showPopupBtn = document.querySelector(".login-btn");
const formPopup = document.querySelector(".form-popup");
const hidePopupBtn = formPopup.querySelector(".close-btn");
const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");
// Show mobile menu
hamburgerBtn.addEventListener("click", () => {
navbarMenu.classList.toggle("show-menu");
});
// Hide mobile menu
hideMenuBtn.addEventListener("click", () => hamburgerBtn.click());
// Show login popup
showPopupBtn.addEventListener("click", () => {
document.body.classList.toggle("show-popup");
});
// Hide login popup
hidePopupBtn.addEventListener("click", () => showPopupBtn.click());
// Show or hide signup form
signupLoginLink.forEach(link => {
link.addEventListener("click", (e) => {
e.preventDefault();
formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
});
});
const navbarMenu = document.querySelector(".navbar .links"); const hamburgerBtn = document.querySelector(".hamburger-btn"); const hideMenuBtn = navbarMenu.querySelector(".close-btn"); const showPopupBtn = document.querySelector(".login-btn"); const formPopup = document.querySelector(".form-popup"); const hidePopupBtn = formPopup.querySelector(".close-btn"); const signupLoginLink = formPopup.querySelectorAll(".bottom-link a"); // Show mobile menu hamburgerBtn.addEventListener("click", () => { navbarMenu.classList.toggle("show-menu"); }); // Hide mobile menu hideMenuBtn.addEventListener("click", () => hamburgerBtn.click()); // Show login popup showPopupBtn.addEventListener("click", () => { document.body.classList.toggle("show-popup"); }); // Hide login popup hidePopupBtn.addEventListener("click", () => showPopupBtn.click()); // Show or hide signup form signupLoginLink.forEach(link => { link.addEventListener("click", (e) => { e.preventDefault(); formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup"); }); });
If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}