WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Form with Video Background
9521
darkcoder
Publish Your Code
Recommended
29 August 2024
Animated Continuous Sections with GSAP Observer
16 January 2025
F1 Drivers 2024 - circular gallery with thumbs
23 July 2024
Login with registration
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