"Header + Video + BS4 + MDB [2017]"
Bootstrap 4.0.0 Snippet by Miguel92

<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://mdbootstrap.com/previews/docs/latest/css/bootstrap.min.css" rel="stylesheet"> <link href="https://mdbootstrap.com/previews/docs/latest/css/mdb.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <!--Main Navigation--> <header> <nav class="navbar navbar-expand-lg navbar-dark default-color-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="#">Chat</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fotos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Peliculas</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="img-fluid rounded-circle z-depth-0" width="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=syBR4xiikcQ"> <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" style="font-weight:bold; text-shadow: 0 0 8px #FFF, 0 -2px 12px #222, 0 -5px 15px #666;" data-wow-delay="0.4s">SNIPPET ACTUALIZADO 2018 → <a href="https://goo.gl/nsVK7W">https://goo.gl/nsVK7W</a><br> UPDATED SNIPPET 2018 → <a href="https://goo.gl/nsVK7W">https://goo.gl/nsVK7W</a></h5> </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"> <ul class="list-group"> <li class="list-group-item active">SIDEBAR 1</li> <li class="list-group-item">La imagen en el menú tiene un Dropdown</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> </ul> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="row"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="card"> <img class="img-fluid" src="https://inst.eecs.berkeley.edu/~cs194-26/fa14/upload/files/proj3/cs194-fi/images/warm_sky.jpg" alt="Ver post"> <div class="card-body secondbase"> <h4 class="card-title">Titulo del post</h4> <p class="card-text">Por: <a class="text-danger"><b>Miguel92</b></a></p> <div class="text-center d-flex"> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-facebook-f"></i></a> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-twitter"></i></a> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-google"></i></a> </div> <a href="#" class="btn btn-primary">Ver post</a> </div> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="card"> <img class="img-fluid" src="https://inst.eecs.berkeley.edu/~cs194-26/fa14/upload/files/proj3/cs194-fi/images/warm_sky.jpg" alt="Ver post"> <div class="card-body secondbase"> <h4 class="card-title">Titulo del post</h4> <p class="card-text">Por: <a class="text-danger"><b>Miguel92</b></a></p> <div class="text-center d-flex"> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-facebook-f"></i></a> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-twitter"></i></a> <a href="#" style="flex: 1 1 auto;" class="btn btn-sm default-color-dark"><i style="font-size: 22px" class="fa fa-google"></i></a> </div> <a href="#" class="btn btn-primary">Ver post</a> </div> </div> </div> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 px-2"> <ul class="list-group"> <li class="list-group-item active">SIDEBAR 2</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> <li class="list-group-item">Lorem ipsum.</li> </ul> </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.portfolio2017.skn1.com/oficial/" target="_blank">Portfolio2017</a></p></div> </footer> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/popper.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/bootstrap.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/mdb.min.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/jarallax.js"></script> <script src="https://mdbootstrap.com/previews/docs/latest/js/jarallax-video.js"></script> <script> new WOW().init(); </script> </body> </html>
.whov:hover { background-color: #00695c!important; } .view { background-position: center center; background-repeat: no-repeat; height: 500px; } .secondbase { background-color: rgba(255,255,255,.6); margin-top: -90px; }

Related: See More


Questions / Comments:

Hey Miguel, do we need to install anything? I'm receiving some bootstrap error! Sorry I'm new in html/css

biabia83 (-2) - 3 months ago - Reply -2


Hola, aquí el snippet actualizado → https://goo.gl/nsVK7W...y link para descargar si es necesario, debo decir que cuando realice la actualización no me dio problemas como el anterior, era como que no aceptaba el .text-center

===========================================================================

Hello, here the updated snippet → https://goo.gl/nsVK7W ... and link to download if necessary, I must say that when I did the update it did not give me problems like the previous one, it was like I did not accept the .text-center

Miguel92 (-1) - 3 months ago - Reply 1


Hi Miguel, I am new with HTML/CSS. I am not able to make any video run while using your code. What do I have to do? It seems that copy-paste does not work. Thank you in advance.

BeaIbeas (0) - 3 months ago - Reply 0


Hello, here I left you another solution, since it usually happens to me, but the function of the video is stable, copy and paste if it was wrong ... But it works just like in this post ... it left you my repository → https : //goo.gl/FkAVNE ...

My facebook: http://www.facebook.com/joelmiguel.valente I am always connected, for faster answers

Miguel92 (-1) - 3 months ago - Reply 0


Here is a proof that the second method also works correctly!

www.torneodj.com

It is a web where I do web design and other things, and the script that we created with another colleague from the original, can be seen in the footer of the same web

Miguel92 (-1) - 3 months ago - Reply -1