WEBLEB
Inicio
Editora de código
Chat comunidad
Iniciar sesión
Pro
Español
English
Français
Español
Página de inicio de sesión
2,039
nevax
0
Remix
Abrir en el editor
Pantalla completa
Comentar
Publica tu código
1
Recomendado
13 November 2024
Menú de navegación
24 May 2024
animaciones de tarjetas
25 March 2025
Un código de andrej.social.network
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