WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Login Page
1224
nevax
Open In Editor
Publish Your Code
Recommended
28 May 2025
Futuristic login form
21 January 2025
Real Estate Agency Landing Page
19 May 2025
KEVAKIB LOGIN
HTML
Copy
Connexion Ultime
Bienvenue
Nom d'utilisateur
Mot de passe
Se connecter
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap'); body { margin: 0; font-family: 'Orbitron', sans-serif; background: radial-gradient(#0a0a23, #000); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; color: #fff; } .background-stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; } .background-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; } .star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; animation: twinkle 4s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } .shape { position: absolute; opacity: 0.7; } .circle { width: 40px; height: 40px; background: rgba(255, 0, 150, 0.8); border-radius: 50%; } .square { width: 40px; height: 40px; background: rgba(0, 200, 255, 0.8); } .triangle { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid rgba(0, 255, 150, 0.8); } .login-container { background: rgba(15, 15, 30, 0.95); padding: 3rem; border-radius: 20px; box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; width: 100%; max-width: 420px; animation: pulse 5s infinite; z-index: 1; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; } 50% { box-shadow: 0 0 60px #ff66ff, 0 0 100px #00ffe1 inset; } } .login-container h2 { text-align: center; margin-bottom: 2rem; font-size: 2rem; color: #ff66ff; text-shadow: 0 0 15px #ff66ff, 0 0 25px #00ffe1; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #00ffe1; text-shadow: 0 0 10px #00ffe1; } .form-group input { width: 100%; padding: 0.75rem; border: none; border-radius: 12px; background-color: #111; color: #fff; box-shadow: 0 0 15px #ff00ff inset; font-size: 1rem; } .form-group input:focus { outline: none; box-shadow: 0 0 20px #ff00ff inset, 0 0 10px #00ffe1; } button { width: 100%; padding: 1rem; background: linear-gradient(135deg, #ff00ff, #00ffe1); color: #000; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: bold; cursor: pointer; box-shadow: 0 0 25px #ff00ff; transition: all 0.4s ease; } button:hover { transform: scale(1.05); box-shadow: 0 0 35px #ff00ff, 0 0 50px #00ffe1; } .footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: #ccc; text-shadow: 0 0 5px #00ffe1; }
JS
Copy