<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="#">Secure-Assurance</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="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> <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://secure-assurance.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/1020314/pexels-photo-1020314.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" media="(min-width: 1400px)"> <source srcset="https://images.pexels.com/photos/1020314/pexels-photo-1020314.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" 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://images.pexels.com/photos/416405/pexels-photo-416405.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" 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>

$(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 });