<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg fixed-top" id="up"> <a class="navbar-brand" href="#">LOGO</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 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="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Disabled</a> </li> </ul> </div> </nav> <section class="wrapper fixed-top"> <div class="overlays"></div><!--Mascara de imagen--> <div class="container h-100"> <div class="row h-100 justify-content-between align-items-center"> <div class="col-lg-12"> <div class="text-center"> <h1 class="mt-5">Conviértete en un Desarrollador Web Profesional.</h1> <p>APRENDE DESARROLLO WEB MODERNO CON LARAVEL, VUEJS, Y OTRAS TECNOLOGÍAS. Videotutoriales cortos y precisos para que aproveches tu tiempo al máximo . </p> <button class="btn btn-success btn-outline mt-5">Iniciar sesion</button> <button class="btn btn-outline-primary mt-5">REGISTRATE</button> </div> </div> </div> </div> </section> <section class="cuerpo mt-5"> <div class="container"> <div class="row"> <div class="col-md-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius magni, esse quod dolores veritatis facilis cum ratione aliquam fugit iure laudantium eaque atque eum cupiditate, labore necessitatibus repudiandae a molestiae. </div> </div> </div> </section> <script> $(window).scroll(function(){ if( $(this).scrollTop()>50){ $('.navbar').css('background','#263238'); }else{ $('.navbar').css('background','transparent'); } }); </script>

body{ height:100vh; font-family: 'Roboto Condensed', sans-serif; } #up{ border-bottom:0px solid transparent; box-shadow: 0 0 transparent; background:transparent; } #navbarSupportedContent li { margin:0px 10px; } #navbarSupportedContent li a{ color:white; } #up h2{ color:#00c851!important; font-size:1.3rem; cursor: pointer; } .wrapper{ background:url('https://www.tuexperto.com/wp-content/uploads/2017/10/fondo-de-pantalla-paisaje.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; width:100%; height:100vh; position:static; color:white; } .overlays{ position:absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .8; background: rgb(13, 13, 14); }