Video Signup Page
HTML / CSS & Video
Full screen video background – Landing signup page.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title></title>
<link href=”https://fonts.googleapis.com/css?family=Lobster&display=swap” rel=”stylesheet”>
<link href=”style/fllscrnsgnp.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!– video –>
<video poster=”media/tour.jpg” id=”bgvid” playsinline autoplay loop muted><source src=”media/tour.mp4″></video>
<!– /video –>
<!– trapezoid –>
<div class=”fsvs_formcontainer_trapezoid”></div>
<!– /trapezoid –>
– – – – – – – – – –
<!– form –>
<div class=”vs_sgn_formwrapper”>
<!– inputs –>
<div class=”vs_sgn_section_container”>
<div class=”vs_sgn_input_error”>Error message comes here</div>
<div class=”vs_sgn_input”><input type=”text” placeholder=”Choose a Username”></div>
<div class=”vs_sgn_input_error”>Error message comes here</div>
<div class=”vs_sgn_input”><input type=”text” placeholder=”Choose a Password”></div>
<div class=”vs_sgn_input_error”>Error message comes here</div>
<div class=”vs_sgn_input”><input type=”text” placeholder=”Enter Your Email”></div>
</div>
<!– /inputs –>
<!– products –>
<div class=”vs_sgn_section_container”>
<div class=”vs_sgn_input_error”>Error message comes here</div>
<!– product –>
<a class=”vs_sgn_product vs_sgn_productone” href=”#”>
<span class=”vs_sgn_productprice”><sup>$</sup>59<sup>.95</sup></span>
<span class=”vs_sgn_producttitle”>great value</span>
<span class=”vs_sgn_producttime”>/ 3 Months</span>
</a>
<!– /product –>
<!– product –>
<a class=”vs_sgn_product vs_sgn_producttwo” href=”#”>
<span class=”vs_sgn_productcheck”></span>
<span class=”vs_sgn_productprice”><sup>$</sup>34<sup>.95</sup></span>
<span class=”vs_sgn_producttitle”>full access</span>
<span class=”vs_sgn_producttime”>/ 1 Month</span>
</a>
<!– /product –>
<!– product –>
<a class=”vs_sgn_product vs_sgn_productthree” href=”#”>
<span class=”vs_sgn_productcheck”></span>
<span class=”vs_sgn_productprice”><sup>$</sup>1<sup>.00</sup></span>
<span class=”vs_sgn_producttitle”>get a taste</span>
<span class=”vs_sgn_producttime”>/ 2 Days</span>
</a>
<!– /product –>
– – – – – – – – – –
body {margin:0; padding:0; font-family:Segoe, “Segoe UI”, “DejaVu Sans”, “Trebuchet MS”, Verdana, “sans-serif”; font-size:0; line-height:0; color:#fff; background:#00a6e4;}
body * {-webkit-box-sizing:border-box; box-sizing:border-box;}
* {transition-property:width; transition-duration:0.2s; transition-timing-function:ease-out;}
div {position: relative;}
ul, li {margin:0; padding:0;}
img {width:100%; height:auto;}
.clear {clear:both;}
video {position:fixed; top:50%; left:50%; width:100%; height:100%; object-fit:cover; z-index:-100; transform:translateX(-50%) translateY(-50%); opacity:0.6;}
.fsvs_formcontainer_trapezoid {z-index:2; position:fixed; transform:skewX(-6deg); transform-origin:top right; top:0; left:0; width:480px; height:100vh; background:rgba(0,10,20,0.8);}
– – – – – – – – – –
.vs_sgn_section_container {margin-bottom:15px;}
.vs_sgn_input_error {width:100%; margin-bottom:5px; padding-right:5px; padding-bottom:2px; padding-left:10px; font-size:12px; line-height:20px; color:#fff; background:#cc4433; border-radius:2px; display:none;}
.vs_sgn_input {margin-bottom:5px;}
.vs_sgn_input input {width:100%; height:50px; padding-left:10px; padding-right:10px; font-size:18px; line-height:50px; background:#fff; border:1px solid #ccc; border-radius:4px; -webkit-appearance:none;}
::-webkit-input-placeholder {font-size:14px; color:#888;}
:-ms-input-placeholder {font-size:14px; color:#888;}
::-moz-placeholder {font-size:14px; color:#888;}
:-moz-placeholder {font-size:14px; color:#888;}
.vs_sgn_product {display:block; position:relative; margin-bottom:5px; height:60px; font-size:44px; font-weight:bold; color:#fff; text-decoration:none; background:#345; border-radius:4px;}
.vs_sgn_productprice {margin-left:74px; line-height:68px;}
.vs_sgn_productprice sup {display:inline-block; vertical-align:top; top:0; font-size:18px; line-height:56px;}
.vs_sgn_producttitle {position:absolute; top:10px; left:72px; font-size:9px; text-transform:uppercase; font-style:italic; color:#00ccff;}
.vs_sgn_producttime {position:absolute; bottom:14px; left:140px; font-size:12px; font-weight:normal;}
– – – – – – – – – –
@media only screen and (max-width:640px) {
.fsvs_formcontainer_trapezoid {transform:skewX(0deg); width:100%; background:rgba(0,10,20,0.7);}
– – – – – – – – – –
Live View
Please click the button for live view
