"cta-base"
Bootstrap 4.0.0 Snippet by mrservon22

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="LayoutIt!"> <title>Sangam Patel's Professional Profile Website</title> <!-- css --> <meta name="description" content="Source code generated using layoutit.com"> <script src="http://sangampatel.com/MooTools-Core-1.6.0.js"> </script> <!--[if (gte IE 6)&(lte IE 8)]> <script src="selectivizr-min.js"> </script> <![endif]--> <!-- styles --> <link href="assets/normalize.css" rel="stylesheet" type="text/css" /> <link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- <link href="css/style.css" rel="stylesheet" type="text/css" /> --> </head> <body> <section class="container-fluid" id="jumbotron1"> <div class="jumbotron jumbotron-fluid"> <div id="videoDiv" class="row"> <div id="videoBlock" class="col-xs-12"> <video preload="preload" id="video" autoplay="autoplay" loop="loop"> <source src="http://sangampatel.com/assets/vid/flyover.mp4" type="video/mp4"></source> </video> <div id="videoMessage"> <h1 class="spacer">The Early Bird...</h1> <h2 class="spacer">...has the best holiday.</h2> <h3 class="spacer">Boat rentals in France</h3> <p class="videoClick" ><a href="https://www.hotelsafloat.com/home-away.php">Click here and be impressed</a></p> </div> </div> </div> </div> </section> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br> <section class="container-fluid" id="jumbotron2"> <div class="jumbotron jumbotron-fluid"> <div id="videoDiv" class="row"> <div id="videoBlock" class="col-xs-12"> <video preload="preload" id="video" autoplay="autoplay" loop="loop"> <source src="http://sangampatel.com/assets/vid/flyover.mp4" type="video/mp4"></source> </video> <div id="videoMessage"> <h1 class="spacer">The Early Bird...</h1> <h2 class="spacer">...has the best holiday.</h2> <h3 class="spacer">Boat rentals in France</h3> <p class="videoClick" ><a href="https://www.hotelsafloat.com/home-away.php">Click here and be impressed</a></p> </div> </div> </div> </div> </section> <div class="container-fluid content"> <video autoplay="" loop="" muted="" poster=" http://sangampatel.com/assets/img/SFGotham.poster.jpg" playsinline=""> <!--source(src=CDN+"assets/bg-video-1-5x.mp4" type="video/mp4")--> <source src="https://storage.googleapis.com/usaa-flyover/assets/site-bg-video-reco_.mp4" type="video/mp4"> </video> <div class="row background"> <div class="col-xs-12 jumbotron jumbotron-fluid"> <h1 class="display-4 text-light">Best Vacation Rentals</h1> <p class="lead text-light">Sed placerat fringilla quam et.</p> <button type="button" class="btn btn-primary btn-lg">Start Now!</button> </div> </div> </div> <div class="overlay"> <div class="pattern"> <div class="blueTint"> </div> <div id="page-wrapper"> <div id="wrapper"> <section class="main" id="main"> <div class="inner"> <div class="row"> <div class="12u$"> <div id="videoDiv"> <div id="videoBlock"> <div id="videoMessage"> <p class="videoClick"> <a href="https://www.hotelsafloat.com/home-away.php">Click here and be impressed</a> </p> </div> </div> </div> </div> </div> </div> </section> </div> </div> <script language="JavaScript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script language="JavaScript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script> <script language="JavaScript" type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script> <script language="JavaScript" type="text/javascript"> function init() {window.addEventListener('scroll', function(e){var distanceY = window.pageYOffset || document.documentElement.scrollTop,shrinkOn = 170,header = document.querySelector("header"); if (distanceY > shrinkOn) { classie.add(header,"smaller");} else {if (classie.has(header,"smaller")) {classie.remove(header,"smaller");} } }); } window.onload = init(); </script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $('.customer-logos').slick({slidesToShow: 6,slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, arrows: false, dots: false, pauseOnHover: false, responsive: [{breakpoint: 768, settings: { slidesToShow: 4}},{breakpoint: 520, settings: {slidesToShow: 3}}] }); }); </script> <script language="JavaScript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"> </script> <script language="JavaScript" type="text/javascript" src="http://sangampatel.com/js/index.min.js"> </script> </body>
#videoDiv {width: 100%; height:200px; position: relative;} #videoBlock {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} #videoMessage {width: 100%; height:100%; position: absolute; top: 0; left: 0;} #videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:99 } #videoMessage h1, h2, h3, p {font-size: 2em;color:#ffffff;text-align:center;} #videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;} .videoClick {text-align:center} .videoClick a {color:white; background-color:rgba(241, 241, 241, 0.25); font-size: 1.6em;cursor:pointer;cursor:hand}

Related: See More


Questions / Comments: