design-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>Design Blog</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: Verdana, Arial, san-serif;
font-size: 11px;
color: #CCC;
background: #000 url(design-blog-images/main_bg.jpg) top repeat-x;
}
a:link, a:visited {
color: #f5ea01;
text-decoration: none;
font-weight: bold;
}
a:active, a:hover {
color: #f5ea01;
text-decoration: underline;
}
p {
margin: 0px;
padding: 0px;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_with_divider {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
padding: 10px 0 0 0;
margin: 0 0 10px 0;
border-bottom: 1px dotted #B79742;
}
.comment {
padding-left: 20px;
margin-left: 5px;
background: url(design-blog-images/comment_icon.jpg) bottom left no-repeat;
}
/* content and header panel */
#header_panel {
clear: both;
width:100%;
margin: 0 auto;
background: #000000 url(design-blog-images/top_bg.jpg) top center no-repeat;
}
#header_panel #header_section{
clear: both;
width: 960px;
height: 293px;
margin: 0 auto;
}
#header_section #title_section{
font-size: 55px;
padding: 130px 0 10px 10px;
color: #f5ea01;
}
#header_section #tagline {
padding: 15px 0 0 165px;
font-size: 20px;
color: #6b5927;
}
/* end of header */
/* menu */
#menu_panel{
clear: both;
width:100%;
height: 47px;
margin: 0 auto;
margin-bottom: 10px;
color: #ffffff;
background: #000000 url(design-blog-images/menu_bg_repeat.jpg) repeat-x;
}
#menu_panel #menu_section{
width: 930px;
height: 47px;
margin:0 auto;
padding: 0 0 0 30px;
color: #03a0a6;
background: url(design-blog-images/menu_bg.jpg) no-repeat;
}
#menu_section ul {
float: left;
width: 930px;
margin: 0;
padding: 15px 0 0 0;
list-style: none;
}
#menu_section ul li {
display: inline;
}
#menu_section ul li a{
float: left;
width: 110px;
padding: 2px 0;
margin-right: 5px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #99930d;
border-right: 1px solid #333;
}
#menu_section li a:hover, #menu_section li .current{
color: #f5ea01;
}
#menu_section li .last {
border-right: none;
}
/* end of menu */
/* content */
#content {
clear: both;
width: 960px;
margin: 0 auto;
}
#content_column_one {
float: left;
width: 178px;
border: 1px solid #846f34;
margin: 0 0 0 10px;
padding: 10px 0 10px 0;
background: #6b5927 url(design-blog-images/180_column_bg.jpg) top center no-repeat;
}
#content_column_two {
float: left;
width: 460px;
margin: 0 0 0 10px;
padding: 0;
}
#content_column_three {
float: left;
width: 278px;
padding: 10px 0 10px 0;
margin: 0 0 0 10px;
border: 1px solid #312f2b;
background: #181714;
}
/* column one */
#content_column_one .column_one_section {
clear: both;
margin: 0px 10px;
}
#content_column_one h1 {
margin: 0 0 10px 0;
padding: 0 0 5px 0;
font-size: 14px;
color: #000;
border-bottom: 1px dotted #000;
}
#content_column_one .cleaner_with_divider {
margin: 0 0 20px 0;
}
#content_column_one ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#content_column_one li {
margin: 0px;
padding: 0 0 5px 0;
}
#content_column_one a{
color: #181714;
}
/* end of column one */
/* column two */
#content_column_two .column_two_section {
clear: both;
width: 418px;
padding: 20px;
margin-bottom: 10px;
border: 1px solid #312f2b;
background: #181714 url(design-blog-images/templatmeo_column_two_bg.jpg) top right no-repeat;
}
#content_column_two h1 {
margin: 0 0 10px 0;
padding: 0 0 10px 0;
font-size: 16px;
color: #f5ea01;
border-bottom: 1px dotted #f5ea01;
}
#content_column_two p{
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
#content_column_two img {
border: 5px solid #2e2d29;
margin-bottom: 15px;
}
#content_column_two .post_info {
margin: 0 0 20px 0;
color: #fff;
}
#content_column_two .post_info a{
color: #f5ea01;
font-weight: normal;
}
#content_column_two .post_comment {
border-top: 1px solid #000;
margin-top: 10px;
padding: 10px 0 0 0;
}
/* end of column one */
/* column one */
#content_column_three .column_three_section {
clear: both;
margin: 0px 10px;
padding: 10px 0;
}
#content_column_three .cleaner_with_divider {
padding: 0px;
margin: 0px;
}
#content_column_three h1 {
margin: 10px 0 10px 0;
padding: 0 0 10px 0;
font-size: 14px;
color: #fff;
border-bottom: 1px dotted #FFF;
}
#content_column_three a{
font-weight: normal;
}
#content_column_three ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#content_column_three li {
margin: 0 0 8px 0;
padding: 0 0 8px 0;
}
#content_column_three #ad_section {
clear: both;
border-bottom: 1px solid #312f2b;
}
#ad_section h1{
margin: 0 0 10px 10px;
padding: 0px;
font-size: 12px;
font-weight: bold;
border: none;
}
#ad_section .ad_125x125_box {
float: left;
margin: 0 0 10px 10px;
width: 125px;
height: 125px;
}
.ad_125x125_box img {
border: none;
}
.column_three_section .popular_post {
list-style: none;
margin: 0;
padding: 0;
}
.column_three_section .popular_post li{
margin: 0 0 5px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #22250e;
}
/* end of column one */
/* for bottom palen */
#bottom_panel{
width: 960px;
margin: 10px auto 0 auto;
padding: 20px 0;
background: url(design-blog-images/bottom_panel_bg.jpg) top center;
}
#bottom_panel .bottom_panel_section {
margin-left: 10px;
width: 550px;
margin-bottom: 20px;
}
.bottom_panel_section h1 {
color: #f2e304;
font-size: 14px;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
.bottom_panel_section p{
margin-bottom: 5px;
padding-bottom: 5px;
}
/* end of bottom */
</style>
</head>
<body>
<div id="header_panel">
<div id="header_section">
<div id="title_section">Design Blog</div>
<div id="tagline">Your web design resources</div>
</div>
</div>
<!-- end of haeder -->
<div id="menu_panel">
<div id="menu_section">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Tutorials</a></li>
<li><a href="http://www.free-css.com/">Freebies</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/" class="last">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of menu -->
<div id="content">
<div id="content_column_one">
<div class="column_one_section">
<h1>Categories</h1>
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor </a></li>
<li><a href="http://www.free-css.com/">Duis mollis</a></li>
<li><a href="http://www.free-css.com/">Maecenas adipiscing</a></li>
<li><a href="http://www.free-css.com/">Nunc blandit orci</a></li>
<li><a href="http://www.free-css.com/">Etiam justo</a></li>
<li><a href="http://www.free-css.com/">Curabitur dapibus</a></li>
<li><a href="http://www.free-css.com/">Vestibulum sed </a></li>
<li><a href="http://www.free-css.com/">Nunc quis sem </a></li>
</ul>
</div>
<div class="cleaner_with_divider"> </div>
<div class="column_one_section">
<h1>Archives</h1>
<ul>
<li><a href="http://www.free-css.com/">June 2024</a></li>
<li><a href="http://www.free-css.com/">May 2024</a></li>
<li><a href="http://www.free-css.com/">April 2024</a></li>
<li><a href="http://www.free-css.com/">March 2024</a></li>
<li><a href="http://www.free-css.com/">February 2024</a></li>
<li><a href="http://www.free-css.com/">January 2024</a></li>
<li><a href="http://www.free-css.com/">December 2023</a></li>
<li><a href="http://www.free-css.com/">November 2023</a></li>
<li><a href="http://www.free-css.com/">October 2023</a></li>
<li><a href="http://www.free-css.com/">September 2023</a></li>
</ul>
</div>
<div class="cleaner_with_divider"> </div>
<div class="column_one_section">
<h1>Popular Posts</h1>
<ul>
<li><a href="http://www.free-css.com/">Pellentesque dolor</a></li>
<li><a href="http://www.free-css.com/">Suspendisse a nibh</a></li>
<li><a href="http://www.free-css.com/">Maecenas scelerisque</a></li>
<li><a href="http://www.free-css.com/">Cura bitur mauris</a></li>
<li><a href="http://www.free-css.com/">Proin vel libero id</a></li>
</ul>
</div>
<div class="cleaner_with_divider"> </div>
<div class="column_one_section">
<h1>Cool Links</h1>
<ul>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Flash Source Files</a></li>
<li><a href="http://www.free-css.com/">Web Design</a></li>
<li><a href="http://www.free-css.com/">Free Photos</a></li>
</ul>
</div>
</div>
<!-- end of column one -->
<div id="content_column_two">
<div class="column_two_section">
<h1><a href="http://www.free-css.com/">Web Design Template</a></h1>
<div class="post_info"> Posted by <a href="http://www.free-css.com/">Admin</a>, December 8, 2024 at 10:45 am, in <a href="http://www.free-css.com/">Web Design</a></div>
<img src="design-blog-images/image_01.jpg" alt="" />
<p><strong>Design Blog</strong> is a free CSS template provided by TemplateMo.com. You may download, modify and apply this CSS layout for your personal or business websites.</p>
<p>Credit goes to photovaco.com for photos.</p>
<div class="post_comment"> <a href="http://www.free-css.com/"><span class="comment">18 comments</span></a> </div>
</div>
<div class="column_two_section">
<h1><a href="http://www.free-css.com/">Free CSS Template</a></h1>
<div class="post_info"> Posted by <a href="http://www.free-css.com/">Free Web Templates</a>, December 2, 2024 at 11:24 am, in <a href="http://www.free-css.com/">Web Template</a></div>
<img src="design-blog-images/image_02.jpg" alt="" />
<p>Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="post_comment"> <a href="http://www.free-css.com/"><span class="comment">24 comments</span></a> </div>
</div>
</div>
<!-- end of column two -->
<div id="content_column_three">
<div id="ad_section">
<h1>Sponsors</h1>
<div class="ad_125x125_box"> <a href="http://www.free-css.com/"><img src="design-blog-images/ads.jpg" alt="" /></a> </div>
<div class="ad_125x125_box"> <a href="http://www.free-css.com/"><img src="design-blog-images/ads.jpg" alt="" /></a> </div>
<div class="ad_125x125_box"> <a href="http://www.free-css.com/"><img src="design-blog-images/ads.jpg" alt="" /></a> </div>
<div class="ad_125x125_box"> <a href="http://www.free-css.com/"><img src="design-blog-images/ads.jpg" alt="" /></a> </div>
<div class="cleaner"> </div>
</div>
<!-- end of ads section -->
<div class="column_three_section">
<h1>Popular Posts</h1>
<ul class="popular_post">
<li><a href="http://www.free-css.com/">Donec mollis aliquet</a><br />
Author name - Oct 21, 2024 <span class="comment"><a href="http://www.free-css.com/">(63)</a></span></li>
<li><a href="http://www.free-css.com/">Aliquam tristique lacust</a><br />
Author name - Sep 15, 2024<span class="comment"><a href="http://www.free-css.com/">(45)</a></span></li>
<li><a href="http://www.free-css.com/">Suspendisse potent</a><br />
Author name - Aug 21, 2024<span class="comment"><a href="http://www.free-css.com/">(36</a></span><a href="http://www.free-css.com/">)</a></li>
<li><a href="http://www.free-css.com/">Nullam vitae tellus</a><br />
Author name - July 19, 2024<span class="comment"><a href="http://www.free-css.com/">(18)</a></span></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor</a><br />
Author name - May 16, 2024<span class="comment"><a href="http://www.free-css.com/">(27</a></span><a href="http://www.free-css.com/">)</a></li>
</ul>
</div>
<div class="cleaner_with_divider"> </div>
<div class="column_three_section">
<h1>About This Blog</h1>
<p>Etiam fringilla vestibulum nulla. Suspendisse venenatis. Cum sociis natoque penatibus et magnis montes, nascetur ridiculus mus. Morbi dapibus dolor sit amet metus suscipit iaculis. <a href="http://www.free-css.com/">read more</a></p>
</div>
</div>
<!-- end of column three -->
<div class="cleaner"> </div>
</div>
<!-- end of content -->
<div id="bottom_panel">
<div class="bottom_panel_section"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Gallery</a> | <a href="http://www.free-css.com/"> Tutorials</a> | <a href="http://www.free-css.com/">Freebies </a>| <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
<br />
Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></div>
<div class="bottom_panel_section">
<h1>Usage Rights</h1>
<p>Sed consectetur, lacus et dictum tristique, odio neque elementum ante, nec eleifend leo dolor vel tortor. Vivamus vulputate felis. Etiam luctus. Quisque facilisis suscipit elit.</p>
<p><a 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 href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/design-blog-images/vcss-blue" alt="" vspace="8" border="0" /></a> </p>
</div>
<div class="cleaner"> </div>
</div>
<!-- end of bottom panel -->
</body>
</html>
Related examples in the same category