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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link href="reset.css" type="text/css" rel="stylesheet" />
  <link href="style.css" type="text/css" rel="stylesheet" />
  <title>Orange Creative</title>
</head>
<body>
  <div id="page">
    
    <!-- HEADER -->
    <div id="header">
      <h1>Orange Creative</h1>
      <div class="info-email"><a href="mailto:info@CreativeStudio.com">info@CreativeStudio.com</a></div>
    </div>
    
    <!-- NAVIGATION -->
    <div id="navigation">
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    
    <!-- SPOTLIGHT -->
    <div id="spotlight">
      <img src="assets/images/spotlight-image.jpg" alt="spotlight" />
      <div class="description">
        <span>Here's some nice work</span>
        <a href="#">View portfolio<span>&rarr;</span></a>
      </div>
    </div>
    
    <!-- PAGE CONTENT -->
    <div id="page-content">
      <div class="box">
        <h2><span>&rarr;</span>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero. </p>
        <span class="read"><a href="#">Read</a></span>
      </div>
      <div class="box">
        <h2><span>&rarr;</span>Our benefits</h2>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </li>
          <li>Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </li>
        </ul>
      </div>
      <div class="box last">
        <h2><span>&rarr;</span>Testimonials</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. </p>
        <span class="name">Rafi, Johndoe.com</span>
      </div>
    </div>
    
    <!-- PORTFOLIO -->
    <div id="portfolio">
      <h2><span>&rarr;</span>Our Portfolio</h2>
      <ul>
        <li>
          <img src="assets/images/portfolio_1.jpg" alt="Portfolio 1" />
          <span><a href="#">View</a></span>
        </li>
        <li>
          <img src="assets/images/portfolio_2.jpg" alt="Portfolio 2" />
          <span><a href="#">View</a></span>
        </li>
        <li>
          <img src="assets/images/portfolio_3.jpg" alt="Portfolio 3" />
          <span><a href="#">View</a></span>
        </li>
        <li class="last">
          <img src="assets/images/portfolio_4.jpg" alt="Portfolio 4" />
          <span><a href="#">View</a></span>
        </li>
      </ul>
    </div>
    
    <!-- SOCIALS -->
    <div id="socials">

      <!-- BLOG UPDATES -->
      <div id="blog-updates">
        <h3><span>&rarr;</span>Blog Updates</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ultricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero. </p>
      </div>

      <!-- SOCIAL BUTTONS -->
      <div id="social-buttons">
        <h3><span>&rarr;</span>Connect with us</h3>
        <a href="#"><img src="assets/images/twitter.png" alt="Twitter" /></a>
        <a href="#"><img src="assets/images/facebook.png" alt="Facebook" /></a>
        <a href="#"><img src="assets/images/flickr.png" alt="Flickr" /></a>
        <a href="#"><img src="assets/images/rss.png" alt="RSS" /></a>
      </div>

    </div>
    
  </div>
  
  <div id="footer">
    <ul>
      <li class="first"><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li class="last"><a href="#">Contact Us</a></li>
    </ul>
    <span class="copyright">© 2010 CreativeStudio. All Rights Reserved</span>
    <div class="logo"><img src="assets/images/logo-small.png" alt="Orange Creation" /></div>
  </div>
  
  <p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-22%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>