"bootstrap front page ,kilimjaro scrollin nav"
Bootstrap 4.1.1 Snippet by moisea

Post to Facebook Tweet this

<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="//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>Kilimanjaro 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">Savana Safari</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">Serengeti</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#services">SKilimanjaro</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#contact">simba</a> </li> </ul> </div> </div> </nav> <header class="killimanjaro-header text-white"> <div class="container text-center"> <h1>Welcome kilimanjaro Template</h1> <p class="lead">A landing page template freshly redesigned for Bootstrap 4</p> </div> </header> <section id="about"> <div class="album py-5 bg-light"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/GALLERY2/12.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div> </div> </div> </div> </section> <section id="services-banner" class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-12 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="services" class="bg-light"> <div class="container"> <div class="row"> <div class="col-sm-8"> <div class="card bg-dark text-white"> <img class="card-img" src="http://moonlighttoursexpedition.com/Home/images/GALLERY2/14.jpg" alt="Card image"> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p> </div> </div></div> <div class="col-sm-4"> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div> </div> </div> </div> </section> <section id="services-word" class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-12 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="container-blog"> <div class="container"> <div class="row"> <div class="card-group"> <div class="card"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/49.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/50.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="http://moonlighttoursexpedition.com/Home/images/51.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </section> <!-- Footer --> <section id="contact footer-bottom"> <footer class="container py-5"> <div class="row"> <div class="col-12 col-md"> <h3>About us</h3> <p>When you use a theme webublogoverflow, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Cool stuff</a></li> <li><a class="text-muted" href="#">Random feature</a></li> <li><a class="text-muted" href="#">Team feature</a></li> <li><a class="text-muted" href="#">Stuff for developers</a></li> <li><a class="text-muted" href="#">Another one</a></li> <li><a class="text-muted" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Resource</a></li> <li><a class="text-muted" href="#">Resource name</a></li> <li><a class="text-muted" href="#">Another resource</a></li> <li><a class="text-muted" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Business</a></li> <li><a class="text-muted" href="#">Education</a></li> <li><a class="text-muted" href="#">Government</a></li> <li><a class="text-muted" href="#">Gaming</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Team</a></li> <li><a class="text-muted" href="#">Locations</a></li> <li><a class="text-muted" href="#">Privacy</a></li> <li><a class="text-muted" href="#">Terms</a></li> </ul> </div> </div> </footer> </section> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.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>
header { padding: 154px 0 100px; } .killimanjaro-header{ background-color:orange; } @media (min-width: 992px) { header { padding: 156px 0 100px; } } section { padding: 150px 0; } .footer-bottom{ background: #343a40!important; padding: 40px; } footer a { color: #f8f9fa!important; }

Related: See More

Argon Dashboard
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: