sleekcssblue
<!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>Sleek Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #333;
}
.wrapper{
width:100%;
}
.topnav{
background:url(sleekcssblue-images/topnavbg_02.gif) repeat-x;
height:26px;
border-bottom:2px solid #003993;
text-align:right;
padding-right:10%;
padding-top:8px;
width:90%;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.bannerbg{
border-bottom:2px solid #030C13;
background:url(sleekcssblue-images/bannerbg_06.gif) repeat-x;
height:115px;
width:90%;
padding-left:10%;
}
.subbannerbg{
background:url(sleekcssblue-images/subbannerbg_10.gif) repeat-x;
height:191px;
width:100%;
}
.subbannerbgleft{
background:url(sleekcssblue-images/subbannerbg_10.gif) repeat-x;
height:191px;
float:left;
width:24%;
border-right:1px solid #0041B1;
}
.subbannerbgright{
background:url(sleekcssblue-images/subbannerbg_10.gif) repeat-x;
height:191px;
float:left;
width:24%;
border-left:1px solid #0041B1;
}
.subbannerbgmiddle{
background:url(sleekcssblue-images/subbannerbgmiddle_10.gif) repeat-x;
height:151px;
float:left;
padding-top:20px;
width:48%;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
}
h1{
font-size:16px;
width:90%;
background:url(sleekcssblue-images/bullet.png) left no-repeat;
padding-left:10%;
text-align:left;
}
.content{
width:100%;
}
.leftcolumn{
width:250px;
float:left;
background-color:#232323;
border-right:#0A0A0A solid 2px;
}
.rightcolumn{
float:right;
width:65%;
text-align:left;
margin-right:3%;
background:#232323;
border-right:#0A0A0A solid 2px;
border-left:#0A0A0A solid 2px;
}
h2{
background:url(sleekcssblue-images/headingbg_13.gif) repeat-x;
width:100%;
text-align:center;
padding-top:11px;
padding-bottom:11px;
font-size:10px;
color:#fff;
margin:0;
}
.underh2{
padding-left:10px;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
width:230px;
margin:0;
}
#navvy
{
width: 100%;
margin:0;
font-size: 12px;
padding: 0;
text-align: center;
}
ul#navvylist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
ul#navvylist li
{
display: block;
margin: 0;
padding: 0;
}
ul#navvylist li a
{
display: block;
width: 90%;
margin:0;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #333 #0A0A0A #000 #333;
border-style: solid;
color: #ededed;
text-decoration: none;
background: #1212127;
}
#navvy>ul#navvylist li a { width: auto; }
ul#navvylist li#active a
{
background: #1212127;
color: #ededed;
}
ul#navvylist li a:hover, ul#navvylist li#active a:hover
{
color: #fff;
background: #333;
border-color: #333 #0A0A0A #000 #333;
}
.mainheadingbg{
padding-left:5%;
padding-top:2px;
width:95%;
height:47px;
background:url(sleekcssblue-images/headingbgmain_16.gif) repeat-x;
}
.date{
height:49px;
float:left;
width:42px;
background:url(sleekcssblue-images/datebg_19.gif) no-repeat;
}
.month{
height:12px;
padding-top:6px;
color:#004ABA;
text-align:center;
font-weight:bold;0093DB
font-size:9px;
font-family:verdana;
}
.day{
height:5px;
padding-top:2px;
color:#0093DB;
text-align:center;
font-weight:bold;
font-size:9px;
font-family:verdana;
}
h3{
padding-left:20px;
float:left;
font-size:14px;
}
.writtencontent{
width:97%;
padding-left:10px;
padding-right:20px;
}
.footer{
width:100%;
background:url(sleekcssblue-images/footerepeat_29.gif) repeat-x;
height:89px;
text-align:center;
}
.footerlogo{
width:100%;
margin:0;
background:url(sleekcssblue-images/footerimage_28.gif) center no-repeat;
padding-top:44px;
padding-bottom:32px;
font-size:11px;
text-align:center;
}
.clear {
width: 100%;
height: 1px;
margin: 0 0 -1px;
clear: both;
}
a {
font-weight: bold;
}
a:link {
text-decoration: underline;
color: #FFFFFF;
}
a:visited {
text-decoration: underline;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: underline;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="topnav"><a href="http://www.free-css.com/">HomePage</a></div>
<div class="bannerbg"><a href="http://www.free-css.com/"><img src="sleekcssblue-images/logo_06.gif" alt="logo" width="413" height="89" border="0" /></a></div>
<div class="subbannerbg">
<div class="subbannerbgleft"></div>
<div class="subbannerbgmiddle">
<h1>This is Free </h1>
<p>Thanks to freecss.info this design is now free. It is really easy to edit.</p>
</div>
<div class="subbannerbgright"></div>
<div class="content">
<div class="leftcolumn">
<h2>Navigation </h2>
<div class="underh2">
<div id="navvy">
<ul id="navvylist">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
</ul>
</div>
</div>
<h2> Other Content </h2>
<div class="underh2">Other content can go here like latest news or something like that. If you wanted you can make it into a hosting site and have hosting packages here. You could also have partner links or something like that to fill up the left column.</div>
</div>
<div class="rightcolumn">
<div class="mainheadingbg">
<div class="date">
<div class="month">Jan</div>
<div class="day">6th</div>
</div>
<h3> News Update</h3>
</div>
<div class="writtencontent">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur a lectus. Integer sed erat eget leo ullamcorper cursus. Morbi eu urna eget felis sollicitudin egestas. In hac habitasse platea dictumst. Integer rutrum, diam eleifend imperdiet euismod, odio risus congue justo, at lobortis nulla massa at turpis. Ut condimentum nisi gravida nisi. Quisque rutrum, neque sit amet ornare bibendum, odio pede ultricies felis, at malesuada velit felis semper erat. Nullam vitae orci. Morbi massa leo, pulvinar volutpat, ullamcorper vel, commodo ac, odio. In vel orci. Nulla condimentum erat vel risus accumsan fringilla. Fusce nisi magna, malesuada vitae, posuere nec, ullamcorper eget, erat. Cras tristique, nibh et vestibulum volutpat, dui leo pulvinar magna, ac tincidunt ante libero ac sem. Cras ac nunc. Phasellus vulputate magna ac eros. Donec condimentum.</p>
<p>Pellentesque lorem magna, mollis quis, fermentum vel, blandit at, urna. Donec vestibulum eleifend erat. Maecenas at mauris eget turpis aliquam congue. Etiam fringilla porttitor tellus. Nullam mattis, elit vel ornare accumsan, nunc risus fermentum leo, at vehicula lorem enim ac nibh. Donec venenatis. Suspendisse lectus ante, tristique eget, ultrices id, iaculis sed, tellus. In consectetuer. Praesent tortor libero, consequat sit amet, molestie fringilla, bibendum at, orci. Donec placerat. Aenean dapibus scelerisque nunc.</p>
<p>Vestibulum ac est. Cras laoreet. In sagittis pede sed mauris. Nunc pellentesque. In hac habitasse platea dictumst. Aenean sed massa. Aenean quis risus quis dolor vehicula luctus. Vestibulum ullamcorper tellus at tellus. Nullam sit amet enim. Donec sagittis dolor ut magna faucibus rutrum. Proin tempus orci gravida felis. Quisque risus nisl, blandit vel, euismod facilisis, suscipit quis, diam. Nam nisl purus, posuere lobortis, fermentum a, tincidunt mollis, sapien. Aliquam fringilla tincidunt urna. Praesent risus. Donec gravida, dolor et lacinia placerat, ligula urna ullamcorper odio, quis lobortis leo eros quis elit.</p>
</div>
<div class="mainheadingbg">
<div class="date">
<div class="month">Dec</div>
<div class="day">5th</div>
</div>
<h3>New Template For Sale </h3>
</div>
<div class="writtencontent">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur a lectus. Integer sed erat eget leo ullamcorper cursus. Morbi eu urna eget felis sollicitudin egestas. In hac habitasse platea dictumst. Integer rutrum, diam eleifend imperdiet euismod, odio risus congue justo, at lobortis nulla massa at turpis. Ut condimentum nisi gravida nisi. Quisque rutrum, neque sit amet ornare bibendum, odio pede ultricies felis, at malesuada velit felis semper erat. Nullam vitae orci. Morbi massa leo, pulvinar volutpat, ullamcorper vel, commodo ac, odio. In vel orci. Nulla condimentum erat vel risus accumsan fringilla. Fusce nisi magna, malesuada vitae, posuere nec, ullamcorper eget, erat. Cras tristique, nibh et vestibulum volutpat, dui leo pulvinar magna, ac tincidunt ante libero ac sem. Cras ac nunc. Phasellus vulputate magna ac eros. Donec condimentum.</p>
<p>Pellentesque lorem magna, mollis quis, fermentum vel, blandit at, urna. Donec vestibulum eleifend erat. Maecenas at mauris eget turpis aliquam congue. Etiam fringilla porttitor tellus. Nullam mattis, elit vel ornare accumsan, nunc risus fermentum leo, at vehicula lorem enim ac nibh. Donec venenatis. Suspendisse lectus ante, tristique eget, ultrices id, iaculis sed, tellus. In consectetuer. Praesent tortor libero, consequat sit amet, molestie fringilla, bibendum at, orci. Donec placerat. Aenean dapibus scelerisque nunc.</p>
<p>Vestibulum ac est. Cras laoreet. In sagittis pede sed mauris. Nunc pellentesque. In hac habitasse platea dictumst. Aenean sed massa. Aenean quis risus quis dolor vehicula luctus. Vestibulum ullamcorper tellus at tellus. Nullam sit amet enim. Donec sagittis dolor ut magna faucibus rutrum. Proin tempus orci gravida felis. Quisque risus nisl, blandit vel, euismod facilisis, suscipit quis, diam. Nam nisl purus, posuere lobortis, fermentum a, tincidunt mollis, sapien. Aliquam fringilla tincidunt urna. Praesent risus. Donec gravida, dolor et lacinia placerat, ligula urna ullamcorper odio, quis lobortis leo eros quis elit.</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<div class="footerlogo"><a href="http://www.freecss.info">Free CSS Templates</a></div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category