clouds
<!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>liquid test</title>
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% tahoma, helvetica, "Trebuchet MS", arial, sans-serif;
line-height : 1.7em;
color : #333;
background : #d6c4ae;
}
#header {
height : 200px;
margin : 0;
color : #000;
background : #d6c4ae url(images/banner.jpg) no-repeat;
}
.container {
clear : both;
width : 100%;
padding : 0;
margin : 0;
}
#navcontainer ul {
text-align : center;
font-size : 130%;
padding-bottom : 5px;
padding-top : 5px;
padding-left : 0;
margin-top : 0;
margin-left : 0;
background : #bfa280;
color : #fff;
width : 100%;
line-height : 18px;
}
#navcontainer ul li {
display : inline;
padding-left : 0;
padding-right : 0;
padding-bottom : 5px;
padding-top : 5px;
}
#navcontainer ul li a {
padding-left : 10px;
padding-right : 10px;
padding-bottom : 5px;
padding-top : 5px;
color : #fff;
text-decoration : none;
border-right : 1px solid #fff;
}
#navcontainer ul li a:hover {
background : #d6c4ae;
color : #72522c;
}
#navcontainer #active {
border-left : 1px solid #fff;
}
#gutter {
float : left;
width : 10%;
height : 1px;
}
#col1 {
float : left;
width : 44%;
margin-bottom : 1em;
padding-right : 6%;
}
#col2 { background : url(images/img2.jpg) no-repeat bottom right;
float : left;
width : 30%;
margin-left : 6%;
margin-bottom : 2em;
padding-right : 1%;
}
#footer {
clear : both;
height : 50px;
padding : 5px;
border-top : 10px solid #72522c;
text-align : left;
background : #bfa280;
color : #000;
}
h1 {
margin : 0;
padding : 1.5em;
font-size : 200%;
letter-spacing : 5px;
color : #fff;
background : transparent;
}
h2 {
margin-top : 20px;
padding : 0.5em 0 0 0.5em;
text-transform : uppercase;
letter-spacing : 5px;
font-size : 140%;
color : #72522c;
background : transparent;
}
h3 {
margin : 20px 0 0 30px;
padding : 0.5em 0 0 0.5em;
text-transform : none;
letter-spacing : 5px;
font-size : 140%;
color : #72522c;
background : transparent;
}
a {
text-decoration : underline;
color : #72522c;
background : inherit;
}
a:hover {
text-decoration : none;
color : #000;
background : inherit;
}
a img {
border : 0;
}
#gallery {
height : 600px;
margin-left : 20px;
}
#gallery img {
float : left;
padding : 10px;
}
.clear {
clear : left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="container">
<div id="header">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" title="Visit my website">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a> </li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a> </li>
</ul></div>
<h1>*Clouds*</h1>
</div>
</div>
<div id="gutter"></div>
<div id="col1">
<h2>Heading</h2>
<div style="float: right; width: 125px; height: 7em; margin: 25px 0 15px 15px; font-family: Georgia, arial, helvetica; font-size: 16px; line-height: 1.5em; color: #666; text-align: right;">
<span style="color:#333;"><img src="images/quote.gif" alt="quote"/>.... this is a </span>magazine style <span style="color: #999;">pullquote .... <img src="images/unquote.gif" alt="unquote"/></span> </div>
<p><em>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS. This is a <a href="#">link</a> to nowhere. For more templates visit <a href="http://www.mitchinson.net" title="my website" >my website</a>.</em></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In elit. Vestibulum tortor justo, lacinia ut, ullamcorper ac, interdum at, mauris. Proin metus nulla, aliquet sit amet, nonummy nec, dictum vitae, ligula. Duis et augue et mi scelerisque convallis. Morbi augue nisi, pharetra ut, consequat vel, adipiscing vel, erat. Vestibulum commodo mollis odio. Curabitur vehicula rutrum odio. Integer posuere. Vestibulum euismod magna eu orci. Praesent erat. Nunc volutpat. Pellentesque sollicitudin. Morbi sagittis aliquam purus.</p>
<p> Integer posuere. Vestibulum euismod magna eu orci. Praesent erat. Nunc volutpat. Pellentesque sollicitudin. Morbi sagittis aliquam purus. Duis nisl. Phasellus ut arcu eu mauris consequat venenatis. Curabitur commodo. Etiam ultricies tristique dolor. Etiam rhoncus congue pede. </p>
<div style="float: left; width: 125px; height: 7em; margin: 15px 30px 15px 0; font-family: Georgia, arial, helvetica; font-size: 16px; line-height: 1.5em; color: #666; text-align: right;">
<span style="color:#333;"><img src="images/quote.gif" alt="quote"/>.... this is a </span>magazine style <span style="color: #999;">pullquote .... <img src="images/unquote.gif" alt="unquote"/></span> </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In elit. Vestibulum tortor justo, lacinia ut, ullamcorper ac, interdum at, mauris. Proin metus nulla, aliquet sit amet, nonummy nec, dictum vitae, ligula. Duis et augue et mi scelerisque convallis. Morbi augue nisi, pharetra ut, consequat vel, adipiscing vel, erat. Vestibulum commodo mollis odio. Curabitur vehicula rutrum odio. Integer posuere. Vestibulum euismod magna eu orci. Praesent erat. Nunc volutpat. Pellentesque sollicitudin. Morbi sagittis aliquam purus. Duis nisl. Phasellus ut arcu eu mauris consequat venenatis. Curabitur commodo. Etiam ultricies tristique dolor. Etiam rhoncus congue pede. Morbi sagittis aliquam purus. Duis nisl. Phasellus ut arcu eu mauris consequat venenatis. Curabitur commodo. Etiam ultricies tristique dolor. Etiam rhoncus congue pede.</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="col2">
<h3>Photo Gallery</h3>
<div id="gallery">
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<a href="#"><img src="images/img3.jpg" alt="" title="" /></a>
<p> </p>
<p> </p>
<div class="clear"></div>
</div>
</div>
<div id="footer"><a href="index.html"> homepage </a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">xhtml</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2006 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a></div>
</body>
</html>
Related examples in the same category