paint-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>Paint 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: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background: #696653;
}
a:link, a:visited { color: #f4d153; text-decoration:none;}
a:active, a:hover { color: #f4d153; text-decoration: underline;}
h1 {
margin: 0px;
padding: 10px 0;
font-size: 26px;
color: #11616a;
font-weight: bold;
}
.cleaner {
clear: both;
width: 100%;
height: 0px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
}
.comment {
padding-left: 20px;
margin-left: 5px;
background: url(paint-blog-images/comment_icon.png) bottom left no-repeat;
}
/* top panel */
#top_panel{
width:100%;
height: 255px;
margin: 0 auto;
color: #000000;
background: #ffffff;
}
#top_panel #header_section{
width: 930px;
height: 255px;
margin:0 auto;
padding: 0 15px;
background: url(paint-blog-images/header_bg.jpg) no-repeat;
}
#header_section #search_box {
float: right;
margin-top: 205px;
width: 245px;
padding-left: 15px;
height: 30px;
}
#search_box #search_field{
background: none;
border: none;
font-size: 13px;
font-variant: normal;
height: 18px;
line-height: normal;
padding: 4px;
width: 150px;
}
#search_box #search_button {
cursor: pointer;
background: none;
border: none;
font-size: 12px;
font-weight: bold;
height: 26px;
margin: 0 0 0 15px;
padding: 0 6px;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 50px;
}
/* end of top panel */
/* menu */
#menu_panel {
clear: both;
width: 100%;
height: 48px;
margin: 0 auto;
color: #ffffff;
background: url(paint-blog-images/menu_bg.jpg) repeat-x;
}
#menu_panel #menu_section {
width: 930px;
height: 48px;
margin:0 auto;
padding: 0 0 0 30px;
color: #03a0a6;
}
#menu_section ul {
float: left;
width: 930px;
margin: 0;
padding: 6px 0 0 0;
list-style: none;
}
#menu_section ul li {
display: inline;
}
#menu_section ul li .lastmenu{
border-right: none;
}
#menu_section ul li a {
float: left;
width: 110px;
padding: 5px 0;
margin-right: 5px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #2f2e27;
border-right: 1px solid #4c4a3c;
}
#menu_section li a:hover, #menu_section li .current {
color: #ffffff;
}
/* end of menu */
/* content panel */
#content_panel {
clear: both;
width:100%;
margin: 0 auto;
color: #ffffff;
background: url(paint-blog-images/content_bg.jpg) repeat;
}
#content_panel #content {
clear: both;
overflow: hidden;
height: 100%;
width: 930px;
padding: 30px 0 0 30px;
margin:0 auto;
}
#content #content_left {
float: left;
width: 270px;
margin-right: 30px;
padding-top: 15px;
border: 5px solid #7b7866;
background-color: #696653;
}
#content #content_right {
float: left;
width: 590px;
}
#content_left .content_left_section {
clear: both;
width: 260px;
margin-left: 10px;
margin-bottom: 25px;
}
.content_left_section .left_section_title {
margin: 0px;
font-size: 18px;
font-weight: bold;
padding: 20px 0 0 20px;
height: 45px;
background:url(paint-blog-images/left_column_title_bg.jpg) no-repeat;
}
.content_left_section .left_section_content {
margin: 0px;
padding: 10px 20px 0 20px;
}
.left_section_content ul{
clear: both;
margin: 0 0 0 15px;
padding: 0px;
}
.left_section_content ul li{
margin: 0 0 5px 0;
}
.left_section_content .gallery {
list-style: none;
margin: 0;
padding: 0;
}
.left_section_content .gallery li {
padding: 0;
float: left;
margin: 0 1px 1px 0;
width: 70px;
height: 61px;
border: 1px solid #7b7866;
}
.left_section_content .gallery img {
border: none;
}
#content_right .post_section {
clear: both;
margin-bottom: 25px;
}
.post_section .date_section {
float: left;
display: inherit;
font-size: 30px;
font-weight: bold;
width: 70px;
height: 60px;
padding: 30px 0 0 30px;
margin-right: 15px;
background: url(paint-blog-images/date_bg.png) no-repeat;
}
.date_section span {
display: block;
margin-top: 8px;
font-size: 15px;
font-weight: bold;
}
.post_section .post_content {
float: left;
display: inline;
width: 475px;
}
.post_content .post_title {
width: 475px;
margin: 0 0 15px 0;
padding: 0 0 15px 0;
font-size: 26px;
font-weight: bold;
color: #d77707;
border-bottom: 1px solid #75715a;
}
.post_title .post_info{
width: 100%;
font-weight: normal;
font-size: 12px;
padding-top: 5px;
color: #ffffff;
}
.post_content .post_body{
padding: 0 0 15px 0;
}
.post_content .post_body img{
margin-bottom: 15px;
border: 5px solid #7b7866;
}
.post_content .post_comment {
padding-left: 20px;
margin-left: 5px;
background: url(paint-blog-images/comment_icon.png) bottom left no-repeat;
}
/* comment */
#middle_column .comment_section {
margin: 20px 20px 30px 20px;
}
.comment_section .comment_section_title{
color: #ded153;
height: 30px;
font-size: 30px;
border-bottom: 1px dotted #666;
padding: 20px 0 0 0;
margin-bottom: 15px;
}
.comment_section .comment_box{
margin-bottom: 20px;
background: #bebaa4;
}
.comment_box .comment_title {
color: #11616a;
font-weight: bold;
padding: 5px 10px;
background-color: #aba68b;
border-bottom: 1px solid #9e997e;
}
.comment_box .comment_body{
padding: 5px 10px;
}
#middle_column .leave_comment_section {
margin: 20px;
}
.leave_comment_section .leave_comment_section_title{
color: #ded153;
height: 30px;
font-size: 30px;
border-bottom: 1px dotted #666;
padding: 20px 0 0 0;
margin-bottom: 15px;
}
.leave_comment_section form {
padding: 20px;
background-color: #aba68b;
border: 1px solid #9e997e;
}
.leave_comment_section textarea {
background:#FFFFFF none repeat fixed 0 0;
border:1px solid #BBBBBB;
display:block;
font-family:Helvetica,Arial,sans-serif;
font-size:1.1em;
height:150px;
margin-top:5px;
padding:5px;
width:300px;
}
.leave_comment_section .form_row {
width: 100%;
margin-bottom: 15px;
}
.leave_comment_section form input {
margin-top: 5px;
width: 200px;
}
.leave_comment_section .submit_btn {
width: 80px;
}
/* end of comment */
/* end of content */
/* for bottom palen */
#bottom_panel{
width:100%;
min-height: 280px;
margin: 0 auto;
border-top: 1px solid #050702;
background: #000000 url(paint-blog-images/bottom_panel_bg.jpg) center top no-repeat;
}
#bottom_panel #bottom_section{
overflow: hidden;
width: 930px;
margin:0 auto;
padding: 40px 0 15px 30px;
}
#bottom_section #bottom_section_left {
float: left;
display: inline-block;
width: 280px;
margin-right: 30px;
margin-bottom: 15px;
}
#bottom_section .bottom_section_title{
font-size: 18px;
margin-bottom: 15px;
font-weight: bold;
color: #ffffff;
}
#bottom_section_left .popular_post {
list-style: none;
margin: 0;
padding: 0 30px 0 0;
}
.popular_post li{
margin: 0 0 5px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #36241b;
}
#bottom_section #bottom_section_right {
float: right;
text-align: right;
display: inline-block;
width: 280px;
margin-right: 30px;
margin-bottom: 15px;
}
#bottom_section_right .list_section{
list-style: none;
margin: 0 0 15px 30px;
padding: 0;
}
#bottom_section_right .list_section li{
list-style: none;
}
/* end of bottom panel */
/* footer */
#footer_panel{
width:100%;
height: 50px;
margin: 0 auto;
background-color: #151513;
border-top: 1px solid #36352c;
}
#footer_panel #footer_section{
width: 960px;
height: 10px;
margin:0 auto;
padding: 20px 15px;
text-align: center;
}
/* end of footer */
</style>
<!--[if lt IE 7]><style type="text/css">.date_section, .comment{ behavior: url(iepngfix.htc); }</style><![endif]-->
</head>
<body>
<div id="top_panel">
<div id="header_section">
<div id="search_box">
<form method="get" action="http://www.free-css.com/">
<input type="text" name="searchfield" id="search_field" title="searchfield" />
<input type="submit" name="search" value="" alt="Search" id="search_button" title="Search" />
</form>
</div>
</div>
</div>
<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="subpage.html">Features</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Company</a></li>
<li><a href="http://www.free-css.com/" class="lastmenu">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content_panel">
<div id="content">
<div id="content_left">
<div class="content_left_section">
<div class="left_section_title">Categories</div>
<div class="left_section_content">
<ul>
<li><a href="http://www.free-css.com/">Lorem ipsum</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>
</ul>
</div>
</div>
<div class="content_left_section">
<div class="left_section_title">Archives</div>
<div class="left_section_content">
<ul>
<li><a href="http://www.free-css.com/">January 2025</a></li>
<li><a href="http://www.free-css.com/">December 2024</a></li>
<li><a href="http://www.free-css.com/">November 2024</a></li>
<li><a href="http://www.free-css.com/">October 2024</a></li>
<li><a href="http://www.free-css.com/">September 2024</a></li>
</ul>
</div>
</div>
<div class="content_left_section">
<div class="left_section_title">Popular Posts</div>
<div class="left_section_content">
<ul>
<li>Lorem Ipsum on <a href="http://www.free-css.com/">Donec mollis aliquet</a></li>
<li>Consectetuer on <a href="http://www.free-css.com/">Suspendisse a nibh</a></li>
<li>Sed on <a href="http://www.free-css.com/">Pellentesque vitae magna</a></li>
<li>Vitae Neque on <a href="http://www.free-css.com/">Nunc blandit orci sit amet risus</a></li>
<li>Donec Mollis on <a href="http://www.free-css.com/">Maecenas adipiscing elementum</a></li>
</ul>
</div>
</div>
<div class="content_left_section">
<div class="left_section_title">Gallery</div>
<div class="left_section_content">
<ul class="gallery">
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_01.jpg" alt="" /></a></li>
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_02.jpg" alt="" /></a></li>
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_03.jpg" alt="" /></a></li>
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_04.jpg" alt="" /></a></li>
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_05.jpg" alt="" /></a></li>
<li><a href="http://www.free-css.com/"><img src="paint-blog-images/thumb_06.jpg" alt="" /></a></li>
</ul>
<div class="cleaner"> </div>
<br />
<a href="http://www.free-css.com/">View All</a> </div>
</div>
</div>
<div id="content_right">
<div class="post_section">
<div class="date_section"> 19<span>OCT</span> </div>
<div class="post_content">
<div class="post_title">
<h1>Post Title One goes here</h1>
<div class="post_info"> Posted by <a href="http://www.free-css.com/">Suspendisse potenti</a> | <a href="http://www.free-css.com/">Web Templates</a> | <a href="http://www.free-css.com/"><span class="comment">12 comments.</span></a> </div>
</div>
<div class="post_body"> <img src="paint-blog-images/image_01.jpg" alt="" />
<p>This is a <a href="http://www.free-css.com/">free CSS template</a> provided by TemplateMo.com website. You may download, modify and apply this CSS layout for your personal or business websites.</p>
<p>Credit goes to photovaco.com for photos. 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>
</div>
</div>
<div class="cleaner_with_height"> </div>
<div class="post_section">
<div class="date_section"> 14<span>OCT</span> </div>
<div class="post_content">
<div class="post_title">
<h1>Post Title Two goes here</h1>
<div class="post_info"> Posted by <a href="http://www.free-css.com/">Suspendisse potenti</a> | <a href="http://www.free-css.com/">Photo Gallery</a> | <a href="http://www.free-css.com/"><span class="comment">8 comments.</span></a> </div>
</div>
<div class="post_body"> <img src="paint-blog-images/image_02.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec dui. Donec nec neque ut quam sodales feugiat. Nam vehicula dapibus lectus. Integer imperdiet pretium dolor. Vivamus felis. Vivamus vulputate vehicula mi. </p>
<p>Maecenas consectetur purus. 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>
</div>
</div>
</div>
<div class="cleaner_with_height"> </div>
</div>
</div>
<div id="bottom_panel">
<div id="bottom_section">
<div id="bottom_section_left">
<div class="bottom_section_title">Latest Posts</div>
<ul class="popular_post">
<li><a href="http://www.free-css.com/">Donec mollis aliquet</a><br />
Author name - Oct 26, 2024 <span class="comment">12</span></li>
<li><a href="http://www.free-css.com/">Aliquam tristique lacust</a><br />
Author name - Oct 24, 2024 <span class="comment">8</span></li>
<li><a href="http://www.free-css.com/">Suspendisse potent</a><br />
Author name - Oct 19, 2024 <span class="comment">10</span></li>
<li><a href="http://www.free-css.com/">Nullam vitae tellus</a><br />
Author name - Oct 14, 2024 <span class="comment">30</span></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor</a><br />
Author name - Oct 12, 2024 <span class="comment">15</span></li>
</ul>
</div>
<div id="bottom_section_right">
<div class="bottom_section_title">Friends</div>
<ul class="list_section">
<li><a href="http://www.free-css.com/">Lorem ipsum</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/">Cum sociis natoque</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt.</p>
<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/paint-blog-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
</div>
<div id="footer_panel">
<div id="footer_section"> Copyright 2024 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">Free CSS Template</a> </div>
</div>
</body>
</html>
Related examples in the same category