WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por programmationant
1211
programmationant
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
30 March 2025
Um código por ytr3d3
18 October 2024
Modelo de site de portfólio HTML CSS
29 May 2025
Um código de mathieu.ratro
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.9) 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) */