bluey
<!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" />
<title>Bluey</title>
<style type='text/css'>
body {background-color:#ddd;font-family:Georgia,sans-serif;font-size:80%;}
h1 {font-size:19pt;}
h2 {font-size:15pt;}
div#wrap {margin:auto;width:80%;background-color:#fff;padding:1em;border:5px solid #ccc;}
div#header {background-color:#356aa0;color:#fff;padding:1em;margin-bottom:.5em;}
div#header h1 {margin:0;padding:0;}
div#header h2 {margin:0;padding:0;}
div#nav {background-color:#333;color:#eee;float:left;width:100%;text-align:center;margin-bottom:.5em;}
div#nav ul {margin:0;padding:0;float:left;}
div#nav li {display:inline;margin:0;padding:0;margin-right:.5em;}
div#nav li a {padding:5px;text-decoration:none;color:#eee;float:left;width:5em;border-right:1px solid #ccc;}
div#nav li a:hover {color:#eee;background-color:#555;}
div#content {padding:2em 1em;}
div#content h2 {border-bottom:1px solid #ddd;margin-bottom:.5em;}
div#content img.fancy {border:1px solid #ddd;padding:.5em;}
div#content img.left {float:left;margin-right:1em;}
div#content img.right {float:right;margin-left:1em;}
div#footer {text-align:center;margin-top:.5em;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Bluey</h1>
<h2>The subtitle for Bluey</h2>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>This is a header.</h2>
<img src="images/spacer.gif" alt="spacer.gif" class="fancy left" style="height:100px;width:100px;" />
<p>I couldn't think of a more creative name of this theme. It's a simple theme with a blue header. This theme should be able to stretch and pull without breaking apart much and there are no images in the design itself. If you have questions, comments, or complaints, send them to dabbaking [at] gmail [dot] com.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis mauris non risus pharetra viverra. Aliquam id enim id lacus condimentum tempus. Phasellus at mi. Phasellus egestas malesuada arcu. Nam pretium hendrerit leo. Nulla quam. Mauris fringilla. Etiam tristique nulla vel metus. Maecenas semper condimentum lacus. Proin vulputate. Suspendisse potenti. Proin sem mauris, suscipit eleifend, suscipit vel, consectetuer bibendum, odio.</p>
<p>Ut ante. Phasellus tortor augue, blandit in, blandit at, volutpat ac, augue. Nunc posuere felis nec pede. Vivamus eget enim sit amet augue tempor consequat. Integer semper lacus ac mi. Praesent luctus rutrum urna. Mauris dolor odio, sodales ut, posuere in, tincidunt nec, massa. Quisque ultrices. Etiam sed risus. Nulla blandit feugiat est. Pellentesque at tortor non massa feugiat pulvinar. Integer euismod. Duis ultricies nisl id metus. Suspendisse sollicitudin hendrerit augue. Nulla sollicitudin eleifend nulla. Nulla ultrices lectus vitae eros. Etiam et felis. Nam suscipit, quam vitae pulvinar rutrum, purus sem ultricies mauris, et convallis dolor arcu a libero. Pellentesque malesuada auctor libero.</p>
<h2>This is another header.</h2>
<img src="images/spacer.gif" alt="spacer.gif" class="fancy right" style="height:100px;width:100px;" />
<p>Sed varius nunc a diam. Nullam semper posuere justo. Integer venenatis. Cras arcu. Maecenas vitae purus eu mi iaculis viverra. Proin orci. Integer eu mi. Fusce lacinia consectetuer dui. Integer ornare auctor risus. Integer sit amet erat. Vivamus elementum risus in quam. Aliquam ac diam ac tellus vestibulum tristique. Quisque pharetra ullamcorper mi. Mauris est sapien, condimentum eget, faucibus id, viverra posuere, erat. Nunc eleifend purus ut tortor.</p>
<p>Ut pellentesque. Nulla pede mi, laoreet non, varius nec, congue ut, neque. Vivamus aliquam, est id suscipit facilisis, nibh tortor porttitor diam, ut rutrum massa lectus id turpis. Curabitur molestie urna nec velit. Donec egestas. Aenean odio tortor, aliquet et, ornare vel, pharetra a, tellus. Duis pede eros, rhoncus ac, tempor euismod, tincidunt quis, nisi. Nunc rhoncus, dui eget dictum tincidunt, mauris neque consequat enim, in accumsan orci odio a enim. Nulla id sapien. Suspendisse fermentum turpis interdum ipsum hendrerit adipiscing.</p>
<p>Sed auctor dolor ac leo. Nullam ac nisi. Integer rhoncus rhoncus quam. Phasellus ut ligula. Nunc ac felis et ante malesuada venenatis. In hac habitasse platea dictumst. Praesent tellus nisl, tempor at, faucibus id, molestie sit amet, risus. Pellentesque varius dignissim orci. Mauris lorem. Integer vulputate massa quis nibh.</p>
</div>
</div>
<div id="footer">
© 2008 You Inc. - Design by <a href="http://darkfate.info/">darkfate</a>
</div>
</body>
</html>
Related examples in the same category