collectiveblue
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CollectiveBlue</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/** BASIC */
body {
margin: 0px;
padding: 0px;
background: #FFFFFF url(collectiveblue-images/img01.gif) repeat-y center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #FFFFFF;
}
a {
color: #52A7E0;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
text-transform: lowercase;
font-weight: bold;
}
h2, h3, h4, h5, h6 {
text-transform: uppercase;
font-weight: bold;
}
h2 {
font-size: 14px;
padding: 0px;
color: #193976;
}
h3 {
font-size: 14px;
padding: 0px;
color: #FFFFFF;
}
p, ol, ul {
margin-top: 0px;
padding: 0px;
}
.text1 {
font-weight: bold;
font-size: 27px;
text-transform: lowercase;
margin: 0px;
padding: 0px;
}
.text2 {
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
padding-bottom: 10px;
}
.text3 {
background-color: #0099FF;
padding: 5px 83px 5px 5px;
}
.img1 {
float: left;
margin: 0px;
}
.divider {
border-top: 2px solid #5989E4;
}
/** HEADER*/
#header {
width: 727px;
margin: 0px auto;
padding: 20px 0px 0px 15px;
}
#header h1 {
font-weight: bold;
font-size: 22px;
text-transform: uppercase;
}
#header h2 {
text-transform: uppercase;
}
/** MENU*/
#menu1 {
float: left;
width: 190px;
margin: 0px auto;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
#menu1 ul {
margin: 0px;
list-style: none;
padding: 0px;
}
#menu1 li {
}
#menu1 a:hover {
}
#menu-01 {
margin: 0px 0px 5px 0px;
padding: 10px 5px 10px 15px;
list-style: none;
border: 1px solid #3983BC;
}
#menu-02 {
margin: 0px 0px 5px 0px;
padding: 10px 5px 10px 15px;
list-style: none;
border: 1px solid #3983BC;
}
#menu-03 {
margin: 0px 0px 5px 0px;
padding: 10px 5px 10px 15px;
list-style: none;
border: 1px solid #3983BC;
}
#menu-04 {
margin: 0px 0px 5px 0px;
padding: 10px 5px 10px 15px;
list-style: none;
border: 1px solid #3983BC;
}
#menu-05 {
margin: 0px 0px 10px 0px;
padding: 10px 5px 10px 15px;
list-style: none;
border: 1px solid #3983BC;
}
/** CONTENT */
#content {
width: 742px;
margin: 0px auto;
padding: 0px;
}
#left {
float: left;
padding: 12px 5px 0px 15px;
width: 190px;
}
#right {
float: right;
width: 473px;
padding: 12px 20px 0px 15px;
color: #666666;
}
#colB {
float: right;
width: 520px;
}
/** FOOTER */
#footer {
float: left;
width: 190px;
margin: 0px auto;
}
#footer p {
margin: 0px;
padding: 12px 5px 0px 5px;
color: #4773C1;
text-align: left;
font-size: 9px;
}
#border-top {
border-top: 4px solid #A67FDA;
}
/** */
</style>
</head>
<body>
<div id="content">
<div id="left">
<h1 class="text1">CoLLECTIVEBLUE<br />
<span class="text2">Free CSS Template</span></h1>
<p> </p>
<div id="menu1">
<ul>
<li id="menu-01"><a href="http://www.free-css.com/">Home</a></li>
<li id="menu-02"><a href="http://www.free-css.com/">Products</a></li>
<li id="menu-03"><a href="http://www.free-css.com/">Services</a></li>
<li id="menu-04"><a href="http://www.free-css.com/">About Us</a></li>
<li id="menu-05"><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div>
<p>
<h3><span class="text3">Recent News</span></h3>
</p>
<p><strong>June 09, 2006</strong><br />
In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. Quisque dictum wisi maecenas integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Learn more...</a></p>
<p><strong>June 05, 2006</strong><br />
In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. Quisque dictum wisi maecenas integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Learn more...</a></p>
<p><strong>June 01, 2006</strong><br />
In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. Quisque dictum wisi maecenas integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Learn more...</a></p>
</div>
<div id="footer">
<p>Copyright © 2006 Sitename.com. Designed by <a href="http://www.freecsstemplates.org" class="link1">Free CSS Templates</a></p>
</div>
</div>
<div id="colB">
<div class="img1"><img src="collectiveblue-images/img03.gif" alt="" width="520" height="130" /></div>
</div>
<div id="right">
<h2>Welcome to our website!</h2>
<p>COLLECTIVEBLUE is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
<p>Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. </p>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.</p>
<p><strong>Consectetuer adipiscing elit</strong>. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. </p>
</div>
</div>
</body>
</html>
Related examples in the same category