chalkboard
<!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>Chalkboard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font:11pt Arial, Helvetica, sans-serif;
background:url(chalkboard-images/background_pattern.jpg) repeat;
margin:0;
padding:0;
}
img {
border:0;
}
#wrapper {
width:940px;
margin:auto;
}
#logo {
display:inline-block;
float:left;
width:272px;
height:171px;
text-indent:-999999px;
background:url(chalkboard-images/logo.jpg) no-repeat;
}
#header {
height:112px;
margin:20px 0 0 0;
overflow:hidden;
}
#header ul {
float:right;
margin-top:22px;
}
#header ul li {
display:inline-block;
float:left;
height:48px;
margin:0 0 0 5px;
}
#home_btn a {
display:block;
width:102px;
height:48px;
text-indent:-999999px;
background:url(chalkboard-images/home.jpg) no-repeat;
}
#home_btn a:hover {
background:url(chalkboard-images/home_active.jpg) no-repeat;
}
#about_btn a {
display:block;
width:102px;
height:48px;
text-indent:-999999px;
background:url(chalkboard-images/about.jpg) no-repeat;
}
#about_btn a:hover {
background:url(chalkboard-images/about_active.jpg) no-repeat;
}
#contact_btn a {
display:block;
width:102px;
height:48px;
text-indent:-999999px;
background:url(chalkboard-images/contact.jpg) no-repeat;
}
#contact_btn a:hover {
background:url(chalkboard-images/contact_active.jpg) no-repeat;
}
.replace {
position:relative;
overflow:hidden;
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#content {
display:block;
}
#categories {
height:58px;
width:940px;
background:url(chalkboard-images/frame_top.jpg) no-repeat;
}
#categories li {
display:inline-block;
margin:20px 0 0 5px;
}
#categories li a {
display:inline;
color:#d8c0a8;
padding:7px 17px 15px 13px;
text-decoration:none;
}
#categories li a:hover {
height:31px;
width:87px;
padding:7px 17px 15px 13px;
background:url(chalkboard-images/category_hover.png) no-repeat;
}
#content_frame {
display:block;
position:relative;
height:850px;
margin:-13px 0 0 0;
background:url(chalkboard-images/border.jpg) repeat-y;
}
#content_area {
display:block;
height:100%;
width:875px;
margin-left:33px;
padding:20px;
background:url(chalkboard-images/green_board.jpg) repeat-y;
}
#latest_articles {
display:block;
width:183px;
height:38px;
background:url(chalkboard-images/latest_articles.jpg) no-repeat;
}
.left {
float:left;
width:560px;
}
.left ul {
position:relative;
margin:0 0 0 -30px;
}
.left ul li {
display:inline-block;
list-style:none;
margin:10px 20px 20px 0;
}
.left ul .comment {
position:relative;
float:right;
margin:-3px 0 0 -25px;
width:29px;
height:32px;
background:url(chalkboard-images/comment.png) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.left ul .comment {
position:relative;
float:right;
margin:-243px 0 0 -25px;
width:29px;
height:32px;
background:url(chalkboard-images/comment.png) no-repeat;
}
}
.left ul li .comment a {
color:#000;
font-weight:bold;
text-align:center;
text-decoration:none;
margin:0 6px 0;
}
.left ul li img {
float:left;
}
.datetitle {
float:left;
position:relative;
margin:160px 0 0 -234px;
}
.title {
width:207px;
height:37px;
background:url(chalkboard-images/title_back.png) no-repeat;
}
.title span {
display:block;
padding:10px;
font:13pt Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
.date {
width:90px;
height:17px;
background:url(chalkboard-images/date_back.png) no-repeat;
}
.date span {
color:#FFFFFF;
padding:6px;
}
#right {
width:290px;
height:100%;
float:left;
padding:12px;
margin:-20px 1px 0 0;
position:relative;
}
#sponsors {
display:block;
width:167px;
height:52px;
background:url(chalkboard-images/sponsors.png) no-repeat;
}
#search_title {
display:block;
width:127px;
height:32px;
margin:15px 0 10px 0;
background:url(chalkboard-images/search.png) no-repeat;
}
#search_field {
width:283px;
height:49px;
margin:0 0 0 -9px;
postion:relative;
background:url(chalkboard-images/search_field.jpg) no-repeat;
}
#search_field input {
width:170px;
height:20px;
border:0;
color:#515151;
margin:10px 0 0 50px;
}
.social ul {
margin:30px 0 0 -35px;
}
.social ul li {
display:inline;
}
#frame_btm {
height:83px;
background:url(chalkboard-images/frame_btm.jpg);
}
#footer {
font:10pt Arial, Helvetica, sans-serif;
display:block;
height:84px;
padding:15px 0 0 0;
background:url(chalkboard-images/footer.jpg) no-repeat;
font-size:12px;
}
#footer, #footer a {
color:#D5D5D5;
text-decoration:none;
}
#footer p {
margin:0;
padding:20px 0 0 0;
line-height:normal;
}
#footer .lf {
float:left;
margin-left:15px;
}
#footer .rf {
float:right;
margin-right:15px;
}
</style>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="wrapper">
<div id="header"> <a href="#" id="logo" class="replace"><span>Chalkboard</span></a>
<ul>
<li id="home_btn"><a href="#" class="replace">Home</a></li>
<li id="about_btn"><a href="#" class="replace">About</a></li>
<li id="contact_btn"><a href="#" class="replace">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="categories">
<ul>
<li><a href="#">Graphics</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Designing</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>
<div id="content_frame">
<div id="content_area">
<div class="left">
<div id="latest_articles"></div>
<ul>
<li> <img src="chalkboard-images/lets_get_crazy.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 19th</span></div>
<div class="title"><span>Lets Go Get Crazy</span></div>
</div>
<div class="comment"><a href="#">12</a></div>
</li>
<li> <img src="chalkboard-images/explode_img.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 19th</span></div>
<div class="title"><span>It's an Explosion</span></div>
</div>
<div class="comment"><a href="#">16</a></div>
</li>
<li> <img src="chalkboard-images/happy_new_year_img.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 13th</span></div>
<div class="title"><span>Happy New Year</span></div>
</div>
<div class="comment"><a href="#">10</a></div>
</li>
<li> <img src="chalkboard-images/on_fire_img.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 13th</span></div>
<div class="title"><span>Light me on Fire</span></div>
</div>
<div class="comment"><a href="#">10</a></div>
</li>
<li> <img src="chalkboard-images/trendsetters_img.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 11th</span></div>
<div class="title"><span>Trendsetters</span></div>
</div>
<div class="comment"><a href="#">19</a></div>
</li>
<li> <img src="chalkboard-images/block_stack_img.jpg" alt="" />
<div class="datetitle">
<div class="date"><span>March 10th</span></div>
<div class="title"><span>Big Block Stacks</span></div>
</div>
<div class="comment"><a href="#">11</a></div>
</li>
</ul>
</div>
<div id="right">
<div id="sponsors"></div>
<img src="chalkboard-images/sponsor_images.jpg" alt="" />
<div id="search_title"></div>
<div id="search_field">
<input type="text" value="input keywords to search" />
</div>
<div class="social">
<ul>
<li><a href="#"><img src="chalkboard-images/rss_icon.jpg" alt="" /></a></li>
<li><a href="#"><img src="chalkboard-images/facebook_icon.jpg" alt="" /></a></li>
<li><a href="#"><img src="chalkboard-images/twitter_icon.jpg" alt="" /></a></li>
<li><a href="#"><img src="chalkboard-images/flickr_icon.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="frame_btm"></div>
<div id="footer">
<p class="lf">Copyright © 2010 <a href="#">Chalkboard</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://devisefunction.com/">Matthew Heidenreich</a></p>
<div style="clear:both;"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category