1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <title>HEARTS &amp; MINDS</title>
  7.         <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
  8.         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  9.                
  10.         <!--[if IE 6]>
  11.         <script src="js/DD_belatedPNG.js"></script>
  12.         <script> DD_belatedPNG.fix('.png, #navigation b'); </script>
  13.         <![endif]-->
  14.  
  15. </head>
  16. <body>
  17.        
  18.         <div id="header">
  19.        
  20.                 <div class="inner">
  21.                        
  22.                         <a href="#" id="logo" class="png">HEARTS &amp; MINDS</a>
  23.                        
  24.                         <form action="#" method="post" id="search">
  25.                                 <p><label>Search</label></p>
  26.                                 <p><input type="text" value="" /></p>
  27.                         </form>
  28.                        
  29.                         <div id="navigation">
  30.                                 <ul>
  31.                                         <li class="first active"><b></b><a href="#">Home</a></li>
  32.                                         <li><b></b><a href="#">About</a></li>
  33.                                         <li><b></b><a href="#">Blog</a></li>
  34.                                         <li><b></b><a href="#">Volunteer</a></li>
  35.                                         <li><b></b><a href="#">Contact</a></li>
  36.                                 </ul>  
  37.                         </div>
  38.                        
  39.                 </div>
  40.                
  41.         </div>
  42.        
  43.         <div id="site" class="png">
  44.                
  45.                 <div id="shadow"></div>
  46.        
  47.                 <div id="wrapper">
  48.                        
  49.                         <div id="main">
  50.                                
  51.                                 <div class="box1_top"></div>
  52.                                 <div class="box1">     
  53.                                
  54.                                         <div id="date">
  55.                                                 <strong>SEPT 15</strong>
  56.                                         </div>
  57.                                        
  58.                                         <div id="main_image">
  59.                                                 <img src="images/temp/img1.jpg" alt="" />
  60.                                         </div>
  61.                                        
  62.                                         <h2>Blog or other title</h2>
  63.                                        
  64.                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales suscipit orci, quis tincidunt velit placerat non. Donec quis leo nulla. In hac habitasse platea dictumst. Aliquam erat volutpat. In aliquam nulla a sapien faucibus et blandit ipsum dapibus. Praesent odio arcu, hendrerit tincidunt consequat sed, rutrum a ligula. <a href="#" class="more">MORE &gt;&gt;</a></p>
  65.                                
  66.                                 </div>
  67.                                 <div class="box1_bottom"></div>
  68.                                
  69.                                 <h2>Secondary title</h2>
  70.                                
  71.                                 <p>In dictum sem hendrerit nisi tristique pretium. Suspendisse ornisl, sollicitudin ac vestibulum non, ultrices sit amet leo. Aliquam lobortis, turpis quis malesuada volutpat, ligula libero vehiculaat, non tempor augue erat et nibh. Integer sed velit non diam sodales mollis a ac augue. Suspendisse lectus velit, pulvinar quis placeratd, imperdiet in tellus. Suspendisse at diam mi. Ut enim massa, rtis id consectetur at, congue at leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non arcu augue. Phasellus ma nulla, pellentesque ut tempus id, convallis vitae dui. <a href="#" class="more">MORE &gt;&gt;</a></p>
  72.                                
  73.                         </div>
  74.                        
  75.                         <div id="sidebar">
  76.                                
  77.                                 <div class="box2 top">
  78.                                        
  79.                                         <h3>Recent comments</h3>
  80.                                        
  81.                                         <ul>
  82.                                             <li class="top"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  83.                                             <li><a href="#">Onsectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  84.                                             <li><a href="#">Fow gosk owscing elitk wogko <span>&gt;&gt;</span></a></li>
  85.                                             <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  86.                                         </ul>
  87.                                        
  88.                                 </div>
  89.                                 <div class="box2_bottom"></div>
  90.                                
  91.                                 <div class="box2">
  92.                                        
  93.                                         <h3>In the news</h3>
  94.                                        
  95.                                         <ul>
  96.                                             <li class="top"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  97.                                             <li><a href="#">Onsectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  98.                                             <li><a href="#">Fow gosk owscing elitk wogko <span>&gt;&gt;</span></a></li>
  99.                                             <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In so <span>&gt;&gt;</span></a></li>
  100.                                         </ul>
  101.                                        
  102.                                 </div>
  103.                                 <div class="box2_bottom"></div>
  104.                                
  105.                                 <form action="#" method="post" id="signup">
  106.                                         <p><label>Sign up</label></p>
  107.                                         <p><input type="text" value="" /></p>
  108.                                 </form>
  109.                                
  110.                         </div>
  111.                        
  112.                         <div class="clr"></div>
  113.                
  114.                 </div>
  115.        
  116.                 <div id="footer">
  117.                         <p>All Rights Reserved &copy; <a href="#">HEARTS &amp; MINDS</a>, 2009</p>
  118.                 </div>
  119.        
  120.         </div>
  121.  
  122. </body>
  123. </html>