<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#myPage">HOME</a></li>
<li><a href="#band">ABOUT</a></li>
<li><a href="#tour">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#team">TEAM</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2 class="display-3">About Us</h2>
<p>This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
<div class="container">
<div class="spacer20">
<div class="col-md-9 text-left">
<h1>About us</h1>
<p>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
<p>Aenean iaculis, tortor sit amet molestie fringilla, sapien elit interdum mauris, sed cursus dui felis nec nisi. Nam vitae efficitur erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra bibendum malesuada.</p>
<ul>
<li><a href="#"><span> </span>Risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Pellentesque finibus tincidunt metus. Proin hendrerit fermentum tortor </a></li>
<li><a href="#"><span> </span>commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi,</a></li>
</ul>
<!---728x90--->
<p>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
<ul>
<li><a href="#"><span> </span>commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc</a></li>
<li><a href="#"><span> </span>Praesent facilisis, dolor in commodo rutrum, risus elit dignissim mi,</a></li>
</ul>
<p>Dolor in commodo rutrum, risus elit dignissim mi, eu tempor ligula eros nec nunc. Integer accumsan viverra eleifend. Donec malesuada massa diam, quis finibus elit euismod ac. Cras rhoncus pulvinar dictum. Morbi porta commodo mauris eget eleifend. In non volutpat turpis, malesuada facilisis elit. Nam vitae elementum orci. Cras quis elit metus.</p>
</div>
<div class="col-md-3 text-left">
<h2>Quick Links</h2>
<div class="btn-group btn-group-vertical btn-block">
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
<a href="#" class="btn btn-default">Apple</a>
<a href="#" class="btn btn-default">Samsung</a>
<a href="#" class="btn btn-default">Sony</a>
</div>
<hr>
<ul>
<li><a href="#"><span> </span>tortor sit amet molestie fringilla</a></li>
<li><a href="#"><span> </span>packages and web page editors</a></li>
<li><a href="#"><span> </span>desktop publishing packages</a></li>
<li><a href="#"><span> </span>web page editors now use</a></li>
<li><a href="#"><span> </span>opposed to using Many desktop</a></li>
<li><a href="#"><span> </span>Many desktop publishing</a></li>
<li><a href="#"><span> </span>packages and web page editors</a></li>
<li><a href="#"><span> </span>desktop publishing packages</a></li>
<li><a href="#"><span> </span>web page editors now use</a></li>
</ul>
<div class="well-sm">
<img src="http://placehold.it/350X350" class="img-responsive" >
</div>
</div>
</div>
</div>
.jumbotron {
background-image: url(http://wallpaper-gallery.net/images/wallpaper-orange/wallpaper-orange-11.jpg);
padding-top:50px;
}
.spacer20 {
padding: 0.5em 0;
}
/* *************
2 Navigation Css
**********************/
.navbar {
font-family: helvetica, sans-serif;
margin-bottom: 0;
background-color: #b23e46;
border: 0;
font-size: 14px !important;
letter-spacing: 1px;
opacity: 0.9;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover {
color: #e8ced0 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #fff;
background-color: #555 !important;
}
