Preview - HTML - CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
		
	<script src="js/cufon/cufon.js" type="text/javascript"></script>
	<script src="js/cufon/PF_DinText_Pro_Thin_200.font.js" type="text/javascript"></script>	
	<script src="js/cufon/PF_DinText_Pro_Medium_500.font.js" type="text/javascript"></script>
	<script src="js/cufon/PF_DinText_Pro_700.font.js" type="text/javascript"></script>
	<script src="js/cufon/" type="text/javascript"></script>
	
	<script type="text/javascript">
   	Cufon.replace('.pink_content h2, .blue_content h2, .stuk_tekst h3, .search label', { fontFamily: 'PF DinText Pro Thin' });
		Cufon.replace('.stuk_tekst h3 span, h2.lease_car, h4, .nu_leasen a span, .prijs strong, .lease p, p.bedrijfsnaam, p.aansluiting, h6', { fontFamily: 'PF DinText Pro Medium' });
		Cufon.replace('h4 span, .nu_leasen a, .prijs span, .ad_price span', { fontFamily: 'PF DinText Pro' });
	</script>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
	<script type="text/javascript">
		$(function(){
			$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
		});
	</script>	
		
	<script language="JavaScript" type="text/javascript">
      var panels = new Array('panel1', 'panel2', 'panel3', 'panel4', 'panel5', 'panel6', 'panel7');
      var selectedTab = null;
      function showPanel(tab, name)
      {
        if (selectedTab) 
        {
          selectedTab.style.backgroundColor = '';
          selectedTab.style.paddingTop = '';
        }
        selectedTab = tab;
        selectedTab.style.backgroundColor = 'white';
        selectedTab.style.marginTop = '0px';             
        for(i = 0; i  panels.length; i++)
        {
          document.getElementById(panels[i]).style.display = (name == panels[i]) ? 'block':'none';
        }
        return false;
      }
    </script>
</head>

<body onload="showPanel(document.getElementById('tab1'), 'panel1');">

<div id="header">

	<div class="header_left"></div>
	<div class="header_content">
		
		<div class="logo">
			<h1>
				<a href="#">
					Example 15
				</a>
			</h1>
		</div> <!-- END LOGO -->
		
		<div class="share">
			<div class="share_red">
				<span>1.4M</span>
				<a href="#"></a>
			</div>
			<div class="share_brown">
				<span>2.1M</span>
				<a href="#"></a>
			</div>
			<div class="share_blue">
				<span>3.2M</span>
				<a href="#"></a>
			</div>
		</div><!-- END SHARE -->
		
		<div class="menus_left">
				<div class="pink_top"></div>
				<div class="pink_content">
					<h2>other titel</h2>
					<ul>
						<li><a href="#">- link1</a></li>
						<li><a href="#">- link1</a></li>
						
						<li><a href="#">- link1</a></li>
						<li><a href="#">- link1</a></li>
					</ul>
				</div>
				<div class="pink_foot"></div>
				
				<div class="blue_top"></div>
				<div class="blue_content">
					<h2>Lorum Ipsum sit?</h2>
					<ul>
						<li><a href="#">- link1</a></li>
						<li><a href="#">- link1</a></li>
					</ul>
				</div>
				<div class="blue_foot"></div>
			</div><!-- END MENUS LEFT -->
			
			<div class="search" >
				<form action="#">
		
					<div class="rowElem">
						<label>Lorum:</label>
							<select name="select2" >
								<option value="opt1">The first element</option>
								<option value="opt2">Option 2</option>
								<option value="opt3">Option 3</option>
								<option value="opt4">Option 4</option>
								<option value="opt5">Option 5</option>
								<option value="opt6">Option 6</option>
								<option value="opt7">Option 7</option>
								<option value="opt8">Option 8</option>
							</select>
					</div>
		
					<div class="rowElem">
						<label>Ipsum:</label>
							<select name="select2" >
								<option value="opt1">The first element</option>
								<option value="opt2">Option 2</option>
								<option value="opt3">Option 3</option>
								<option value="opt4">Option 4</option>
								<option value="opt5">Option 5</option>
								<option value="opt6">Option 6</option>
								<option value="opt7">Option 7</option>
								<option value="opt8">Option 8</option>
							</select>
					</div>
					
					<div class="rowElem">
						<label>Alst:</label>
							<select name="select2" >
								<option value="opt1">The first element</option>
								<option value="opt2">Option 2</option>
								<option value="opt3">Option 3</option>
								<option value="opt4">Option 4</option>
								<option value="opt5">Option 5</option>
								<option value="opt6">Option 6</option>
								<option value="opt7">Option 7</option>
								<option value="opt8">Option 8</option>
							</select>
					</div>
					
					<input name="submit" id="submit" value="ZOEKEN" type="submit"/>
					<a href="#" class="uitgebreid" >Advanced search</a>
		
				</form>
			</div> <!-- END SEARCH -->
			
			
			<div class="twitter_logo">
				<img src="img/icons/twitter.jpg" width="169" height="48" alt="twitter" />
			</div>
	
	</div>
	<div class="header_right"></div>

</div> <!-- END HEADER -->

<div id="container">
		<div class="sidebar">
		
			<div class="twitter_update" >
				<a href="#">@lorumipsum</a>
				<span>9 minutes ago</span>
				<p>Lorem Ipsum is simply dummy text of the printing and</p>
			</div>
			
			<div class="twitter_update" >
				<a href="#">@lorumipsum</a>
				<span>19 minutes ago</span>
				<p>Lorem Ipsum is simply dummy text of the printing and</p>
			</div>
			
			<div class="twitter_update" >
				<a href="#">@lorumipsum</a>
				<span>29 minutes ago</span>
				<p>Lorem Ipsum is simply dummy text of the printing and</p>
			</div>
			
			<div class="stuk_tekst">
				<h3><span>Lorum</span> ipsum?</h3>
				<hr />
				<p>Lorem Ipsum is simply dummy text of the printing andLorem Ipsum is simply dummy text of the printing and</p>
			</div>
			
			<div class="stuk_tekst">
				<h3><span>Lorum</span> ipsum?</h3>
				<hr />
				<p>Lorem Ipsum is simply dummy text of the printing andLorem Ipsum is simply dummy text of the printing and</p>
			</div>
			
		</div> <!-- END SIDEBAR -->
		
		<div class="content">
			
			<div class="breadcrumbs" >
				<ul>
					<li><a href="#" >Search</a></li>
					<li>&nbsp;-&nbsp;</li>
					<li><a href="#" >BMW</a></li>
					<li>&nbsp;-&nbsp;</li>
					<li><a href="#" >BMW M5</a></li>
				</ul>
			</div>
		
    		<h2 class="lease_car" >Lorem Ipsum is simply dummy text of the printing</h2>
       
    		<div id="tabs">
    			<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel1');" id="tab1" onclick="return false;">Lorum</a>
    			<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel2');" onclick="return false;">Ipsum</a>
    			<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel3');" onclick="return false;">Allts</a>
    			<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel4');" onclick="return false;">Dollor</a>
    			<a href="" class="tab" onmousedown="return event.returnValue = showPanel(this, 'panel5');" onclick="return false;">SIT</a>
			</div>

    		<div class="panel" id="panel1" style="display: block">
		
    		<div class="overzicht_left">
    			<img class="large" src="images/auto.jpg" width="270" height="202" alt="auto" />
    			<div class="thumbs">
    				<a href="#"><img src="images/thumb.jpg" width="80" height="60" alt="thumb" /></a> 
    				<a href="#"><img src="images/thumb.jpg" width="80" height="60" alt="thumb" /></a> 
    				<a href="#"><img src="images/thumb.jpg" width="80" height="60" alt="thumb" /></a> 
    			</div>
    		</div>
    	
    		<div class="overzicht_right">
    			<h3>Lorum Ipsum</h3>
    				<table>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr class="blue" >
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    					<tr>
    						<td class="eigenschap" >Color</td>
    						<td class="waarde" >Green</td>
    					</tr>
    				</table>
    		</div><!-- END OVERZICHT RIGHT -->
    
    	</div>

    	<div class="panel" id="panel2" style="display: none">
    	</div>
    	<div class="panel" id="panel3" style="display: none">
    	</div>
    	<div class="panel" id="panel4" style="display: none">
	 	</div>
    	<div class="panel" id="panel5" style="display: none">
    	</div>
    
    	<h4><span>Choose</span> your lorum ipsum</h4>
    	<div class="lease">
    		<div class="nu_leasen">
    			<a href="#">Nu <span>Lipsum</span></a>
    		</div>
    		<p>Lorum Ipsum</p>
    		<div class="prijs">
    			&#128; <span>139,-</span> <strong>p/m</strong>
    		</div>
    	</div>
    
		<div class="lease">
    		<div class="nu_leasen">
    			<a href="#">Nu <span>Lorum</span></a>
    		</div>
    		<p>Via lipsummm</p>
    		<div class="prijs">
    			&#128; <span>139,-</span> <strong>p/m</strong>
    		</div>
    	</div>
    
    	<div class="lease">
    		<div class="nu_leasen">
    			<a href="#">Nu <span>Lpopl</span></a>
    		</div>
    		<p>Lorum Ipsum</p>
    		<div class="prijs">
    			&#128; <span>139,-</span> <strong>p/m</strong>
    		</div>
    	</div>
    
    	<h4><span>Where</span> lipsum dollor</h4>
		
    	<div class="locatie">
    		<div class="adres">
    			<p class="bedrijfsnaam" >Company X</p>
    			<p class="adresgegevens" >
    				Hoofdstraat 1<br />
    				1234 AB<br />
    				Amsterdam
    			</p>
    		</div>
    		<div class="aangesloten">
    			<p class="aansluiting" >Connected with:</p>
    			<p class="logos">
    				<img src="images/bovag.jpg" width="67" height="27" alt="alt" />
    				<img src="images/bovag.jpg" width="67" height="27" alt="alt" />
    			</p>
    		</div>
    		<div class="kaartje">
    			<img src="images/kaartje.jpg" width="131" height="111" alt="alt" />
    		</div>
    	</div>
    
		<div class="ad">
			<div class="ad_thumb">
    			<img src="" width="110" height="75" alt="alt" />
    		</div>
    		<div class="ad_car">
    			<h6>BMW M5</h6>
    			<p class="ad_car_specs" >Grijs, 3serie, zwart leden inrichting</p>
    			<p class="brandstof">Euro</p>
    			<p class="kilometerstand">12345</p>
    			<p class="bouwjaar">1901</p>
    		</div>
    		<div class="ad_price">
    		&#128; <span>139,-</span>
    		</div>
    		
    		
    	</div>
		
		</div><!-- END CONTENT -->
		
	</div><!-- END CONTAINER -->
	
	<div class="container_footer"></div>
	
	<p class="copyright" >
		&copy; 2012 <a href="#">Lorum Ipsum</a> - Dollor sit amet - <a href="#">Lorum Ipsum</a> - <a href="#">Dollor sit amet</a> - <a href="#">Lorum Ipsum</a>
	</p>

<p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-15%2Findex.html" rel="nofollow" target="_blank" >
		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	</a>
</p>

<p style="position: fixed; top: 20px; right: 10px;">
	<a href="http://jigsaw.w3.org/css-validator/" rel="nofollow" target="_blank" >
   	<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valide CSS!" />
   </a>
</p>

</body>
</html>