WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por DEME
706
DEME
Abrir no Editor
Publique Seu Código
Recomendado
16 February 2025
Um código por NotYoEA
26 April 2025
Um Código de Metehan
10 April 2025
Um código de cleanbug411
HTML
Copy
Andev Web
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) */