fleur
<!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>*FLEUR*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% verdana, "Trebuchet MS", arial, tahoma, sans-serif;
line-height : 1.7em;
color : #666;
background : #c3db63 url(fleur-img/bg.jpg) repeat-y top center;
}
#container {
width : 740px;
margin-left : auto;
margin-right : auto;
padding : 0;
border : 5px solid #fff;
color : #666;
background : #fff;
}
/*TOP BANNER*/
#banner {
height : 150px;
padding : 0;
margin : 0;
color : #666;
background : #c4da64 url(fleur-img/banner.jpg) repeat-x;
}
#banner h1 {
margin-top : 0;
padding : 5px 0 0 15px;
font-size : 2em;
border-bottom : none;
color : #DB7066;
background : inherit;
}
/*TOP MENU*/
#navlist {
padding : 3px 0;
margin : 0;
text-align : left;
letter-spacing : 1px;
border : 0px solid #eee;
background : #ebfbb0;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
padding : 6px 0.5em;
margin-left : 3px;
color : #4d6912;
background : #ebfbb0;
text-decoration : none;
}
#navlist li a:link, #navlist li a:visited {
color : #4d6912;
background : #ebfbb0;
}
#navlist li a:hover, #navlist li a#current {
color : #333;
background : #c3db63;
}
/*MAIN CONTENT*/
#content {
padding : 5px;
margin-left : 192px;
margin-bottom : 0;
color : #666;
background : #fff;
}
/*SIDEBAR*/
#sidebar {
float : left;
width : 175px;
margin : 0 10px 0 0;
padding : 5px;
border-right : 1px solid #eee;
}
/*SIDEBAR LINKS*/
#sidebar ul li {
margin : 0 15px 0 0;
padding : 0;
list-style-type : square;
color : #DB7066;
background : inherit;
}
#sidebar a {
text-decoration : none;
color : #4d6912;
background : #fff;
}
#sidebar a:hover {
color : #333;
background : #c3db63;
}
/*FOOTER*/
#footer {
clear : both;
height: 50px;
padding : 3px;
margin : 0;
text-align : left;
border-top : 1px solid #c3db63;
color : #DB7066;
background : #fff;
}
/*TYPOGRAPHY*/
h1 {
margin-top : 20px;
font : normal 130% "Trebuchet MS", verdana, tahoma, sans-serif;
padding : 5px;
letter-spacing : 3px;
border-bottom : 1px solid #eee;
text-transform : uppercase;
color : #DB7066;
background : inherit;
}
h2 {
padding : 10px;
font : bold 130% verdana, tahoma, "Trebuchet MS", sans-serif;
color : #F3F7E0;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*LINKS*/
a {
text-decoration : underline;
color : #4d6912;
background : inherit;
}
a:hover {
text-decoration : none;
color : #2b4d01;
background : inherit;
}
a img {
border : 0;
}
/*ROUNDED CORNERS*/
.rbroundbox {
background : url(fleur-img/nt2.gif) repeat;
}
.rbtop div {
background : url(fleur-img/tl2.gif) no-repeat top left;
}
.rbtop {
background : url(fleur-img/tr2.gif) no-repeat top right;
}
.rbbot div {
background : url(fleur-img/bl2.gif) no-repeat bottom left;
}
.rbbot {
background : url(fleur-img/br2.gif) no-repeat bottom right;
}
.rbtop div, .rbtop, .rbbot div, .rbbot {
height : 10px;
font-size : 1px;
}
.rbcontent {
margin : 0 7px;
}
.rbroundbox {
width : 90%;
margin : 0.5em auto;
}
/*IMAGES*/
.imgleft {
float : left;
padding-left : 15px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your Company Name</h1>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www.free-css.com/">Home</a></li>
<li id="active"><a href="http://www.free-css.com/" id="current">Active Link</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
<li><a href="http://www.free-css.com/">Link Six</a></li>
</ul>
</div>
<div id="sidebar">
<h1>Navigation</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Link One</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
</ul>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h1>Resources</h1>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Link One</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
</ul>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div id="content">
<h1>Welcome to <span style="font-weight:bold; color:#C4DA64;">Fleur</span> Template</h1>
<div class="rbroundbox">
<div class="rbtop">
<div></div>
</div>
<div class="rbcontent">
<h2>About Fleur Template ....</h2>
<img class="imgleft" src="fleur-img/flower.jpg" alt="flower" />
<blockquote>This template has been tested in Mozilla and IE7 and validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE templates visit <a href="http://www.mitchinson.net" title="my website">my website</a>.</blockquote>
<p> </p>
</div>
<div class="rbbot">
<div></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lectus ipsum, mollis non, lobortis eget, tempus at, metus. Duis fermentum dignissim justo. Cras lectus ipsum, mollis non, lobortis eget, tempus at, metus. Duis fermentum dignissim justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Maecenas elementum accumsan ante. Praesent auctor urna eget pede. Nam egestas nulla in tortor.</p>
<h1>About</h1>
<p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lectus ipsum, mollis non, lobortis eget, tempus at, metus. Duis fermentum dignissim justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc varius pellentesque erat. Ut tincidunt. Ut ultricies, urna a egestas vehicula, risus est bibendum felis, eu vulputate tellus magna sodales lectus. Morbi hendrerit. Sed fermentum. Aliquam adipiscing vulputate nibh. Ut neque. Nam aliquam nulla et nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam risus lectus, congue eu, dapibus id, faucibus id, risus. Aenean posuere feugiat nisi.</p>
</div>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">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><br/>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category