WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by dossousandrin
963
dossousandrin
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
31 May 2025
Un code par alejandrokundrah
18 December 2023
Animation de texte en HTML et CSS
26 January 2025
Un code par alqsdeus
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) */