"Bootstrap v4 Landing Page Template with video header"
Bootstrap 4.1.1 Snippet by adriano3429

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 4 generator example page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css "> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <style> .bg-overlay{ background: rgba(0,0,0, .7); position: absolute; top: -60px; bottom: -100px; left: 0; right:0; z-index: 0; } video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(facade.jpg) no-repeat; background-size: cover; -webkit-transition: 1s opacity; transition: 1s opacity; z-index: 0; } .ov-hidden{ overflow: hidden; } </style> <!-- Plugins --> </head> <body> <nav class="navbar navbar-light bg-white navbar-expand-md"> <div class="container"> <a class="navbar-brand" href="#"> <img src="http://via.placeholder.com/102x30/007bff/ffffff?text=logo" height="30" alt="image"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav3"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Team</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <a class="btn btn-outline-dark ml-md-3" href="#">Button</a> </div> </div> </nav> <section class="ov-hidden pt-5 pb-5 bg-dark position-relative" style="min-height:100vh; background-image: url(https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80); background-size: cover;"> <!--video component --> <video playsinline="" autoplay="true" muted="true" loop="true" poster="http://casagiacometti.com/photo/facade.JPG" id="bgvid"> <source src="http://casagiacometti.com/rain.webm" type="video/webm"> <!--<source srcRA="rain.mp4" type="video/mp4">--> </video> <div class="bg-overlay"></div> <div class="container pt-5 pb-5 position-relative"> <div class="row d-flex justify-content-between pt-lg-5 align-items-center"> <div class="col-xl-5 col-lg-6 col-md-7 text-center text-lg-left mb-5 mb-lg-0"> <h1 class="display-3 font-weight-bold text-white" data-aos="fade-up">Build better websites faster</h1> <div class="my-4" data-aos="fade-up"> <p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed sem sagittis cursus.</p> </div> <div class="d-flex justify-content-center justify-content-lg-start" data-aos="fade-up"> <div class="d-flex mr-2"> <i class="fas fa-star fa-lg text-warning m-1"></i> <i class="fas fa-star fa-lg text-warning m-1"></i> <i class="fas fa-star fa-lg text-warning m-1"></i> <i class="fas fa-star fa-lg text-warning m-1"></i> <i class="fas fa-star fa-lg text-warning m-1"></i> </div> <span class="text-white">(Average score: 4.9/5)</span> </div> </div> <div class="col"> <div class="row justify-content-center"> <div class="col-xl-8 col-md-10"> <form class="position-relative d-block" data-aos="fade-up"> <div class="form-group"> <label class="text-white" for="course-name-1">Your Name</label> <input name="course-name" id="course-name-1" type="text" class="form-control form-control-lg" placeholder="Type your name"> </div> <div class="form-group"> <label class="text-white" for="course-email-1">Email Address</label> <input name="course-email" id="course-email-1" type="email" class="form-control form-control-lg" placeholder="you@yoursite.com"> </div> <div class="form-group"> <div class="row"> <div class="col-12"> <div class="form-group mb-1"> <label class="text-white">Skill Level:</label> </div> </div> <div class="col"> <div class="form-group rounded bg-white p-2 border"> <div class="custom-control custom-radio"> <input type="radio" id="course-radio-beginner-1" name="course-radio-1" class="custom-control-input"> <label class="custom-control-label" for="course-radio-beginner-1">Beginner</label> </div> </div> </div> <div class="col"> <div class="form-group rounded bg-white p-2 border"> <div class="custom-control custom-radio"> <input type="radio" id="course-radio-advanced-1" name="course-radio-1" class="custom-control-input"> <label class="custom-control-label" for="course-radio-advanced-1">Advanced</label> </div> </div> </div> </div> </div> <div class="form-group text-center"> <button class="btn btn-lg btn-success btn-block mb-2" type="submit">Claim your free spot</button> <small class="text-white">You’ll recieve your first lesson via email in less than a minute.</small> </div> </form> </div> </div> </div> </div> </div> </section> <section class="pt-5 pb-5 bg-light" style=""> <div class="container pt-5 pb-5"> <div class="row d-flex justify-content-between"> <div class="col-md-6"> <h3 class=" display-4 font-weight-bold" data-aos="fade-up">Start building beautiful websites</h3> <p class="lead mt-4" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> <div class="row row-grid"> <div class="col-xs-4 col-md-4 my-1 " data-aos="fade-up"> <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid"> </div> <div class="col-xs-4 col-md-4 my-1" data-aos="fade-up"> <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid"> </div> <div class="col-xs-4 col-md-4 my-1" data-aos="fade-up"> <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid"> </div> </div> </div> <div class="col-md-5" data-aos="fade-up"> <div id="carouselExampleTestimonials" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item"> <div class="container-fluid"> <div class="row justify-content-center d-flex "> <div class="col-md-12 card px-5 text-dark py-5"> <div class="d-flex justify-content-center justify-content-lg-start"> <div class="d-flex mr-2"> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> </div> </div> <blockquote class="blockquote blockquote-reverse mt-4"> <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p> <div class="mt-3 d-flex align-items-center pt-2"> <div class="mr-3"> <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user"> </div> <div class="d-block"> <p class="mb-0">User Name</p> <p class="small">Designer</p> </div> </div> </blockquote> </div> </div> </div> </div> <div class="carousel-item"> <div class="container-fluid"> <div class="row justify-content-center d-flex "> <div class="col-md-12 card px-5 text-dark py-5"> <div class="d-flex justify-content-center justify-content-lg-start"> <div class="d-flex mr-2"> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> </div> </div> <blockquote class="blockquote blockquote-reverse mt-4"> <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p> <div class="mt-3 d-flex align-items-center pt-2"> <div class="mr-3"> <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user"> </div> <div class="d-block"> <p class="mb-0">User Name</p> <p class="small">Designer</p> </div> </div> </blockquote> </div> </div> </div> </div> <div class="carousel-item active"> <div class="container-fluid"> <div class="row justify-content-center d-flex "> <div class="col-md-12 card px-5 text-dark py-5"> <div class="d-flex justify-content-center justify-content-lg-start"> <div class="d-flex mr-2"> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> <i class="fas fa-star text-warning mr-1"></i> </div> </div> <blockquote class="blockquote blockquote-reverse mt-4"> <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p> <div class="mt-3 d-flex align-items-center pt-2"> <div class="mr-3"> <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user"> </div> <div class="d-block"> <p class="mb-0">User Name</p> <p class="small">Designer</p> </div> </div> </blockquote> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="mb-0 mt-0"> <div class="footer text-white"> <div class=" bg-dark pt-5 pb-5"> <div class="container"> <div class="row mb-5"> <div class="col"> <div class="card card-body border-0 mb-0 bg-info text-light px-md-5 py-md-4 shadow-lg" style="overflow:hidden" data-aos="zoom-out-down"> <div class="position-relative d-flex flex-column py-md-2 flex-md-row justify-content-between align-items-center"> <div class="h3 text-center mb-md-0">Start building beautiful websites</div> <a href="https://gumroad.com/blueprintsapp" class="btn btn-lg btn-light py-md-3 px-md-5 text-info font-weight-bold"> GET FREE TEMPLATE >> </a> </div> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-3"> <a href="#"> <svg class="d-block mb-4" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"> <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path> <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path> </svg> </a> <address class="color-light-20"> 1600 Amphitheatre Parkway <br> Mountain View, CA 94043 </address> <ul class="list-unstyled list-light"> <li> <a href="#">Disclaimer</a> </li> </ul> </div> <div class="col-xs-6 col-sm-3"> <h4 class="my-2">Product</h4> <ul class="list-unstyled list-light"> <li> <a href="#">Pricing</a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Customers</a> </li> <li> <a href="#">Store</a> </li> </ul> </div> <br style="clear:both" class="hidden-sm-up"> <div class="col-xs-6 col-sm-3"> <h4 class="my-2">Company</h4> <ul class="list-unstyled list-light"> <li> <a href="#">About Us</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Careers</a> </li> <li> <a href="#">Press</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <div class="col-xs-6 col-sm-3"> <h4 class="my-2">Connect</h4> <ul class="list-unstyled list-light"> <li> <a href="#">Support</a> </li> <li> <a href="#">Social</a> </li> <li> <a href="#">Community</a> </li> </ul> <p class="color-light mt-2">Stay up-to-date!</p> <form> <div class="form-group"> <div class="input-group mb-3"> <input type="text" class="form-control form-control-sm" placeholder="Email" aria-label="Email" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-primary btn-sm" type="button">Ok</button> </div> </div> </div> </form> </div> </div> <hr> <div class="row f-flex justify-content-center" style=""> <div class="col text-center text-secondary my-1"> <p class="mt-2 text-white"> © Copyright 2019 • All Rights Reserved | <a class=" " href="#">Disclaimer</a> | <a class=" " href="#">Contact</a> </p> </div> </div> </div> </div> </div> </section> <!-- jQuery is required --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script> AOS.init({ duration: 1200, }) </script> </body> </html>
.bg-overlay{ background: rgba(0,0,0, .7); position: absolute; top: -60px; bottom: -100px; left: 0; right:0; z-index: 0; } video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(facade.jpg) no-repeat; background-size: cover; -webkit-transition: 1s opacity; transition: 1s opacity; z-index: 0; } .ov-hidden{ overflow: hidden; }

Related: See More

BLK• Design System
bootstrap 4.1.1 landing carousel
Responsive Invoice template
BS4 clean & simple invoice template

Questions / Comments: