free-css-lunch
<!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>Free CSS Lunch</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;
}
#header {
height:268px;
background:url(free-css-lunch-images/hd_bg.jpg) no-repeat;
}
#footer {
height:202px;
background:url(free-css-lunch-images/ft.gif) no-repeat;
clear:both;
text-align:center;
color:#FFF;
}
#footer a {
color:#FFF;
}
#footer a:hover {
color:#FFF;
text-decoration:underline
}
#ftlink {
padding-top:100px;
}
#ftlink, #copyright {
padding-bottom:8px;
}
.inner {
padding:0 40px;
}
#content h2 {
color:#f5c715;
font-size:32px;
padding-bottom:10px;
}
#content img {
float:left;
}
#content p {
float:right;
width:530px;
padding-top:10px;
}
#content .blog {
float:left;
width:219px;
padding-bottom:20px;
padding-right:20px;
}
#content .blog h2 {
float:left;
font-size:24px;
padding-bottom:10px;
padding-left:27px;
}
#content .blog p {
width:190px;
}
#content p.qoute {
float:left;
background:url(free-css-lunch-images/quote.gif) no-repeat;
height:58px;
width:219px;
}
#content p.qoute span {
display:block;
height:58px;
width:180px;
padding:0 0 0 40px;
}
.clearfix {
clear:both;
}
.line {
clear:both;
background:url(free-css-lunch-images/line.gif);
height:13px;
}
#logo {
font-size:20px;
margin-left:270px;
padding-top:25px;
padding-left:50px;
background:url(free-css-lunch-images/logo.gif) no-repeat 0 20px;
height:47px;
}
#slogan {
color:#876b00;
padding-left:320px;
margin-top:-25px;
}
ul#nav {
float:right;
margin-top:-3px;
width:150px;
}
ul#nav a {
color:#6f1900;
font-weight:700;
}
ul#nav a:hover {
color:#000;
}
ul#nav li {
line-height:30px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo"> Free CSS Lunch </h1>
<div id="slogan">short slogan here </div>
<ul id="nav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Production</a></li>
<li><a href="http://www.free-css.com/">Submission</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="content">
<div class="inner">
<h2>Free CSS Templates</h2>
<img src="free-css-lunch-images/content.jpg" alt="" />
<p>This is Free CSS Lunch, a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a Creative Commons Attributions 2.5 license, so youre 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="line"></div>
<div class="inner">
<div class="blog">
<h2>Blog #1</h2>
<p class="qoute"><span>Designed by Free CSS Templates</span> </p>
<p>This is Free CSS Templates, a free, fully standards-compliant CSS template designed by Free CSS Templates. The photos in this design are from PDPhoto.org. This free template is released under a Creative Commons Attributions 2.5 license, so youre 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="blog">
<h2>Blog #2</h2>
<p class="qoute"><span>Designed by Free CSS Templates</span></p>
<p>This is Free CSS Templates, a free, fully standards-compliant CSS template designed by Free CSS Templates. The photos in this design are from PDPhoto.org. This free template is released under a Creative Commons Attributions 2.5 license, so youre 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="blog">
<h2>Blog #3</h2>
<p class="qoute"><span>Designed by Free CSS Templates</span> </p>
<p>This is Free CSS Templates, a free, fully standards-compliant CSS template designed by Free CSS Templates. The photos in this design are from PDPhoto.org. This free template is released under a Creative Commons Attributions 2.5 license, so youre 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 id="footer">
<div id="ftlink"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Production</a> | <a href="http://www.free-css.com/">Submission</a> | <a href="http://www.free-css.com/">Contact</a> </div>
<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 id="xhtml"><img src="free-css-lunch-images/xhtml.jpg" alt="" /> <img src="free-css-lunch-images/css.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
Related examples in the same category