WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par securearray494
1436
securearray494
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 April 2025
Générateur de mots de passe par SENAPI
5 June 2025
Un code de Yotva
15 May 2025
Un code par nasmacadic
HTML
Copy
Login
Login
Forgot password?
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #151515; } .login-container { background: #1b1b1b; padding: 40px 35px 60px; border-radius: 5px; box-shadow: inset 0 0 1px #272727; width: 370px; } h3 { text-align: center; color: #c7c7c7; font-weight: 600; letter-spacing: 2px; margin-bottom: 30px; } .input-group { margin-top: 20px; position: relative; } .input-group label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: 0.5s; } .input-group input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .input-group input:focus { color: #339933; box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1); background: linear-gradient(#333933, #222922); animation: glow 0.8s ease-out infinite alternate; } .input-group input:focus ~ label, .input-group input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } @keyframes glow { 0% { border-color: #339933; box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1); } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.4); } } .actions { display: flex; flex-direction: column; align-items: center; } .actions button { width: 100%; padding: 10px; background: linear-gradient(#333, #222); color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 30px; letter-spacing: 1px; transition: 0.5s; } .actions button:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } .actions a { font-size: 12px; color: #03e9f4; text-decoration: none; margin-top: 25px; } .actions a:hover { text-decoration: underline; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */