music-beats
<!DOCTYPE html>
<html lang="en">
<head>
<title>Music Beats | About Us</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#979797;
}
html {
min-width:1000px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
position:relative;
width:1000px;
font-size:.814em;
}
header {
position:relative;
background:url(music-beats-images/header-bg1.jpg) no-repeat center top;
margin-bottom:-20px;
}
section#content {
float:left;
width:555px;
padding-bottom:50px;
}
aside {
float:left;
width:383px;
position:relative;
z-index:10;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
.cont-bot {
background:url(music-beats-images/cont-bot.jpg) no-repeat left top;
width:368px;
height:199px;
position:absolute;
left:0;
top:-199px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
.news li {
line-height:1.538em;
padding-bottom:20px;
}
.news li strong {
color:#fff;
display:block;
}
.news li a {
text-decoration:none;
font-weight:bold;
}
.news li a:hover {
text-decoration:underline;
}
.list {
margin-top:-25px;
}
.list li {
line-height:1.538em;
padding-top:20px;
}
.list li strong {
color:#d730f8;
display:block;
padding-bottom:5px;
}
.list li a {
color:#fff;
}
.list li a img {
position:relative;
top:5px;
}
.list1 {
margin-top:-30px;
}
.list1 li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.538em;
padding-top:30px;
}
.list1 li img {
float:left;
margin-right:25px;
}
.list1 li strong {
color:#d730f8;
display:block;
padding-bottom:5px;
}
.list1 li a {
text-decoration:none;
}
.list1 li a:hover {
text-decoration:underline;
}
.sitemap {
padding-bottom:20px;
}
.sitemap li {
padding:0 0 0 12px;
line-height:1.538em;
background-image:url(music-beats-images/marker.gif);
background-repeat:no-repeat;
background-position:0 7px;
}
.sitemap li ul li {
background-image:url(music-beats-images/marker1.gif);
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.538em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:20px;
line-height:1.538em;
}
.p0 {
margin:0;
}
.p1 {
margin-top:20px;
}
.p2 {
margin-bottom:10px;
}
a {
color:#d730f8;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
position:absolute;
left:53px;
top:65px;
text-indent:-9999px;
}
h1 a {
width:396px;
float:left;
height:122px;
background:url(music-beats-images/logo.png) no-repeat left top;
}
h2 {
color:#fff;
font-size:30px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
.txt1 {
color:#fff;
}
.button {
float:right;
}
.button strong {
display:block;
background:url(music-beats-images/button-border.gif) no-repeat left top;
}
.button span {
background:url(music-beats-images/button-border.gif) no-repeat right top;
padding:0 1px;
display:block;
}
.button strong span a {
display:block;
background:url(music-beats-images/button-tail.gif) repeat-x left top;
padding:7px 19px 7px 19px;
color:#fff;
text-decoration:none;
}
.button strong span a:hover {
text-decoration:underline;
}
header .container {
height:316px;
}
header nav {
padding:0 0 0 57px;
position:absolute;
}
header nav ul {
width:100%;
overflow:hidden;
}
header nav ul li {
float:left;
font-size:16px;
padding-right:23px;
margin-right:20px;
line-height:1.2em;
background:url(music-beats-images/divider.png) no-repeat right 6px;
}
header nav ul li.last {
padding-right:0;
margin-right:0;
background:url(music-beats-images/spacer.gif);
}
header nav ul li a {
color:#fff;
text-decoration:none;
display:block;
text-align:center;
height:52px;
width:131px;
background:url(music-beats-images/spacer.gif);
background-repeat:no-repeat;
background-position:0 0;
}
header nav ul li.m1 a:hover, header nav ul li.m1 a.active {
background-image:url(music-beats-images/m1-act.png);
}
header nav ul li.m2 a:hover, header nav ul li.m2 a.active {
background-image:url(music-beats-images/m2-act.png);
}
header nav ul li.m3 a {
width:146px;
}
header nav ul li.m3 a:hover, header nav ul li.m3 a.active {
background-image:url(music-beats-images/m3-act.png);
}
header nav ul li.m4 a {
width:159px;
margin-left:1px;
}
header nav ul li.m4 a:hover, header nav ul li.m4 a.active {
background-image:url(music-beats-images/m4-act.jpg);
}
header nav ul li.m5 a {
width:147px;
}
header nav ul li.m5 a:hover, header nav ul li.m5 a.active {
background-image:url(music-beats-images/m5-act.png);
}
header nav ul li a span {
display:block;
padding-top:13px;
}
#content .indent {
padding-top:20px;
}
aside .inside {
padding:0 85px 180px 59px;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
}
#contacts-form label {
float:left;
width:97px;
line-height:18px;
padding-bottom:8px;
}
#contacts-form input {
width:295px;
padding:1px 0 1px 3px;
border:1px solid #4d4d4d;
color:#979797;
background:none;
}
#contacts-form textarea {
width:444px;
height:285px;
padding:1px 0 1px 3px;
border:1px solid #4d4d4d;
color:#979797;
margin-bottom:19px;
overflow:auto;
background:none;
}
#page1 header {
height:449px;
background:url(music-beats-images/header-bg.jpg) no-repeat center top;
}
#page1 header h1 {
top:128px;
}
#page1 header nav ul li.m4 a:hover {
background:url(music-beats-images/m4-act-alt.png) no-repeat left top;
}
footer {
background:url(music-beats-images/footer-bg.jpg) no-repeat center top;
color:#fff;
font-size:.92em;
line-height:1.667em;
}
footer .container {
height:104px;
position:relative;
}
footer .footerlink {
padding:32px 55px 0 55px;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#979797;
}
.footerlink a {
color:#979797;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#979797;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/ITC_Busorama_500.font.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, header nav ul li, header nav ul li a, h1 a');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page2">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1><a href="#">Music Beats</a></h1>
<nav>
<ul>
<li class="m1"><a href="index.html"><span>home</span></a></li>
<li class="m2"><a href="about-us.html" class="active"><span>about</span></a></li>
<li class="m3"><a href="articles.html"><span>articles</span></a></li>
<li class="m4"><a href="contact-us.html"><span>contacts</span></a></li>
<li class="m5 last"><a href="sitemap.html"><span>sitemap</span></a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<aside>
<div class="inside">
<h2>Latest News</h2>
<ul class="news">
<li><a href="#">June 30, 2010</a><strong>Sed ut perspiciatis unde</strong>Omnis iste natus luptatem accusantium doloremque laudantium totamrem.</li>
<li><a href="#">June 14, 2010</a><strong>Neque porro quisquam est</strong>Consequuntur magni dolores eos qughi ratione voluptatem sequi.</li>
<li><a href="#">May 29, 2010</a><strong>Minima veniam, quis nostrum</strong>Ut enim ad minima veniam, quis nosrum exercitatnem ullam corporis.</li>
</ul>
</div>
</aside>
<section id="content">
<h2>About Your Website</h2>
<p class="p2"><span class="txt1">Sed ut perspiciatis unde omnis</span> iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rationeue porro quisquam est.</p>
<h2 class="indent">About Your Team</h2>
<ul class="list1">
<li><img src="music-beats-images/2page-img1.jpg"><strong>Team Member One</strong>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor mauris tincidunt.</li>
<li><img src="music-beats-images/2page-img2.jpg"><strong>Another Team Member</strong>Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor mauris tincidunt.</li>
</ul>
</section>
<div class="clear"></div>
</div>
</div>
<footer>
<div class="container">
<div class="cont-bot"></div>
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
<div style="clear:both;"></div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category