WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario de inicio de sesión con redes sociales
6993
webleb
Publica tu código
Recomendado
11 July 2025
Ruleta de decisiones HTML: ¡Gira la rueda!
22 April 2025
Un código de andres.stahr
19 November 2024
Código de revisión del iPhone 16
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(); }