col3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colors 3 - A free CSS Template by Rambling Soul</title>
<meta name="keywords" content="Free, CSS, Template, Downloads" />
<meta name="Author" content="Roshan, Ramblingsoul.com" />
<meta name="Credits" content="Designed by Roshan, RamblingSoul.com" />
<style type='text/css'>
@charset "utf-8";
#wrap {
background-image: url(col3-images/content.png);
background-repeat: repeat-y;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
background-color: #9E9D83;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#contents #contenttop {
clear: both;
}
#contents #sidebar {
float: right;
width: 300px;
padding-right: 25px;
padding-left: 10px;
}
#wrap #contents #left {
margin-right: 350px;
padding-left: 25px;
}
#contents .clear {
clear: both;
}
#wrap #header {
background-image: url(col3-images/header.png);
background-repeat: no-repeat;
height: 309px;
margin: 0px;
}
#wrap #mainmenu {
background-image: url(col3-images/menu.png);
background-repeat: no-repeat;
height: 104px;
}
#wrap #header .logo {
margin: 0px;
padding: 0px;
}
#wrap #mainmenu ul {
margin: 0px;
list-style-type: none;
padding-top: 23px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 40px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
}
#wrap #mainmenu a {
display: block;
float: left;
height: 35px;
padding-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #000000;
text-decoration: none;
margin-right: 10px;
}
#wrap #mainmenu li {
display: inline;
}
#wrap #mainmenu a:visited, active {
display: block;
float: left;
height: 35px;
padding-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #000000;
text-decoration: none;
margin-right: 10px;
}
#wrap #mainmenu a:hover {
display: block;
float: left;
height: 35px;
padding-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #996600;
text-decoration: none;
margin-right: 10px;
background-image: url(col3-images/menuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#wrap #mainmenu .active a {
display: block;
float: left;
height: 35px;
padding-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #CC6600;
text-decoration: none;
margin-right: 10px;
background-image: url(col3-images/menuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#wrap #contents #left p {
line-height: 22px;
}
#wrap #header .topmenu {
padding-top: 70px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 820px;
}
#wrap #header .topmenu .home {
display: block;
padding-left: 65px;
margin-bottom: 25px;
}
#wrap #contents #sidebar h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 20px;
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 5px;
background-color: #D5D3B8;
color: #FFFFFF;
}
#wrap #contents #left img {
background-color: #D5D3B8;
padding: 5px;
border: 1px solid #FFFFFF;
}
#wrap #contents #left .align_left {
float: left;
margin-right: 15px;
margin-bottom: 5px;
}
#wrap #contents #left .align_right {
float: right;
margin-bottom: 5px;
margin-left: 15px;
}
#wrap #contents #left h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
color: #999900;
}
#wrap #contents #left h3 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #999933;
}
#wrap #footer {
margin-top: 15px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 35px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #D5D3B8;
padding-top: 15px;
padding-bottom: 0px;
}
#wrap #contents #left h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 22px;
color: #000000;
}
.seo {
font-size: 11px;
display: block;
color: #666666;
background-color: #efefcc;
}
#wrap #contents #left blockquote {
margin: 25px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: italic;
background-color: #E7E5D3;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #9E9D83;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 15px;
}
#wrap #contents #left cite {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
display: block;
text-align: right;
color: #9E9D83;
}
#wrap #footer a {
color: #000000;
text-decoration: underline;
}
#wrap #contents #left blockquote p {
line-height: 18px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#wrap #bottom {
background-image: url(col3-images/footer.png);
background-repeat: no-repeat;
height: 12px;
margin: 0px;
padding: 0px;
}
#wrap #contents #left .postinfo {
display: block;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
padding: 5px;
background-color: #D5D3B8;
}
#wrap #contents #left a {
color: #362306;
}
#wrap #footer p {
font-size: 12px;
display: block;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 0px;
padding-left: 25px;
margin: 0px;
}
#wrap #header .logo span {
display: block;
font-size: 12px;
}
#wrap #contents #sidebar ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
}
#wrap #contents #sidebar li {
display: block;
height: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DBC6A8;
}
#wrap #contents #sidebar a {
display: block;
height: 25px;
padding-top: 5px;
padding-left: 5px;
background-color: #efefcc;
color: #000000;
text-decoration: none;
}
#wrap #header .topmenu .home img {
border : none;
display: block;
}
#wrap #header .logo {
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-size: 30px;
padding-left: 50px;
padding-top: 65px;
color: #FFFFFF;
}
#wrap #contents #sidebar a:visited, active {
display: block;
height: 25px;
padding-top: 5px;
padding-left: 5px;
background-color: #efefcc;
color: #000000;
text-decoration: none;
}
#wrap #contents #sidebar a:hover {
display: block;
height: 25px;
padding-top: 5px;
padding-left: 5px;
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}
#wrap #contents #left ul {
list-style-type: square;
}
#wrap #contents #left table {
width: 100%;
border: 1px solid #9E9D83;
}
#wrap #contents #left th {
background-color: #D5D3B8;
color: #993300;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
}
#wrap #contents #left .alt1 {
background-color: #EFE9DE;
}
#wrap #contents #left .alt2 {
background-color: #F3F7DD;
}
#wrap #contents #sidebar form {
margin: 0px;
padding: 0px;
}
#wrap #contents #sidebar #searchform {
margin-bottom: 15px;
padding: 10px;
background-color: #D6D4B8;
}
#wrap #contents #left a:visited, active {
color: #362306;
}
#wrap #contents #left a:hover {
color: #362306;
text-decoration: none;
background-color: #EFEFCC;
}
#wrap #header .logo a {
color: #FFFFFF;
text-decoration: none;
}
#wrap #contents #left h1 a {
color: #000000;
text-decoration: none;
}
#wrap #header .logo a:visited, active, hover {
color: #FFFFFF;
text-decoration: none;
}
#wrap #contents #left h1 a:visited, active {
color: #000000;
text-decoration: none;
}
#wrap #contents #left h1 a:hover {
color: #993300;
text-decoration: underline;
}
#wrap #footer a:visited, active {
color: #000000;
text-decoration: underline;
}
#wrap #footer a:hover {
color: #999999;
text-decoration: none;
}
#wrap #footer .credit {
font-size: 9px;
margin: 0px;
color: #666666;
}
#wrap #footer .credit a {
color: #666666;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="topmenu">
<span class="home"><a title="Back to home" href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw"><img src="col3-images/homebttn.png" alt="Home" /></a></span></div>
<h1 class="logo"><a title="Good Morning World!" href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Good Morning World!</a>
<span>Website Caption goes here</span>
</h1>
</div>
<div id="mainmenu">
<ul>
<li class="active"><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Home</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">About</a> </li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Blog</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Contact</a></li>
</ul>
</div>
<div id="contents">
<div id="contenttop"></div>
<div id="sidebar">
<form action="" method="get">
<div id="searchform">
<input type="text" class="keyword" />
<input name="" type="button" value="Search" />
</div>
</form>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Lorem Ipsum </a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Dolor Sit Amet</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Consecteteur</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Adipiscing Elit</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Donect at turpis</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Morbi vehicula lectus</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">more.. </a></li>
</ul>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Lorem Ipsum </a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Dolor Sit Amet</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Consecteteur</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Adipiscing Elit</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Donect at turpis</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Morbi vehicula lectus</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">more.. </a></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Lorem Ipsum </a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Dolor Sit Amet</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Consecteteur</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Adipiscing Elit</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Donect at turpis</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Morbi vehicula lectus</a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">more.. </a></li>
</ul>
<h2>Meta</h2>
<ul>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Lorem Ipsum </a></li>
<li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Dolor Sit Amet</a></li>
</ul>
</div>
<div id="left">
<h1><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Welcome Text</a> <span class="seo">Post information or keywords for SEO</span></h1>
<p> <img class="align_left" src="col3-images/imagesample.png" alt="Image Sample" width="205" height="184" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quis est vitae ipsum mattis vulputate. Nam consectetuer. Aenean sit amet massa. In cursus risus. Pellentesque sed est. Vestibulum convallis porta tellus. Sed ante libero, ornare id, pellentesque ac, tincidunt egestas, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam tellus pede, mollis eu, tincidunt sit amet, eleifend et, ligula. Mauris sapien sem, convallis non, commodo quis, vehicula vel, dui. Sed fringilla, dolor in gravida nonummy, tortor nisi auctor nibh, nec sodales sapien felis non risus. Donec odio metus, tincidunt nec, gravida sit amet, pretium eu, lacus. Etiam venenatis. Morbi ultrices, risus aliquet viverra mattis, ipsum nibh vehicula ligula, sit amet dignissim eros purus ac risus. Nunc faucibus magna id ante. In sodales tincidunt nibh. Proin porttitor est. In ultrices vulputate metus.<a href="#"> Link in the content</a></p>
<h2>Heading Two <span class="seo">Post information or keywords for SEO</span></h2>
<p><img class="align_right" src="col3-images/imagesample.png" alt="Image Sample" width="205" height="184" />Sed sed mi. Proin orci nunc, mattis in, tempor non, pharetra eu, odio. Donec malesuada, felis in interdum sollicitudin, libero orci vehicula magna, vel mattis magna tellus non leo. Suspendisse potenti. Aenean ultricies bibendum nibh. Quisque est nulla, tempus pretium, mattis vitae, eleifend et, pede. In hac habitasse platea dictumst. Donec et augue vel magna auctor pharetra. Cras dapibus neque ut elit. Vivamus neque turpis, cursus id, gravida non, pulvinar eu, ipsum. Suspendisse dolor nunc, accumsan eu, tempor nec, feugiat quis, lorem. Mauris nisl. Quisque sagittis. </p>
<h3>Heading Three - Block Quote & Lists </h3>
<p>Fusce ipsum. Morbi condimentum varius nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sed neque sed sapien posuere accumsan. Proin fringilla quam scelerisque massa. Praesent at nisi. Donec tristique, leo at mollis imperdiet, magna lacus iaculis tortor, at gravida metus est at neque. </p>
<blockquote><p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas a enim. Praesent malesuada, tortor sed pellentesque dignissim, neque elit vulputate elit, venenatis rutrum tortor ipsum vitae enim. </p>
<p>Nulla imperdiet odio id est. Curabitur vestibulum, enim et bibendum varius, felis diam sodales justo, ac pharetra lacus sapien ut enim. Mauris ac metus a magna posuere iaculis. Pellentesque dignissim lacus.
<cite>Lorem I. Dolor</cite>
</p>
</blockquote>
<p>Aenean odio arcu, porttitor nec, fringilla a, vestibulum interdum, enim. In dignissim lacus ut arcu rutrum scelerisque. Quisque et lacus. Praesent ac pede nec elit pharetra mollis. Nullam ante lectus, pharetra quis, consequat et, tempus vel, ipsum. Nulla imperdiet odio id est. Curabitur vestibulum, enim et bibendum varius, felis diam sodales justo, ac pharetra lacus sapien ut enim. Mauris ac metus a magna posuere iaculis. Pellentesque dignissim lacus. </p>
<h3>Unordered List</h3>
<ul>
<li>Nam lectus. Aenean pharetra ultrices nunc.</li>
<li> Quisque vulputate. Nulla nec sapien. Nam vehicula hendrerit mi. In cursus molestie nisi. Nunc facilisis accumsan est. Phasellus blandit elit quis nunc. Aenean sit amet mauris. </li>
<li>Aliquam vestibulum luctus tellus. Proin bibendum metus quis risus. Duis tortor libero, pulvinar id, pharetra sed, porta eget, eros.</li>
<li> Maecenas a ligula congue erat elementum feugiat.</li>
<li> Proin quis mi. Suspendisse potenti. </li>
<li>Cras et diam in ipsum viverra porta. </li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Nam lectus. Aenean pharetra ultrices nunc.</li>
<li> Quisque vulputate. Nulla nec sapien. Nam vehicula hendrerit mi. In cursus molestie nisi. Nunc facilisis accumsan est. Phasellus blandit elit quis nunc. Aenean sit amet mauris. </li>
<li>Aliquam vestibulum luctus tellus. Proin bibendum metus quis risus. Duis tortor libero, pulvinar id, pharetra sed, porta eget, eros.</li>
<li> Maecenas a ligula congue erat elementum feugiat.</li>
<li> Proin quis mi. Suspendisse potenti. </li>
<li>Cras et diam in ipsum viverra porta. </li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec semper nisi ut urna. Duis blandit dolor eget augue. Suspendisse aliquet metus at lacus. Proin lacinia porttitor metus. Aenean at enim. Nunc vel felis.</p>
<h1>A Table<span class="seo"> Put your keywords or tags for SEO</span></h1>
<table>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
<th scope="col">Sit</th>
</tr>
<tr class="alt1">
<td>In ornare lectus ut ante. Aliquam </td>
<td>150</td>
<td>5</td>
<td>A</td>
</tr>
<tr class="alt2">
<td>porttitor, nunc quis elementum porta</td>
<td>250</td>
<td>2</td>
<td>AB</td>
</tr>
<tr class="alt1">
<td> elementum porta</td>
<td>350</td>
<td>3</td>
<td>CD</td>
</tr>
<tr class="alt2">
<td>Nunc porttitor</td>
<td>550</td>
<td>7</td>
<td>FH</td>
</tr>
</table>
<p> In ornare lectus ut ante. Aliquam porttitor, nunc quis elementum porta, nulla neque molestie augue, vel pellentesque quam massa vel turpis. Nunc porttitor, lacus tincidunt vehicula tristique, justo turpis aliquam odio, congue pretium libero lorem ac tellus. Proin ullamcorper metus ut enim. Aliquam neque. Vivamus nec justo. Morbi ac lectus quis massa suscipit feugiat. Vivamus malesuada blandit nibh. Pellentesque sagittis lacus quis pede. Etiam vulputate augue eget ipsum. Pellentesque id quam et ligula suscipit tincidunt. Vestibulum non ante. Quisque congue molestie odio. </p>
<p class="postinfo">
<a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Category name </a>| <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">12 Comments</a></p>
</div>
<div class="clear">
</div>
</div>
<div id="footer">
<p>Copyright information © Yourwebsite.com | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Put </a>| <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Some</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Links</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Here</a></p>
<!--Credits - Do not delete-->
<p class="credit"><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">CSS Website Template </a><br /> Design downloaded from <a href="http://www.webhostingservices.us/">Web Hosting Services</a></p>
<!--Credits-->
</div>
<div id="bottom"></div>
</div>
</body>
</html>
Related examples in the same category