Advanced Search

Compass HTML Page Template

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.   <meta name="author" content="Seth Etter">
  6.  
  7.   <!-- javascript -->
  8.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  9.   <script type="text/javascript" src="js/scripts.js"></script>
  10.  
  11.   <!-- style sheets -->
  12.   <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  13.   <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  14.   <!--[if lt IE 8]>
  15.     <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  16.   <![endif]-->
  17.  
  18.   <title>Compass Project</title>
  19.  
  20. </head>
  21. <body class="bp two-col">
  22.  
  23. <div id="container">
  24.  
  25.   <div id="header">
  26.     <h1 id="logo">Hello!</h1>
  27.   </div><!-- header -->
  28.  
  29.   <ul id="nav">
  30.     <li><a href="#" title="Home">Home</a></li>
  31.   </ul><!-- nav -->
  32.  
  33.   <div id="content">
  34.     <h2>Yonderstein</h2>
  35.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et massa orci, in scelerisque felis. Duis et diam sed lacus vulputate convallis et et eros. Quisque egestas pharetra turpis nec lobortis. Ut eget nunc ligula. Duis vel felis lorem. Aliquam erat volutpat. Mauris ac nulla eget lorem ultrices mattis quis at ante. Maecenas luctus fermentum purus sed viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  36.   </div><!-- content -->
  37.  
  38.   <div id="sidebar">
  39.     <h2>Sidebar</h2>
  40.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et massa orci, in scelerisque felis. Duis et diam sed lacus vulputate convallis et et eros. Quisque egestas pharetra turpis nec lobortis.</p>
  41.   </div><!-- #sidebar -->
  42.  
  43.   <div id="footer">
  44.     <p class="copy">Copyright info blah blah blah. 2011</p>
  45.   </div><!-- footer -->
  46.  
  47. </div><!-- wrap -->
  48.  
  49. </body><!-- .bp two-col -->
  50. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.