<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://startbootstrap.com">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a>
</li>
<li><a href="#services">Services</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Landing Page</h1>
<h3>A Template by Start Bootstrap</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:
<br>Special Thanks</h2>
<p class="lead">A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. <a target="_blank" href="http://join.deathtothestockphoto.com/">Visit their website</a> to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="http://startbootstrap.com/templates/landing-page/img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">3D Device Mockups
<br>by PSDCovers</h2>
<p class="lead">Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by PSDCovers! <a target="_blank" href="http://www.psdcovers.com/">Visit their website</a> to download some of their awesome, free photoshop actions!</p>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<img class="img-responsive" src="http://startbootstrap.com/templates/landing-page/img/doge.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Google Web Fonts and
<br>Font Awesome Icons</h2>
<p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="http://startbootstrap.com/templates/landing-page/img/phones.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Connect to Start Bootstrap:</h2>
</div>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li><a href="#home">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li><a href="#about">About</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li><a href="#services">Services</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2013. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<a href="http://www.cnn.com" target="_blank">Visit CNN.com!</a>
body, html {
height: 100%;
width: 100%;
}
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.lead {
font-size: 18px;
font-weight: 400;
}
.intro-header {
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
color: #f8f8f8;
background: url(http://upload.wikimedia.org/wikipedia/commons/1/17/Tiger_in_Ranthambhore.jpg) no-repeat center center;
background-size: cover;
text-align: center;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message > h1 {
margin: 0;
font-size: 5em;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message > h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
@media (max-width: 767px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
.network-name {
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
letter-spacing: 2px;
}
.content-section-a {
background-color: #f8f8f8;
padding: 50px 0;
}
.content-section-b {
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
padding: 50px 0;
}
.section-heading {
margin-bottom: 30px;
}
.section-heading-spacer {
border-top: 3px solid #e7e7e7;
width: 200px;
float: left;
}
.banner {
padding: 100px 0;
color: #f8f8f8;
background: url(http://images6.fanpop.com/image/photos/35200000/Elegant-Tiger-tigers-35204144-1024-576.jpg) no-repeat center center;
background-size: cover;
}
.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 3em;
}
.banner ul {
margin-bottom: 0;
}
.banner-social-buttons {
float: right;
margin-top: 0;
}
@media (max-width: 1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}
@media (max-width: 767px) {
.banner h2 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 3em;
}
ul.banner-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons > li:last-child {
margin-bottom: 0;
}
}
footer {
background-color: #f8f8f8;
padding: 50px 0;
}
p.copyright {
margin: 15px 0 0;
}
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
