<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 ----------> <div class="container" id="master"> <div class="jumbotron"> <div class="row"> <header class="text-center"> <img src="http://placehold.it/900x100"> </header> <div class="col-lg-4"> <ul class="nav nav-pills nav-stacked" id="left-nav"> <li><a href="#"> CARPET CLEANING</a></li> <li><a href="#">UPHOLSTERY CLEANING</a></li> <li><a href="#">AREA RUG</a></li> <li><a href="#">CURTAINS</a></li> <li><a href="#"> Option 4</a></li> <li><a href="#"> Option 5</a></li> <li><a href="#"> Option 4</a></li> <li><a href="#"> Option 5</a></li> <li><a href="#"> Option 5</a></li> </ul> </div> <div class="col-lg-8"> <figure id="swf_container"> <img src="http://placehold.it/500x280"> </figure> </div> </div> </div><!-- ends jumbotron--> <h5 class="text-center">JUMBOTRON WITH NAV PILLS ON LEFT SIDE OF SLIDESHOW</h5> <nav class="navbar navbar-green"> <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="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <!-- Content --> <div class="row"> <div class="col-lg-4"> <p class="intro"><span>We don't just clean different things we clean things differently! </span> We make sure to always clean carpets with absolute care to meet your cleaning standard and reach our level of perfection. Green Homes is one of Americas top carpet cleaning company which has full carpet care solutions.</p> <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> </div> <div class="col-lg-8"> <ul class="list-inline"><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> </ul> <ul class="list-inline"><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> <img class="img-responsive" src="http://placehold.it/150x75" alt="150x75"> </li><li> </ul> </div> </div><!-- ends row --> <!-- Site footer --> <footer class="footer"> <p>© 2015 Company, Inc.</p> </footer> </div> <!-- /container -->

#master{ max-width: 1020px; margin: 0 auto; } #left-nav{ position:relative; top: 20px; } #left-nav a { color: #000; } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { color: #fff; background-color: #22Ab7a; margin-bottom: 0; } .nav-pills ul { margin-top: 20px; } .nav-pills>li>a { background-color: #22Ab7a; margin-bottom: 1px; padding: 5px 9px; } #swf_container { background: #fff; margin-top: 20px; } #swf_container img{ position: relative; top: 0; left: 30px; } nav.navbar-green { background-color: #22Ab7a; } nav.navbar-green a { color: #111; }