blossom
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>blossom - a free web template</title> <style type='text/css'> /** global **/ body { background-color:#AED1F4; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#555555; margin:0 auto; padding:0; } * { margin:0; padding:0; } /** element defaults **/ table { width:100%; font-family:Arial, Helvetica, sans-serif; font-size:11px; text-align:left; } th, td { padding:5px 10px; } th { color:#fff; border-top:3px solid #1D78D3; background-color:#3E91E5; } td { border-bottom:1px solid #f4f4f4; } code, blockquote { display:block; border-left:5px solid #ddd; padding:10px; margin-bottom:20px; } blockquote p { font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; margin:0; height: 1%; } p { line-height:1.9em; margin-bottom:20px; } a { color:#E53E91; } a:hover { color:#E22885; } a:focus { outline:none; } fieldset { display:block; border:none; border-top:1px solid #e0e0e0; } fieldset legend { font-weight:bold; font-size:13px; padding-right:10px; color:#222; } fieldset form { padding-top:15px; } fieldset p label { float:left; width:150px; font-family:Arial, Helvetica, sans-serif; } fieldset form input, fieldset form select, fieldset form textarea { padding:5px; color:#333333; font-size:13px; font-family:Arial, Helvetica, sans-serif; border:1px solid #ddd; } form input.formbutton { margin-left:150px; background:#3E91E5; border:none; font-family:Arial, Helvetica, sans-serif; border-bottom:3px solid #1D78D3; color:#ffffff; font-weight:bold; padding:5px 10px; font-size:12px; } h1 { font-size:45px; } h2 { color:#2f2f2f; font-family:Arial,Helvetica,sans-serif; font-size:30px; font-weight:bold; letter-spacing:-2px; padding:0 0 5px; margin:0; } h3 { color:#333333; font-size:20px; padding-bottom:10px; } h4 { padding-bottom:10px; font-size:15px; color:#2284B8; } h5 { padding-bottom:10px; font-size:13px; color:#666666; } ul, ol { margin:0 0 35px 35px; } li { padding-bottom:5px; } /** wrapper **/ div#wrapper { width:960px; margin:0 auto; padding:0; } /** sitename+nav **/ div#top { padding-top:50px; } div#top h1 { float:left; font-size:51px; padding-bottom:15px; } div#top h1 a { color:#3E91E5; font-weight:normal; letter-spacing:-4px; float:left; text-decoration:none; } div#top ul { float:right; list-style:none; margin:0 25px 0; padding:40px 0 0; } div#top ul li { float:left; display:block; padding:0; } div#top ul li a { padding:10px 15px; float:left; background-color:#549EE8; color:#fff; text-decoration:none; display:block; font-size:12px; font-weight:bold; border-right:1px solid #81B8EE; border-left:1px solid #2885E2; text-transform:uppercase; } div#top ul li.selected a, div#top ul li.selected a:hover { border:none; background-color:#EB6BAB; } div#top ul li a:hover { background-color:#3E91E5; } /** header **/ div#header { background-color:#EB6BAB; padding:25px; border-bottom:10px solid #E8549E; } div#header h2, div#header h3 { color:#fff; } div#header h2 { font-weight:normal; letter-spacing:0; } div#header h3 { font-size:16px; } /** body **/ div#body { background-color:#ffffff; padding:10px; } /** content+sidebar styles **/ div#content { width:675px; } div#content { font-size:12px; } div.column-left { float:left; margin-right:20px; } div.column-right { float:right; } div#sidebar { width:230px; } div#sidebar ul { margin:0; padding:0; list-style:none; } div#sidebar li ul { border-top:1px solid #ddd; margin-bottom:20px; } div#sidebar li ul li { display:block; padding:7px 15px; border-bottom:1px solid #ddd; color:#777; } div#sidebar li ul li a { text-decoration:none; font-family:"Trebuchet MS", Verdana, Arial; font-weight:bold; } div#sidebar li ul li a:hover { text-decoration:underline; } div#sidebar h4 { font-family:arial; font-size:12px; text-transform:uppercase; font-weight:bold; margin:0; padding:7px 10px; } /** footer **/ div#footer { background-color:#EB6BAB; padding:10px; color:#fff; } div#footer a { color:#fff; font-weight:bold; text-decoration:underline; } div#footer h4 { color:#fff; font-size:18px; } div#footer form { margin:0; padding:0; } div#footer form input#searchbutton { background-color:#E53E91; border-bottom:none; margin:0; } div#footer form input#searchquery { background-color:#E8549E; color:#fff; font-family:Arial, Helvetica, sans-serif; border:none; padding:5px 5px 6px; } div#footer ul { margin:0; padding:0; list-style:none; border-top:1px solid #E53E91; } div#footer ul li { padding:0; } div#footer ul li a { text-decoration:none; display:block; padding:7px 10px; border-bottom:1px solid #E53E91; } div#footer ul li a:hover { background-color:#E8549E; } div.footer-box { width:220px; margin-right:20px; float:left; } div.end-footer-box { margin-right:0; } div#footer-links { background-color:#E53E91; color:#ffffff; padding:5px; } div#footer-links p { text-align:right; padding:0; margin:0; font-size:10px; } div#footer-links a { color:#fff; font-weight:bold; text-decoration:underline; } /** clear **/ .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } .clear { display: block; } </style> </head> <body> <div id="wrapper"> <div id="top" class="clear"> <h1><a href="#">sitename</a></h1> <ul> <li><a href="index.html">home</a></li> <li class="selected"><a href="examples.html">examples</a></li> <li><a href="#">products</a></li> <li><a href="#">support</a></li> <li><a href="#">contact</a></li> </ul> </div> <div id="header"> <h2>Pellentesque habitant morbi tristique </h2> <h3>Curabitur velit turpis, faucibus nec interdum id, commodo eget felis</h3> </div> <div id="body" class="clear"> <div id="sidebar" class="column-right"> <ul> <li> <h4>Links</h4> <ul> <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li> <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li> <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li> <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li> <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li> </ul> </li> <li> <h4>Categories</h4> <ul> <li><a href="#">Lorem ipsum dolor sit amet.</a></li> <li><a href="#">Quisque consequat nunc a felis.</a></li> <li><a href="#">Suspendisse consequat magna at.</a></li> <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li> <li><a href="#">Sed in mauris non nibh.</a></li> </ul> </li> <li> <h4>Sponsors</h4> <ul> <li><a href="http://www.themeforest.net/?ref=spykawg" title="premium templates">ThemeForest</a> - premium HTML templates, WordPress themes and PHP scripts</li> <li><a href="http://www.dreamhost.com/r.cgi?259541" title="web hosting">Web hosting</a> - 50 dollars off when you use promocode <strong>awesome50</strong></li> <li><a href="http://www.4templates.com/?aff=spykawg" title="4templates">4templates</a> - brilliant premium templates</li> </ul> </li> </ul> </div> <div id="content" class="column-left"> <!-- CONTENT --> <h2>Examples</h2> <h1>Heading H1</h1> <h2>Heading H2</h2> <h3>Heading H3</h3> <h4>Heading H4</h4> <h5>Heading H5</h5> <p> </p> <h3>Lists</h3> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> <p> </p> <h3>Code and blockquote</h3> <code><? echo('Hello world'); ?></code> <blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></blockquote> <p> </p> <h3>Table</h3> <table> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>1</td> <td>John Smith</td> <td>28</td> </tr> <tr> <td>2</td> <td>Fred James</td> <td>49</td> </tr> <tr> <td>3</td> <td>Rachel Johnson</td> <td>19</td> </tr> </table> <p> </p> <h3>Form</h3> <fieldset> <legend>Form legend</legend> <form action="#" method="get"> <p><label for="name">Name:</label> <input type="text" name="name" id="name" value="" /><br /></p> <p><label for="email">Email:</label> <input type="text" name="email" id="email" value="" /><br /></p> <p><label for="message">Message:</label> <textarea cols="60" rows="11" name="message" id="message"></textarea><br /></p> <p><input type="submit" name="send" class="formbutton" value="Send" /></p> </form> </fieldset> <p> </p> </div> </div> <div id="footer" class="clear"> <div class="footer-box"> <h4>About our site</h4> <p> Morbi fermentum, nunc id pellentesque blandit, lectus velit pellentesque nisl, a condimentum est velit sed nisi. Sed libero velit, eleifend nec porttitor a, porta quis leo. In hac habitasse platea dictumst. </p> </div> <div class="footer-box"> <h4>Categories</h4> <ul> <li><a href="#">Lorem ipsum dolor sit amet.</a></li> <li><a href="#">Quisque consequat nunc a felis.</a></li> <li><a href="#">Suspendisse consequat magna at.</a></li> <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li> <li><a href="#">Sed in mauris non nibh.</a></li> </ul> </div> <div class="footer-box"> <h4>Network sites</h4> <ul> <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li> <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li> <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li> <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li> <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li> </ul> </div> <div class="footer-box end-footer-box"> <h4>Search our site</h4> <form action="#" method="get"> <p> <input type="text" id="searchquery" size="18" name="searchterm" /> <input type="submit" id="searchbutton" value="Search" class="formbutton" /> </p> </form> </div> </div> <div id="footer-links"> <p> © 2009 sitename. Design by <a href="http://www.spyka.net">Free CSS Templates</a> and <a href="http://www.justfreetemplates.com">Free Web Templates</a> </p> </div> </div> </body> </html>