spidercity
<!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>
<title>SpiderCity</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS RESET */
html{color:#000;background:#333333;}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:#FFFFFF
}
a {
text-decoration:none;
color:#acd600
}
a:hover {
text-decoration: underline;
}
#bg{
width:800px;
margin:0 auto;
background:url(spidercity-images/bg.gif)
}
#wrap {
text-align:left;
position:relative;
width:800px;
}
.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}
/* header */
#header { height:120px ; background:url(spidercity-images/hd.jpg) no-repeat top}
#header h1 { font-size:36px; padding:10px 0 0 30px}
#header div { padding:10px 0 0 30px}
#nav { position:absolute; top:70px;width:647px; background:url(spidercity-images/nav.jpg); line-height:50px; }
#nav li {float:left; font-weight:700; }
#nav a {text-decoration:none; display:block; text-align:center; color:#acd600}
#nav a:hover {background: #DDED06 url(spidercity-images/hover.jpg); color:#000000 }
li.h {width:107px}
li.a {width: 128px; padding-left: 2px;}
li.p {width: 129px; padding-left: 2px; }
li.c {width:128px; padding-left: 2px;}
li.d {width:144px; padding-left: 2px;}
/* content */
#footer { margin:0 20px}
#content {background:url(spidercity-images/ct_bg.gif) repeat-y; width:503px; }
#content h2{font-size:24px; margin:15px 25px}
#content p{margin:10px 25px; width:450px}
#side {width:144px; background:#4DA98E; margin:100px 0 0 0px;}
#side h2 {background:#5BC9A9; font-size:18px}
#side h3 {color: #FEBF01; font-size:16px; margin:20px 0 0 5px}
#side li {list-style:inside circle; line-height:22px}
.sinner { margin-left:2px}
#sider {background:url(spidercity-images/sbox_t.gif) no-repeat; width:21px; height:20px;margin:122px 0 0 0px;}
.sdinner{background: url(spidercity-images/sbox_bg.gif); width:21px;margin-top: 20px;height:720px; display:block}
.leftbar {margin-bottom:20px}
.lb { margin:80px 0 0 50px; display:inline}
#side, #content,.sdinner {
padding-bottom:1000px;
margin-bottom:-1000px;
}
#wrap {
overflow:hidden;
}
.logo { margin-right:20px}
.q {
width:100px;
}
.submit {
background:url(spidercity-images/submit.gif) no-repeat;
height:17px;
width:26px;
border:0;
}
.leftbar, .leftbar2, .leftbar3 {height:112px; width:31px; }
/*.leftbar { background: url(spidercity-images/bar.gif); position:absolute;left:60px; top:120px }
.leftbar2 {background: url(spidercity-images/bar2.gif); position:absolute;left:60px; top:250px}
.leftbar3 {background: url(spidercity-images/bar3.gif);position:absolute;left:60px; top:390px }
*/
.leftbar { background: url(spidercity-images/bar.gif); }
.leftbar2 {background: url(spidercity-images/bar2.gif); }
.leftbar3 {background: url(spidercity-images/bar3.gif); }
/* footer */
#footer { padding:15px 0 }
</style>
</head>
<body>
<div id="bg">
<div id="wrap">
<div class="lb fl">
<div class="leftbar"> <a href="http://www.free-css.com/"> <img src="spidercity-images/bar.gif" alt="" /></a> </div>
<div class="leftbar"> <a href="http://www.free-css.com/"> <img src="spidercity-images/bar2.gif" alt="" /></a> </div>
<div class="leftbar"> <a href="http://www.free-css.com/"> <img src="spidercity-images/bar3.gif" alt="" /></a> </div>
</div>
<div id="content" class="fl">
<div id="header"> <img src="spidercity-images/img3.gif" alt="" class="fr logo" />
<h1>spiderCity</h1>
<div>short slogan here</div>
</div>
<h2>Free CSS Templates</h2>
<p> spiderCity is a CSS template that is free and fully standards compliant. Free CSS Templates designed this template. </p>
<p> 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>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pretium commodo lorem. Cras gravida, mauris pellentesque aliquet posuere, sapien eros interdum orci, et sagittis sem dolor eu est. Curabitur et urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris laoreet egestas tortor. Donec sit amet ante sit amet velit bibendum interdum. Curabitur vitae enim. Curabitur sapien. Nullam sit amet urna ac velit tincidunt dapibus. Maecenas iaculis, orci eu hendrerit vehicula, turpis nunc vestibulum velit, quis tristique pede mauris eu arcu. Morbi fringilla, orci malesuada lobortis sollicitudin, magna odio interdum sem, sit amet ultricies metus dolor non nunc. In odio tortor, suscipit sit amet, placerat vel, vulputate nec, turpis. Morbi dictum nibh in est. Proin luctus malesuada odio. Praesent ut ipsum a nibh lobortis semper. </p>
<p> Maecenas adipiscing. Quisque rhoncus malesuada erat. Mauris pellentesque suscipit leo. Maecenas eget risus. Vivamus ullamcorper dolor ac ipsum. Nulla rhoncus feugiat massa. Donec molestie dapibus enim. Nunc lobortis ipsum at sem. In hac habitasse platea dictumst. Vestibulum blandit quam in mi. Nulla sit amet urna ut tellus dignissim feugiat. In at leo quis tellus mollis viverra. Integer eleifend. Maecenas sed augue quis orci mollis molestie. Integer congue ipsum vel justo. Nullam sollicitudin diam non metus. Nam venenatis massa at orci. Quisque malesuada mauris quis massa. Ut id neque. </p>
<p> In eget nisl bibendum metus scelerisque tempor. Integer eget sem. Nam et orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum ipsum, varius non, nonummy at, pulvinar eu, nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean consequat magna nec quam. Vivamus turpis est, ullamcorper vel, porttitor eget, pulvinar at, risus. Vestibulum vitae nunc vel libero bibendum imperdiet. Mauris bibendum blandit leo. </p>
<div id="footer">
<p id="copyright"> 2008. All Rights Reserved. <br/>
Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to <a href="http://www.dubaiapartments.biz/">Dubai Apartments</a></p>
</div>
</div>
<div id="side" class="fl">
<div class="sinner">
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Latin literature </a></li>
<li><a href="http://www.free-css.com/">making over years </a></li>
<li><a href="http://www.free-css.com/">Richard Clintock </a></li>
<li><a href="http://www.free-css.com/">Virginia looked one</a></li>
<li><a href="http://www.free-css.com/">Latin professor </a></li>
<li><a href="http://www.free-css.com/">Hampden Sydney </a></li>
</ul>
<h3>Seach</h3>
<form action="http://www.free-css.com/" method="post" id="sc">
<input type="text" name="q" id="q" value="" class="q"/>
<input type="submit" name="submit" id="submit" value="" class="submit"/>
</form>
<h3>Flickr</h3>
<img src="spidercity-images/img2.gif" alt="" />
<h3>Sponsors</h3>
<img src="spidercity-images/img.gif" alt="" /> </div>
</div>
<div id="sider" class="fl">
<div class="sdinner"></div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</body>
</html>
Related examples in the same category