WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de connexion avec connexion sociale
6992
webleb
Publiez votre code
Recommandé
25 August 2025
Modèle HTML de site Web de film
9 September 2024
Générateur de mot de passe
19 October 2024
Portfolio de développeur HTML V2
index.html
Copy
Webleb
Login
Email
Password
Connect with
styles.css
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); body { background: #3f2b96; font-family: "Inter", "DM Sans", Arial, sans-serif; } form#login-form { background: #fff; width: 38em; margin: 2em auto; overflow: hidden; position: relative; border-radius: 0.3em; } form#login-form div.heading { background: #000000; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; padding: 1.5em; font-size: 1.1em; } form#login-form div.left { width: 50%; float: left; padding: 1.7em 1.5em 2.5em 1.5em; box-sizing: border-box; } div.left label { display: inline-block; color: gray; font-size: 1.1em; margin-top: 0.6em; } div.left input[type="email"], div.left input[type="password"] { border: 0.1em solid #dfdfdf; padding: 1em; margin: 0.6em 0; max-width: 88.5%; outline: none; border-radius: 5px; } div.left input[type="submit"] { background: #000000; color: #fff; outline: none; padding: 1em; overflow: hidden; border: none; letter-spacing: 0.1em; margin: 0.5em 0; border-radius: 0.4em; width: 50%; cursor: pointer; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, hr, input { overflow: visible; } user agent stylesheet input:not([type="range"]):not([type="color"]) { writing-mode: horizontal-tb !important; } form#login-form div.right { width: 50%; float: right; padding: 1.7em 1.5em 2.5em 1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div.right div.connect { color: gray; font-size: 1.1em; text-align: center; } div.right a.facebook { background: #3a589a; margin-top: 0.8em; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.google { background: #d1231a; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.github { background: #000000; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a { display: inline-block; font-size: 1.5em; text-decoration: none; color: white; width: 9em; padding: 0.55em 0.3em; clear: both; text-align: center; margin: 0.5em 0.1em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; }
main.js
Copy
const buttonsComponent = document.querySelector('.buttons'); const buttonsToggle = document.querySelector('.buttons__toggle'); buttonsToggle.addEventListener('click', toggleButtons); function toggleButtons() { buttonsToggle.classList.toggle('buttons__toggle--active'); buttonsComponent.classList.toggle('buttons--active'); document.activeElement.blur(); }