simple-type
<!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>
<title>Simple Type</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {margin-top:25px;background:#f8f8ff;font-family:Georgia,Palatino,Garamond,serif;color:#555;}
a:link {color:#000;text-decoration:none;}
a:visited {color:#555;}
a:hover, a:active {color:#000;}
#main {position:relative;overflow:hidden;height:500px;}
#main h1 {position:absolute;top:10px;right:0px;background:#222;}
#main h1 a{display:block;width:175px;height:48px;text-indent:-9999px;background: transparent url('simple-type-img/logo.gif') top left no-repeat;}
#main h2 {position:absolute;bottom:10px;left:0px;background:#222; padding: 5px 15px;font-weight:normal;}
#main h1 a, #main h2 a {color:#fff; text-decoration:none;}
#articles {position:relative;overflow:hidden;margin-top:25px;}
#articles ul {margin:0;padding:0;list-style:none;position:relative;overflow:hidden;}
#articles ul li{margin:0 10px 0 0;padding:0 8px;display:block;float:left;width:210px;border-right:1px dashed #e0e0e8;}
#articles ul li.no-margin{margin:0;border:none;}
#articles h2{margin:0;border:none;color:#333;margin-bottom:0.65em;font-size:1.4em;letter-spacing:0.5px;font-family:Georgia,Palatino,Garamond,serif;}
#articles h2 a{color:#333; text-decoration:none;}
#articles h2 a:hover{background:#000;color:#fff;}
#articles .meta{position:relative;top:-15px;font-size:0.8em;text-transform:uppercase;color:#999;margin-bottom:5px;font-family:helvetica,arial,sans-serif;}
#articles a.more{float:right;margin-right:5px;text-transform:lowercase;text-decoration:none;background:#E7E7DE;color:#696969;padding:0 5px;}
#articles a.more:hover{background:#000;color:#F1FBFF;}
#articles #description {margin-top:40px;float:left;width:300px;}
#articles #description img{margin-left:10px;float:right;border:#E7E7DE 4px solid;}
#articles #quote {margin-top:25px;margin-right:20px;width:620px;float:left;}
#articles #quote p {color:#666;font-size:3em;line-height:1em;padding:10px 0 0 10px;position:relative;}
#articles #quote p .symbol {font-size: 3em;color:#E7E7DE; position:absolute;right:0px;top:50px;z-index:-1;}
#articles #quote p .author {position:absolute;right:25px;bottom:-10px;font-size:0.4em;font-variant: small-caps;}
#articles #quote p .author a:hover{background:#000;color:#F1FBFF;}
#footer {position:relative;overflow:hidden;text-align:right;margin-top:25px;font-size:0.9em;color:#999;}
#footer p {font-style:italic;float:left;}
#footer ul{margin:0;padding:0;list-style:none;float:right;}
#footer ul li{display:inline;margin:0 10px;}
#footer ul li a{color:#3c94bc;text-decoration:none;}
#footer ul li a:hover{color:#111;text-decoration:underline;}
</style>
<link rel="stylesheet" href="css/grid/text.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/grid/960.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12">
<div id="main" class="grid_12">
<h1><a href="#">Site Name</a></h1>
<h2><a href="#">Featured post : here goes a title</a></h2>
<a href="#"><img src="simple-type-img/photo.jpg" alt="" /></a> </div>
<div id="articles" class="grid_12">
<ul>
<li>
<h2><a href="#">Article title</a></h2>
<div class="meta">published on 22 may, 2009</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#" class="more">read more »</a> </li>
<li>
<h2><a href="#">Article title</a></h2>
<div class="meta">published on 22 may, 2009</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#" class="more">read more »</a> </li>
<li>
<h2><a href="#">Article title</a></h2>
<div class="meta">published on 22 may, 2009</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#" class="more">read more »</a> </li>
<li class="no-margin">
<h2><a href="#">Article title</a></h2>
<div class="meta">published on 22 may, 2009</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#" class="more">read more »</a> </li>
</ul>
<div id="quote">
<p><span class="symbol">”</span>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<span class="author">— <a href="#">John Doe</a></span></p>
</div>
<div id="description">
<p><img src="simple-type-img/blank_gravatar.png" alt="" width="50" height="50" />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>
</div>
</div>
<div id="footer" class="grid_12">
<p>Design by <a href="http://chergaoui.com">Ahmed Chergaoui</a>. Image courtesy of <a href="http://www.flickr.com/photos/danielebefera/1525784287/">marghe00</a>.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category