WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de Dossousandrin
884
dossousandrin
Abrir en el editor
Publica tu código
Recomendado
16 April 2025
Un código de anhtuanle2004yst
29 July 2025
Desplácese para existir
18 February 2024
Generador de Imágenes
HTML
Copy
Andev Web
Login
Email
Password
Forgot Password?
Login
Signup
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins"; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background: #1f293a; min-height: 100vh; } .container { position: relative; width: 256px; height: 256px; display: flex; justify-content: center; align-items: center; } .container span { position: absolute; left: 0; width: 32px; height: 6px; background: #2c4766; border-radius: 8px; transform-origin: 128px; transform: scale(2.2) rotate(calc(var(--i) * (360deg / 50))); animation: animateBlink 3s linear infinite; animation-delay: calc(var(--i) * (3s / 50)); } @keyframes animateBlink { 0% { background: #0ef; } 25% { background: #2c4766; } } .login-box { position: absolute; width: 400px; } .login-box form { width: 100%; padding: 0 50px; } h2 { font-size: 2em; color: #0ef; text-align: center; } .input-box { position: relative; margin: 25px 0; } .input-box input { width: 100%; height: 50px; background: transparent; border: 2px solid #2c4766; outline: none; border-radius: 40px; font-size: 1em; color: #fff; padding: 0 20px; transition: 0.5s; } .input-box input:focus, .input-box input:valid { border-color: #0ef; } .input-box label { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); font-size: 1em; color: #fff; pointer-events: none; transition: 0.5s ease; } .input-box input:focus ~ label, .input-box input:valid ~ label { top: 1px; font-size: 0.8em; background-color: #1f293a; padding: 0 6px; color: #0ef; } .forgot-password { margin: -15px 0 10px; text-align: center; } .forgot-password a { font-size: 0.85em; color: #fff; text-decoration: none; } .forgot-password a:hover { text-decoration: underline; } .btn { width: 100%; height: 45px; border-radius: 45px; background: #0ef; border: none; outline: none; cursor: pointer; font-size: 1em; color: #1f293a; font-weight: 600; } .signup-link { margin: 20px 0 10px; text-align: center; } .signup-link a { font-size: 1em; color: #0ef; text-decoration: none; font-weight: 600; } .signup-link a:hover { text-decoration: underline; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */