WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulario con fondo de vídeo
10611
darkcoder
Video
Publica tu código
11
Recomendado
29 August 2024
Interfaz de usuario del reloj: botón oscuro/claro
29 September 2025
Animación de carga CSS con imagen de fondo
10 February 2025
Código de formulario de inicio de sesión HTML CSS
index.html
Copy
Webleb
Login
Login
Not a member?
Sign Up
styles.css
Copy
@import url(https://fonts.googleapis.com/css?family=Inter:300); body{ padding:0; margin:0; font-family: 'Inter'; } .vid-container{ position:relative; height:100vh; overflow:hidden; } .bgvid.back { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } .inner { position: absolute; } .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; border-radius: 7px; } .box{ position:absolute; height:100%; width:100%; font-family:'Inter'; color:#fff; background:rgba(0, 0, 0, 28%); padding:30px 0px; border-radius: 7px; } .box h1{ text-align:center; margin:30px 0; font-size:30px; } .box input{ display:block; width:300px; margin:20px auto; padding:15px; background:rgba(0,0,0,0.2); color:#fff; border-radius: 7px; border:0; } input::placeholder { color: rgb(182, 171, 163); } .signup{ color: rgb(182, 171, 163)!important; } .box input:focus,.box input:active,.box button:focus,.box button:active{ outline:none; } .box button{ background:#2d2f36; border:0; color:#fff; padding:10px; font-size:20px; width:330px; margin:20px auto; display:block; cursor:pointer; border-radius: 7px; } .box button:active{ background:#000000; } .box p{ font-size:14px; text-align:center; } .box p span{ cursor:pointer; color:#666; } @media screen and (max-width: 986px) { .bgvid{ height: 100px!important; } } @media screen and (min-width: 986px) { .bgvid.back { width: 100%; } }
main.js
Copy
// Nothing to copy