"Header+Video+BS4-MDB [2018 actualizado]"
Bootstrap 4.0.0 Snippet by ryanorr

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Header + Video</title> <link rel="stylesheet" href="https://headervideo.github.io/hvheadervideo/css/fontawesome.min.css"> <link href="https://headervideo.github.io/hvheadervideo/css/bootstrap.min.css" rel="stylesheet"> <link href="https://headervideo.github.io/hvheadervideo/css/mdb.min.css" rel="stylesheet"> <link href="https://headervideo.github.io/hvheadervideo/css/style.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <!--Main Navigation--> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="index.html">Web</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse " id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="3">Inicio <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="https://goo.gl/DNTqG9"><i class="fa fa-facebook-f"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://goo.gl/e4LTRN"><i class="fa fa-twitter"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://goo.gl/M34Fcp"><i class="fa fa-instagram"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://goo.gl/aLMtRk"><i class="fa fa-pinterest"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://goo.gl/SP6FT7"><i class="fa fa-tumblr"></i></a> </li> </ul> <ul class="navbar-nav ml-auto nav-flex-icons"> <li class="nav-item"> <a class="nav-link waves-effect waves-light">14 <i class="fa fa-envelope"></i></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">8 <i class="fa fa-eye"></i></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light">1 <i class="fa fa-bullhorn"></i></a> </li> <li class="nav-item avatar dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="http://www.torneodj.com/files/avatar/2_120.jpg" class="rounded z-depth-4" width="35" height="30"></a> <div class="dropdown-menu dropdown-menu-right dropdown-purple" aria-labelledby="navbarDropdownMenuLink-5"> <a class="dropdown-item whov" href="#"><i class="fa fa-plus"></i> Agregar post</a> <a class="dropdown-item whov" href="#"><i class="fa fa-edit"></i> Editar cuenta</a> </div> </li> </ul> </div> </nav> </header> <div class="view hm-white-light jarallax" data-jarallax='{"speed": 0.2}' data-jarallax-video="https://www.youtube.com/watch?v=4Q0ijG0ylr4"> <div class="full-bg-img"> <div class="container flex-center"> <div class="row"> <div class="col-md-12 wow fadeIn"> <div class="text-center text-danger"> <h1 class="display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">Header + Video</h1> <h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Para poner imagen o video de fondo. <br>Realizado con <b>Bootstrap 4</b> y <b>Material Design para Bootstrap</b></h5> <a class="btn btn-danger btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-diamond"></i> Administrador</a> <a class="btn btn-primary btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-shield"></i> Moderador</a> </div> </div> </div> </div> </div> </div> <div class="py-2"></div> <div class="container-fluid"> <div class="row"> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12"> <blockquote class="twitter-tweet" data-lang="es"><p lang="pt" dir="ltr">Seguime en estas cuentas!<br>Facebook: <a href="https://t.co/GHrND9I21T">https://t.co/GHrND9I21T</a> <br>Twitter: <a href="https://t.co/d6P8lPf5Ol">https://t.co/d6P8lPf5Ol</a> <br>Instagram: <a href="https://t.co/aAaF11qXKo">https://t.co/aAaF11qXKo</a> <br>Tumblr: <a href="https://t.co/bQk58DvFdn">https://t.co/bQk58DvFdn</a><br>Pinterest: <a href="https://t.co/1j4st58H4I">https://t.co/1j4st58H4I</a><br>Google+: <a href="https://t.co/6Z7WCBDBL3">https://t.co/6Z7WCBDBL3</a> <br>Web: <a href="https://t.co/dlMhTxP5lH">https://t.co/dlMhTxP5lH</a> <a href="https://t.co/VAQ1es0RJk">pic.twitter.com/VAQ1es0RJk</a></p>— Frases&Efectos (@frasesyefectos) <a href="https://twitter.com/frasesyefectos/status/952445043972993025?ref_src=twsrc%5Etfw">14 de enero de 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="alert alert-success"><a href="https://headervideo.github.io/hvheadervideo/">Repositorio web en vivo | Repo site en live</a></div> <div class="alert alert-info" role="alert"> <div class="row"> <div class="col-6"> <h4 class="alert-heading">jarallax-video.js → tarda en iniciar.. Aun no se la razón</h4> <h4 class="alert-heading">Fuentes usadas</h4> <p>Material Design for bootstrap <a href="https://goo.gl/8EWLe7">Ver sitio</a> <br> Font Awesome <a href="https://goo.gl/tzwSmf">Ver sitio</a> <br> Jarallax.js <a href="https://goo.gl/y3UVHE">Ver código fuente</a> <br> Jarallax-Video.js <a href="https://goo.gl/wLQ8Nc">Ver código fuente</a> </p> </div> <div class="col-6"> <h4 class="alert-heading">jarallax-video.js → It takes time to start .. I still do not know why</h4> <h4 class="alert-heading">Used sources</h4> <p>Material Design for bootstrap <a href="https://goo.gl/8EWLe7">See site</a> <br> Font Awesome <a href="https://goo.gl/tzwSmf">See site</a> <br> Jarallax.js <a href="https://goo.gl/y3UVHE">See source code</a> <br> Jarallax-Video.js <a href="https://goo.gl/wLQ8Nc">See source code</a> </p> </div> </div> </div> <div class="container"> <h2>Toggleable Tabs</h2> <br> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="home" class="container tab-pane active"><br> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="menu1" class="container tab-pane fade"><br> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="menu2" class="container tab-pane fade"><br> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> </div> </div> <h3 class="card-header">Solución <span class="float-right">Solution</span></h3> <div class="row"> <div class="col-6"> <ul class="list-group"> <li class="list-group-item bg-danger">Se eliminó</li> <li class="list-group-item">bootstrap.min.css de Material Design</li> <li class="list-group-item">bootstrap.min.js de Material Design</li> <li class="list-group-item border border-0"> </li> <li class="list-group-item bg-success">Se arregló</li> <li class="list-group-item">bootstrap.min.css para Material Design</li> <li class="list-group-item">bootstrap.min.js para Material Design</li> <li class="list-group-item">mdb.min.css</li> <li class="list-group-item">mdb.min.js</li> <li class="list-group-item">jarallax.js</li> <li class="list-group-item">jarallax-video.js, tarda en iniciar.. Aun no se la razón</li> </ul> </div> <div class="col-6"> <ul class="list-group"> <li class="list-group-item bg-danger">It is eliminated</li> <li class="list-group-item">bootstrap.min.css from Material Design</li> <li class="list-group-item">bootstrap.min.js from Material Design</li> <li class="list-group-item border border-0"> </li> <li class="list-group-item bg-success">Se arregló</li> <li class="list-group-item">bootstrap.min.css for Material Design</li> <li class="list-group-item">bootstrap.min.js for Material Design</li> <li class="list-group-item">mdb.min.css</li> <li class="list-group-item">mdb.min.js</li> <li class="list-group-item">jarallax.js</li> <li class="list-group-item">jarallax-video.js, It takes time to start .. I still do not know why</li> </ul> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 px-2"> <a data-pin-do="embedUser" data-pin-lang="es" data-pin-scale-height="240" data-pin-scale-width="80" href="https://ar.pinterest.com/frasesyefectos/"></a> <script async defer data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script> <hr> <h5 class="card-header">En instagram @frasesyefectos</h5> <div style="position: relative; height: 16px; width: 100%; overflow: hidden; padding-top:133.33333333333331%;"> <iframe src="//widgets-code.websta.me/w/8b4d0c2155f9?ck=MjAxOC0wMS0xMFQwMzowOTozOS4wMDBa" class="websta-widgets" allowtransparency="true" frameborder="0" scrolling="no" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe><!-- WEBSTA WIDGETS - widgets.websta.me --> </div> </div> </div> </div> <hr> <footer class="bg-dark text-white"> <div class="text-center py-2 lead">Copyright © 2017 - Joel Miguel Valente <p>Visita mi web demo creado con wordpress <br> con mi theme desde cero <a href="http://www.frasesyefectos.skn1.com/" target="_blank">Frases y Efectos</a></p></div> </footer> <script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/popper.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/bootstrap.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/mdb.min.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/jarallax.js"></script> <script src="https://headervideo.github.io/hvheadervideo/js/jarallax-video.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> new WOW().init(); </script> </body> </html>

Related: See More

Paper Kit
Resize & Fixed Header (shrinking header)
Video list thumbnails
Header Curtain Effect

Questions / Comments: