Guitar-Band : Music « Templates « HTML / CSS






Guitar-Band

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Arnaud Valle
http://arnaudvalle.free.fr/

Licensed under the Creative Commons Attribution 3.0 Unported (http://creativecommons.org/licenses/by/3.0/)
You are free to copy, distribute, adapt the work, but you must keep a link of some sort to me (in the footer or source).

Title : GUITARhero
Version: 1.0
Released: 20070924

-->
<html lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="description"/>
    <meta name="keywords" content="keywords"/> 
    <meta name="author" content="author"/> 
<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('Guitar-Band-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('Guitar-Band-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('Guitar-Band-images/arrow.gif'); list-style-position: inside; margin-top: 10px; }

.divider { clear: both; background: transparent url('Guitar-Band-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>


    <title>GUITARhero</title>
  </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="#" id="current" accesskey="n" title="news">NEWS</a></li>
            <li><a href="#" accesskey="b" title="bio">BIO</a></li>
            <li><a href="#" accesskey="t" title="tour">TOUR</a></li>
            <li><a href="#" accesskey="m" title="media">MEDIA</a></li>
            <li><a href="#" accesskey="c" title="contact">CONTACT</a></li>
          </ul>  
        </div>
        
        <div id="shows">
          <h3>Upcoming shows</h3>
          <ul>
            <li><strong>24/08</strong> - <a href="#">Reading Festival, UK</a></li>
            <li><strong>25/08</strong> - <a href="#">Leeds Festival, UK</a></li>
            <li><strong>01/09</strong> - <a href="#">ipsum dolor</a></li>
            <li><strong>08/09</strong> - <a href="#">ipsum nulla</a></li>
            <li><strong>10/09</strong> - <a href="#">accumsan massa</a></li>
          </ul>  
          
          <form method="post" action="">
            <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://arnaudvalle.free.fr/">arnaudvalle</a></h3>
        <p>
          <strong>GUITARhero</strong> is a free and valid XHTML / CSS based website template. It is released under a <a 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), <a href="http://arnaudvalle.free.fr/">http://arnaudvalle.free.fr/</a>.
        </p>

        <p>The images are from <a href="http://www.sxc.hu/profile/srpatel">Shilpin Patel</a> and <a href="http://www.sxc.hu/profile/malc72">Malcolm Jelley</a>. 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://arnaudvalle.free.fr/">arnaudvalle</a></h3>
        <a href=""><img src="Guitar-Band-images/london_bridge.jpg" width="100" height="117" alt="London Bridge" 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://arnaudvalle.free.fr/">arnaudvalle</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="#">consectetuer adipiscing</a></li>
          <li><a href="#">vestibulum porta</a></li>
          <li><a href="#">quis tellus</a></li>
        </ul>
        
        <div class="divider"></div>
        
        <h2>Lorem ipsum dolor</h2>
        <h3>Posted on August 21th, 2007 by <a href="http://arnaudvalle.free.fr/">arnaudvalle</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>&copy; 2007 Website.com. <a href="http://www.flashmint.com/show-type-flash.html">Flash Templates</a> by <a href="http://www.flashmint.com/">FlashMint</a></p>
      </div>
      
    </div>
  </body>
</html>

   
    
    
  








Related examples in the same category

1.music-beats
2.music-club
3.music-portal
4.music-school
5.music-store
6.music03
7.music1
8.music2
9.musiciansagency
10.musicmania
11.musicshop
12.musicshow
13.musicstore
14.wood-guitar
15.thepiano
16.guitarhero