WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
साइबरपंक लॉगिन फ़ॉर्म HTML टेम्पलेट
576
codex
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
18 June 2023
सिम्पल लॉगिन फॉर्म
20 September 2025
HTML सूरजमुखी लॉगिन फ़ॉर्म टेम्पलेट
2 July 2025
वर्चुअल कीबोर्ड HTML CSS जावास्क्रिप्ट
HTML
Copy
Cyberpunk Login
SYSTEM_ACCESS
IDENTITY
PASSPHRASE
INITIALIZE_LINK
CSS
Copy
:root { --neon-cyan: #00f3ff; --neon-pink: #ff00ff; --dark-bg: #050505; --card-bg: rgba(10, 10, 10, 0.6); --text-main: #e0e0e0; --font-display: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-bg); color: var(--text-main); font-family: var(--font-body); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%), linear-gradient(0deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px); background-size: 100% 100%, 40px 40px, 40px 40px; perspective: 1000px; } .scene { transform-style: preserve-3d; animation: float 6s ease-in-out infinite; } .login-card { position: relative; width: 380px; padding: 40px; background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid rgba(0, 243, 255, 0.2); box-shadow: 0 0 20px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(0, 243, 255, 0.05); transform: rotateX(5deg) rotateY(5deg); transition: transform 0.3s ease; clip-path: polygon( 0 0, 100% 0, 100% 85%, 90% 100%, 0 100% ); } .login-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--neon-cyan), transparent, var(--neon-pink)); z-index: -1; clip-path: polygon( 0 0, 100% 0, 100% 85%, 90% 100%, 0 100% ); opacity: 0.3; } .login-card:hover { transform: rotateX(0deg) rotateY(0deg) scale(1.02); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 30px rgba(0, 243, 255, 0.1); } .card-header { text-align: center; margin-bottom: 40px; } h1.glitch { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--neon-cyan); position: relative; text-shadow: 2px 2px var(--neon-pink); } h1.glitch::before, h1.glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); } h1.glitch::before { left: 2px; text-shadow: -1px 0 var(--neon-pink); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } h1.glitch::after { left: -2px; text-shadow: -1px 0 var(--neon-cyan); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; } .input-group { position: relative; margin-bottom: 30px; } input { width: 100%; padding: 10px 0; font-size: 1.1rem; color: var(--text-main); background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); outline: none; font-family: var(--font-body); letter-spacing: 1px; transition: 0.3s; } label { position: absolute; top: 10px; left: 0; font-size: 1rem; color: rgba(255, 255, 255, 0.5); pointer-events: none; transition: 0.3s; font-family: var(--font-display); font-size: 0.8rem; } input:focus ~ label, input:valid ~ label { top: -20px; color: var(--neon-cyan); font-size: 0.7rem; } .bar { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--neon-cyan); transition: 0.3s; box-shadow: 0 0 10px var(--neon-cyan); } input:focus ~ .bar, input:valid ~ .bar { width: 100%; } .cyber-btn { width: 100%; padding: 15px; background: transparent; border: 1px solid var(--neon-cyan); color: var(--neon-cyan); font-family: var(--font-display); font-size: 1rem; cursor: pointer; position: relative; overflow: hidden; transition: 0.3s; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; } .cyber-btn:hover { background: rgba(0, 243, 255, 0.1); box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); text-shadow: 0 0 5px var(--neon-cyan); } .cyber-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent); transition: 0.5s; } .cyber-btn:hover::before { left: 100%; } .card-footer { margin-top: 30px; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; } .status { color: var(--neon-pink); animation: blink 2s infinite; } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(5deg); } 50% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes glitch-anim { 0% { clip: rect(30px, 9999px, 10px, 0); } 20% { clip: rect(80px, 9999px, 90px, 0); } 40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(60px, 9999px, 20px, 0); } 80% { clip: rect(20px, 9999px, 70px, 0); } 100% { clip: rect(90px, 9999px, 30px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(60px, 9999px, 20px, 0); } 20% { clip: rect(10px, 9999px, 50px, 0); } 40% { clip: rect(90px, 9999px, 30px, 0); } 60% { clip: rect(30px, 9999px, 10px, 0); } 80% { clip: rect(70px, 9999px, 20px, 0); } 100% { clip: rect(20px, 9999px, 80px, 0); } } /* Responsive */ @media (max-width: 480px) { .login-card { width: 90%; margin: 20px; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */