<!– Navigation –> <a id=“menu-toggle” href=“#” class=“btn btn-dark btn-lg toggle”><i class=“fa fa-bars”></i></a> <nav id=“sidebar-wrapper”>
<ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> <li class="sidebar-brand"> <a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a> </li> <li> <a href="#top" onclick = $("#menu-close").click(); >Home</a> </li> <li> <a href="#about" onclick = $("#menu-close").click(); >About</a> </li> <li> <a href="#services" onclick = $("#menu-close").click(); >Services</a> </li> <li> <a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a> </li> <li> <a href="#contact" onclick = $("#menu-close").click(); >Contact</a> </li> </ul>
</nav>
<!– Header –> <header id=“top” class=“header”>
<div class="text-vertical-center"> <h1>Start Bootstrap</h1> <h3>Free Bootstrap Themes & Templates</h3> <br> <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> </div>
</header>
<!– About –> <section id=“about” class=“about”>
<div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Stylish Portfolio is the perfect theme for your next project!</h2> <p class="lead">This theme features some wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p> </div> </div> <!-- /.row --> </div> <!-- /.container -->
</section>
<!– Services –> <!– The circle icons use Font Awesome's stacked icon classes. For more information, visit fontawesome.io/examples/ –> <section id=“services” class=“services bg-primary”>
<div class="container"> <div class="row text-center"> <div class="col-lg-10 col-lg-offset-1"> <h2>Our Services</h2> <hr class="small"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-cloud fa-stack-1x text-primary"></i> </span> <h4> <strong>Service Name</strong> </h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-compass fa-stack-1x text-primary"></i> </span> <h4> <strong>Service Name</strong> </h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flask fa-stack-1x text-primary"></i> </span> <h4> <strong>Service Name</strong> </h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="service-item"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-shield fa-stack-1x text-primary"></i> </span> <h4> <strong>Service Name</strong> </h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> </div> <!-- /.row (nested) --> </div> <!-- /.col-lg-10 --> </div> <!-- /.row --> </div> <!-- /.container -->
</section>
<!– Callout –> <aside class=“callout”>
<div class="text-vertical-center"> <h1>Vertically Centered Text</h1> </div>
</aside>
<!– Portfolio –> <section id=“portfolio” class=“portfolio”>
<div class="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <h2>Our Work</h2> <hr class="small"> <div class="row"> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/img/portfolio-1.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/img/portfolio-2.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/img/portfolio-3.jpg"> </a> </div> </div> <div class="col-md-6"> <div class="portfolio-item"> <a href="#"> <img class="img-portfolio img-responsive" src="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/img/portfolio-4.jpg"> </a> </div> </div> </div> <!-- /.row (nested) --> <a href="#" class="btn btn-dark">View More Items</a> </div> <!-- /.col-lg-10 --> </div> <!-- /.row --> </div> <!-- /.container -->
</section>
<!– Call to Action –> <aside class=“call-to-action bg-primary”>
<div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h3>The buttons below are impossible to resist.</h3> <a href="#" class="btn btn-lg btn-light">Click Me!</a> <a href="#" class="btn btn-lg btn-dark">Look at Me!</a> </div> </div> </div>
</aside>
<!– Map –> <section id=“contact” class=“map”>
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe> <br /> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a> </small> </iframe>
</section>
<!– Footer –> <footer>
<div class="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <h4><strong>Start Bootstrap</strong> </h4> <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p> <ul class="list-unstyled"> <li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li> <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">name@example.com</a> </li> </ul> <br> <ul class="list-inline"> <li> <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> </li> <li> <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a> </li> </ul> <hr class="small"> <p class="text-muted">Copyright © Your Website 2014</p> </div> </div> </div>
</footer>
<!– Custom Theme
JavaScript –> <script> // Closes the sidebar menu $(“#menu-close”).click(function(e) {
e.preventDefault(); $("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu $(“#menu-toggle”).click(function(e) {
e.preventDefault(); $("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page $(function() {
$('a[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 }, 1000); return false; } } });
}); </script>