Okeanos
<!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>Okeanos</title>
<style type='text/css'>
/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
/* CSS RESET */
body {
text-align:center;
color:#fff;
}
a {
text-decoration:none;
color:#fff
}
a:hover {
text-decoration: underline;
color:#A1E062
}
#wrap {
width:1000px;
text-align:left;
margin:0 auto;background:url(Okeanos-images/bg.jpg);
}
.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}
/* header */
#header { position:relative;height:260px }
#logo {position:absolute; top:60px; right:130px}
#logo h1 {
font-size:34px;
color:#fff
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:180px; left:470px; background:url(Okeanos-images/nav.jpg); width:435px;height:46px; line-height:46px; padding: 0 0 0 40px }
#nav li {float:left; font-weight:700; width:100px }
#nav a {text-decoration:none; display:block; text-align:center;}
#nav a:hover {background:url(Okeanos-images/nav_hover.jpg) -10px; }
/* content */
#content { }
.main {width:570px; font-family:Verdana, Arial, Helvetica, sans-serif;}
#text {width:530px; }
#text h2 {font-size:30px; padding-bottom:20px}
#text p img {float:left; padding:0 20px 0 0}
#text a { color: #FFCC00}
#col {margin:50px 0 0 0;width:300px; background:url(Okeanos-images/col.jpg); width: 535px; height:156px ; }
#col div {width: 200px; margin: 20px 0 0 70px; display:inline}
#col .first {margin: 20px 0 0 50px }
#col li{line-height:20px;}
.side {margin:0 0 0 40px; width:250px;display: inline;}
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#FFFFFF; }
.side ul {margin:30px 0 30px 20px}
/* footer */
#footer { background:url(Okeanos-images/ft.jpg); height:133px; position:relative}
#ftinner{ position:absolute; bottom:20px; width:680px; margin-left:120px}
.ftlink {width:500px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1>Okeanos</h1>
<div>short slogan here</div>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /header -->
<div id="content">
<div class="side fl">
<div id="top">
<h2>Sections</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>Other sevices</h2>
<ul class="meun">
<li><a href="#">Vestibulum bibendum tellus.</a></li>
<li><a href="#">Maecenas egestas sapien ac .</a></li>
<li><a href="#">Nam volutpat ante.</a></li>
<li><a href="#">Curabitur rhoncus leo in nisi.</a></li>
<li><a href="#">Nulla fringilla eros at sem.</a></li>
<li><a href="#">Integer euismod id est.</a></li>
<li><a href="#">Aenean viverra mi eu justo.</a></li>
</ul>
</div>
</div>
<div class="main fr">
<div id="text">
<h2>Free CSS Templates</h2>
<p> <img src="Okeanos-images/img.jpg" alt="" />Okeanos is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this template. <br/>
<br/>
This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
</div>
<div class="clearfix"></div>
<div id="col">
<div class="first fl">
<ul>
<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="#">Virginia looked one</a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<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>
<li><a href="#">Virginia looked one</a></li>
</ul>
</div>
</div>
</div>
<!-- /content -->
</div>
<div class="clearfix"></div>
<div id="footer">
<div id="ftinner">
<div class="ftlink fl"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a>
<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 class="valid fr"><img src="Okeanos-images/xhtml.gif" alt="xhtml valid" /> <img src="Okeanos-images/css.gif" alt="css valid" /></div>
</div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category