visions
<!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>Visions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
* {margin: 0; padding: 0;}
/* Site Structure */
body {
background: #dfe2e6 url(visions-images/body.png) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container {width: 960px; margin: auto}
#navcontainer {height: 35px; padding-top: 20px; text-align: left}
#header {height: 101px; margin-bottom: 50px;}
.logo {float: left;}
#content {float: left; width: 670px; border: 0px solid red}
.post {clear: both; height: 229px; margin-bottom: 45px; border: 0px solid blue}
#sidebar_right {float: right; width: 270px; border: 0px solid red;}
#footer {
background-color: #15282e;
padding: 20px;
clear: both;
text-align: center;
}
/* text formatting */
a {color: #067092; text-decoration: underline;}
p {margin: 15px 0; color: #3b4c52}
small {
color: #949da1;
font-family: Georgia, "Times New Roman", Times, serif;
}
.pub_date {margin-top: 5px;}
h1, h2 {
text-transform: uppercase;
font-size: 20px;
font-weight: normal;
color: #3b4c52
}
.heading_box { margin-left: 239px; width: 420px;}
.post h1 {
background: url(visions-images/seperator.png) repeat-x bottom;
padding-bottom: 8px;
}
.more {text-align: right; padding-right: 30px;}
#sidebar_right h3 {
margin: 0 0 10px;
background: #d1d5db;
padding: 8px;
text-transform: uppercase;
letter-spacing: 1px;
color: #2f4248;
}
.sidebar_news {
}
.sidebar_news dl {
padding: 5px;
color: #465b61
}
.sidebar_news dt {
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
margin-bottom: 3px;
font-weight: bold;
}
.sidebar_news dd{
margin-bottom: 5px;
background: url(visions-images/seperator.png) repeat-x bottom;
padding-bottom: 10px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#navlist li a
{
color: #15282e;
text-decoration: none;
}
#navlist li a:hover
{
color: #fff;
text-decoration: none;
}
#header_search {float: right; margin-top: 18px; width: 350px;}
#search {
background: url(visions-images/search_bg.png);
border: none;
height: 21px;
padding: 10px;
width: 221px;
float: left;
color: #526a71;
font-size: 18px;
}
#submit {
background:url(visions-images/submit.png);
height: 39px;
width: 99px;
text-indent: -9999px;
border: none;
cursor: pointer;
float: right
}
.image_post {border: 10px solid white; float: left; margin-right: 10px;}
.sidebar_img_left {float: left; padding: 0px; border: 4px solid #f7f9fb; margin-bottom: 4px;}
.sidebar_img_right {float: right; padding: 0px; border: 4px solid #f7f9fb; margin-bottom: 4px;}
#rss {
position: absolute;
top: 14px;
right: 12px;
}
img {border: none;}
</style>
</head>
<body>
<div id="container">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Shop</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="header"> <a href="http://www.free-css.com/"><img src="visions-images/logo.png" width="201" height="102" alt="" class="logo" /></a>
<div id="header_search">
<form name="input" action="http://www.free-css.com/" method="get">
<p>
<input type="text" name="user" id="search" />
</p>
<p>
<input type="submit" value="" id="submit" />
</p>
</form>
</div>
</div>
<div id="content">
<div class="post"> <img src="visions-images/demo_image_01.jpg" width="209" height="209" class="image_post" alt="" />
<div class="heading_box">
<h1>We're looking for photographers</h1>
</div>
<div class="pub_date"><small>Published by John Doe 27th May 2009 | 49 Comments</small></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia interdum mauris. <a href="http://www.free-css.com/">This is a link</a> nullam dapibus risus nec risus. Nullam malesuada auctor justo. Nulla vulputate nunc eu lorem. Duis lacus. Maecenas mi. Fusce tristique. Suspendisse ornare orci non eros. Nunc aliquet. Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim. </p>
<div class="more"><a href="http://www.free-css.com/"><img src="visions-images/more.png" width="99" height="39" alt="" /></a></div>
</div>
<div class="post"> <img src="visions-images/demo_image_02.jpg" width="209" height="209" class="image_post" alt="" />
<div class="heading_box">
<h1>We're looking for photographers</h1>
</div>
<div class="pub_date"><small>Published by John Doe 27th May 2009 | 3 Comments</small></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia interdum mauris. Nullam dapibus risus nec risus. Nullam malesuada auctor justo. Nulla vulputate nunc eu lorem. Duis lacus. Maecenas mi. Fusce tristique. Suspendisse ornare orci non eros. Nunc aliquet. Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim. </p>
<div class="more"><a href="http://www.free-css.com/"><img src="visions-images/more.png" width="99" height="39" alt="" /></a></div>
</div>
<div class="post"> <img src="visions-images/demo_image_03.jpg" width="209" height="209" class="image_post" alt="" />
<div class="heading_box">
<h1>We're looking for photographers</h1>
</div>
<div class="pub_date"><small>Published by John Doe 27th May 2009 | 61 Comments</small></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia interdum mauris. Nullam dapibus risus nec risus. Nullam malesuada auctor justo. Nulla vulputate nunc eu lorem. Duis lacus. Maecenas mi. Fusce tristique. Suspendisse ornare orci non eros. Nunc aliquet. Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim. </p>
<div class="more"><a href="http://www.free-css.com/"><img src="visions-images/more.png" width="99" height="39" alt="" /></a></div>
</div>
</div>
<div id="sidebar_right">
<h3>Recent Photos</h3>
<img src="visions-images/photo_1.jpg" width="125" height="125" alt="" class="sidebar_img_left" /> <img src="visions-images/photo_2.jpg" width="125" height="125" alt="" class="sidebar_img_right" /> <img src="visions-images/photo_3.jpg" width="125" height="125" alt="" class="sidebar_img_left" /> <img src="visions-images/photo_4.jpg" width="125" height="125" alt="" class="sidebar_img_right" />
<div style="clear:both; height:10px;"></div>
<h3>Recent News</h3>
<div class="sidebar_news">
<dl>
<dt>Exhibition in Oslo</dt>
<dd>Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim.</dd>
</dl>
<dl>
<dt>Another heading</dt>
<dd>Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim.</dd>
</dl>
<dl>
<dt>The Third Heading</dt>
<dd>Mauris eu justo ut purus feugiat luctus. Etiam ultrices. Suspendisse fermentum turpis. Aliquam eu lectus eget nisl tincidunt dignissim.</dd>
</dl>
</div>
</div>
<div id="rss"><a href="http://www.free-css.com/"><img src="visions-images/rss.png" width="28" height="29" alt="" /></a></div>
</div>
<div id="footer">Created by: <small><a href="http://www.csstemplateheaven.com">CssTemplateHeaven</a></small></div>
</body>
</html>
Related examples in the same category