i made this login page for you to understand how to make login page using html . css and javascript. this code you can copy paste in your project and it will help you to complete your project faster. login page helps you to get input from user and you can take that input and using their input you can verify user. for example user visit your website and if he wants to buy something from website so you can verify that user through their username and password.
this login page made with html css and javascript and this page is responsive . in this page i have used one background images to enhance page look and also this page include glassmorphism design.
NOTE:- you can set any image in you file but you have make one image folder in that folder image name should be img.jpg because in source code i have used this name . if you want my image then you can download from bottom of this post. i have uploaded in zip file along with code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login Page- CodeByrolex</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page" aria-labelledby="login-heading">
<section class="card" role="region" aria-label="Login form">
<div class="card-header">
<!-- simple lock icon + title -->
<svg class="lock" width="36" height="36" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M12 2a4 4 0 00-4 4v3H6a2 2 0 00-2 2v7a2 2 0 002 2h12a2 2 0 002-2v-7a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm-2 7V6a2 2 0 114 0v3h-4z"/>
</svg>
<h1 id="login-heading" class="title">Login</h1>
</div>
<form id="loginForm" class="form" novalidate>
<label class="field">
<span class="label-text">Email</span>
<input id="email" name="email" type="email" inputmode="email" autocomplete="username"
placeholder="Example@gmail.com" required />
<small class="error" aria-live="polite"></small>
</label>
<label class="field">
<span class="label-text">Password</span>
<div class="pw-wrap">
<input id="password" name="password" type="password" autocomplete="current-password"
placeholder="••••••••" minlength="6" required />
<button type="button" id="togglePw" class="toggle-pw" aria-label="Show password">Show</button>
</div>
<small class="error" aria-live="polite"></small>
</label>
<div class="row">
<label class="checkbox">
<input type="checkbox" id="remember" />
<span>Remember me</span>
</label>
<a href="#" class="forgot">Forgot password?</a>
</div>
<button type="submit" class="btn" id="submitBtn">Sign in</button>
<p class="footer-note">By continuing you agree to our <a href="#" class="link">Terms</a> and <a href="#" class="link">Privacy</a>.</p>
</form>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
:root {
--bg-overlay-top: rgba(10, 16, 30, 0.35);
--bg-overlay-bottom: rgba(8, 12, 25, 0.45);
--card-glass: rgba(255, 255, 255, 0.10);
--card-border: rgba(255, 255, 255, 0.16);
--accent: #0f172a;
--brand: #0b5fff;
--muted: #cbd5e1;
--error: #ff6b6b;
--radius: 14px;
--max-w: 420px;
--transition: 0.18s ease;
}
/* Visit www.codebyrolex.com */
/* Reset & Base */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
color: var(--accent);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
background-image:
linear-gradient(180deg, var(--bg-overlay-top), var(--bg-overlay-bottom)),
url('image/img.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Overlay tint */
.page {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Glass Card */
.card {
width: 100%;
max-width: var(--max-w);
border-radius: var(--radius);
padding: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
border: 1px solid var(--card-border);
-webkit-backdrop-filter: blur(10px) saturate(120%);
backdrop-filter: blur(10px) saturate(120%);
box-shadow: 0 12px 40px rgba(2,6,23,0.45);
transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 56px rgba(2,6,23,0.48);
}
/* Header */
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
color: #fff;
}
.lock {
color: var(--brand);
}
.title {
margin: 0;
font-size: 20px;
color: #ffffffcc;
}
/* Form Layout */
.form {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 6px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.label-text {
font-size: 13px;
color: #e6eefb;
}
/* Inputs */
input[type="email"],
input[type="password"],
.pw-wrap input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
color: #fff;
font-size: 15px;
outline: none;
transition: box-shadow var(--transition), border-color var(--transition), transform 0.08s;
}
input::placeholder {
color: rgba(255,255,255,0.6);
}
input:focus {
box-shadow: 0 8px 28px rgba(11,95,255,0.10);
border-color: rgba(11,95,255,0.26);
transform: translateY(-1px);
}
/* Password Wrapper */
.pw-wrap {
display: flex;
align-items: center;
gap: 8px;
border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
padding-right: 6px;
}
.pw-wrap:focus-within {
border-color: rgba(11,95,255,0.26);
box-shadow: 0 8px 28px rgba(11,95,255,0.08);
}
.pw-wrap input {
border: none;
background: transparent;
color: #fff;
padding-left: 12px;
padding-right: 6px;
}
/* Toggle Button */
.toggle-pw {
border: none;
background: transparent;
padding: 8px 10px;
color: #eaf2ff;
font-weight: 700;
cursor: pointer;
font-size: 13px;
flex-shrink: 0;
border-radius: 8px;
}
.toggle-pw:hover {
background: rgba(255,255,255,0.03);
color: #fff;
}
/* Error */
.error {
height: 16px;
color: var(--error);
font-size: 12px;
}
/* Row (Remember + Forgot) */
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.checkbox {
display: flex;
align-items: center;
gap: 8px;
color: #e6eefb;
font-size: 14px;
}
.checkbox input {
width: 16px;
height: 16px;
accent-color: var(--brand);
}
/* Forgot Link */
.forgot {
color: #eaf2ff;
text-decoration: none;
font-size: 13px;
}
.forgot:hover {
text-decoration: underline;
color: #fff;
}
/* Button */
.btn {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
font-weight: 700;
font-size: 15px;
cursor: pointer;
background: linear-gradient(90deg, rgba(11,95,255,1), rgba(3,156,255,0.95));
color: white;
box-shadow: 0 10px 30px rgba(3,156,255,0.16);
transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.btn:hover {
filter: brightness(1.04);
transform: translateY(-1px);
}
.btn:active {
transform: translateY(1px);
}
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
filter: grayscale(.2);
}
/* Footer Note */
.footer-note {
font-size: 12px;
color: #e6eefb;
text-align: center;
margin-top: 6px;
}
.link {
color: #dbe9ff;
text-decoration: underline;
}
/* Responsive Adjustments */
@media (max-width: 520px) {
.card {
padding: 20px;
max-width: 92%;
-webkit-backdrop-filter: blur(6px) saturate(110%);
backdrop-filter: blur(6px) saturate(110%);
}
.title {
font-size: 18px;
}
body {
background-attachment: scroll; /* avoids fixed bg on some mobile browsers */
}
}
JavaScript
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('loginForm');
const email = document.getElementById('email');
const password = document.getElementById('password');
const toggle = document.getElementById('togglePw');
const submitBtn = document.getElementById('submitBtn');
function setError(input, message) {
const err = input.closest('.field')?.querySelector('.error') || input.parentElement.querySelector('.error');
if (err) err.textContent = message || '';
input.setAttribute('aria-invalid', message ? 'true' : 'false');
}
function validateEmail(value) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}
// toggle show/hide password
toggle.addEventListener('click', () => {
if (password.type === 'password') {
password.type = 'text';
toggle.textContent = 'Hide';
toggle.setAttribute('aria-label', 'Hide password');
} else {
password.type = 'password';
toggle.textContent = 'Show';
toggle.setAttribute('aria-label', 'Show password');
}
});
// basic live validation for UX
email.addEventListener('input', () => {
if (email.value.trim() === '') { setError(email, ''); return; }
setError(email, validateEmail(email.value.trim()) ? '' : 'Invalid email');
});
password.addEventListener('input', () => {
if (password.value.trim() === '') { setError(password, ''); return; }
setError(password, password.value.length >= 6 ? '' : 'At least 6 characters');
});
form.addEventListener('submit', (e) => {
e.preventDefault();
let ok = true;
const em = email.value.trim();
const pw = password.value.trim();
if (!validateEmail(em)) { setError(email, 'Please enter a valid email'); ok = false; } else setError(email, '');
if (pw.length < 6) { setError(password, 'Password must be at least 6 characters'); ok = false; } else setError(password, '');
if (!ok) return;
// Disable button to show progress (simulate)
submitBtn.disabled = true;
submitBtn.textContent = 'Signing in...';
// simulate request (replace this with real fetch to backend)
setTimeout(() => {
// demo success
alert('Signed in (demo) — ' + em);
form.reset();
submitBtn.disabled = false;
submitBtn.textContent = 'Sign in';
}, 900);
});
});
Here is Download Link of Zip File For Source Code
