Project Gallery
Explore Modern Responsive Login Page in detail
1
/1
100%
Project Overview
Modern Responsive Login Page
Project Description
I have created a modern and responsive login page using HTML, CSS, and JavaScript. The page features a clean and attractive UI design with proper alignment and spacing. A modern color scheme makes the layout visually appealing and user-friendly. The login form includes fields for email/username and password along with a stylish button. It is fully responsive, ensuring smooth display on both desktop and mobile devices. Basic form validation is also implemented with JavaScript for a better user experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login | Access Your Account</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-side">
<div class="welcome-text">
<h1>Welcome Back</h1>
<p>Sign in to access your personalized dashboard, manage your account, and explore exclusive features.</p>
</div>
<div class="features">
<div class="feature">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="feature-text">
<h3>Secure Access</h3>
<p>Your data is protected with enterprise-grade security</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-bolt"></i>
</div>
<div class="feature-text">
<h3>Lightning Fast</h3>
<p>Experience seamless performance and quick loading</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="feature-text">
<h3>Mobile Friendly</h3>
<p>Access your account from any device, anywhere</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div class="login-header">
<h2>Sign In</h2>
<p>Enter your credentials to continue</p>
</div>
<form id="loginForm">
<div class="form-group">
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" class="form-control" id="email" placeholder="Enter your email" required>
</div>
<div class="form-error" id="emailError">Please enter a valid email address</div>
</div>
<div class="form-group">
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" class="form-control" id="password" placeholder="Enter your password" required>
<span class="password-toggle" onclick="togglePassword()">
<i class="fas fa-eye"></i>
</span>
</div>
<div class="form-error" id="passwordError">Password is required</div>
</div>
<div class="remember-forgot">
<label class="remember">
<input type="checkbox" id="remember">
<span>Remember me</span>
</label>
<a href="#" class="forgot-link">Forgot Password?</a>
</div>
<button type="submit" class="login-btn">Sign In</button>
</form>
<div class="divider">
<span>Or continue with</span>
</div>
<div class="social-login">
<button type="button" class="social-btn google-btn">
<i class="fab fa-google"></i>
Google
</button>
<button type="button" class="social-btn facebook-btn">
<i class="fab fa-facebook-f"></i>
Facebook
</button>
</div>
<div class="register-link">
<p>Don't have an account? <a href="#">Sign up now</a></p>
</div>
</div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
display: flex;
max-width: 1000px;
width: 100%;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.left-side {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.left-side::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
transform: rotate(45deg);
}
.welcome-text h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.welcome-text p {
font-size: 1.1rem;
opacity: 0.9;
line-height: 1.6;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.features {
position: relative;
z-index: 2;
}
.feature {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.feature-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
transition: transform 0.3s ease;
}
.feature:hover .feature-icon {
transform: scale(1.1);
}
.feature i {
font-size: 1.2rem;
}
.feature-text {
flex: 1;
}
.feature-text h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 5px;
}
.feature-text p {
font-size: 0.9rem;
opacity: 0.8;
margin: 0;
}
.right-side {
flex: 1;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.login-header {
text-align: center;
margin-bottom: 40px;
}
.login-header h2 {
font-size: 2rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 10px;
}
.login-header p {
color: #718096;
font-size: 1rem;
}
.form-group {
margin-bottom: 25px;
}
.input-group {
position: relative;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a0aec0;
z-index: 2;
}
.form-control {
width: 100%;
padding: 15px 15px 15px 45px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f7fafc;
}
.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background: white;
}
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #a0aec0;
z-index: 2;
}
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.remember {
display: flex;
align-items: center;
}
.remember input {
margin-right: 8px;
accent-color: #667eea;
}
.forgot-link {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.forgot-link:hover {
color: #5a67d8;
}
.login-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.login-btn:active {
transform: translateY(0);
}
.divider {
margin: 30px 0;
position: relative;
text-align: center;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e2e8f0;
}
.divider span {
background: white;
padding: 0 15px;
color: #718096;
position: relative;
z-index: 1;
}
.social-login {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.social-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
}
.social-btn:hover {
border-color: #667eea;
transform: translateY(-1px);
}
.social-btn i {
margin-right: 8px;
font-size: 1.1rem;
}
.google-btn {
color: #db4437;
}
.facebook-btn {
color: #4267b2;
}
.register-link {
text-align: center;
margin-top: 20px;
}
.register-link p {
color: #718096;
}
.register-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.register-link a:hover {
color: #5a67d8;
text-decoration: underline;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
max-width: 400px;
}
.left-side {
padding: 40px 30px;
text-align: center;
}
.welcome-text h1 {
font-size: 2rem;
}
.right-side {
padding: 40px 30px;
}
.social-login {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.left-side, .right-side {
padding: 30px 20px;
}
.welcome-text h1 {
font-size: 1.8rem;
}
.login-header h2 {
font-size: 1.5rem;
}
}
.form-error {
color: #e53e3e;
font-size: 0.875rem;
margin-top: 5px;
display: none;
}
.form-input.error {
border-color: #e53e3e;
}
</style>JavaScript
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
const eyeIcon = document.querySelector('.password-toggle i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
eyeIcon.className = 'fas fa-eye-slash';
} else {
passwordInput.type = 'password';
eyeIcon.className = 'fas fa-eye';
}
}
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email');
const password = document.getElementById('password');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
let isValid = true;
// Reset errors
emailError.style.display = 'none';
passwordError.style.display = 'none';
email.classList.remove('error');
password.classList.remove('error');
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.value || !emailRegex.test(email.value)) {
emailError.style.display = 'block';
email.classList.add('error');
isValid = false;
}
// Password validation
if (!password.value) {
passwordError.style.display = 'block';
password.classList.add('error');
isValid = false;
}
if (isValid) {
// Simulate login process
const loginBtn = document.querySelector('.login-btn');
loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in...';
loginBtn.disabled = true;
setTimeout(() => {
alert('Login successful! (This is a demo)');
loginBtn.innerHTML = 'Sign In';
loginBtn.disabled = false;
}, 2000);
}
});
// Add hover effects to social buttons
document.querySelectorAll('.social-btn').forEach(btn => {
btn.addEventListener('mouseenter', () => {
btn.style.transform = 'translateY(-2px)';
btn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
});
btn.addEventListener('mouseleave', () => {
btn.style.transform = 'translateY(0)';
btn.style.boxShadow = 'none';
});
});
</script>