Project Overview

Secure Login – Access Your Account

Project Description

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 Form</title>

</head>
<body>

<div class="login-container">
    <div class="login-card">
        <div class="login-header">
            <div class="logo-icon">⚡</div>
            <h2>Sign In</h2>
            <p>Access your account</p>
        </div>

        <form class="login-form" id="loginForm" novalidate>
            <div class="form-group">
                <div class="input-wrapper">
                    <input type="email" id="email" name="email" placeholder=" " required>
                    <label for="email">Email</label>
                    <span class="input-line"></span>
                </div>
            </div>

            <div class="form-group">
                <div class="input-wrapper password-wrapper">
                    <input type="password" id="password" name="password" placeholder=" " required>
                    <label for="password">Password</label>
                    <button type="button" class="password-toggle" id="passwordToggle">
                        <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 password?</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="signup-link">
            <p>New here? <a href="#">Create an account</a></p>
        </div>

        <div class="success-message" id="successMessage">
            <h3>Welcome back!</h3>
            <p>Redirecting to your dashboard...</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>



</body>
</html>

CSS

<style>
/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Inter',sans-serif;
    background:#0a0a0f;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

/* Container & Card */
.login-container {
    width:100%;
    max-width:400px;
    position:relative;
    z-index:10;
}
.login-card {
    width:100%;
    background:#151520;
    border:1px solid #2a2a35;
    border-radius:16px;
    padding:40px;
    box-shadow:0 20px 40px rgba(0,0,0,0.3);
    backdrop-filter:blur(20px);
    text-align:center;
    position:relative;
}

/* Header */
.login-header .logo-icon {
    font-size:2.5rem;
    margin-bottom:16px;
    background:linear-gradient(135deg,#00ff88,#0099ff);
    -webkit-background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 20px rgba(0,255,136,0.3));
}
.login-header h2 { color:#fff; font-size:2rem; margin-bottom:8px; }
.login-header p { color:#a0a0b0; font-size:16px; }

/* Form */
.login-form { text-align:left; }
.form-group { margin-bottom:24px; position:relative; }
.input-wrapper { position:relative; }
.input-wrapper input {
    width:100%;
    padding:16px;
    background:#1a1a25;
    border:1px solid #2a2a35;
    border-radius:6px;
    color:#fff;
    font-size:16px;
}
.input-wrapper label {
    position:absolute; left:16px; top:16px;
    color:#a0a0b0;
    pointer-events:none;
    transition:0.3s;
}
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
    transform:translateY(-24px);
    font-size:12px;
    color:#00ff88;
}
.input-line {
    position:absolute; bottom:0; left:50%; width:0; height:2px;
    background:linear-gradient(90deg,#00ff88,#0099ff);
    transform:translateX(-50%);
    transition:0.3s;
}
.input-wrapper input:focus ~ .input-line { width:100%; }

/* Password Toggle */
.password-wrapper { position:relative; }
.password-toggle {
    position:absolute; right:16px; top:50%;
    transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:#a0a0b0;
}
.toggle-icon { display:block; width:20px; height:20px; background:#a0a0b0; border-radius:50%; }
.toggle-icon.show-password { background:#00ff88; }

/* Options & Buttons */
.form-options { display:flex; justify-content:space-between; margin-bottom:24px; }
.remember-wrapper { display:flex; align-items:center; gap:8px; }
.remember-wrapper input { display:none; }
.custom-checkbox {
    width:16px; height:16px; border:2px solid #2a2a35; border-radius:3px; position:relative;
}
.custom-checkbox::after {
    content:''; width:8px; height:8px; background:#00ff88; transform:scale(0); transition:0.3s;
}
.remember-wrapper input:checked + label .custom-checkbox::after { transform:scale(1); }
.forgot-password { color:#a0a0b0; font-size:14px; text-decoration:none; }
.login-btn {
    width:100%; background:linear-gradient(135deg,#00ff88,#0099ff);
    border:none; border-radius:6px; padding:16px;
    color:#0a0a0f; font-weight:600; cursor:pointer;
    position:relative; overflow:hidden; margin-bottom:24px;
}
.btn-glow { position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,0.2); transition:0.5s; }
.login-btn:hover .btn-glow { left:100%; }

/* Social Buttons */
.social-login { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.social-btn {
    background:#1a1a25; border:1px solid #2a2a35; border-radius:6px;
    padding:12px; color:#fff; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.social-btn:hover { border-color:#00ff88; }

/* Signup */
.signup-link { text-align:center; color:#a0a0b0; }
.signup-link a { color:#00ff88; text-decoration:none; }

/* Success */
.success-message {
    display:none;
    text-align:center;
    color:#fff;
}

/* Background Effects */
.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.1),transparent 70%); }
.glow-orb-1 { width:300px;height:300px;top:10%;left:-10%; }
.glow-orb-2 { width:200px;height:200px;top:60%;right:-5%; }
.glow-orb-3 { width:150px;height:150px;bottom:20%;left:10%; }

/* Animations */
@keyframes spin { 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);} }
@media(max-width:480px){.login-card{padding:24px;}}
</style>

JavaScript

<script>
// Simple Password Toggle
const toggle = document.getElementById('passwordToggle');
const passInput = document.getElementById('password');
toggle.addEventListener('click',()=>{
    const type = passInput.type==='password'?'text':'password';
    passInput.type=type;
    toggle.querySelector('.toggle-icon').classList.toggle('show-password');
});

// Simple Form Submit Simulation
document.getElementById('loginForm').addEventListener('submit',(e)=>{
    e.preventDefault();
    document.getElementById('loginForm').style.display='none';
    document.getElementById('successMessage').style.display='block';
});
</script>

Back to Portfolio

Project Gallery

Project Overview

Secure Login – Access Your Account

Project Description

HTML

CSS

JavaScript