Cosmopolitan
<!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>Cosmopolitan</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:#000;
}
a {
text-decoration:none;
color:#9b3535;
}
a:hover {
text-decoration: underline;
color: #CC0000
}
#wrap {
width:900px;
text-align:left;
margin:0 auto;
background:url(Cosmopolitan-images/bg.jpg);
}
.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}
/* header */
#header { position:relative;height:111px; background:url(Cosmopolitan-images/hd.jpg); }
#logo {position:absolute; top:30px; left:80px}
#logo h1 {
font-size:34px;
color: #9B3535
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:35px; left:420px; background:url(Cosmopolitan-images/nav.jpg); width:451px;height:30px; line-height:30px; padding:0 0 0 20px }
#nav li {float:left; font-weight:700; width:80px; padding:0 5px }
#nav a {text-decoration:none; display:block; text-align:center; color:#fff}
#nav a:hover {background: #AA4479; color:#000000}
/* content */
.img { margin:0px 0 0 70px }
.main {width:440px; font-family:Verdana, Arial, Helvetica, sans-serif; background:url(Cosmopolitan-images/box.jpg); color:#000;}
#text {margin:0px 0 0 65px }
#text p {margin:0 auto; width:420px; }
#text h2 {font-size:30px; padding:20px 0 20px 0}
#text img {margin:10px 0 0 0}
#col {margin:30px 0 10px 65px ;width:300px; background:url(Cosmopolitan-images/col.jpg); width: 419px; height:161px ; }
#col div {width: 150px; margin: 20px 0 0 10px; display:inline}
#col .first {margin: 20px 30px 0 20px;}
#col li{line-height:20px; list-style:inside disc;color:#9b3535;}
#col a { color:#9b3535; text-decoration:underline;}
.side { width:320px;display: inline;}
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#9b3535; }
.side ul {margin:20px 0 30px 20px}
#top {margin-top:20px}
/* footer */
#footer { background:url(Cosmopolitan-images/ft.jpg); height:100px; position:relative}
#ftinner{ position:absolute; bottom:20px; width:680px; margin-left:80px; color:#E98383}
#ftinner a {color:#FFFFFF}
.ftlink {width:500px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1>Cosmopolitan</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"> <img src="Cosmopolitan-images/img.jpg" alt="" class="img" />
<div class="side fr">
<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"> <img src="Cosmopolitan-images/s.jpg" alt="" /> </div>
</div>
<div class="main fl">
<div id="text">
<h2>Free CSS Templates</h2>
<p> Cosmopolitan 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 id="col">
<div class="first fl">
<ul>
<li><a href="#">making over years </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
<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 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="#">making over years </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </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="Cosmopolitan-images/xhtml.gif" alt="xhtml valid" /> <img src="Cosmopolitan-images/css.gif" alt="css valid" /></div>
</div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category