music03
<!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>
<title>Music 03</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {margin: 0;font: 0.7em/1.6em verdana, arial, helvetica, sans-serif;background: #f9eddf url(music03-images/bg.jpg) repeat-x 0% 0%;letter-spacing: 1px;color: #1c3b5a;}
#wrapper {width: 620px; margin: 0 auto;}
#leftcolumn {margin: 0;padding: 4px 0 20px 0;display: inline;width: 310px;float: left;background: url(music03-images/bg_left.jpg) no-repeat 0% 0%;}
#rightcolumn {margin: 0;display: inline;padding: 4px 0 0 20px;width: 290px;float: left;background: url(music03-images/bg_right.jpg) no-repeat 0% 0%;}
#header {height: 150px;background: url(music03-images/header.jpg) no-repeat 0% 0%;color: #ffff69;text-align: right;margin: 0;padding-right: 10px;font-size: 1.2em;}
#header h1 {margin: 0;padding: 10px 0 5px 10px;color: #08ddfd;text-align: right;font-size: 1.3em;letter-spacing: 2px;}
#subtitle {color: yellow;}
#navtop {margin: 0 0 20px 0;padding: 0;float: left;background: url(music03-images/bg_navtop.jpg) top right repeat-x;}
#navtop li {display: inline;}
#navtop li a {float: left;color: #000;padding: 8px 0 8px 0;text-decoration: none;background: transparent url(music03-images/bg_navtop.jpg) top right repeat-x;border-top: 1px solid #d3bdbe; border-bottom: 3px solid #7d5e3f;outline:none;text-align: center;font-weight: normal; width: 124px;}
#navtop li a:visited {color: #000;}
#navtop li a:hover {color: black;background-image: url(music03-images/bg_navtop_over.jpg);}
#navleft {border-top: 1px solid #7d5e3f;border-bottom: 1px solid #7d5e3f;padding-left: 0; margin: 300px 0 10px 0; width: 302px;text-align: right;}
#navleft li {list-style: none;margin: 0;padding: 6px;}
#navleft li a {text-decoration: none;}
#navleft li a:hover {text-decoration: underline;}
a,a:link,a:visited,a:active {color: #b31176;outline:none;font-weight: bold;}
a:hover {color: #b09172;text-decoration: none;}
h1,h2,h3 {font-size: 1.5em;letter-spacing: 2px;color: #3f5e7d;margin-top: 0;}
h4,h5,h6 {font-size: 1.3em;letter-spacing: 1px;color: #5e7d3f;}
.imgparagraph {float: left;margin: 6px 10px 0 0;background: url(music03-images/amp.gif) repeat 0% 0%;}
.imgleft {float: left;margin: 6px 10px 0 0;}
.imgright {float: right;margin: 6px 0 0 10px;}
.gallery {position: relative;height: 285px;background: url(music03-images/gallery.jpg) no-repeat 0% 60px;color: #f9eddf;text-align: right;}
.gallery p {margin: 10px 18px 0px 0px;font-size: 1.2em;}
.thumbnail img{border: 0;margin: 0 8px 0 0;}
.thumbnail:hover{background-color: transparent;}
.thumbnail:hover img{border: 0;}
.thumbnail span{position: absolute;left: -1000px;visibility: hidden;text-decoration: none;}
.thumbnail span img{border-width: 0;}
.thumbnail:hover span{visibility: visible;top: 60px;left: 0px;z-index: 50;
}
#copyright {margin-top: 10px;padding: 5px 0 10px 0 ;font-size: .9em;border-top: 1px solid #7d5e3f;}
#copyright a,#copyright a:link,#copyright a:active,#copyright a:visited {color: #b09172;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>www.YourSitename.com</h1>
Your Slogan </div>
<ul id="navtop">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
</ul>
<div id="leftcolumn">
<ul id="navleft">
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
<li><a href="http://www.free-css.com/">Hyperlink</a></li>
</ul>
<h4>Gallery</h4>
<div class="gallery"> <a class="thumbnail" href="http://www.free-css.com/"><img src="music03-images/thumb1.gif" width="50" height="50" alt="" /><span><img src="music03-images/large1.gif" alt="" /></span></a> <a class="thumbnail" href="http://www.free-css.com/"><img src="music03-images/thumb2.gif" width="50" height="50" alt="" /><span><img src="music03-images/large2.gif" alt="" /></span></a> <a class="thumbnail" href="http://www.free-css.com/"><img src="music03-images/thumb3.gif" width="50" height="50" alt="" /><span><img src="music03-images/large3.gif" alt="" /></span></a> <a class="thumbnail" href="http://www.free-css.com/"><img src="music03-images/thumb4.gif" width="50" height="50" alt="" /><span><img src="music03-images/large4.gif" alt="" /></span></a> <a class="thumbnail" href="http://www.free-css.com/"><img src="music03-images/thumb5.gif" width="50" height="50" alt="" /><span><img src="music03-images/large5.gif" alt="" /></span></a>
<p>Latest photos</p>
</div>
<h4>Dates</h4>
<p><strong>January 27</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa.</p>
<p><strong>February 3</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa.</p>
<p><strong>February 17</strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa.</p>
</div>
<div id="rightcolumn">
<h1>Welcome! (h1, h2, h3)</h1>
<img class="imgparagraph" src="music03-images/amp.gif" width="32" height="32" alt="Amp" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa.
<h4>Headline (h4, h5, h6)</h4>
<p><img class="imgleft" src="music03-images/image1.jpg" width="100" height="100" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa.</p>
<p>[ <a href="http://www.free-css.com/">Read more...</a>]</p>
<p><img class="imgright" src="music03-images/image1.jpg" width="100" height="100" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa.</p>
<p>[ <a href="http://www.free-css.com/">Read more...</a>]</p>
<div id="copyright"> © Copyright 2007 <a href="http://www.free-css.com/">Your Sitename</a><br />
Sponsored by <a href="http://opendesigns.org/">Open Designs</a><br />
Photos <a href="http://www.free-css.com/">stock.xchng</a><br />
Icons <a href="http://www.free-css.com/">Leo's Icon Archive</a><br />
Design by <a href="http://www.free-css.com/">wfiedler</a><br />
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category