WaiveLive
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WaveLive</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
color:#FFFFFF
}
a:hover {
text-decoration: underline;
}
#wrap {
width:800px;
text-align:left;
margin:0 auto;
}
.float-l {
float:left
}
.folat-r {
float:right
}
.clearfix {
clear:both
}
/* header */
#header {
height:181px;
background:url(WaiveLive-images/hd.gif);
position:relative
}
#nav {
position:absolute;
top:100px;
right:30px
}
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav a {
color:#FFFFFF;
line-height:43px;
padding:0 10px;
border-right:#FFFFFF 1px solid;
}
ul#nav .last a {
border:none
}
#logo {
position:absolute;
top:40px;
left:100px
}
#logo h1 {
display:inline
}
#logo h1 {
font-size:34px;
color:#000
}
#logo span {
font-size:16px;
}
/* content */
#content {
height:450px;
background:#000
}
#content .left {
width:400px;
padding:0 50px;
color:#FFFFFF
}
#content .left h2 {
color:#709fc5;
font-size:34px;
padding:20px 0
}
#content .left img {
padding-right:20px
}
#content .left a {
color:#b7d2e3
}
#content .right {
width:300px;
}
#top, #bm {
width:173px;
margin:0 auto;
margin-top:30px;
padding:0 35px
}
#side h2 {
font-size:24px;
color:#709fc5;
padding:20px 0 13px 0
}
#side li {
line-height:20px
}
/* footer */
#footer {
clear:both;
background: url(WaiveLive-images/footer.gif);
height:170px;
color: #fff;
position:relative;
}
.ft {
position: absolute;
top:100px;
left:50px
}
#xhtml {
position: absolute;
top:130px;
left:550px
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo"><img src="WaiveLive-images/logo.gif" alt="" />
<h1>WaveLive </h1>
<span>short slogan here</span> </div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Production</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div id="inner">
<div class="left float-l">
<h2>Free CSS Templates</h2>
<div class="float-l"><img src="WaiveLive-images/img.gif" alt="" /></div>
<p>This is WaveLive, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
</div>
<div class="right folat-r">
<div id="side">
<div id="top">
<h2>My blog with gallery</h2>
<ul class="meun">
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
<div id="bm">
<h2>My blog with gallery</h2>
<ul class="meun">
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /content -->
<div id="footer">
<div class="ft">
<div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a> </div>
<p id="copyright"> 2008. All Rights Reserved. <br/>
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
<div id="xhtml"><img src="WaiveLive-images/xhtml.gif" alt=" xhtml vaild" /> <img src="WaiveLive-images/css.gif" alt="css vaild" /></div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category