Mythology
<!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>mythology</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;
background:url(Mythology-images/bg.png);
}
a {
text-decoration:none;
color:#fff
}
a:hover {
text-decoration: underline;
color:#A1E062
}
#wrap {
width:1000px;
text-align:left;
margin:0 auto;
}
.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(Mythology-images/nav.jpg); width:529px;height:42px; line-height:42px; }
#nav li {float:left; font-weight:700; width:100px;background:url(Mythology-images/nav_b.jpg) no-repeat ; }
#nav li.first {background: none}
#nav a {text-decoration:none; display:block; text-align:center;}
#nav a:hover {background:url(Mythology-images/nav_hover.jpg);margin:0 0 0 5px}
/* content */
#content { }
.main {width:470px; font-family:Verdana, Arial, Helvetica, sans-serif;}
#text {width:430px; }
#text h2 {font-size:30px; padding-bottom:20px}
#text p img {float:left; padding:0 20px 0 0}
#text a { color:#A1E062}
#col {margin:50px 0 0 0; background:url(Mythology-images/col.jpg); height:156px ; }
#col div {width: 180px; margin: 20px 0 0 40px; display:inline}
#col .first {margin: 20px 0 0 20px }
#col li{line-height:20px;}
#col .first ul {border-right:#EEE 1px solid; }
.side { width:430px;display: inline; background: url(Mythology-images/side.gif) no-repeat; height:537px}
.side h2 {font-size:22px}
.sideinner img{margin:35px 0 30px 65px;}
.sideinner h3 a{font-size:34px;
color:#900000; margin:0 0 0 135px;}
/* footer */
#footer { background:url(Mythology-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>Mythology</h1>
<div>short slogan here</div>
</div>
<ul id="nav">
<li class="first"><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 class="sideinner">
<img src="Mythology-images/img2.jpg" alt="" />
<h3><a href="#">PhotoAlbum</a></h3>
</div>
</div>
<div class="main fr">
<div id="text">
<h2>Free CSS Templates</h2>
<p> <img src="Mythology-images/img.jpg" alt="" />Mythology 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="Mythology-images/xhtml.gif" alt="xhtml valid" /> <img src="Mythology-images/css.gif" alt="css valid" /></div>
</div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category