guitarhero
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GUITARhero</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
strong { font-weight: bold; }
body { background: #0e0f0e url('guitarhero-images/bg.gif') repeat-x bottom; color: #aaa; font: normal 68.75% Arial, Helvetica, sans-serif; }
a { color: #aaa; text-decoration: underline; }
a:hover { color: #ffa227; text-decoration: none; }
#container { width: 760px; margin: 0; padding: 0; margin: 0 auto; background: transparent url('guitarhero-images/guitar.jpg') no-repeat 420px 0px; }
/*-------------------- HEADER --------------------*/
#header { clear: both; background: transparent; height: 80px; text-align: right; }
h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Arial, sans-serif; }
h1 { display: block; font-size: 300%; font-weight: bold; padding: 0; text-align: right; margin: 20px 380px 0 0; color: #ffa227; }
h1 span { color: #fff; display: inline; font-size: 110%; font-family: Verdana, sans-serif; }
h1:first-letter, h2, #sidebar h3 { color: #b6da6e; }
h2 { font-size: 200%; font-weight: bold; }
h3 { font-size: 150%; }
/*--------------------SIDEBAR --------------------*/
#sidebar { float: right; width: 340px; margin: 400px 0 0 0; }
#sidebar h3 { font-weight: bold; }
#nav { float: right; text-align: left; width: 150px; padding: 0; }
#nav li { display: block; margin: 0; padding: 0px; font-weight: bold;}
#nav li a { font: bold 150% "Trebuchet MS", sans-serif; display: block; text-decoration: none; padding: 0 0 5px 0; }
#nav li a:first-letter { color: #ffa227; }
#current { color: #ffa227; }
/*--------------------SHOWS --------------------*/
#shows { float: right; width: 170px; margin-right: 10px; }
#shows ul { margin-bottom: 20px; }
#shows ul li { padding: 10px 0 10px 0; }
form { background: transparent; width: 170px; margin-top: 0; padding-top: 1em; }
fieldset { border: 0; padding: 0; margin: 0; width: 170px; }
input, .button { font-size: 90%; }
label, input { float: left; display: block; margin-bottom: 10px; }
label { width: 100px; text-align: left; padding-right: 0px; font-size: 120%; font-weight: bold; }
input { width: 100px; border: 1px solid #fff; }
br { clear: both; }
/*-------------------- MAIN CONTENT --------------------*/
#main { background: transparent; float: left; width: 380px; padding: 0; margin: 0; }
#main h3 { font-size: 90%; margin-bottom: 20px; font-weight: normal; }
#main p { text-align: justify; line-height: 1.7em; font-size: 100%; }
#main ul { list-style-image: url('guitarhero-images/arrow.gif'); list-style-position: inside; margin-top: 10px; }
.divider { clear: both; background: transparent url('guitarhero-images/divider.gif') no-repeat; height: 3px; margin: 15px 0; }
input.button { width: 50px; color: #aaa; background: #0e0f0e; font-weight: bold; border: 1px solid #ffa227; padding: 2px; }
img.alignright { padding: 4px; margin: 0 0 2px 15px; display: inline; border: 0; }
img.alignleft { padding: 4px; margin: 0 15px 2px 0; display: inline; border: 0; }
img.centered { display: block; margin-left: auto; margin-right: auto; border: 0; }
.alignright { float: right; }
.alignleft { float: left }
a img.alignleft, a img.alignright, a img.centered { border: 3px solid #333; }
a:hover img.alignleft, a img.alignright, a img.centered { border: 3px solid #ffa227; }
/*-------------------- FOOTER --------------------*/
#footer { clear: both; text-align: center; }
#footer p { font-size: 90%; padding: 20px 0; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><span>GUITAR</span>hero</h1>
</div>
<div id="sidebar">
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/" id="current" accesskey="n">NEWS</a></li>
<li><a href="http://www.free-css.com/" accesskey="b">BIO</a></li>
<li><a href="http://www.free-css.com/" accesskey="t">TOUR</a></li>
<li><a href="http://www.free-css.com/" accesskey="m">MEDIA</a></li>
<li><a href="http://www.free-css.com/" accesskey="c">CONTACT</a></li>
</ul>
</div>
<div id="shows">
<h3>Upcoming shows</h3>
<ul>
<li><strong>24/08</strong> - <a href="http://www.free-css.com/">Reading Festival, UK</a></li>
<li><strong>25/08</strong> - <a href="http://www.free-css.com/">Leeds Festival, UK</a></li>
<li><strong>01/09</strong> - <a href="http://www.free-css.com/">ipsum dolor</a></li>
<li><strong>08/09</strong> - <a href="http://www.free-css.com/">ipsum nulla</a></li>
<li><strong>10/09</strong> - <a href="http://www.free-css.com/">accumsan massa</a></li>
</ul>
<form method="post" action="http://www.free-css.com/">
<fieldset>
<label for="newsletter">Newsletter</label>
<br />
<input type="text" id="newsletter" name="newsletter" />
<br />
<input type="submit" id="submit" name="submit" class="button" value="Join" />
</fieldset>
</form>
</div>
</div>
<div id="main">
<div class="divider"></div>
<h2>about GUITARhero</h2>
<h3>Posted on August 24th, 2007 by <a href="http://www.free-css.com/">Website Templates</a></h3>
<p> <strong>GUITARhero</strong> is a free and valid XHTML / CSS based website template. It is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Licence</a>. This means you can use it for personal or commercial projects. The only thing I ask is a link back to my website (doesn't have to be in the footer, any link will do). </p>
<p>The images are from Shilpin Patel and Malcolm Jelley. That's it, hope you like it.</p>
<div class="divider"></div>
<h2>Lorem ipsum dolor</h2>
<h3>Posted on August 21th, 2007 by <a href="http://www.free-css.com/">Website Templates</a></h3>
<a href="http://www.free-css.com/"><img src="guitarhero-images/london_bridge.jpg" width="100" height="117" alt="" class="alignleft" /></a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eget eros. Aliquam erat volutpat. Nunc vestibulum felis eu erat. Etiam non ligula quis tellus vestibulum porta. Duis volutpat, lorem non pulvinar cursus, ipsum nulla ornare ante, at accumsan massa mauris quis dolor. Mauris non elit id dolor pellentesque laoreet.. </p>
<div class="divider"></div>
<h2>Lorem ipsum dolor</h2>
<h3>Posted on August 21th, 2007 by <a href="http://www.free-css.com/">Website Templates</a></h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eget eros. Aliquam erat volutpat. Nunc vestibulum felis eu erat. Etiam non ligula quis tellus vestibulum porta. </p>
<ul>
<li><a href="http://www.free-css.com/">consectetuer adipiscing</a></li>
<li><a href="http://www.free-css.com/">vestibulum porta</a></li>
<li><a href="http://www.free-css.com/">quis tellus</a></li>
</ul>
<div class="divider"></div>
<h2>Lorem ipsum dolor</h2>
<h3>Posted on August 21th, 2007 by <a href="http://www.free-css.com/">Website Templates</a></h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eget eros. Aliquam erat volutpat. Nunc vestibulum felis eu erat. Etiam non ligula quis tellus vestibulum porta. Duis volutpat, lorem non pulvinar cursus, ipsum nulla ornare ante, at accumsan massa mauris quis dolor. Mauris non elit id dolor pellentesque laoreet.. </p>
</div>
<div id="footer">
<p>© 2007 Website.com. Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. Website template by <a href="http://arnaudvalle.free.fr">Arnaud Valle</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category