WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de connexion HTML simple et gratuit
3653
lebdev
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
1 November 2024
Site Web de portfolio HTML avec menu latéral
19 October 2024
Portfolio de développeur HTML V2
22 April 2023
Menu déroulant CSS
HTML
Copy
Login Form
Login
Username
Password
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); html { height: 100%; font-family: Montserrat; } .login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box 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; } .login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */