rounded
<!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>ROUNDED</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", verdana, tahoma, sans-serif;
color : #555;
background : #eef6fb url(rounded-img/bg.jpg) repeat-y center;
line-height : 1.5em;
}
#container {
width : 750px;
margin-left : auto;
margin-right : auto;
padding : 0;
border : 5px solid #fff;
}
#navlist {
padding : 3px 0;
margin : 0;
text-align : left;
font : bold 110% "Trebuchet MS", verdana, sans-serif;
color : #000;
background : #99c6e7;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
padding : 3px 1.5em;
margin : 0;
color : #333;
background : #99c6e7;
text-decoration : none;
}
#navlist li a:link, #navlist li a:visited {
color : #333;
background : #99c6e7;
}
#navlist li a:hover {
color : #fff;
background : #6ba0e6;
}
#navlist li a#current {
color : #fff;
background : #6ba0e6;
}
#banner {
width : 750px;
height : 150px;
padding : 0;
margin : 0;
color : #fff;
background : #738ca5 url(rounded-img/banner.jpg) no-repeat;
}
#banner h1 {
margin : 0;
padding : 20px;
font : normal 175% "Trebuchet MS", tahoma, verdana, sans-serif;
letter-spacing : 5px;
text-transform : none;
border-bottom : none;
color : #000;
background : transparent;
}
#content {
padding : 5px;
margin-left : 220px;
margin-bottom : 5px;
color : #555;
background : #eef6fb;
}
#sidebar-a {
float : left;
width : 180px;
margin : 0 10px 10px 10px;
padding : 5px;
border-right : 1px solid #fff;
color : #555;
background : #eef6fb;
}
#footer {
clear : both;
padding : 5px;
margin : 0;
text-align : left;
border-top : 10px solid #6ca3e4;
color : #333;
background : #99c6e7;
}
.roundcont {
margin : 10px;
width : 95%;
background : #f7fbfd;
color : #333;
}
.roundcont p {
margin : 0 15px;
}
.roundtop {
background : url(rounded-img/tr.gif) no-repeat top right;
}
.roundbottom {
background : url(rounded-img/br.gif) no-repeat top right;
}
img.corner {
width : 10px;
height : 10px;
border : none;
display : block !important;
}
p {
padding : 3px 10px 10px 5px;
}
h1 {
margin : 10px 0 10px 10px;
padding : 0;
font : 140% "Trebuchet MS", verdana, tahoma, sans-serif;
text-transform : uppercase;
color : #738ca5;
background : inherit;
}
h2 {
margin : 0;
font : 140% "Trebuchet MS", verdana, tahoma, sans-serif;
padding : 0;
border-bottom : 0 solid #738ca5;
text-transform : none;
color : #738ca5;
background : inherit;
}
a {
text-decoration : none;
color : #666;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #66a0e0;
background : inherit;
}
a img {
border : 0;
}
.img {
float : left;
padding : 5px;
margin : 10px;
border : 1px solid #556b2f;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h1>Your Company Name</h1>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" 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/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Product</a></li>
<li><a href="http://www.free-css.com/">Resources</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<h1>Introduction</h1>
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. <br />
For more FREE templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
<p><img class="img" src="rounded-img/blank.jpg" alt="blank" title="blank" width="60" height="60" /> This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nibh. Integer quis ante at massa auctor fringilla. Donec vitae lacus. Vivamus id pede. Nullam turpis. In sed lacus ac nisl iaculis pretium. In condimentum, justo vel sodales ornare, dui metus porttitor magna, ac vehicula turpis libero at nunc. Nam ut augue eu enim viverra gravida. Sed enim. Duis a diam. Ut sed leo. Aenean aliquet faucibus leo. Etiam sollicitudin. Donec tincidunt est et mi. Nullam fermentum. Pellentesque a sem. </p>
<div id="sidebar-a">
<h2>Heading</h2>
<ul>
<li><a href="http://www.free-css.com/">Snapp Happy</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">OWD</a></li>
<li><a href="http://www.free-css.com/">CSS Drive</a></li>
<li><a href="http://www.free-css.com/">Listamatic</a></li>
<li><a href="http://www.free-css.com/">w3schools</a></li>
<li><a href="http://www.free-css.com/">Style Gala</a></li>
</ul>
<h2>Heading</h2>
<ul>
<li><a class="active" 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/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Order</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc nibh. Integer quis ante at massa auctor fringilla. Donec vitae lacus. Vivamus id pede. Nullam turpis. In sed lacus ac nisl iaculis pretium. In condimentum, justo vel sodales ornare, dui metus porttitor magna, ac vehicula turpis libero at nunc. Nam ut augue eu enim viverra gravida. Sed enim. Duis a diam. Ut sed leo. Aenean aliquet faucibus leo. Etiam sollicitudin. Donec tincidunt est et mi. Nullam fermentum. Pellentesque a sem. </p>
</div>
<div id="content">
<h2>Colour Resources</h2>
<div class="roundcont">
<div class="roundtop"><img src="rounded-img/tl.gif" alt="tl img" width="10" height="10" class="corner" style="display: none" /> </div>
<p><a href="http://www.free-css.com/">www.colourlovers.com</a><br />
<a href="http://www.free-css.com/">www.draac.com/</a><br />
<a href="http://www.free-css.com/">www.nutrocker.co.uk/</a><br />
<a href="http://www.free-css.com/">www.colorcombo.com</a> <br />
<a href="http://www.free-css.com/">www.colorwhore.com</a><br />
<a href="http://www.free-css.com/">www.limov.com</a><br />
<a href="http://www.free-css.com/">www.wellstyled.com</a><br />
<a href="http://www.free-css.com/">www.colormixers.com/</a></p>
<div class="roundbottom"><img src="rounded-img/bl.gif" alt="bl img" width="10" height="10" class="corner" style="display: none" /></div>
</div>
<h2>Layouts</h2>
<div class="roundcont">
<div class="roundtop"><img src="rounded-img/tl.gif" alt="tl img" width="10" height="10" class="corner" style="display: none" /></div>
<p><a href="http://www.free-css.com/">www.maxdesign.com</a><br />
<a href="http://www.free-css.com/">www.cssdrive.com</a><br />
<a href="http://www.free-css.com/">www.cssfill.com</a><br />
<a href="http://www.free-css.com/">www.alvit.de</a><br />
<a href="http://www.free-css.com/">www.cssplay.co.uk</a><br />
<a href="http://www.free-css.com/">www.accessify.com</a> <br />
<a href="http://www.free-css.com/">www.bluerobot.com</a><br />
<a href="http://www.free-css.com/">www.porjes.com/</a> <br />
<a href="http://www.free-css.com/">glish.com/</a></p>
<div class="roundbottom"><img src="rounded-img/bl.gif" alt="bl img" width="10" height="10" class="corner" style="display: none" /></div>
</div>
<h2>Generators</h2>
<div class="roundcont">
<div class="roundtop"><img src="rounded-img/tl.gif" alt="tl img" width="10" height="10" class="corner" style="display: none" /></div>
<p><a href="http://www.free-css.com/">typetester.maratz.com</a><br />
<a href="http://www.free-css.com/">www.lipsum.com</a><br />
<a href="http://www.free-css.com/">www.neuroticweb.com/</a><br />
<a href="http://www.free-css.com/">kalsey.com/</a><br />
<a href="http://www.free-css.com/">lab.rails2u.com/</a><br />
<a href="http://www.free-css.com/">www.webreference.com/</a><br />
</p>
<div class="roundbottom"><img src="rounded-img/bl.gif" alt="bl img" width="10" height="10" class="corner" style="display: none" /></div>
</div>
</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>
</div>
</body>
</html>
Related examples in the same category