candiiclouds
<!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>Candii Clouds</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* Page Elements */
body {
background-image: url(candiiclouds-images/piink.gif);
margin-top: 0px;
margin-bottom: 0px;
}
body,td,th {
color: #0076a3;
font-family: Tahoma;
font-size: x-small;
font-weight: bold;
}
a:link {
color: #00adef;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00adef;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
}
a:hover {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ec008c;
color: #ec008c;
}
a:active {
text-decoration: none;
color: #9e005d;
}
/* Layout Structure */
.main {
background-image: url(candiiclouds-images/horiz.png);
background-repeat: repeat-y;
width: 820px;
margin-right: auto;
margin-left: auto;
}
.mayne {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.topp {
height: 112px;
width: 785px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 5px;
}
.bodztitl {
background-image: url(candiiclouds-images/bluu.gif);
background-repeat: repeat;
width: 560px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFCCE2;
border-right-color: #FFCCE2;
border-left-color: #FFCCE2;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 10px;
font-size: medium;
font-family: "Times New Roman", Times, serif;
letter-spacing: -1px;
padding-bottom: 10px;
}
.footer {
font-family: Tahoma;
font-size: x-small;
font-weight: bold;
color: #f49ac1;
background-color: #FFE0EE;
text-align: center;
width: 798px;
margin-right: 1px;
margin-left: 1px;
padding-top: 15px;
padding-bottom: 15px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFCCE2;
}
.bclowd {
background-image: url(candiiclouds-images/bcloud.gif);
background-repeat: no-repeat;
float: left;
height: 112px;
width: 140px;
}
.tpstar {
background-image: url(candiiclouds-images/banstars.gif);
background-repeat: no-repeat;
background-position: left 5px;
float: right;
height: 112px;
width: 645px;
}
.bodd {
width: 800px;
}
.mbod {
float: right;
width: 580px;
}
.banner {
height: 100px;
width: 645px;
margin-top: 5px;
}
.cldbrd {
margin-bottom: 10px;
}
.bodz {
background-color: #FFE0EE;
width: 540px;
margin-right: auto;
margin-left: auto;
border: 1px solid #FFCCE2;
padding: 10px;
text-align: justify;
background-image: url(candiiclouds-images/s-stars.gif);
background-repeat: repeat;
}
.bodz h1 {
font-size: small;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
letter-spacing: 2px;
text-indent: 15px;
}
.bodz h2 {
font-size: small;
letter-spacing: 2px;
text-indent: 15px;
}
.bodz u {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
text-decoration: none;
}
#blockq {
padding: 10px;
background-image: url(candiiclouds-images/bluu.gif);
background-repeat: repeat;
margin-left: 30px;
border: 1px solid #00adef;
}
/* Side Panel */
.sbi {
float: left;
width: 220px;
}
.sbititle {
background-image: url(candiiclouds-images/sbihead.gif);
background-repeat: no-repeat;
height: 24px;
width: 205px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
padding-top: 5px;
font-family: "Times New Roman", Times, serif;
font-size: small;
text-indent: 45px;
letter-spacing: -0.5px;
}
.sbibod {
padding: 10px;
width: 180px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
font-family: Tahoma;
font-size: x-small;
font-weight: bold;
background-color: #FFE0EE;
border: 1px solid #FFCCE2;
text-align: justify;
background-image: url(candiiclouds-images/s-stars.gif);
background-repeat: repeat;
}
.sbi p {
padding: 10px;
width: 180px;
display: block;
margin-right: auto;
margin-left: auto;
border: 1px solid #FFCCE2;
background-image: url(candiiclouds-images/s-stars.gif);
background-repeat: repeat;
text-align: justify;
}
#sbinav {
width: 200px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
font-family: Tahoma;
font-size: x-small;
font-weight: bold;
background-color: #FFE0EE;
border-top: 1px solid #FFCCE2;
border-right: 1px solid #FFCCE2;
border-left: 1px solid #FFCCE2;
}
#sbinav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#sbinav ul a {
background-color: #A7E6FF;
display: block;
color: #0076A3;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFCCE2;
}
#sbinav ul a:hover {
background-color: #FFCCE2;
background-image: url(candiiclouds-images/star.gif);
background-repeat: no-repeat;
background-position: 7px center;
color: #f06ea9;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="mayne"> <img src="candiiclouds-images/spacer.gif" width="800" height="10" alt="" />
<div class="topp">
<div class="bclowd"></div>
<div class="tpstar">
<div class="banner">
<div align="center"><img src="candiiclouds-images/logo.png" width="439" height="100" alt="" /></div>
</div>
</div>
</div>
<div class="bodd">
<div class="sbi">
<div class="sbititle">Navigation</div>
<div id="sbinav">
<ul>
<li><a href="http://www.free-css.com/">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<div class="sbititle">Blank Sub-Title </div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisl. Cras convallis, odio nec tempus tincidunt, augue purus sagittis urna, a auctor tellus pede ac magna. Aenean euismod euismod magna. Proin tempus massa nec est. Cras auctor, justo ac feugiat commodo, mi tellus viverra ligula, at vestibulum elit massa sit amet arcu. Vestibulum consequat arcu quis dui. Curabitur congue ligula a enim. Nunc quis pede. Mauris porttitor laoreet ante. Nunc placerat. Fusce aliquam eros sit amet mi. Aenean mollis lacus at ipsum. Phasellus sed ipsum. In tincidunt metus vel dolor. </p>
</div>
<div class="mbod">
<div align="center" class="cldbrd"><img src="candiiclouds-images/cloudsbdr.gif" width="529" height="32" alt="" /></div>
<div class="bodztitl">Page Title </div>
<div class="bodz">
<h1>Welcome!</h1>
<p>Welcome to Candii Clouds, a free girly template designed by Mark Schultz. To contact Mark Schultz, email him at izovwerwalter@yahoo.com. Tested on Firefox and IE7. </p>
<p>Examples below:</p>
<h1>Heading 1</h1>
<h2>Heading 2 </h2>
<p>Regular Paragraph-format text (Tahoma, extra small, Bold by default). <em>Italic Text</em>. <u>Underlined Text</u>. <a href="http://www.free-css.com/">Linked Text</a>.</p>
<p id="blockq">Example of Blockquote </p>
<h1>Lorem Ipsum </h1>
<p><img src="candiiclouds-images/cclog.gif" width="125" height="125" hspace="10" align="left" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisl. Cras convallis, odio nec tempus tincidunt, augue purus sagittis urna, a auctor tellus pede ac magna. Aenean euismod euismod magna. Proin tempus massa nec est. Cras auctor, justo ac feugiat commodo, mi tellus viverra ligula, at vestibulum elit massa sit amet arcu. Vestibulum consequat arcu quis dui. Curabitur congue ligula a enim. Nunc quis pede. Mauris porttitor laoreet ante. Nunc placerat. Fusce aliquam eros sit amet mi. Aenean mollis lacus at ipsum. Phasellus sed ipsum. In tincidunt metus vel dolor. </p>
<h2>In Sed Massa </h2>
<p>In sed massa. Curabitur sit amet lectus. Vivamus libero. Aliquam ligula mi, faucibus eget, hendrerit et, congue ut, risus. Aliquam eleifend augue et velit. Etiam faucibus scelerisque felis. Nunc sit amet augue. Integer ligula. Mauris malesuada. Sed volutpat nunc id elit. </p>
<p id="blockq">Donec lacinia nibh sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent commodo interdum justo. Aenean sodales. Mauris rhoncus, odio quis condimentum imperdiet, urna turpis placerat nibh, non ullamcorper nibh leo eget purus. </p>
<h2>Aenean Varius Faucibus Purus </h2>
<p>Aenean varius faucibus purus. Praesent interdum arcu vel leo. Praesent risus. Nullam leo. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in enim. Nunc ultricies sodales erat. Pellentesque urna nunc, dictum vitae, pellentesque in, porttitor sed, ipsum. Nulla facilisi. Maecenas tellus. Mauris laoreet scelerisque eros. Nulla nulla. Etiam lectus. Ut eleifend aliquam neque. Ut et nulla nec purus vulputate commodo. </p>
<h2>Sed Magna Lorem </h2>
<p>Sed magna lorem, ultricies porta, tincidunt in, rhoncus in, magna. Etiam vitae mi vel lacus ultrices fringilla. Aliquam vel eros et purus congue consectetuer. Morbi mauris augue, malesuada at, malesuada ac, fermentum non, nibh. Duis ultricies turpis a purus. Proin venenatis cursus erat. Cras commodo libero vitae urna. Nunc ac nulla. In hac habitasse platea dictumst. In eu dolor et turpis dictum placerat. Mauris varius ipsum. Proin est mi, egestas non, egestas id, posuere vel, sapien. Curabitur hendrerit mi ut leo. Vestibulum ante. Nullam vel nisi id augue semper molestie. Donec tempor. Cras nisl tortor, nonummy at, nonummy vel, ultricies rutrum, nisl. Quisque pellentesque rhoncus elit. </p>
<h2>Aliquam Fringilla </h2>
<p>Aliquam fringilla adipiscing elit. Phasellus mi. Proin a justo in tortor pulvinar tristique. Donec iaculis bibendum diam. Morbi porttitor. Proin tempor congue augue. Quisque hendrerit lorem nec lacus vehicula volutpat. Nunc neque mi, varius malesuada, accumsan ac, convallis ac, quam. Nunc leo. Morbi sed massa. Integer ut enim id dui tempus egestas. Vestibulum diam orci, ultricies quis, consequat at, consectetuer eget, elit. Quisque ut mi. Vestibulum ultrices venenatis turpis. In id nisl. Nulla facilisi. Nunc dapibus erat quis lorem. </p>
</div>
</div>
<img src="candiiclouds-images/spacer.gif" width="800" height="15" alt="" /> </div>
<div class="footer">Copyright © 2007 (Your Site). All Rights Reserved. </div>
</div>
</div>
</body>
</html>
Related examples in the same category