WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de connexion au Glassmorphisme
2904
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 August 2024
Héros de l'éclipse
14 June 2025
Un code de Metehan
13 October 2025
Exemple de code HTML pour le jeu Snake
HTML
Copy
Andev Web
Login Form
Enter your email
Enter your password
Remember me
Forgot password?
Log In
Don't have an account?
Register
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://i.postimg.cc/0jv27Qvw/20008380-645221846.jpg"), #000; background-position: center; background-size: cover; z-index: -1; } .wrapper { width: 400px; border-radius: 15px; padding: 40px; text-align: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); transition: all 0.3s ease; } .wrapper:hover { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); } form { display: flex; flex-direction: column; } h2 { font-size: 2.2rem; margin-bottom: 25px; color: #ffffff; letter-spacing: 1px; } .input-field { position: relative; border-bottom: 2px solid rgba(255, 255, 255, 0.3); margin: 20px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #ffffff; font-size: 16px; pointer-events: none; transition: 0.3s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #ffffff; padding: 0 10px; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.9rem; top: 10px; transform: translateY(-150%); color: #ffdde1; } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #ffffff; } #remember { accent-color: #ffdde1; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #ffdde1; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background-color: #271930; color: #ffffff; font-weight: 600; border: none; padding: 15px 20px; cursor: pointer; border-radius: 25px; font-size: 16px; border: 2px solid transparent; transition: all 0.3s ease; } button:hover { color: #000000; background: rgba(255, 255, 255, 0.2); border-color: #ffffff; } .register { text-align: center; margin-top: 30px; color: #ffffff; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */