123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!doctype html>
- <html lang="en">
- <head>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="css/datatables.bootstrap4.min.css"/>
- <link href="css/scrolling-nav.css" rel="stylesheet">
- <title>Hello, world!</title>
- </head>
- <body>
- <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 2020</p>
- </div>
- <!-- /.container -->
- </footer>
-
-
-
- <script src="js/jquery-3.5.1.min.js"></script>
- <script src="js/bootstrap.bundle.min.js"></script>
- <script type="text/javascript" src="js/datatables.bootstrap4.min.js"></script>
- <script src="js/jquery.easing.min.js"></script>
- <script src="js/scrolling-nav.js"></script>
- <script>
- $(document).ready(function() {
- $('#example').DataTable();
- } );
- </script>
- </body>
- </html>
|