<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="//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-md fixed-top navbar-dark"> <a class="navbar-brand" href="#">Fixed navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-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 disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <!-- #################################################### C A R O U S E L #################################################### --> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <a href="https://bootstrapcreative.com/"> <!-- If you need more browser support use https://scottjehl.github.io/picturefill/ If a picture looks blurry on a retina device you can add a high resolution like this <source srcset="img/blog-post-1000x600-2.jpg, blog-post-1000x600-2@2x.jpg 2x" media="(min-width: 768px)"> What image sizes should you use? This can help - https://codepen.io/JacobLett/pen/NjramL --> <picture> <source srcset="https://images.pexels.com/photos/355887/pexels-photo-355887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" media="(min-width: 1400px)"> <source srcset="https://images.pexels.com/photos/131634/pexels-photo-131634.jpeg?cs=srgb&dl=abstract-art-artificial-131634.jpg&fm=jpg" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption"> <div> <h2>Digital Craftsmanship</h2> <p>We meticously build each site to get results</p> <span class="btn btn-sm btn-outline-secondary">Learn More</span> </div> </div> </a> </div> <!-- /.carousel-item --> <div class="carousel-item"> <a href="https://bootstrapcreative.com/"> <picture> <source srcset="https://dummyimage.com/2000x500/007aeb/4196e5" media="(min-width: 1400px)"> <source srcset="https://dummyimage.com/1400x500/007aeb/4196e5" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption justify-content-center align-items-center"> <div> <h2>Every project begins with a sketch</h2> <p>We work as an extension of your business to explore solutions</p> <span class="btn btn-sm btn-outline-secondary">Our Process</span> </div> </div> </a> </div> <!-- /.carousel-item --> <div class="carousel-item"> <a href="https://bootstrapcreative.com/"> <picture> <source srcset="https://dummyimage.com/2000x500/007aeb/4196e5" media="(min-width: 1400px)"> <source srcset="https://dummyimage.com/1400x500/007aeb/4196e5" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption justify-content-center align-items-center"> <div> <h2>Performance Optimization</h2> <p>We monitor and optimize your site's long-term performance</p> <span class="btn btn-sm btn-secondary">Learn How</span> </div> </div> </a> </div> <!-- /.carousel-item --> </div> <!-- /.carousel-inner --> <a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- /.carousel --> <div class="container py-5"> <h2>Some filler text to make the page vertically scroll</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque veniam laudantium hic vitae tenetur! Amet, saepe? Ipsam, illum expedita iusto sint aspernatur dicta nam aliquam consequatur corporis praesentium, necessitatibus quibusdam.</p> </div> <!-- /.container -->

$(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready /* ################ Add navbar background color when scrolled */ $(window).scroll(function() { if ($(window).scrollTop() > 56) { $(".navbar").addClass("bg-dark"); } else { $(".navbar").removeClass("bg-dark"); } }); // If Mobile, add background color when toggler is clicked $(".navbar-toggler").click(function() { if (!$(".navbar-collapse").hasClass("show")) { $(".navbar").addClass("bg-dark"); } else { if ($(window).scrollTop() < 56) { $(".navbar").removeClass("bg-dark"); } else { } } }); // ############ // document ready });