liquidgreen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LIQUID GREEN</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "Trebuchet MS", "lucida sans", arial, helvetica, sans-serif;
background : #f1f1e3;
line-height : 1.8em;
}
/*HEADER */
#header {
height : 150px;
margin-bottom : 2em;
background : #777750 url(liquidgreen-images/header.jpg) no-repeat;
}
#header h1 {
float : right;
margin : 0;
padding : 0.5em 1em 0 0;
font-size : 160%;
letter-spacing : 5px;
color : #333;
background : transparent;
}
/*TOP MENU */
#menu {
height : 95px;
margin : 0;
padding : 0;
list-style-type : none;
list-style-image : none;
text-transform : uppercase;
}
#menu li {
float : left;
width : 7em;
border-right : 1px solid #777750;
}
#menu a {
display : block;
height : 95px;
width : 7em;
padding : 50px 0 0;
text-decoration : none;
font-weight : bold;
line-height : 95px;
text-align : center;
color : #333;
background : #cccc9a;
}
#menu a:hover {
text-decoration : none;
color : #fff;
background : #999967;
}
/*3 COLUMN LAYOUT */
#gutter {
float : left;
width : 3%;
height : 1px;
}
#col1 {
float : left;
width : 42%;
margin-bottom : 1em;
border-right : 1px solid #ccc;
padding-right : 3%;
}
#col2 {
float : left;
width : 19%;
margin-left : 3%;
margin-bottom : 1em;
border-right : 0 solid #999;
padding-right : 3%;
}
#col3 {
float : left;
width : 19%;
margin-left : 3%;
margin-bottom : 1em;
}
/*FOOTER */
#footer {
clear : both;
height : 50px;
border-top : 1px solid #ccc;
padding : 0.5em;
text-align : left;
}
/*ROUNDED CORNERS */
.box {
background : #cccc9a;
color : #777750;
text-align : center;
font-weight : bold;
}
.boxtop {
background : url(liquidgreen-images/ne.gif) no-repeat top right;
}
.boxtop div {
height : 10px;
background : url(liquidgreen-images/nw.gif) no-repeat top left;
}
.boxbottom {
background : url(liquidgreen-images/se.gif) no-repeat bottom right;
}
.boxbottom div {
height : 10px;
background : url(liquidgreen-images/sw.gif) no-repeat bottom left;
}
.boxcontent {
padding : 0 10px 0 10px;
}
/*TYPOGRAPHY */
h2 {
margin-top : 0;
font-size : 150%;
text-transform : uppercase;
letter-spacing : 3px;
border-bottom : 1px solid #ccc;
color : #666;
background : inherit;
}
h3 {
margin-top : 0;
font-size : 175%;
text-transform : uppercase;
letter-spacing : 3px;
color : #666;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #777850;
}
/*LINKS */
a:link, a:visited {
color : #9b696f;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #777750;
background : inherit;
text-decoration : none;
}
a:active {
color : #666;
background : inherit;
text-decoration : none;
}
a img {
border : 0;
}
</style>
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Resources</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h1>Your<span style="color: #CCCC9A;"> Company</span> Name</h1>
</div>
<div id="gutter"></div>
<div id="col1">
<h2>Welcome to <span style="font-weight:bold; color:#333;">Liquid Green</span> Template</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div class='box'>
<div class='boxtop'>
<div></div>
</div>
<div class='boxcontent'>
<blockquote>This page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. For more FREE CSS templates visit <a href="http://www.mitchinson.net" title="my website">my website</a>.</blockquote>
</div>
<div class='boxbottom'>
<div></div>
</div>
</div>
<p>Corner images from <a href="http://wigflip.com/cornershop/">Cornershop</a></p>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="col2">
<div class='box'>
<div class='boxtop'>
<div></div>
</div>
<div class='boxcontent'>
<h3>Articles</h3>
<p><a href="http://www.free-css.com/"><img src="liquidgreen-images/articles.png" alt="articles" title="articles" /></a></p>
</div>
<div class='boxbottom'>
<div></div>
</div>
</div>
<p><a href="http://www.free-css.com/">Read Articles</a></p>
<div class='box'>
<div class='boxtop'>
<div></div>
</div>
<div class='boxcontent'>
<h3>Resources</h3>
<p><a href="http://www.free-css.com/"><img src="liquidgreen-images/docs.png" alt="resources" /></a></p>
</div>
<div class='boxbottom'>
<div></div>
</div>
</div>
<p><a href="http://www.free-css.com/">Link to Resources</a></p>
</div>
<div id="col3">
<div class='box'>
<div class='boxtop'>
<div></div>
</div>
<div class='boxcontent'>
<h3>Photos</h3>
<p><a href="http://www.free-css.com/"><img src="liquidgreen-images/photos.png" alt="photos" title="photos" /></a></p>
</div>
<div class='boxbottom'>
<div></div>
</div>
</div>
<p><a href="http://www.free-css.com/">Photo Gallery</a></p>
<div class='box'>
<div class='boxtop'>
<div></div>
</div>
<div class='boxcontent'>
<h3>Contact</h3>
<p><a href="http://www.free-css.com/"><img src="liquidgreen-images/mail.png" alt="contact" /></a></p>
</div>
<div class='boxbottom'>
<div></div>
</div>
</div>
<p><a href="http://www.free-css.com/">Contact us</a></p>
<p> </p>
<p>The above images are my attempt at creating web icons.</p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license nofollow" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</body>
</html>
Related examples in the same category