<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container-fluid"> <header class="borderRed clearfix"> <div class="col-sm-4 col-sm-offset-4 borderRed text-center"> <img src="http://placehold.it/200x150"> </div> </header> <nav> <div class="logo"> <img src="http://placehold.it/100x150" class="img-responsive"> </div> <ul> <li><a href="#"><i class="fa fa-2x fa-home"></i><br>home</a></li> <li><a href="#"><i class="fa fa-2x fa-circle"></i><br>about us</a></li> <li><a href="#"><i class="fa fa-2x fa-book"></i><br>program</a></li> <li><a href="#"><i class="fa fa-2x fa-comments"></i><br>forum</a></li> <li><a href="#"><i class="fa fa-2x fa-user"></i><br>members</a></li> <li><a href="#"><i class="fa fa-2x fa-map-marker"></i><br>contacts</a></li> </ul> </nav> <div class="main content"> <div class="row row1"> <div class="col-sm-8 borderRed"> <div id="slider" class="borderCY"> <img src="http://placehold.it/1200x550" class="img-responsive"> </div> </div> <div class="col-sm-4 borderRed"> <ul class="media-list"> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="http://placehold.it/64x64"> </a> </div> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor sit amet</h4> </div> </li> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="http://placehold.it/64x64"> </a> </div> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor sit amet</h4> </div> </li> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="http://placehold.it/64x64"> </a> </div> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor sit amet</h4> </div> </li> <li class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="http://placehold.it/64x64"> </a> </div> <div class="media-body"> <h4 class="media-heading">Lorem ipsum dolor sit amet</h4> </div> </li> </ul> </div> </div> <!-- fine 8-4 --> <hr> <div class="row row2"> <div class="col-sm-3 borderRed"> col-sm-3 </div> <div class="col-sm-3 borderRed"> col-sm-3 </div> <div class="col-sm-3 borderRed"> col-sm-3 </div> <div class="col-sm-3 borderRed"> col-sm-3 </div> </div> </div> <!-- end .main --> <div class="topnav"> <ul class="list-inline"> <li> <a href="#">link 1</a> </li> <li> <a href="#">link 2</a> </li> <li> <a href="#">link 3</a> </li> <li> <a href="#">link 4</a> </li> </ul> </div > </div> <!-- end .container-fluid -->

/* layout */ body { background:#D3D3D3; } .container-fluid { margin:15px 15px 15px 115px; height:100%; background:#fff; max-width:1400px; } .borderaRed { border:1px dashed rgb(255,0,0); } /* nav */ nav { position: fixed; overflow: scroll; top: 0; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: #f7f7f7; width:100px; box-shadow:0px 4px 5px #ccc; border-right:1px solid #ccc; } nav ul { list-style:none; padding-left:0; } nav ul li { text-align:center; border-bottom:1px solid #ccc; } nav ul li a { padding:20px 0; display:list-item; transition:all ease .4s; } nav ul li a:hover { background:#eee; } .topnav ul li a { padding:0 20px; border-left:1px dashed #eee; } /* header */ header { } /* main */ #slider img{ max-height:330px; } .borderCY { border:6px solid #4E94C4; } .media-object { border:3px solid #4E94C4; } .topnav { position:fixed; top:0; width:100%; padding:20px; background:#555; margin: 15px 15px 15px -15px; max-width: 1400px; }