clouds2
<!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>CLOUDS 2</title>
<style type='text/css'>
* {
margin : 0;
padding : 0;
}
body {
padding-top : 0;
font : 73% "Trebuchet MS", verdana, arial, sans-serif;
background : #333;
color : #000;
}
/*WRAP*/
#wrapper {
width : 750px;
margin : 0 auto;
border : 5px solid #fff;
background : #eee url(clouds2-img/sidebar.gif) repeat-y;
color : #666;
}
/*HEADER*/
#header {
width : 600px;
height : 210px;
float : right;
margin : 0;
background : #b2a591 url(clouds2-img/banner.jpg) no-repeat;
color : #666;
}
#banner {
width : 100%;
height : 35px;
text-align: right;
margin : 0;
padding : 0;
border-bottom : 1px solid #fff;
color : #333;
background : #369;
}
#banner a {
margin : 5px;
color : #fff;
background : inherit;
}
#banner a:hover {
color : #000;
background : inherit;
}
/*NAVIGATION*/
#navcontainer {
width : 150px;
margin : 0 0 20px 0;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 143px;
border-bottom : 1px solid #eee;
background : #369;
color : #eee;
}
#navcontainer a:link, #navlist a:visited {
color : #eee;
background : #369;
text-decoration : none;
}
#navcontainer a:hover {
background : #036;
color : #fff;
}
/*SIDEBAR*/
#sidebar {
float : left;
width : 150px;
padding : 0;
margin : 0;
border-top : 1px solid #fff;
font-size : 100%;
line-height : 1.8em;
background : #d1d4d7;
color : #333;
}
/*CONTENT*/
#content {
float : left;
width : 570px;
margin : 20px 0 0 20px;
line-height : 1.8em;
}
/*FOOTER*/
#footer {
clear : both;
width : 600px;
margin-left : 150px;
padding-left : 5px;
text-align : left;
border-top : 5px solid #336699;
}
/*TYPOGRAPHY*/
p {
margin : 10px 20px 10px 15px;
color : #666;
background-color : inherit;
}
h1 {
margin : 0;
padding : 20px;
font-size : 200%;
letter-spacing : 5px;
color : #000;
background : inherit;
}
h2 {
margin : 0 0 0 15px;
padding : 0;
font-size : 120%;
letter-spacing : 5px;
text-transform : uppercase;
color : #333;
background : inherit;
}
h3 {
margin : 10px 0 10px 15px;
padding : 0 0 3px 3px;
text-transform : uppercase;
font-size : 120%;
letter-spacing : 5px;
color : #036;
background : inherit;
}
blockquote {
margin : 10px 20px 10px 15px;
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*CLASS*/
.img {
margin : 0 0 10px 0;
}
.myborder {
border : 1px solid #fff;
padding : 5px;
margin : 0 0 0 4px;
}
.myimg {
float : left;
border : 1px solid #eee;
padding : 5px;
margin : 5px 10px 10px 4px;
}
.mylogo {
margin-right : auto;
}
/*LINKS*/
a, a:visited {
text-decoration : none;
color : #369;
background : inherit;
}
a:hover {
color : #333;
background : inherit;
}
a img {
border : none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrapper">
<div id="banner"><a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> </div>
<div id="header">
<h1>Your <span style="color: #7AB900;">Company</span> Name</h1>
</div>
<div id="sidebar">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
<li><a href="http://www.free-css.com/">Item six</a></li>
<li><a href="http://www.free-css.com/">Item seven</a></li>
<li><a href="http://www.free-css.com/">Item eight</a></li>
<li><a href="http://www.free-css.com/">Item nine</a></li>
<li><a href="http://www.free-css.com/">Item ten</a></li>
</ul>
</div>
<h2>Heading</h2>
<p>Vestibulum imperdiet. Praesent sit amet tellus. Proin lobortis. Nam quis pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a velit ut purus tempor semper. Proin id mi sit amet magna porta faucibus. Praesent cursus, risus in facilisis placerat, erat mauris lacinia leo, vitae euismod nibh ipsum sit amet mauris.</p>
</div>
<div id="content">
<h3>Welcome to <span style="color:#336799;">Clouds 2</span> Template</h3>
<blockquote>All images were created by me so feel free to use them if you wish. This page has been tested in Mozilla and IE7 and validates as XHTML 1.0 Transitional using valid CSS.<br />
This is a <a href="http://www.free-css.com/">LINK</a> to nowhere. For more FREE CSS templates visit my website.</blockquote>
<div style="float: right; width: 150px; height: 7em; margin-top: 5px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; font-family: Georgia, arial, helvetica; font-size: 18px; line-height: 1.5em; color: #666; text-align: right;"> <span style="color:#036;"><img src="clouds2-img/quote.gif" alt="quote"/>.... For more FREE </span>templates visit <span style="color: #999;">my website .... <img src="clouds2-img/unquote.gif" alt="unquote"/></span> </div>
<p> Vestibulum imperdiet. Nunc in sapien. Sed feugiat arcu quis lorem. Vivamus ac odio at nulla tincidunt imperdiet. Integer consectetuer, dui in iaculis tincidunt, nisl ante auctor libero, nec pulvinar quam massa id erat. Etiam bibendum nulla eu mi. Phasellus ut justo. Aliquam consectetuer volutpat enim. Cras venenatis posuere justo. Vivamus quis nisl vehicula risus eleifend vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam nec turpis vel pede viverra porta.</p>
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a velit ut purus tempor semper. Proin id mi sit amet magna porta faucibus. Praesent cursus, risus in facilisis placerat, erat mauris lacinia leo, vitae euismod nibh ipsum sit amet mauris. Morbi libero metus, laoreet eget, interdum nec, suscipit a, purus. Nunc in sapien. Sed feugiat arcu quis lorem. Vivamus ac odio at nulla tincidunt imperdiet. Integer consectetuer, dui in iaculis tincidunt, nisl ante auctor libero, nec pulvinar quam massa id erat. Etiam bibendum nulla eu mi. </p>
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a velit ut purus tempor semper. Proin id mi sit amet magna porta faucibus. Praesent cursus, risus in facilisis placerat, erat mauris lacinia leo, vitae euismod nibh ipsum sit amet mauris. Morbi libero metus, laoreet eget, interdum nec, suscipit a, purus. Nunc in sapien. Sed feugiat arcu quis lorem. Vivamus ac odio at nulla tincidunt imperdiet. Integer consectetuer, dui in iaculis tincidunt, nisl ante auctor libero, nec pulvinar quam massa id erat. Etiam bibendum nulla eu mi. Phasellus ut justo. Aliquam consectetuer volutpat enim. Cras venenatis posuere justo. </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" 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