Project Gallery
Explore Futuristic Login & Register in detail
1
/1
100%
Project Overview
Futuristic Login & Register
Project Description
Our design combines modern glassmorphism aesthetics with a sleek, user-friendly interface. The frosted glass effect, semi-transparent elements, and subtle shadows create a sense of depth and elegance. Smooth transitions ensure a seamless switch between login and registration forms, while interactive elements feature fluid hover effects for an engaging experience.
With rounded input fields, built-in icons, password visibility toggles, and social login options, the UI feels both intuitive and functional. The clean, minimalist layout adapts to all screen sizes, ensuring mobile responsiveness without compromising style. A vibrant gradient background and decorative circles add a touch of creativity, while a consistent color scheme ties everything together for a professional and modern look.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Login & Register</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body {
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Orbitron', sans-serif;
color: #e2e8f0;
}
.background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.card {
background: rgba(22, 33, 62, 0.95);
border: 2px solid #0ea5e9;
border-radius: 20px;
box-shadow: 0 0 50px rgba(14, 165, 233, 0.5);
width: 100%;
max-width: 480px;
padding: 50px 35px;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, rgba(14, 165, 233, 0.1), rgba(139, 92, 246, 0.1));
animation: rotate 20s linear infinite;
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.toggle-btn {
background: linear-gradient(45deg, #0ea5e9, #8b5cf6);
border: none;
padding: 12px 25px;
border-radius: 12px;
color: white;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}
.toggle-btn:hover {
box-shadow: 0 0 30px rgba(14, 165, 233, 0.6);
transform: scale(1.05);
}
.active {
background: linear-gradient(45deg, #f59e0b, #ef4444) !important;
}
.input-group {
margin-bottom: 25px;
position: relative;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
border: 2px solid #0ea5e9;
border-radius: 10px;
background: rgba(14, 165, 233, 0.1);
color: #e2e8f0;
font-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-group input::placeholder {
color: #94a3b8;
}
.input-group input:focus {
border-color: #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
outline: none;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #0ea5e9;
font-size: 18px;
}
.btn-submit {
background: linear-gradient(45deg, #0ea5e9, #8b5cf6);
border: none;
color: white;
padding: 15px;
border-radius: 10px;
width: 100%;
cursor: pointer;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}
.btn-submit:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(14, 165, 233, 0.6);
}
.link {
color: #cbd5e1;
text-decoration: none;
}
.link:hover {
color: #f59e0b;
text-decoration: underline;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
background: #0ea5e9;
border-radius: 50%;
animation: float 10s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@media (max-width: 640px) {
.card {
width: 90%;
padding: 40px 25px;
}
}
</style>
</head>
<body>
<div class="background-overlay">
<img src="https://placehold.co/1920x1080" alt="Futuristic cyberpunk cityscape at night with neon-lit skyscrapers, holographic billboards displaying advanced tech icons, flying drones in a rainy atmosphere with glowing circuits and star-like particles in the sky above" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display='none';" />
</div>
<div class="particles">
<div class="particle" style="width: 4px; height: 4px; left: 10%; top: 20%; animation-delay: 0s;"></div>
<div class="particle" style="width: 6px; height: 6px; left: 80%; top: 50%; animation-delay: 2s;"></div>
<div class="particle" style="width: 3px; height: 3px; left: 50%; top: 80%; animation-delay: 4s;"></div>
</div>
<div class="card">
<h2 class="text-4xl font-bold text-center mb-8">Neural Interface</h2>
<div class="flex justify-center space-x-6 mb-8">
<button class="toggle-btn active" onclick="showForm('login')">Login</button>
<button class="toggle-btn" onclick="showForm('register')">Register</button>
</div>
<!-- Login Form -->
<form id="login-form" class="form-container">
<div class="input-group">
<i class="fas fa-user-robot"></i>
<input type="text" placeholder="Username or ID" required>
</div>
<div class="input-group">
<i class="fas fa-shield-alt"></i>
<input type="password" placeholder="Access Code" required>
</div>
<button type="submit" class="btn-submit">Initiate Login</button>
<p class="text-center mt-6"><a href="#" class="link">Recover Access?</a></p>
</form>
<!-- Register Form -->
<form id="register-form" class="form-container hidden">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="input-group">
<i class="fas fa-atom"></i>
<input type="text" placeholder="First Node" required>
</div>
<div class="input-group">
<i class="fas fa-atom"></i>
<input type="text" placeholder="Last Node" required>
</div>
</div>
<div class="input-group">
<i class="fas fa-satellite-dish"></i>
<input type="email" placeholder="Transmission Email" required>
</div>
<div class="input-group">
<i class="fas fa-shield-alt"></i>
<input type="password" placeholder="Encryption Key" required>
</div>
<div class="input-group">
<i class="fas fa-shield-alt"></i>
<input type="password" placeholder="Confirm Encryption" required>
</div>
<button type="submit" class="btn-submit">Create Quantum Account</button>
<p class="text-center mt-6 text-sm text-gray-400">
By connecting, you accept our <a href="#" class="link">AI Terms</a> and <a href="#" class="link">Data Protocols</a>.
</p>
</form>
</div>
<script>
function showForm(type) {
const l = document.getElementById('login-form');
const r = document.getElementById('register-form');
const lb = document.querySelector('button[onclick*="login"]');
const rb = document.querySelector('button[onclick*="register"]');
if (type === 'login') {
l.classList.remove('hidden');
r.classList.add('hidden');
lb.classList.add('active');
rb.classList.remove('active');
} else {
r.classList.remove('hidden');
l.classList.add('hidden');
rb.classList.add('active');
lb.classList.remove('active');
}
}
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', event => {
const inputs = form.querySelectorAll('input[required]');
let isValid = true;
let message = 'All fields must be filled for cyber security!';
inputs.forEach(input => {
if (!input.value.trim()) {
input.style.borderColor = '#ef4444';
isValid = false;
} else {
input.style.borderColor = '#0ea5e9';
}
});
if (!isValid) {
alert(message);
event.preventDefault();
} else {
alert('Quantum connection established! (Demo mode activated)');
event.preventDefault();
}
});
});
</script>
</body>
</html>
</content>
</create_file>
<create_file>
<path>login_register_vintage.html</path>
<content>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vintage Login & Register</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body {
background: #fdf6e3;
background-image: url('https://via.placeholder.com/1920x1080?text=Vintage+Texture');
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Playfair Display', serif;
color: #2d1b69;
}
.card {
background: #f4f1de;
border: 4px solid #8a2be2;
border-radius: 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
width: 100%;
max-width: 500px;
padding: 60px 40px;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
background: #2d1b69;
z-index: -1;
border-radius: 0;
}
.toggle-btn {
background: #8a2be2;
border: 2px solid #2d1b69;
color: #f4f1de;
padding: 12px 20px;
border-radius: 0;
cursor: pointer;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.toggle-btn:hover {
background: #f4f1de;
color: #8a2be2;
}
.active {
background: #f4f1de !important;
color: #8a2be2 !important;
transform: scale(1.05);
}
.input-group {
margin-bottom: 25px;
}
.input-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #8a2be2;
border-radius: 0;
background: #fdf6e3;
color: #2d1b69;
font-size: 16px;
font-family: 'Times New Roman', serif;
transition: background 0.3s ease;
}
.input-group input:focus {
background: #f4f1de;
outline: none;
}
.btn-submit {
background: #2d1b69;
border: 2px solid #8a2be2;
color: #f4f1de;
padding: 15px;
border-radius: 0;
width: 100%;
cursor: pointer;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 2px;
transition: transform 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-3px);
background: #8a2be2;
}
.link {
color: #8a2be2;
text-decoration: underline;
}
.link:hover {
color: #2d1b69;
}
.ornament {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
@media (max-width: 640px) {
.card {
width: 90%;
padding: 40px 30px;
}
}
</style>
</head>
<body>
<div class="card">
<div class="ornament">❦</div>
<h2 class="text-3xl font-bold text-center mb-8">Authentic Portal</h2>
<div class="flex justify-center space-x-4 mb-8">
<button class="toggle-btn active" onclick="showForm('login')">Sign In</button>
<button class="toggle-btn" onclick="showForm('register')">Enroll</button>
</div>
<!-- Login Form -->
<form id="login-form" class="form-container">
<div class="input-group">
<input type="email" placeholder="Your Correspondence Address" required>
</div>
<div class="input-group">
<input type="password" placeholder="Secret Cipher" required>
</div>
<button type="submit" class="btn-submit">Enter Manor</button>
<p class="text-center mt-6">
<a href="#" class="link">Need a Reminder?</a>
</p>
</form>
<!-- Register Form -->
<form id="register-form" class="form-container hidden">
<div class="grid grid-cols-2 gap-4 mb-6">
<input type="text" placeholder="Given Name" required>
<input type="text" placeholder="Family Name" required>
</div>
<div class="input-group">
<input type="email" placeholder="Correspondence" required>
</div>
<div class="input-group">
<input type="password" placeholder="Cipher" required>
</div>
<div class="input-group">
<input type="password" placeholder="Recite Cipher" required>
</div>
<button type="submit" class="btn-submit">Join Society</button>
<p class="text-center mt-6 text-sm text-gray-700">
With agreement to <a href="#" class="link">Decorum Rules</a> and <a href="#" class="link">Confidentiality Pact</a>.
</p>
</form>
</div>
<script>
function showForm(type) {
const l = document.getElementById('login-form');
const r = document.getElementById('register-form');
const lb = document.querySelector('button[onclick*="login"]');
const rb = document.querySelector('button[onclick*="register"]');
if (type === 'login') {
[l,r,lb,rb] = [l.classList.remove('hidden'), r.classList.add('hidden'), lb.classList.add('active'), rb.classList.remove('active')];
} else {
l.classList.add('hidden');
r.classList.remove('hidden');
lb.classList.remove('active');
rb.classList.add('active');
}
}
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', event => {
[...form.querySelectorAll('input[required]')].forEach(inp => {
if (!inp.value.trim()) {
inp.style.borderColor = '#ef4444';
} else {
inp.style.borderColor = '#8a2be2';
}
});
const allFilled = [...form.querySelectorAll('input[required]')].every(i => i.value.trim());
if (!allFilled) {
alert('Please complete all elegant details');
event.preventDefault();
} else {
alert('Welcome to the Estate! (Demonstration)');
event.preventDefault();
}
});
});
</script>
</body>
</html>
</content>
</create_file>
<create_file>
<path>login_register_nature.html</path>
<content>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nature-Inspired Login & Register</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Nunito', sans-serif;
color: #fdf6e3;
}
.background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 3px solid #16a34a;
border-radius: 25px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
width: 100%;
max-width: 460px;
padding: 50px 35px;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: linear-gradient(90deg, #4ade80, #22c55e, #16a34a);
z-index: -1;
}
.leaf-icon {
position: absolute;
color: #16a34a;
opacity: 0.2;
animation: sway 5s ease-in-out infinite;
}
.leaf-icon:nth-child(1) { top: 10%; left: 10%; }
.leaf-icon:nth-child(2) { top: 70%; right: 15%; animation-delay: 1s; }
.leaf-icon:nth-child(3) { top: 50%; left: 80%; animation-delay: 2s; }
@keyframes sway {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(5deg); }
}
.toggle-btn {
background: #16a34a;
border: 2px solid #4ade80;
color: #fdf6e3;
padding: 10px 20px;
border-radius: 15px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.toggle-btn:hover {
background: #4ade80;
transform: scale(1.05);
}
.active {
background: #fef3c7 !important;
color: #16a34a !important;
}
.input-group {
margin-bottom: 25px;
position: relative;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
border: 2px solid #22c55e;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
color: #2d3235;
font-size: 16px;
transition: border-color 0.3s ease;
}
.input-group input:focus {
border-color: #4ade80;
outline: none;
}
.input-group i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #16a34a;
font-size: 18px;
}
.btn-submit {
background: linear-gradient(45deg, #16a34a, #22c55e);
border: none;
color: white;
padding: 15px;
border-radius: 12px;
width: 100%;
cursor: pointer;
font-weight: bold;
font-size: 18px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(22, 197, 94, 0.4);
}
.link {
color: #16a34a;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
color: #22c55e;
}
@media (max-width: 640px) {
.card {
width: 90%;
padding: 40px 25px;
}
}
</style>
</head>
<body>
<div class="background-overlay">
<img src="https://placehold.co/1920x1080" alt="Serene forest landscape with towering ancient trees in a lush green environment, sunlight filtering through dense foliage, wildflowers blooming on the forest floor, distant mountains in the misty horizon, creating a peaceful and natural atmosphere" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display='none';" />
</div>
<div class="card">
<i class="fas fa-leaf leaf-icon"></i>
<i class="fas fa-seedling leaf-icon"></i>
<i class="fas fa-tree leaf-icon"></i>
<h2 class="text-4xl font-bold text-center mb-8" style="color: #16a34a;">Nature's Gateway</h2>
<div class="flex justify-center space-x-6 mb-8">
<button class="toggle-btn active" onclick="showForm('login')">Bloom In</button>
<button class="toggle-btn" onclick="showForm('register')">Grow Together</button>
</div>
<!-- Login Form -->
<form id="login-form" class="form-container">
<div class="input-group">
<i class="fas fa-envelope-open"></i>
<input type="email" placeholder="Forest Email" required>
</div>
<div class="input-group">
<i class="fas fa-key"></i>
<input type="password" placeholder="Secret Whisper" required>
</div>
<button type="submit" class="btn-submit">Enter Grove</button>
<p class="text-center mt-6"><a href="#" class="link">Forgot the Path?</a></p>
</form>
<!-- Register Form -->
<form id="register-form" class="form-container hidden">
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="input-group">
<i class="fas fa-leaf"></i>
<input type="text" placeholder="First Branch" required>
</div>
<div class="input-group">
<i class="fas fa-leaf"></i>
<input type="text" placeholder="Last Bloom" required>
</div>
</div>
<div class="input-group">
<i class="fas fa-envelope-open"></i>
<input type="email" placeholder="Wild Email" required>
</div>
<div class="input-group">
<i class="fas fa-key"></i>
<input type="password" placeholder="Root Key" required>
</div>
<div class="input-group">
<i class="fas fa-key"></i>
<input type="password" placeholder="Echo Key" required>
</div>
<button type="submit" class="btn-submit">Root Here</button>
<p class="text-center mt-6 text-sm text-gray-700">
Nurture with <a href="#" class="link">Growth Terms</a> and <a href="#" class="link">Eco Policies</a>.
</p>
</form>
</div>
</body>
</html>CSS
JavaScript
<script>
function showForm(type) {
const login = document.getElementById('login-form');
const reg = document.getElementById('register-form');
const loginBtn = document.querySelector('button[onclick*="login"]');
const regBtn = document.querySelector('button[onclick*="register"]');
if (type === 'login') {
login.classList.remove('hidden');
reg.classList.add('hidden');
loginBtn.classList.add('active');
regBtn.classList.remove('active');
} else {
reg.classList.remove('hidden');
login.classList.add('hidden');
regBtn.classList.add('active');
loginBtn.classList.remove('active');
}
}
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', event => {
const inputs = [...form.querySelectorAll('input[required]')];
let valid = true;
inputs.forEach(input => {
if (!input.value.trim()) {
input.style.borderColor = '#ef4444';
valid = false;
} else {
input.style.borderColor = '#22c55e';
}
});
if (!valid) {
alert('Cultivate all fields to thrive!');
event.preventDefault();
} else {
alert('Welcome to the Ecosystem! (Demo)');
event.preventDefault();
}
});
});
</script>