Project Gallery
Explore Secure Login – Access Your Accounts in detail
1
/1
100%
Project Overview
Secure Login – Access Your Accounts
Project Description
well Sign in quickly and securely through our modern login page, built with HTML, CSS, JavaScript, and Bootstrap. Enjoy a clean, responsive design that ensures smooth authentication, perfect alignment, and seamless user experience across all devices.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Minimalist Login + Sign Up</title>
</head>
<body>
<div class="login-container">
<div class="login-card">
<!-- Logo (always visible) -->
<div class="logo-icon">⚡</div>
<!-- Tab Switcher -->
<div class="tab-header">
<button class="tab-btn active" id="loginTabBtn">Login</button>
<button class="tab-btn" id="signupTabBtn">Sign Up</button>
</div>
<!-- ========== LOGIN FORM ========== -->
<div id="loginFormContainer" class="form-container" style="display:block;">
<form class="login-form" id="loginForm" novalidate>
<div class="form-group">
<div class="input-wrapper">
<input type="email" id="loginEmail" name="email" placeholder=" " required>
<label for="loginEmail">Email</label>
<span class="input-line"></span>
</div>
</div>
<div class="form-group">
<div class="input-wrapper password-wrapper">
<input type="password" id="loginPassword" name="password" placeholder=" " required>
<label for="loginPassword">Password</label>
<button type="button" class="password-toggle" id="loginPasswordToggle">
<span class="toggle-icon"></span>
</button>
<span class="input-line"></span>
</div>
</div>
<div class="form-options">
<div class="remember-wrapper">
<input type="checkbox" id="remember">
<label for="remember"><span class="custom-checkbox"></span> Keep me signed in</label>
</div>
<a href="#" class="forgot-password">Forgot?</a>
</div>
<button type="submit" class="login-btn">
Sign In
<span class="btn-glow"></span>
</button>
</form>
<div class="social-login">
<button class="social-btn google-btn">▣ Continue with Google</button>
<button class="social-btn apple-btn"> Continue with Apple</button>
</div>
<div class="footer-note">
<p>New here? <a href="#" id="switchToSignupFooter">Create account</a></p>
</div>
</div>
<!-- ========== SIGNUP FORM ========== -->
<div id="signupFormContainer" class="form-container" style="display:none;">
<form class="signup-form" id="signupForm" novalidate>
<div class="form-group">
<div class="input-wrapper">
<input type="text" id="signupName" name="name" placeholder=" " required>
<label for="signupName">Full name</label>
<span class="input-line"></span>
</div>
</div>
<div class="form-group">
<div class="input-wrapper">
<input type="email" id="signupEmail" name="email" placeholder=" " required>
<label for="signupEmail">Email</label>
<span class="input-line"></span>
</div>
</div>
<div class="form-group">
<div class="input-wrapper password-wrapper">
<input type="password" id="signupPassword" name="password" placeholder=" " required>
<label for="signupPassword">Password</label>
<button type="button" class="password-toggle" id="signupPasswordToggle">
<span class="toggle-icon"></span>
</button>
<span class="input-line"></span>
</div>
</div>
<div class="form-group">
<div class="input-wrapper password-wrapper">
<input type="password" id="signupConfirm" name="confirm" placeholder=" " required>
<label for="signupConfirm">Confirm password</label>
<span class="input-line"></span>
</div>
</div>
<div class="terms-wrapper">
<input type="checkbox" id="terms" checked>
<label for="terms"><span class="custom-checkbox"></span> I agree to the <a href="#">Terms</a> & <a href="#">Privacy</a></label>
</div>
<button type="submit" class="signup-btn">
Create Account
<span class="btn-glow"></span>
</button>
</form>
<div class="social-login" style="margin-top:4px;">
<button class="social-btn google-btn">▣ Sign up with Google</button>
<button class="social-btn apple-btn"> Sign up with Apple</button>
</div>
<div class="footer-note">
<p>Already have an account? <a href="#" id="switchToLoginFooter">Sign in</a></p>
</div>
</div>
<!-- Success Message (shared, appears after submit) -->
<div class="success-message" id="successMessage">
<h3>✔ Welcome!</h3>
<p>Redirecting you securely...</p>
</div>
</div>
<div class="background-effects">
<div class="glow-orb glow-orb-1"></div>
<div class="glow-orb glow-orb-2"></div>
<div class="glow-orb glow-orb-3"></div>
</div>
</div>
<!-- tiny style for the checkbox inline with terms -->
<style>
.terms-wrapper .custom-checkbox { margin-right:6px; vertical-align:middle; }
.terms-wrapper label { display:flex; align-items:center; }
.footer-note a { cursor:pointer; }
</style>
</body>
</html>CSS
<style>
/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Inter',sans-serif;
background:#0a0a0f;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:1rem;
}
/* Container & Card */
.login-container {
width:100%;
max-width:440px;
position:relative;
z-index:10;
}
.login-card {
width:100%;
background:#151520;
border:1px solid #2a2a35;
border-radius:24px;
padding:32px 28px;
box-shadow:0 20px 40px rgba(0,0,0,0.5);
backdrop-filter:blur(20px);
text-align:center;
position:relative;
}
/* Header & Tabs */
.tab-header {
display:flex;
gap:12px;
margin-bottom:28px;
background:#1e1e2a;
padding:6px;
border-radius:60px;
border:1px solid #2a2a35;
}
.tab-btn {
flex:1;
background:transparent;
border:none;
padding:12px 10px;
border-radius:40px;
font-weight:600;
font-size:1rem;
color:#a0a0b0;
cursor:pointer;
transition:0.2s;
}
.tab-btn.active {
background:linear-gradient(135deg,#00ff88,#0099ff);
color:#0a0a0f;
box-shadow:0 0 12px rgba(0,255,136,0.4);
}
/* Logo */
.logo-icon {
font-size:2.8rem;
margin-bottom:8px;
background:linear-gradient(135deg,#00ff88,#0099ff);
-webkit-background-clip:text;
color:transparent;
filter:drop-shadow(0 0 20px rgba(0,255,136,0.3));
}
/* Form */
.form-container {
transition:0.2s;
}
.login-form {
text-align:left;
display:block;
}
.signup-form {
text-align:left;
display:none;
}
.form-group { margin-bottom:22px; position:relative; }
.input-wrapper { position:relative; }
.input-wrapper input {
width:100%;
padding:16px;
background:#1a1a25;
border:1px solid #2a2a35;
border-radius:10px;
color:#fff;
font-size:16px;
outline:none;
transition:0.2s;
}
.input-wrapper input:focus {
border-color:#00ff88;
box-shadow:0 0 8px rgba(0,255,136,0.2);
}
.input-wrapper label {
position:absolute; left:16px; top:16px;
color:#a0a0b0;
pointer-events:none;
transition:0.2s ease;
background:#1a1a25;
padding:0 4px;
}
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
transform:translateY(-28px) translateX(-4px);
font-size:12px;
color:#00ff88;
background:transparent;
}
.input-line {
position:absolute; bottom:0; left:50%; width:0; height:2px;
background:linear-gradient(90deg,#00ff88,#0099ff);
transform:translateX(-50%);
transition:0.3s;
border-radius:2px;
}
.input-wrapper input:focus ~ .input-line { width:100%; }
/* Password Toggle (same for both forms, but we target dynamically) */
.password-wrapper { position:relative; }
.password-toggle {
position:absolute; right:16px; top:50%;
transform:translateY(-50%);
background:none; border:none; cursor:pointer;
color:#a0a0b0;
font-size:1.2rem;
z-index:5;
}
.toggle-icon {
display:inline-block;
width:22px;
height:22px;
background:#a0a0b0;
border-radius:50%;
transition:0.2s;
}
.toggle-icon.show-password {
background:#00ff88;
box-shadow:0 0 8px #00ff88;
}
/* Options row (login) */
.form-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.remember-wrapper { display:flex; align-items:center; gap:8px; }
.remember-wrapper input { display:none; }
.custom-checkbox {
width:18px; height:18px; border:2px solid #2a2a35; border-radius:4px;
display:inline-block; position:relative; background:#1a1a25;
}
.custom-checkbox::after {
content:'✓';
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%) scale(0);
color:#00ff88;
font-weight:bold;
transition:0.2s;
}
.remember-wrapper input:checked + label .custom-checkbox::after { transform:translate(-50%, -50%) scale(1); }
.forgot-password { color:#a0a0b0; font-size:14px; text-decoration:none; }
.forgot-password:hover { color:#00ff88; }
/* Terms row (signup) */
.terms-wrapper {
display:flex;
align-items:center;
gap:8px;
margin-bottom:24px;
}
.terms-wrapper input { display:none; }
.terms-wrapper label { color:#a0a0b0; font-size:14px; }
.terms-wrapper a { color:#00ff88; text-decoration:none; }
/* Buttons */
.login-btn, .signup-btn {
width:100%;
background:linear-gradient(135deg,#00ff88,#0099ff);
border:none;
border-radius:10px;
padding:16px;
color:#0a0a0f;
font-weight:700;
font-size:16px;
cursor:pointer;
position:relative;
overflow:hidden;
margin-bottom:20px;
transition:0.2s;
}
.login-btn:hover, .signup-btn:hover {
box-shadow:0 0 18px #00ff88;
}
.btn-glow {
position:absolute; top:0; left:-100%; width:100%; height:100%;
background:rgba(255,255,255,0.2);
transition:0.4s;
}
.login-btn:hover .btn-glow, .signup-btn:hover .btn-glow { left:100%; }
/* Social & Footer */
.social-login { display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.social-btn {
background:#1a1a25; border:1px solid #2a2a35; border-radius:40px;
padding:12px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
font-weight:500; transition:0.2s;
}
.social-btn:hover { border-color:#00ff88; background:#20202e; }
.footer-note {
text-align:center; color:#a0a0b0; font-size:14px;
}
.footer-note a { color:#00ff88; text-decoration:none; font-weight:500; }
/* Success Message (shared) */
.success-message {
display:none;
text-align:center;
color:#fff;
padding:20px 0;
}
.success-message h3 { font-size:1.8rem; color:#00ff88; margin-bottom:8px; }
/* Background Orbs */
.background-effects { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.glow-orb { position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(0,255,136,0.12),transparent 70%); }
.glow-orb-1 { width:320px;height:320px;top:-5%;left:-10%; }
.glow-orb-2 { width:260px;height:260px;bottom:0;right:-5%; }
.glow-orb-3 { width:200px;height:200px;bottom:20%;left:15%; }
@media(max-width:480px){ .login-card{padding:24px 18px;} }
</style>JavaScript
<script>
(function() {
// ----- ELEMENTS -----
const loginTab = document.getElementById('loginTabBtn');
const signupTab = document.getElementById('signupTabBtn');
const loginContainer = document.getElementById('loginFormContainer');
const signupContainer = document.getElementById('signupFormContainer');
const switchToSignupFooter = document.getElementById('switchToSignupFooter');
const switchToLoginFooter = document.getElementById('switchToLoginFooter');
const successMsg = document.getElementById('successMessage');
// Forms
const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');
// Password toggles
const loginToggle = document.getElementById('loginPasswordToggle');
const loginPass = document.getElementById('loginPassword');
const signupToggle = document.getElementById('signupPasswordToggle');
const signupPass = document.getElementById('signupPassword');
// ----- HELPER: switch tab -----
function setActiveTab(tab) {
// update tab buttons
loginTab.classList.toggle('active', tab === 'login');
signupTab.classList.toggle('active', tab === 'signup');
// show container
loginContainer.style.display = tab === 'login' ? 'block' : 'none';
signupContainer.style.display = tab === 'signup' ? 'block' : 'none';
// hide any previous success
successMsg.style.display = 'none';
if (tab === 'login') {
loginForm.style.display = 'block';
signupForm.style.display = 'none';
} else {
loginForm.style.display = 'none';
signupForm.style.display = 'block';
}
}
// ----- EVENT LISTENERS -----
loginTab.addEventListener('click', () => setActiveTab('login'));
signupTab.addEventListener('click', () => setActiveTab('signup'));
if (switchToSignupFooter) {
switchToSignupFooter.addEventListener('click', (e) => {
e.preventDefault();
setActiveTab('signup');
});
}
if (switchToLoginFooter) {
switchToLoginFooter.addEventListener('click', (e) => {
e.preventDefault();
setActiveTab('login');
});
}
// ----- PASSWORD TOGGLE (login) -----
if (loginToggle && loginPass) {
loginToggle.addEventListener('click', () => {
const type = loginPass.type === 'password' ? 'text' : 'password';
loginPass.type = type;
loginToggle.querySelector('.toggle-icon').classList.toggle('show-password');
});
}
// ----- PASSWORD TOGGLE (signup) -----
if (signupToggle && signupPass) {
signupToggle.addEventListener('click', () => {
const type = signupPass.type === 'password' ? 'text' : 'password';
signupPass.type = type;
signupToggle.querySelector('.toggle-icon').classList.toggle('show-password');
});
}
// ----- FORM SUBMIT SIMULATION -----
function showSuccessAndHideForms(formType) {
// hide both form containers and show success
loginContainer.style.display = 'none';
signupContainer.style.display = 'none';
successMsg.style.display = 'block';
// optionally you could reset later, but we keep it simple
}
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
showSuccessAndHideForms('login');
});
signupForm.addEventListener('submit', (e) => {
e.preventDefault();
// simple demo: check if passwords match (basic)
const pwd = document.getElementById('signupPassword').value;
const confirm = document.getElementById('signupConfirm').value;
if (pwd !== confirm) {
alert('❌ Passwords do not match!');
return;
}
// terms is checked by default, but we can pretend
showSuccessAndHideForms('signup');
});
// small fix: ensure the initial state (login active)
setActiveTab('login');
// also the "forgot password?" and social buttons just placeholder
// but we keep them interactive
})();
</script>