WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Modèle de formulaire de connexion le plus simple
2,271
btn7
Ouvrir dans l'éditeur
Publiez votre code
0
Recommandé
26 December 2024
Un code par efficientcloud646
10 December 2025
Code source JavaScript du jeu Snake sur Canvas HTML
24 February 2025
Un code par securearray494
HTML
Copy
Login Form
Login
CSS
Copy
.align { display: grid; place-items: center; } :root { --gridMaxWidth: 24em; --gridWidth: 90%; } .grid { inline-size: var(--gridWidth); margin-inline: auto; max-inline-size: var(--gridMaxWidth); } .icon { block-size: 1.25em; display: inline-block; inline-size: 1.25em; line-height: 1.25em; margin-right: 0.625em; text-align: center; vertical-align: middle; } .icon--info { background-color: #e5e5e5; border-radius: 50%; } :root { --bodyBackgroundColor: #eaeaea; --bodyColor: #999; --bodyFontFamily: "Helvetica", "Arial"; --bodyFontFamilyFallback: sans-serif; --bodyFontSize: 0.875rem; --bodyFontWeight: 400; --bodyLineHeight: 1.5; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } body { background-color: var(--bodyBackgroundColor); font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback); font-size: var(--bodyFontSize); font-weight: var(--bodyFontWeight); line-height: var(--bodyLineHeight); margin: 0; min-block-size: 100vh; } :root { --anchorColor: inherit; --anchorHoverColor: #1dabb8; } a { color: var(--anchorColor); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--anchorHoverColor); } fieldset { border: none; margin: 0; } input { appearance: none; border: none; font: inherit; margin: 0; outline: none; padding: 0; } input[type="submit"] { cursor: pointer; } .form input[type="email"], .form input[type="password"] { inline-size: 100%; } :root { --loginBorderRadius: 0.25em; --loginHeaderBackgroundColor: #282830; --loginInputBorderRadius: 0.25em; } .login__header { background-color: var(--loginHeaderBackgroundColor); border-top-left-radius: var(--loginBorderRadius); border-top-right-radius: var(--loginBorderRadius); color: #fff; padding: 1.5em; text-align: center; text-transform: uppercase; } .login__title { font-size: 1rem; margin: 0; } .login__body { background-color: #fff; padding: 1.5em; position: relative; } .login__body::before { background-color: #fff; content: ""; height: 0.5em; left: 50%; margin-left: -0.25em; margin-top: -0.25em; position: absolute; top: 0; transform: rotate(45deg); width: 0.5em; } .login input[type="email"], .login input[type="password"] { border: 0.0625em solid #e5e5e5; padding: 1em 1.25em; } .login input[type="email"] { border-top-left-radius: var(--loginInputBorderRadius); border-top-right-radius: var(--loginInputBorderRadius); } .login input[type="password"] { border-bottom-left-radius: var(--loginInputBorderRadius); border-bottom-right-radius: var(--loginInputBorderRadius); border-top: 0; } .login input[type="submit"] { background-color: #1dabb8; border-radius: var(--loginInputBorderRadius); color: #fff; font-weight: 700; order: 1; padding: 0.75em 1.25em; transition: background-color 0.3s; } .login input[type="submit"]:focus, .login input[type="submit"]:hover { background-color: #198d98; } .login__footer { align-items: center; background-color: #fff; border-bottom-left-radius: var(--loginBorderRadius); border-bottom-right-radius: var(--loginBorderRadius); display: flex; justify-content: space-between; padding-bottom: 1.5em; padding-left: 1.5em; padding-right: 1.5em; } .login__footer p { margin: 0; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */