starter-template

<!DOCTYPE html> <html lang="en"> <head> <title>Starter - Bootstrap 4 Starter Template</title>  <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="generator" content="Simple - Starter Template , Responsive Bootstrap 4 template , bootstrap 4 starter template, bootstrap4 template, simple template"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" lang="en" content="Simple Bootstrap 4 starter template , Responsive and Modern HTML5 Template made from bootstrap 4."> <meta name="keywords" lang="en" content="simple template, bootstrap 4 template,bootstrap 4 starter template, responsive bootstrap 4 template, bootstrap 4, bootstraping, bootstrap4, oribitthemes"> <meta name="robots" content="index, follow"> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <meta name="description" content="">  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.min.css" />  <link rel="stylesheet" type="text/css" href="css/main.min.css">   </head> <body> <div class="loader"></div> <main id="main"> <section id="cover"> <div id="cover-caption"> <div class="container"> <div class="col-sm-12"> <h1>Welcome to Bootstrap 4</h1> <p class="banner-description">Just like the old Bootstrap, but better.Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p> <form action="#" class="form-inline" id="inlineForm"> <div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Jane Doe"> </div> <div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg email-input" placeholder="example@example.com"> </div> <button type="submit" class="btn btn-success btn-lg">okay, go!</button> </form> <br> <br> <br> <br> <a href="#mainNavigation" id="scrollToNav" class="btn btn-success" role="button">↓</a> </div> </div> </div> </section> <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="mainNavigation"> <a class="navbar-brand" href="#cover" id="header-logo"> <img src="https://raw.githubusercontent.com/orbitthemes/Orbit-Themes/master/assets/logo.png" class="img-fluid" width="200" alt="Orbit Themes"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#cover">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#features">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#blog">Blog</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <section id="carousel"> <div id="carousel-home" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-home" data-slide-to="0" class="active"></li> <li data-target="#carousel-home" data-slide-to="1"></li> <li data-target="#carousel-home" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="img/milkyWay.jpg" alt="Milky Way Galaxy"> <div class="carousel-caption"> <h3>Milky Way Galaxy</h3> <p>Milky Way Space Picture.</p> </div> </div> <div class="carousel-item"> <img src="img/spiderweb.jpg" alt="A wet spiderweb"> <div class="carousel-caption"> <h3>Down came the rain</h3> <p>And washed the spider out</p> </div> </div> <div class="carousel-item"> <img src="img/hearthand.jpg" alt="Two hands making a heart"> <div class="carousel-caption"> <h3>Making love</h3> <p>With their hands...</p> </div> </div> </div> <a class="left carousel-control" href="#carousel-home" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-home" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> <section id="features"> <div class="section-content"> <div class="container"> <h2>What we do</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui accusantium commodi non quod mollitia animi, totam quia labore ex est ut delectus consectetur explicabo eveniet maiores, cumque aut repudiandae. Natus! </p> <div class="row"> <div class="col-sm-12"> <div class="card-deck"> <div class="card"> <img src="img/chalkboard.jpg" alt="a chalkboard"> <div class="card-body"> <h4 class="card-title">Strategy & Planning</h4> <h6 class="card-subtitle">Support card subtitle</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel quod porro reiciendis quo, optio dolor incidunt qui, voluptatem officiis dignissimos, reprehenderit possimus. Excepturi earum in repellat doloribus officia sed blanditiis.</p> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more</button> </div> </div> <div class="card"> <img src="img/working.jpg" alt="working on a laptop"> <div class="card-body"> <h4 class="card-title">Creative & Design</h4> <h6 class="card-subtitle">Support card subtitle</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos tempore, necessitatibus, inventore quaerat laudantium odit rerum fugit ipsa, libero sint ullam consequatur accusamus totam optio facere repudiandae quasi nisi iusto!</p> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more</button> </div> </div> <div class="card"> <img src="img/programming.jpg" alt="fingers typing on a keyboard"> <div class="card-body"> <h4 class="card-title">Programming & Technical</h4> <h6 class="card-subtitle">Support card subtitle</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos tempore, necessitatibus, inventore quaerat laudantium odit rerum fugit ipsa, libero sint ullam consequatur accusamus totam optio facere repudiandae quasi nisi iusto!</p> <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more</button> </div> </div> </div> </div> </div> </div> </div> </section> <section id="about"> <div class="section-content"> <div class="container"> <div class="col-md-6"> <div class="about-text"> <h3>About me</h3> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima culpa nostrum voluptates praesentium quia, quae, dolor aperiam possimus architecto, tempore unde! Quasi fugit voluptate, maiores adipisci commodi nemo rem cumque.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error eum mollitia sit dolorem autem qui possimus ex voluptate, voluptatibus iste unde numquam illum, molestiae reprehenderit, eligendi. Illum quod esse voluptatibus.</p> <h5>Follow me on the web</h5> <a href="#" class="btn btn-sm btn-primary">facebook</a> <a href="#" class="btn btn-sm btn-info">twitter</a> <a href="#" class="btn btn-sm btn-danger">Google Plus</a> </div> </div> </div> </div> </section> <section id="blog"> <div class="section-content"> <div class="container"> <h3>Latest news</h3> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero placeat debitis ad vitae repudiandae architecto, ipsum tenetur odio animi nulla nihil deleniti voluptatibus et in incidunt consequuntur! Assumenda, suscipit, sunt!</p> <div class="row"> <div class="col-sm-12"> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="img/milkyWay.jpg" alt="Milky Way Space"> <div class="card-body"> <h4 class="card-title"> <a href="#">Card title that wraps to a new line</a> </h4> <p class="card-text">This is a longer 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">Posted 3 mins ago</small> </p> </div> </div> <div class="card"> <img class="card-img-top" src="img/banjo.jpg" alt="Milky Way Space"> <div class="card-body"> <h4 class="card-title"> <a href="#">Card title that wraps to a new line</a> </h4> <p class="card-text">This is a longer 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">Posted 3 mins ago</small> </p> </div> </div> <div class="card"> <img class="card-img-top" src="img/computer.jpg" alt="Milky Way Space"> <div class="card-body"> <h4 class="card-title"> <a href="#">Card title that wraps to a new line</a> </h4> <p class="card-text">This is a longer 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">Posted 3 mins ago</small> </p> </div> </div> </div> <div class="card-deck"> <div class="card card-body"> <h4 class="card-title"> <a href="#">Card title</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi earum itaque doloribus blanditiis, qui porro provident repudiandae, neque obcaecati sed sint labore possimus, corporis beatae amet autem. Voluptates, animi.</p> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae esse assumenda minima optio animi autem error quia soluta omnis. Ad minus ab, soluta reprehenderit itaque placeat cumque saepe debitis in. </p> <a href="#" class="btn btn-success">View More</a> </div> <div class="card card-body"> <h4 class="card-title"> <a href="#">Card title</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi earum itaque doloribus blanditiis, qui porro provident repudiandae, neque obcaecati sed sint labore possimus, corporis beatae amet autem. Voluptates, animi.</p> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae esse assumenda minima optio animi autem error quia soluta omnis. Ad minus ab, soluta reprehenderit itaque placeat cumque saepe debitis in. </p> <a href="#" class="btn btn-success">View More</a> </div> <div class="card card-body"> <h4 class="card-title"> <a href="#">Card title</a> </h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi earum itaque doloribus blanditiis, qui porro provident repudiandae, neque obcaecati sed sint labore possimus, corporis beatae amet autem. Voluptates, animi.</p> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae esse assumenda minima optio animi autem error quia soluta omnis. Ad minus ab, soluta reprehenderit itaque placeat cumque saepe debitis in. </p> <a href="#" class="btn btn-success">View More</a> </div> </div> </div> </div> <hr> <nav class="text-xs-center"> <small class="text-muted float-md-left">Showing 6 out of 100</small> <ul class="pagination float-md-right"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">4</a> </li> <li class="page-item"> <a class="page-link" href="#">5</a> </li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav> </div> </div> </div> </div> </section> <a href="#cover" class="scrollUp btn btn-info">↑</a> </main>  <footer id="footer"> <p class="copyright">Made with <i class="fa fa-heart"></i> By <a target="_blank" title="Orbit Themes" href="http://www.orbitthemes.com">Orbit Themes</a> © <span id="currentYear"></span> All Rights Reserved. </p> <div class="social"> <a traget="_blank" href="https://facebook.com/orbitthemes" title="facebook"> <i class="fa fa-facebook"></i> </a> <a traget="_blank" href="https://twitter.com/orbitthemes" title="twitter"> <i class="fa fa-twitter"></i> </a> <a traget="_blank" href="https://plus.google.com/+orbitthemes" title="Google+" target="_blank"> <i class="fa fa-google-plus"></i> </a> <a traget="_blank" href="https://github.com/orbitthemes" title="github" target="_blank"> <i class="fa fa-github"></i> </a> <a traget="_blank" href="https://www.behance.net/orbitthemes" title="Behance" target="_blank"> <i class="fa fa-behance"></i> </a> <a traget="_blank" href="https://dribbble.com/orbitthemes" title="Dribbble" target="_blank"> <i class="fa fa-dribbble"></i> </a> <a traget="_blank" href="https://www.pinterest.com/orbitThemes/" title="Pinterest" target="_blank"> <i class="fa fa-pinterest"></i> </a> <a traget="_blank" href="https://www.reddit.com/user/orbitthemes" title="Reddit" target="_blank"> <i class="fa fa-reddit"></i> </a> <a traget="_blank" href="https://orbitthemes.com/blog/" title="RSS" target="_blank"> <i class="fa fa-rss"></i> </a> </div> </footer>  <script src="dist/jquery/jquery.min.js"></script> <script src="dist/popper/popper.min.js" integrity=""></script> <script src="dist/bootstrap/js/bootstrap.min.js"></script> <script src="js/main.min.js"></script> </body> </html>