your-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>Blog Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
background: #191919;
}
a:link, a:visited { color: #9791ad; text-decoration: none; }
a:active, a:hover { color: #464350;}
h1 {
margin: 0px;
padding: 0px 0px 5px 0px;
font-size: 22px;
font-weight: bold;
color:#CCCCCC;
}
h2 {
margin: 0px;
padding: 0px 0px 5px 0px;
font-size: 20px;
font-weight: bold;
color:#363340;
}
h3 {
margin: 0px;
padding-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #9791ad;
text-decoration: underline;
}
h4 {
margin: 0px;
font-weight: normal;
padding-bottom: 3px;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
p {
margin: 0 0 5px 0;
font-size: 11px;
text-align: justify;
}
.readmore_black a{
clear: both;
float: right;
display: block;
width: 80px;
height: 18px;
padding-top: 2px;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background: url(your-blog-images/more.gif) no-repeat;
}
#container_wrapper {
background: url(your-blog-images/mainBG.gif) repeat-x;
}
#container {
margin: 0px auto;
width: 900px;
}
/* ------------- Menu ------------------ */
#menu {
width: 900px;
height: 50px;
margin: 0px;
background: url(your-blog-images/menuBG.gif) repeat-x;
}
#menu ul {
margin: 0px;
text-align: right;
list-style: none;
}
#menu ul li {
margin: 0px;
display: inline;
}
#menu ul li a {
display:inline-block;
width: 140px;
height: 35px;
margin: 0px;
padding: 15px 0px 0px 0px;
text-align: center;
font: 14px arial;
color:#000000;
font-weight: bold;
text-decoration: none;
}
#menu ul li a:hover, .current {
color: #FFFFFF;
background: url(your-blog-images/menuhoverBG.gif) repeat-x;
}
/* ---------- End of Menu ------------- */
#banner{
width: 900px;
height: 150px;
padding: 0;
background: url(your-blog-images/bannerBG.jpg) no-repeat;
}
#banner p{
padding: 0px;
color: #999999;
text-align: justify;
}
.headersection {
float: left;
width: 300px;
height: 100px;
padding: 50px 0 0 50px;
color: #FFCC00;
font-size: 28px;
font-weight: bold;
}
.sitetitle {
color: #FFFFFF;
font-size: 28px;
font-weight: bold;
padding-bottom: 5px;
}
.sitetitle span{
color:#CCCCCC;
font-weight: normal;
}
.aboutco {
float: right;
width: 350px;
padding: 30px 200px 0 0;
}
/* content */
#content {
float: left;
width: 900px;
background: #FFFFFF;
}
#leftcolumn {
float: left;
width: 510px;
padding: 30px 0px 0px 50px;
}
.post {
float: left;
width: 500px;
padding-bottom: 40px;
}
.postdate{
float: left;
width: 48px;
height: 68px;
}
.postbody {
float: left;
width: 435px;
padding-left: 12px;
border-left: 5px solid #666666;
}
.postbody img {
float: left;
margin-right: 10px;
border: 3px solid #333333;
}
.posttext{
float: left;
width: 310px;
}
.postdate {
float: left;
width: 35px;
height: 50px;
padding: 15px 0 0 13px;
font-size: 20px;
color: #000000;
font-weight: bold;
background:url(your-blog-images/dateBG.gif) top right no-repeat;
}
.month {
clear: both;
padding: 15px 0 0 0;
font-size:12px;
}
.tagline {
font-size: 12px;
font-weight: bold;
margin-bottom: 5px;
}
.tagline span {
color:#474451;
}
.comment_more {
clear: both;
width: 310px;
text-align: right;
height: 20px;
}
.comment_more span {
padding-left: 15px;
background: url(your-blog-images/commenticon02.gif) left center no-repeat;
}
.paging{
clear: both;
width: 510px;
height: 25px;
margin-bottom: 10px;
}
.paging a{
float: left;
height: 22px;
padding: 3px 10px 0 10px;
text-align: center;
font-size: 12px;
margin-right: 5px;
color: #FFFFFF;
text-decoration: none;
background:url(your-blog-images/pagingBG.gif) repeat-x;
}
.paging a:hover {
background: url(your-blog-images/paginghoverBG.gif) repeat-x;
}
/* right column */
#rightcolumn {
float: right;
width: 250px;
padding: 30px 50px 0 0;
}
.rc_panel {
width: 250px;
margin-bottom: 20px;
background: url(your-blog-images/rc_pannelBG.gif) repeat-y;
}
.rc_paneltop{
width: 250px;
height: 10px;
background: url(your-blog-images/rc_paneltop.gif) no-repeat;
}
* html .rc_paneltop{
width: 250px;
height: 10px;
margin-bottom: -10px;
background: url(your-blog-images/rc_paneltop.gif) no-repeat;
}
.rc_panelbottom{
width: 250px;
height: 10px;
background: url(your-blog-images/rc_bottom.gif) no-repeat;
}
* html .rc_panelbottom{
width: 250px;
height: 10px;
margin-bottom: -10px;
background: url(your-blog-images/rc_bottom.gif) no-repeat;
}
.rc_panelbody {
padding: 10px 0 20px 25px;
}
.rc_panel form {
padding: 0 0 10px 0;
margin: 0px;
}
.textfield {
float: left;
height: 19px;
width: 150px;
}
.button {
float: left;
display: block;
width: 42px;
height: 25px;
text-align: center;
background: url(your-blog-images/gobuttomBG.gif) no-repeat;
color: #FFFFFF;
text-decoration: none;
border: none;
}
.rc_panelbody ul{
margin: 0px;
padding: 0 0 0 10px;
}
.rc_panelbody li{
padding: 4px 0px 4px 0px;
list-style: none;
color: #666666;
}
.rc_panelbody li a{
padding-left: 20px;
color: #666666;
text-decoration: none;
background: url(your-blog-images/listicon.gif) left center no-repeat;
}
.rc_panelbody li a:hover{
color: #9791ad;
text-decoration: none;
background: url(your-blog-images/listicon_hover.gif) left center no-repeat;
}
/* end of content */
/* bottom panel */
#bottompanel {
float: left;
width: 900px;
padding-bottom: 10px;
background: #242424;
border-top: 4px solid #403d4a;
}
.bp_column1 {
float: left;
width: 230px;
margin: 20px 20px 15px 25px;
padding: 10px;
background:#000000;
}
* html .bp_column1 {
float: left;
width: 230px;
margin: 20px 20px 15px 15px;
padding: 10px;
background:#000000;
}
.popularpost{
padding-bottom: 5px;
margin-top: 5px;
border-bottom: 1px solid #3d3b3b;
}
.comment{
padding-left: 18px;
background:url(your-blog-images/commenticon.gif) left center no-repeat;
}
.popularpost a{
color: #FFFFFF;
text-decoration: none;
}
.popularpost a:hover {
color: #999999;
}
.bp_column2 {
float: left;
width: 250px;
margin: 20px 20px 15px 20px;
padding: 10px;
background:#000000;
}
.bp_column2 img{
margin: 0 0 10px 10px;
border: 1px solid #1b1b1b;
}
.bp_column2 a{
border: none;
}
.bg_recentproject {
float: left;
width: 250px;
margin: 20px 20px 15px 20px;
padding: 10px 0;
}
* html .bg_recentproject {
float: left;
width: 250px;
margin: 20px 10px 15px 20px;
padding: 10px 0;
}
.bg_recentproject img{
border: 5px solid #000000;
margin-bottom: 10px;
}
.bg_recentproject p {
color: #555555;
}
/* end of bottom panel */
/* ----- Footer ----- */
#footer {
clear: both;
width: 860px;
height: 50px;
padding: 10px 40px 0px 0px;
text-align: center;
color: #333333;
line-height: 18px;
background: #0d0d0d;
border-top: 4px solid #403d4a;
}
#footer a{
color: #333333;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="container_wrapper">
<div id="container">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/" class="first">Contact Us</a></li>
</ul>
</div>
<div id="banner">
<div class="headersection">
<div class="sitetitle">Your<span> BLOG</span></div>
<p>Free Website Layout from TemplateMo.com</p>
</div>
<div class="aboutco">
<h1>Introduction</h1>
<p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. </p>
<div class="readmore_black"><a href="http://www.free-css.com/">Read more</a></div>
</div>
</div>
<div id="content">
<div id="leftcolumn">
<div class="post">
<div class="postdate">22
<div class="month">OCT</div>
</div>
<div class="postbody">
<h2>Lorem ipsum dolor sit amet</h2>
<div class="tagline">posted by admin - <span>CSS - Website</span></div>
<img src="your-blog-images/photo04.gif" alt="" />
<div class="posttext">
<p> This is a free CSS website from TemplateMo.com. Feel free to edit and apply this template layout for your personal or commercial websites. You may put a credit link back to templatemo.com at the footer.</p>
<div class="comment_more"><span>comments (6) </span>- <a href="http://www.free-css.com/">Read more...</a></div>
</div>
</div>
</div>
<div class="post">
<div class="postdate">15
<div class="month">OCT</div>
</div>
<div class="postbody">
<h2>Quisque rhoncus nulla quis sem</h2>
<div class="tagline">posted by admin - <span>Flash - Video</span></div>
<img src="your-blog-images/photo02.gif" alt="" />
<div class="posttext">
<p> Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </p>
<div class="comment_more"><span><span>comments (11) </span>- </span><a href="http://www.free-css.com/">Read more...</a></div>
</div>
</div>
</div>
<div class="post">
<div class="postdate">11
<div class="month">OCT</div>
</div>
<div class="postbody">
<h2>Suspendisse feugiat</h2>
<div class="tagline">posted by admin - <span>3D - Graphics</span></div>
<img src="your-blog-images/photo03.gif" alt="" />
<div class="posttext">
<p> Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </p>
<div class="comment_more"><span><span>comments (18) </span> - </span><a href="http://www.free-css.com/">Read more...</a></div>
</div>
</div>
</div>
<div class="paging"> <a href="http://www.free-css.com/">1</a><a href="http://www.free-css.com/">2</a><a href="http://www.free-css.com/">3</a><a href="http://www.free-css.com/">4</a><a href="http://www.free-css.com/">next</a> </div>
</div>
<div id="rightcolumn">
<div class="rc_panel">
<div class="rc_paneltop"></div>
<div class="rc_panelbody">
<form method="post" action="http://www.free-css.com/">
<input class="textfield" name="search" type="text" value="Search..." id="keyword"/>
<input class="button" type="submit" name="Submit" value="Go" />
</form>
</div>
<div class="rc_panelbottom"></div>
</div>
<div class="rc_panel">
<div class="rc_paneltop"></div>
<div class="rc_panelbody">
<h3>Categories</h3>
<ul>
<li><a href="http://www.free-css.com/">Duis vitae velit</a></li>
<li><a href="http://www.free-css.com/">Aliquet ligula</a></li>
<li><a href="http://www.free-css.com/">Elementum ipsum velit</a></li>
<li><a href="http://www.free-css.com/">Vitae velit sed</a></li>
<li><a href="http://www.free-css.com/">Sed dui malesuada</a></li>
<li><a href="http://www.free-css.com/">Pellentesque vitae magna</a></li>
</ul>
</div>
<div class="rc_panelbottom"></div>
</div>
<div class="rc_panel">
<div class="rc_paneltop"></div>
<div class="rc_panelbody">
<h3>Archives</h3>
<ul>
<li><a href="http://www.free-css.com/">January, 2020</a></li>
<li><a href="http://www.free-css.com/">Fabruary, 2020</a></li>
<li><a href="http://www.free-css.com/">March, 2020</a></li>
<li><a href="http://www.free-css.com/">April, 2020</a></li>
<li><a href="http://www.free-css.com/">May, 2020</a></li>
</ul>
</div>
<div class="rc_panelbottom"></div>
</div>
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/your-blog-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
<div id="bottompanel">
<div class="bp_column1">
<h3>Popular Post</h3>
<div class="popularpost">
<h4><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></h4>
Author name - Oct 18, 2020 <span class="comment">(12)</span></div>
<div class="popularpost">
<h4><a href="http://www.free-css.com/">Duis vitae velit sed dui malesuada</a></h4>
Author name - Oct 12, 2020 <span class="comment">(23)</span></div>
<div class="popularpost">
<h4><a href="http://www.free-css.com/">Donec mollis aliquet ligula</a></h4>
Author name - Oct 11, 2020 <span class="comment">(32)</span></div>
<div class="popularpost">
<h4><a href="http://www.free-css.com/">Quisque rhoncus nulla quis sem</a></h4>
Author name - Oct 15, 2020 <span class="comment">(25)</span></div>
</div>
<div class="bp_column2">
<h3>Photo Gallery</h3>
<a href="http://www.free-css.com/"><img src="your-blog-images/photo04.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="your-blog-images/photo02.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="your-blog-images/photo03.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="your-blog-images/photo01.gif" alt="" /></a>
<div class="readmore_black"><a href="http://www.free-css.com/">View All</a></div>
</div>
<div class="bg_recentproject">
<h3>Recent Project</h3>
<img src="your-blog-images/recentproject.jpg" alt="iamge" />
<p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum.</p>
<div class="readmore_black"><a href="http://www.free-css.com/">Read more</a></div>
</div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Portfolio</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright 2008 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">TemplateMo.com</a> </div>
</div>
</div>
</body>
</html>
Related examples in the same category