WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par programmationant
1030
programmationant
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 March 2025
Un code par solosimbaa86
7 September 2024
Univers géocentrique
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) */