css:


.header {
background-image: url("../img/header.png");
width: 100%;
height: 79px;
}

.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}

.thirdheader {
background-image: url("../img/bhead3.png");
width: 100%;
height: 60px;
border-bottom: solid 6px #f6f6f6;
}

@font-face {
  font-family: telegrafico;
  src: url(‘telegrafico.ttf’);
}

#fontfamily1 {
color: #747272;
font-family: telegrafico;
font-size: 18px;
float: left;
}

#lines {
cursor: default;
float: right;
position: relative; 
bottom: 19px;
left: 2px;
}
#lines1 {
cursor: default;
float: right;
position: relative; 
bottom: 19px;
left: 1px;
}

/* Boxes row 1 */
#box1 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box2 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box3 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box4 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}

/* Boxes row 2 */

#box5 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box6 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box7 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}
#box8 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 219px;
height: 269px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
}

/* Pages */
#page1 {
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
width: 30px;
height: 28px;
border: solid 1px #bcbcbc;
-webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
box-shadow: inset 0px 0px 0px 1px #ffffff;
-webkit-border-radius: 3px;
border-radius: 3px;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;

}

.navigation {
display:inline;
}


.footerbefore {
background-image: url("../img/footerbg.png");
width: 100%;
height: 66px;
border-bottom: #d4ccb0;
}

.footerbefore {
background-image: url("../img/footerbg.png");
width: 100%;
height: 66px;
border-bottom: solid 7px #d4ccb0;
}


.footer {
background-image: url("../img/2.png");
width: 100%;
height: 242px;
border-bottom: solid 7px #5c5c5c;
}

.subfooter {
background-image: url("../img/subfooter.png");
width: 100%;
height: 67px;
}


#logo {
margin-top: 15px;
}

.navigation {
    list-style: none;
font-family: telegrafico;
	float: right;
	margin-top: 10px;
	font-size: 14px;
}

.navigation li {
     display: inline-block;
	 margin: 7px;
}

.navigation a {
color: #fff;
}
.navigation a:hover {
color: #000;
}

.current a{
color: #000;
}

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}

.nav6  li {
display: inline;
margin: 20px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}

.nav6 a {
color: #7d7253;
}

.nav6 a:hover {
background: rgb(241,228,185); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(241,228,185,1) 0%, rgba(251,241,210,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,228,185,1)), color-stop(100%,rgba(251,241,210,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e4b9', endColorstr='#fbf1d2',GradientType=0 ); /* IE6-9 */

color: #53410f;
  text-decoration: none;
  padding: 21px;
  clear: clear;
 
}

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

</head>
<header>
<!-- First header start -->
<div class="header">
<div class="container">
            <div class="row">

                        <div class="span6">
                                 <div id="logo"><img src="img/logo.png"></div>
								 </div>
                    <div class="span6">
                              <ul class="navigation">
                              <li><a href="#">Notifications</a></li>
                              <li><a href="#">Wish list [0]</a></li>
                              <li><a href="#">Account</a></li>
                              <li><a href="#">orders</a></li>
							  <li><a href="#"><img src="img/market.png"></a></li>
                               </ul>
                    </div>
				</div>	
			</div>
	   </div>
<!-- First header end -->
	   
	   <div class="secondheader">
	      <div class="container">
		           <div class="span12">
				              <ul class="nav6">
                              <li><a href="#">Home</a></li>
                              <li><a href="#">Categories</a></li>
                              <li><a href="#">Buy</a></li>
                              <li><a href="#">Sell</a></li>
							  <li><a href="#">Forums</a></li>
							  <li><a href="#">Contact</a></li>
							  <li><a href="#">item 1</a></li>
							  <li><a href="#">item 2</a></li>
							  <li><a href="#">item 3</a></li>
							  <li><a href="#">item 4</a></li>
							  <li><a href="#">item 3</a></li>
                              </ul>
							  </div>
				   </div>
		   </div>
    </div>
    <div class="thirdheader">
</div>
				
            </div>
</div>

</header>

<body>
         <div class="container">
                                  <br />
            <img src="img/slider.png" /><br />
                                  <br />
							<br />
					    
         <span id="fontfamily1">FEATURED</span>&nbsp;
		                          <div id="lines"><img src="img/lines.gif"/>
		                </div>
						
						<!-- Featured boxes start -->
<div class="row-fluid">
         <div class="span3">
		 <div id="box1"></div>
		                   </div>
						    <div class="span3">
							<div id="box2"></div>
		                                      </div>
											  <div class="span3">
							                  <div id="box3"></div>
		                                                        </div>
																   <div class="span3">
							                                       <div id="box4"></div>
		                                                                              </div>
										  
			   
			   </div>
			   <br />
			        <br />
			   	           <span id="fontfamily1">LETEST</span>&nbsp;
		                          <div id="lines1"><img src="img/line2.gif"/>
		                </div>
						
						<!-- Featured boxes start -->
<div class="row-fluid">
         <div class="span3">
		 <div id="box5"></div>
		                   </div>
						    <div class="span3">
							<div id="box6"></div>
		                                      </div>
											  <div class="span3">
							                  <div id="box7"></div>
		                                                        </div>
																   <div class="span3">
							                                       <div id="box8"></div>
		                                                                              </div>
										  
			   
			   </div>
			   <br />
			        <br />
					<div class="row-fluid">
					
		<ul>
			<li class="btn btn-info"><a href=""><span style="color: #545454;">&laquo;</span></a></li>
			<li class="btn btn-current"><a href=""><span style="color: #545454;">1</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">2</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">3</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">4</span></a></li>
			<li class="btn btn-info"><a href=""><span style="color: #545454;">5</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">6</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">7</span></a></li>
			<li class="btn btn-info"><a href="#"><span style="color: #545454;">&raquo;</span></a></li>		
<!--Class "arrow" is the arrow -->			
		</ul>
</div>
<br /><br /><br />
</div>
</body>

<div class="footerbefore">
</div>
<div class="footer">
</div>
<div class="subfooter">
</div>


</html>