music-school : Music « Templates « HTML / CSS

music-school
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music School</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#ebe8e6; color:#969686; font:10px/14px Tahoma, Geneva, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px; height:0}

p a{font:10px/14px Tahoma, sans-serif; color:#964b23; text-decoration:underline;}
p a:hover{ color:#000; text-decoration:none;}

.headline{font:10px/14px Tahoma, Geneva, sans-serif; color:#964b23; font-weight:bold}

#container{width:775px; position:relative; margin:0 auto;}

/* HEADER */

#header{width:775px; height:342px; position:relative; background:url(music-school-images/b_header.jpg) 0 0 no-repeat}
#header img#logo{position:absolute; top:158px; left:402px}

#header ul.menu{position:absolute; top:26px; left:58px; width:695px}
#header ul.menu li{height:18px; margin-right:15px; float:left}
#header ul.menu li a{height:18px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:18px;}

#header ul.menu li.btn_1 a{width:108px; background:url(music-school-images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:108px; background:url(music-school-images/btn_1_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_2 a{width:93px; background:url(music-school-images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:93px; background:url(music-school-images/btn_2_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_3 a{width:107px; background:url(music-school-images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:107px; background:url(music-school-images/btn_3_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_4 a{width:89px; background:url(music-school-images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:89px; background:url(music-school-images/btn_4_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_5{margin-right:0}
#header ul.menu li.btn_5 a{width:98px; background:url(music-school-images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:98px; background:url(music-school-images/btn_5_over.gif) 0 0 no-repeat;}

#header ul.menu li.line{width:10px; background:url(music-school-images/spacer_m.gif) 0 4px no-repeat}

/* CONTENT */

#content{width:775px; position:relative; clear:both; margin: 0 auto; background:url(music-school-images/b_content.gif) 0 0 repeat-x}

#c01{width:280px; float:left; margin:33px 23px 0 35px; display:inline}
#c02{width:200px; float:left; margin:37px 17px 0 0;}
#c03{width:185px; float:left; margin:37px 0 0 0;}

#welcome h2{height:26px; position:relative; background:url(music-school-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:8px}
#welcome img{float:left; margin-right:5px; margin-left:1px; display:inline}
#welcome p{margin-left:9px; padding-top:5px}
#welcome p#welText{float:left; width:148px; margin-left:0; padding-top:10px}

#why h2{height:22px; position:relative; background:url(music-school-images/h_why.gif) 0 0 no-repeat; margin-bottom:20px}
#why p{margin:0 0 20px 5px}

#why ul {margin-left:11px; clear:both;}
#why ul li{font:10px/14px Tahoma, Geneva, sans-serif; background:url(music-school-images/check.gif) 0 2px no-repeat; padding-left:29px; height:20px;}
#why ul li a{color:#964b23; text-decoration:underline;}
#why ul li a:hover{color:#000; text-decoration:none;}

#lessons h2{height:21px; position:relative; background:url(music-school-images/h_lessons.gif) 0 0 no-repeat; margin-bottom:20px}
#lessons img{margin: 0 0 5px 1px }
#lessons p{margin:0 0 0 5px}

.clear#end{height:15px}

/* FOOTER */

#footer{width:775px; height:69px; clear:both; background:url(music-school-images/b_footer.gif) 0 0 repeat-x }
#footer p{padding: 20px 0 0 0; font:11px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#3f3128;}
#footer p a{font:11px/16px Tahoma, sans-serif; font-weight:normal; color:#3f3128; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#3f3128}


</style>


</head>
<body>
<div id="container">
  <div id="header">
    <ul class="menu">
      <li class="btn_1"><a href="#">home</a></li>
      <li class="line"></li>
      <li class="btn_2"><a href="#">about us</a></li>
      <li class="line"></li>
      <li class="btn_3"><a href="#">education</a></li>
      <li class="line"></li>
      <li class="btn_4"><a href="#">services</a></li>
      <li class="line"></li>
      <li class="btn_5"><a href="#">contacts</a></li>
    </ul>
    <img src="music-school-images/logo.jpg" alt="" name="logo" width="342" height="82" id="logo"/> </div>
  <div id="content">
    <div id="c01">
      <div id="welcome">
        <h2></h2>
        <img src="music-school-images/img_welcome.jpg" width="125" height="125" alt="" />
        <p id="welText"><span class="headline">Fusce interdum. Maecenas eu elit sed nulla dignissim</span> <br />
          interdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy diam. Cras ullamcorper nibh.Lorem ipsum dolor sit amet, consectetuer </p>
        <div class="clear"></div>
        <p><a href="#">nterdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy diam. Cras ullamcorper nibh.Lorem</a><br />
          ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In </p>
      </div>
    </div>
    <div id="c02">
      <div id="why">
        <h2></h2>
        <p><span class="headline">Fusce interdum. Maecenas eu elit sed</span><br />
          interdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy </p>
        <ul>
          <li><a href="#">nterdum. Sed laoreet. Aenean </a></li>
          <li><a href="#">pede. Phasellus porta. Ut dictum </a></li>
          <li><a href="#">nterdum. Sed laoreet. Aenean </a></li>
          <li><a href="#">pede. Phasellus porta. Ut dictum </a></li>
          <li><a href="#">nterdum. Sed laoreet. Aenean </a></li>
          <li><a href="#">pede. Phasellus porta. Ut dictum </a></li>
        </ul>
      </div>
    </div>
    <div id="c03">
      <div id="lessons">
        <h2></h2>
        <img src="music-school-images/img_lessons.jpg" width="183" height="66" alt="" />
        <p><span class="headline">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam </span><br />
          <br />
          interdum. Sed laoreet. Aenean pede. Phasellus porta. Ut dictum nonummy diam. Cras ullamcorper nibh.Lorem ipsum dolor sit amet, consectetuer Phasellus porta. Ut <a href="#">more</a></p>
      </div>
    </div>
    <div class="clear" id="end"></div>
  </div>
  <div id="footer">
    <p><a href="#">HOME PAGE</a> | <a href="#">ABOUT US</a> | <a href="#">EDUCATION</a> | <a href="#">SERVICES</a> | <a href="#">CONTACTS</a><br/>
      Copyright &copy; Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
  </div>
</div>
</body>
</html>
Related examples in the same category

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