WonderfulBlue
<!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>title</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
#wrap {
width:800px;
text-align:left;
margin:0 auto;
background:url(WonderfulBlue-images/bg.jpg) no-repeat
}
.float-l {
float:left
}
.folat-r {
float:right
}
.clearfix {
clear:both
}
/* header */
#header {
background:url(WonderfulBlue-images/hd.gif) no-repeat;
height:132px
}
#header h1 {
font-size:38px;
padding-top: 32px;
padding-left: 80px;
color:#294352
}
#header h1 span {
font-size:16px
}
ul#nav {
padding-left:40px;
overflow:hidden;
}
ul#nav li {
float:left;
height:50px;
}
ul#nav li a {
color:#fff;
font-weight:700;
height:50px;
padding:16px 20px;
margin:0 25px;
line-height:50px;
width:100px
}
ul#nav li a:hover {
background:url(WonderfulBlue-images/nav_hover.gif) no-repeat;
height:50px;
padding:16px 20px;
margin:0 25px;
line-height:50px;
}
/* content */
#content {
background:url(WonderfulBlue-images/content.gif) no-repeat;
height:538px;
padding:0 15px;
color:#fff
}
#content a {
color:#b9dbf5
}
.left {
width: 260px;
padding-left:35px
}
.left h2, .blog h2 {
font-size:26px;
font-weight:700;
padding:20px 0
}
#inner {
padding-top:80px
}
.right {
width: 330px;
padding-right: 40px;
}
.blog {
height: 150px;
padding-bottom: 40px;
}
/* footer */
#footer {
background:url(WonderfulBlue-images/ft.gif) no-repeat;
height:100px;
text-align:center;
padding-top: 30px;
color:#fff
}
#footer a {
color:#fff
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<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="#">Submission</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h1>ROBOTCC<span>short slogan here</span></h1>
</div>
<!-- /header -->
<div id="content">
<div id="inner">
<div class="left float-l">
<h2>Free CSS Templates</h2>
<p>This is ROBOTCC, 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 class="blog">
<h2>Free CSS Templates</h2>
<p>This is ROBOTCC, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
</div>
<div class="blog">
<h2>Free CSS Templates</h2>
<p> 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>
</div>
</div>
<!-- /content -->
<div id="footer">
<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 id="xhtml"><img src="WonderfulBlue-images/xhtml.gif" alt=" xhtml vaild" /> <img src="WonderfulBlue-images/css.gif" alt="css vaild" /></div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category