<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 id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top"> <a href="#" class="navbar-brand">BRANDNAME</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navLinks"> <ul class="navbar-nav"> <li class="nav-item"> <a href="" class="nav-link">HOME</a> </li> <li class="nav-item"> <a href="" class="nav-link">ABOUT</a> </li> <li class="nav-item"> <a href="" class="nav-link">SERVICES</a> </li> <li class="nav-item"> <a href="" class="nav-link">CONTACTS</a> </li> </ul> </div> </nav> <header> <div id="indicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#indicators" data-slide-to="0" class="active"></li> <li data-target="#indicators" data-slide-to="1"></li> <li data-target="#indicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <!-- Slide One - Set the background image for this slide in the line below --> <div class="carousel-item active" style="background-image: url('https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">Image one</h3> <p class="lead">Some description about the first slide</p> </div> </div> <!-- Slide Two - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1460602594182-8568137446ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">Image two</h3> <p class="lead">Some description about the second slide</p> </div> </div> <!-- Slide Three - Set the background image for this slide in the line below --> <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1465146633011-14f8e0781093?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <div class="carousel-caption d-none d-md-block"> <h3 class="display-4">Image three</h3> <p class="lead">Some description about the third slide</p> </div> </div> </div> <a class="carousel-control-prev" href="#indicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#indicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </header> <!-- Page Content --> <section class="py-5"> <div class="container"> <h1 class="font-weight-light">Image Slider Two</h1> <p class="lead">Here you can write anything about the website. These are the sample pictures ,replace them and use your own. These pictures are taken from unsplash.</p> <p class="lead">Bacon ipsum dolor amet drumstick short loin ribeye sirloin ham spare ribs landjaeger, pig turducken meatball sausage. Salami cow shoulder pork loin. Meatloaf turducken andouille chuck beef ribs picanha. Filet mignon pastrami fatback ribeye leberkas shank boudin sirloin beef short ribs tail pig pork loin shoulder buffalo. Short ribs andouille swine chicken leberkas. Fatback sirloin pork belly turkey landjaeger corned beef biltong, buffalo bresaola strip steak brisket short loin salami.</p> </div> </section> <script> $(function() { $(document).scroll(function() { var $nav = $("#mainNavbar"); $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height()); }); }); </script>

.carousel-item { height: 65vh; min-height: 350px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover } #mainNavbar { padding-left: 50px; padding-top: 20px } .navbar-dark .navbar-brand { font-family: 'Source Serif Pro', serif } .navbar-nav .nav-link { font-family: 'Source Serif Pro', serif } .display-4 { font-family: 'Source Serif Pro', serif } .lead { font-family: 'Source Serif Pro', serif } .navbar.scrolled { background: rgb(34, 31, 31); transition: background 500ms } .font-weight-light { font-family: 'Source Serif Pro', serif }