HTML Template
127 lines
4.6 KB
Login Page Template
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page Template</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0a0a0f;
color: #e4e4e7;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card {
background: #18181b;
border: 1px solid #27272a;
border-radius: 20px;
padding: 2.5rem;
width: 100%;
max-width: 400px;
}
.logo {
text-align: center;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
color: #6366f1;
}
.subtitle { text-align: center; color: #71717a; font-size: 0.9rem; margin-bottom: 2rem; }
.form-group { margin-bottom: 1.25rem; }
label { display: block; font-size: 0.8rem; font-weight: 600; color: #a1a1aa; margin-bottom: 0.5rem; }
input {
width: 100%;
padding: 0.75rem 1rem;
background: #09090b;
border: 1px solid #27272a;
border-radius: 10px;
color: #e4e4e7;
font-size: 0.9rem;
outline: none;
transition: border-color 0.3s;
}
input:focus { border-color: #6366f1; }
input::placeholder { color: #52525b; }
.remember { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.remember label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8rem; }
.remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: #6366f1; }
.forgot { color: #6366f1; text-decoration: none; font-size: 0.8rem; }
.forgot:hover { text-decoration: underline; }
.btn {
width: 100%;
padding: 0.875rem;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover { background: #4f46e5; }
.divider { text-align: center; margin: 1.5rem 0; color: #52525b; font-size: 0.8rem; position: relative; }
.divider::before, .divider::after {
content: '';
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background: #27272a;
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.social-btn {
width: 100%;
padding: 0.75rem;
background: #09090b;
border: 1px solid #27272a;
border-radius: 10px;
color: #a1a1aa;
font-size: 0.85rem;
cursor: pointer;
margin-bottom: 0.75rem;
transition: border-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.social-btn:hover { border-color: #3f3f46; }
.signup { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: #71717a; }
.signup a { color: #6366f1; text-decoration: none; }
.signup a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="card">
<div class="logo">CDNSnippet</div>
<p class="subtitle">Sign in to your account</p>
<form onsubmit="event.preventDefault(); alert('Login form submitted!');">
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="you@example.com" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="remember">
<label><input type="checkbox"> Remember me</label>
<a href="#" class="forgot">Forgot password?</a>
</div>
<button type="submit" class="btn">Sign In</button>
</form>
<div class="divider">OR</div>
<button class="social-btn">🕵 Continue with Google</button>
<button class="social-btn">📱 Continue with GitHub</button>
<p class="signup">Don't have an account? <a href="#">Sign up</a></p>
</div>
</body>
</html>