paper-blog
<!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>Paper Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
background: #f2e7ca url(paper-blog-images/body.jpg) top center no-repeat;
}
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
a:link, a:visited { color: #5e7d05; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #CC6600; text-decoration: underline; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: 5px solid #FFFFFF; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }
.fl {
float: left;
}
.fr {
float: right;
}
#wrapper {
width: 990px;
margin: 0 auto;
}
#left_column {
float: left;
width: 260px;
}
#left_column #site_title {
width: 180px;
height: 100px;
padding-top: 60px;
padding-left: 80px;
background: url(paper-blog-images/site_title.jpg) no-repeat;
}
#left_column #site_title h1 {
margin: 0;
padding: 0;
}
#left_column #site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 30px;
color: #71960c;
font-weight: bold;
text-decoration: none;
}
#left_column #site_title h1 a span {
display: block;
margin-top: 5px;
font-size: 12px;
color: #000000;
font-weight: bold;
letter-spacing: 2px;
}
#menu {
width: 220px;
height: 220px;
padding-left: 40px;
margin: 0 auto;
background: url(paper-blog-images/menu.jpg) no-repeat ;
}
#menu ul {
margin: 0;
padding: 20px 0 0 20px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
}
#menu ul li a {
display: block;
font-size: 16px;
margin-bottom: 10px;
padding-left: 25px;
text-decoration: none;
color: #7d6c3e;
font-weight: bold;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #39210f;
background: url(paper-blog-images/menu_hover.png) center left no-repeat;
}
#sidebar {
min-height: 255px;
padding: 30px 30px 0 50px;
background: url(paper-blog-images/sitebar.jpg) no-repeat top;
}
.sidebar_box {
clear: both;
margin-bottom: 30px;
}
.sidebar_box h2 {
margin-bottom: 15px;
font-size: 18px;
}
.news_box {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #333;
}
.news_box h3 a {
font-size: 14px;
text-decoration: underline;
}
#content {
float: right;
width: 630px;
padding: 100px 60px 0 40px;
background: url(paper-blog-images/content.jpg) top no-repeat;
}
#slider {
clear: both;
width: 630px;
height: 160px;
margin-bottom: 40px;
padding-bottom: 20px;
border: 1px dashed #300;
}
.post_section {
clear: both;
padding-bottom: 20px;
background: url(paper-blog-images/divider.jpg) bottom repeat-x;
margin-bottom: 20px;
}
.post_section .post_content {
padding: 0 0 0 50px;
}
.post_section h2 {
font-size: 28px;
color: #749d07;
padding: 10px 0 10px 50px;
background: url(paper-blog-images/header.png) no-repeat bottom left;
}
.post_section p {
margin-bottom: 20px;
}
.post_section img {
margin: 20px 0;
}
#footer_wrapper {
clear: both;
width: 100%;
background: #92bf19 url(paper-blog-images/footer.jpg) top center no-repeat;
}
#footer {
clear: both;
width: 970px;
padding: 180px 0 10px;
margin: 0 auto;
color: #fff;
text-align: center;
}
#footer a {
font-weight: bold;
color: #fff;
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
#footer .footer_menu {
margin: 0 0 5px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #fff;
}
.footer_menu .last_menu {
border: none;
}
</style>
<link href="css/jquery.ennui.contentslider.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>
<body>
<div id="wrapper">
<div id="left_column">
<div id="site_title">
<h1><a href="#">Paper Blog<span>free web template</span></a></h1>
</div>
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Web Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Our Company</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="sidebar">
<div class="sidebar_box">
<h2>Design Trends</h2>
<div class="news_box">
<h3><a href="#">Morbi dapibus dolor sit amet metus suscipit iaculis</a></h3>
<p>Cras nisl eros, elementum eu, iaculis vitae, viverra ut, ligula. Pellentesque metus. Duis dolor.</p>
</div>
<div class="news_box">
<h3><a href="#">Donec a purus vel purus sollicitudin placerat</a></h3>
<p>Nunc at sem. Sed pellentesque placerat augue. Mauris pede nisl, placerat nec, lobortis vitae, dictum sed, neque.</p>
</div>
<div class="news_box">
<h3><a href="#">Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero</a></h3>
<p>Nam sodales, pede vel dapibus lobortis, ipsum diam molestie risus, a vulputate risus nisl pulvinar lacus.</p>
</div>
<div class="news_box">
<h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h3>
<p>Nulla et nunc commodo ante ornare imperdiet. Donec nunc neque, pulvinar a, vestibulum eget, luctus id, orci. </p>
</div>
</div>
</div>
</div>
<!-- end of left_column -->
<div id="content">
<div id="slider">
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article"> <a href="#"> <img src="paper-blog-images/article01.jpg" alt="" /> </a>
<div class="text">
<h2><a href="#">Project One</a></h2>
<p> Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore. </p>
<a class="readmore" href="#">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="#"> <img src="paper-blog-images/article02.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="#">Project Two</a></h2>
<p> Lorem ipsum dolor sit ame, consectetur adipiscing elit. In tincidunt. </p>
<a class="readmore" href="#">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="#"> <img src="paper-blog-images/article03.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="#">Project Three</a></h2>
<p> Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore. </p>
<a class="readmore" href="#">Read More</a> </div>
</div>
<!-- End cs_article -->
<div class="cs_article"> <a href="#"> <img src="paper-blog-images/article04.jpg" alt="" /> </a>
<div class="text">
<h2> <a href="#">Project Four</a></h2>
<p> Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. </p>
<a class="readmore" href="#">Read More</a> </div>
</div>
<!-- End cs_article -->
</div>
<!-- End cs_slider -->
</div>
<!-- End cs_wrapper -->
</div>
<!-- End contentslider -->
<!-- Site JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width : '630px',
height : '160px',
speed : 800,
easing : 'easeInOutBack'
});
});
</script>
<script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
<script src="js/chili/recipes.js" type="text/javascript"></script>
</div>
<!-- end of slider -->
<div class="post_section">
<h2><a href="#">Free CSS Template</a></h2>
<div class="post_content"> May 24th in <a href="#">Web Template</a> by <a href="#">TemplateMo.com</a> <a href="#"><img src="paper-blog-images/image_01.jpg" alt="" /></a>
<p><a href="#">TemplateMo.com</a> provides high quality <a href="#">free css templates</a> for your personal or commercial websites. All website templates are free to download, modify and apply for your websites without any restriction. Have fun!</p>
<a href="#" class="more">Continue reading...</a> | <a href="#" class="comment">Comments (124)</a> </div>
</div>
<div class="post_section">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<div class="post_content"> May 24th in <a href="#">Web Template</a> by <a href="#">TemplateMo.com</a> <a href="#"><img src="paper-blog-images/image_02.jpg" alt="" /></a>
<p>Ut nec vestibulum odio. Vivamus vitae nibh eu sem malesuada rutrum et sit amet magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent aliquam velit a magna sodales quis elementum ipsum auctor. Ut at metus leo, et dictum sem.</p>
<a href="#">Continue reading...</a> | <a href="#">Comments (286)</a> </div>
</div>
</div>
<!-- end of content -->
</div>
<!-- end of wrapper -->
<div id="footer_wrapper">
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li class="last_menu"><a href="#">Contact</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- end of footer -->
</div>
</body>
</html>
Related examples in the same category