WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1690
btn7
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2024
Carta dei piani Anes
29 April 2025
Portafoglio personale
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) */