Preview - HTML - CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>

<body>

<!-- begin header container -->
<div id="headerCntr">

	<div id="headerWrap">
    
    	<!-- begin header left -->
    	<div id="headerLeft">
        
            <div id="logo"><a href="#"></a></div>
            <!-- // einde logo -->
            <div class="clear"></div>
            
            <div id="mainMenu">
                <ul>
                    
                    <li class="groen"><span class="tooltip"></span><a href="#">Uw communicatievraag</a>
                    
								<ul>
                        	<li><a href="#">Lorem ipsum dolor sit amet: cons</a></li>
                				<li><a href="#">Laboris nisi ut aliquip ex ea</a></li>
                				<li><a href="#">Lorem ipsum dolor sit amet: cons</a></li>
                				<li><a href="#">Laboris nisi ut aliquip ex ea</a></li>
                    		</ul>
                    
                    </li>
                    <li class="roze"><a href="#">Jouw carriere</a>
                    
                    		<ul>
                        	<li><a href="#">Nisi ut aliquip</a></li>
                				<li><a href="#">In reprehenderit in</a></li>
              					<li><a href="#">Nisi ut aliquip</a></li>
                				<li><a href="#">In reprehenderit in</a></li>
                     	</ul>
                        
                    </li>
                    <li class="blauw"><a href="#">Ons verhaal</a>
                    
                    		<ul>
                        	<li><a href="#">Nisi ut aliquip</a></li>
                				<li><a href="#">In reprehenderit in</a></li>
              					<li><a href="#">Nisi ut aliquip</a></li>
                				<li><a href="#">In reprehenderit in</a></li>
                    		</ul>
                    
                    </li>
                    
                </ul>
            </div>
            <!-- // einde main menu -->
            
        </div>
        <!-- // einde header left -->
        
        <div id="testimonials">
        		<div class="tekst"><h4>Lorem ipsum dolor sit amet, consectetur adipisicing</h4></div>
        		<div class="foto"><img src="images/testimonialFoto1.png" alt="" /></div>
        </div>
            <!-- // einde testimonials -->
       
    
    </div>
    <!-- // einde header wrapper -->

</div>
<!-- // einde header container -->


<!-- begin main container -->
<div id="mainCntr">


		<!-- begin twee kolommen -->
        <div id="tweeKolommenWrap">
        
        	<div id="eersteKolom" class="fotoLo">
            
            <h1 class="roze">Welcome to Lipsum</h1>
            <p style="color:#484848;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            <div class="slogan">
            	<span class="groot">Lorum Ipsum</span>
            	<span class="klein">Ontdek de 7 talenten</span>
            </div>
                
         </div>
            <!-- // einde eerste kolom -->
            
            <div id="tweedeKolom">
            
            	<div class="onsKantoor">
                
                	<img src="images/foto7Kantoor.png" alt="" />
                    <h2>Lorum Ipsum</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna lorum</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna lorum ds</p>
                
                	<div class="lijn"></div>
                
                </div>
                <!-- // einde ons kantoor -->
                
                <div class="widget">
                
                	<h2>Recente vacatures</h2>
                    <ul>
                    	<li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                        <li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                        <li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                    </ul>
                
                </div>
                <!-- // einde widget -->
                
                <div class="widget metLijn">
                
                	<h2>Beschikbare talenten</h2>
                    <ul>
                    	<li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                        <li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                        <li>Vacature 1, contractvorm, locatie, startdatum | <a href="#">Lees meer>></a></li>
                    </ul>
                
                </div>
                <!-- // einde widget -->
            
            </div>
            <!-- // einde tweede kolom -->
        	
            <div class="clear"></div>
        	<div id="fotoLo"><img src="images/fotoKijker.jpg" alt="" /></div>
        
        </div>
        <!-- // einde twee kolommen -->


</div>
<!-- // einde main container -->

<div id="footerCntr">

	<div id="footerWrap">
    
    	<div class="blok een">
        
        	<h3>Uw communicatievraag</h3>
            <ul>
            	<li><a href="#">Lorem ipsum dolor sit amet: cons</a></li>
                <li><a href="#">Laboris nisi ut aliquip ex ea</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet: cons</a></li>
                <li><a href="#">Laboris nisi ut aliquip ex ea</a></li>
            </ul>
        
        </div>
        <!-- // einde blok -->
        
        <div class="blok twee">
        
        	<h3>Jouw carriere</h3>
            <ul>
            	<li><a href="#">Nisi ut aliquip</a></li>
                <li><a href="#">In reprehenderit in</a></li>
                <li><a href="#">Nisi ut aliquip</a></li>
                <li><a href="#">In reprehenderit in</a></li>
            </ul>
        
        </div>
        <!-- // einde blok -->
        
        <div class="blok drie">
        
        	<h3>Ons verhaal</h3>
            <ul>
            	<li><a href="#">Nisi ut aliquip</a></li>
                <li><a href="#">In reprehenderit in</a></li>
                <li><a href="#">Nisi ut aliquip</a></li>
                <li><a href="#">In reprehenderit in</a></li>
            </ul>
        
        </div>
        <!-- // einde blok -->
        
        <div class="blok vier">
        
        	<h3>Volg ons via:</h3>
            
            <a href="#"><img src="images/iconLinkedin.png" alt="" /></a>
            <a href="#"><img src="images/iconTwitter.png" alt="" /></a>
            <a href="#"><img src="images/iconFacebook.png" alt="" /></a>
            <a href="#"><img src="images/iconRSS.png" alt="" /></a>
        
        </div>
        <!-- // einde blok -->
    
    </div>
    <!-- // einde footer wrap -->

</div>
<!-- // einde footer container -->

<div id="footerCopy">

	<p>Lorum BG | Ipsum Dolor 23 | 1234 AB New York | T 123-456-7890 | E: info@liipsum.com</p>

</div>
<!-- // einde footer copyright section -->

<p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-28%2Findex.html" rel="nofollow">
		<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">
   	<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valide CSS!" />
   </a>
</p>

</body>
</html>