"Preparedness Page"
Bootstrap 3.0.0 Snippet by lalexguez

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 name="description" content=""> <meta name="author" content=""> <title>Scrolling Nav - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/scrolling-nav.css" rel="stylesheet"> </head> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <header class="bg-primary text-white"> <div class="container text-center"> <h1>Welcome to Scrolling Nav</h1> <p class="lead">A landing page template freshly redesigned for Bootstrap 4</p> </div> </header> <section id="about"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <h2>About this page</h2> <p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p> <ul> <li>Clickable nav links that smooth scroll to page sections</li> <li>Responsive behavior when clicking nav links perfect for a one page website</li> <li>Bootstrap's scrollspy feature which highlights which section of the page you're on in the navbar</li> <li>Minimal custom CSS so you are free to explore your own unique design options</li> </ul> </div> </div> </div> </section> <section id="services" class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <h2>Services we offer</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> </div> </div> </div> </section> <section id="contact"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <h2>Contact us</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p> </div> </div> </div> </section> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Your Website 2017</p> </div> <!-- /.container --> </footer> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/popper/popper.min.js"></script> <script src="vendor/bootstrap /js/bootstrap.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom JavaScript for this theme --> <script src="js/scrolling-nav.js"></script> </body> </html>
/*! * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/template-overviews/scrolling-nav) * Copyright 2013-2017 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/LICENSE) */ header { padding: 154px 0 100px; } @media (min-width: 992px) { header { padding: 156px 0 100px; } } section { padding: 150px 0; }
(function($) { "use strict"; // Start of use strict // Smooth scrolling using jQuery easing $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: (target.offset().top - 54) }, 1000, "easeInOutExpo"); return false; } } }); // Closes responsive menu when a scroll trigger link is clicked $('.js-scroll-trigger').click(function() { $('.navbar-collapse').collapse('hide'); }); // Activate scrollspy to add active class to navbar items on scroll $('body').scrollspy({ target: '#mainNav', offset: 54 }); })(jQuery); // End of use strict

Related: See More

Questions / Comments: