Blog layout
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Holiday Template | A Free CSS Template By Ramblingsoul</title>
<style type='text/css'>
body {
background: #F0E7AC url(images/bg.jpg) repeat-x center top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
* {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#wrap {
width: 940px;
margin: auto;
}
#top {
height: 45px;
}
#header {
background: url(images/header.jpg) no-repeat center;
height: 228px;
}
#header .description {
display: block;
color: #FFFFCC;
font-size: 24px;
padding: 55px 25px 25px 300px;
}
.description span {
display: block;
color: #99CC33;
font-size: 28px;
text-align: center;
}
h1,h2,h3,h4,h5 {
font-family: "Trebuchet MS", Arial, Verdana;
}
#sitename {
display: block;
float: left;
font-size: 28px;
padding-top: 5px;
}
#sitename a span {
color: #999900;
}
#sitename a,#sitename a:visited,#sitename a:active {
color: #993300;
text-decoration: none;
}
#topmenu {
list-style: none;
display: block;
float: right;
padding-top: 11px;
min-width: 400px;
}
#topmenu li {
display: inline;
}
#topmenu a {
display: block;
float: left;
height: 27px;
padding: 7px 18px 0px 18px;
text-align: center;
font: "Trebuchet MS", Arial, Verdana;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
margin-right: 1px;
}
#topmenu a {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
#topmenu a:visited {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
,
#topmenu a:active {
background: url(images/menu1.jpg) repeat-x;
color: #C8BEAC;
}
#topmenu a:hover {
background: url(images/menu2.jpg) repeat-x;
color: #CC0000;
}
#topmenu .active a,#topmenu .active a:visited,#topmenu .active a:active
{
background: url(images/menu2.jpg) repeat-x;
color: #CC0000;
}
#footer {
background: url(images/footertop.jpg) repeat-x center top;
padding-top: 40px;
}
#footercontents {
background: url(images/footer.jpg) repeat center top;
padding: 10px 25px 10px 25px;
text-align: center;
}
#main {
padding: 10px;
}
#main p {
line-height: 22px;
color: #333333;
margin-bottom: 20px;
}
#main .col {
width: 32%;
padding: 5px;
float: left;
}
#main h1,#main h2,#main h3,#main h4,#main h5 {
color: #999900;
}
#main h1 {
font-size: 28px;
}
#main h2 {
font-size: 24px;
}
#main h3 {
font-size: 20px;
}
#main h4 {
font-size: 18px;
}
#main h5 {
font-size: 16px;
}
.seo {
color: #CAA72F;
display: block;
font-size: 11px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
.col img {
padding: 3px;
background: #efefef;
border: solid 1px #C8BEAC;
}
#main a {
color: #CC3300;
}
#main a:visited,active {
color: #990000;
}
#main a:hover {
color: #999900;
text-decoration: none;
}
#footer a {
color: #CC3300;
}
#footer a:visited,active {
color: #990000;
}
#footer a:hover {
color: #999900;
text-decoration: none;
}
.align_c {
margin: auto;
display: block;
}
.align_l {
float: left;
margin: 5px;
}
.gallery img {
margin: 5px;
}
#credits {
background: #FFFFCC;
padding: 10px;
text-align: center;
font-size: 10px;
}
#content {
width: 65%;
float: left;
padding: 5px;
}
#sidebar {
width: 32%;
float: right;
padding: 5px;
}
#sidebar ul {
list-style: none;
}
#sidebar li {
display: block;
height: 25px;
}
#sidebar a {
display: block;
height: 20px;
margin: 5px 5px 0px 5px;
}
h1 a,h2 a,h3 a,h4 a,h5 a {
color: #999900;
text-decoration: none;
}
#wrap #main #content .postinfo {
background-color: #FFFFCC;
padding: 5px;
}
h2 a:visited,active {
color: #999900;
text-decoration: none;
}
#content ol,#content ul {
margin: 10px 10px 10px 25px;
}
#content ol li {
padding: 5px 5px 5px 20px;
}
#content ul li {
padding: 5px 5px 5px 20px;
}
.nocomments {
color: #999999;
font-size: 10px;
display: block;
}
.commentlist {
background: #F5F3E9;
list-style-type: decimal;
list-style-position: inside;
}
.commentlist li {
border-bottom: solid 2px #FDFCE1;
padding: 5px;
}
.commentlist cite {
display: block;
color: #669900;
font-weight: bold;
padding: 0px 3px 3px 20px;
}
.commentmeta {
display: block;
font-size: 10px;
padding: 3px;
color: #999999;
}
.commenttxt {
display: block;
padding: 5px 5px 5px 15px;
}
form {
margin: 0;
padding: 0;
}
.textfield {
width: 190px;
background-color: #F3F4E8;
margin: 0px;
border: 1px solid #D6D9AE;
}
.button {
display: block;
padding: 0px;
background-color: #E3E6C8;
margin: 3px;
border: 2px solid #efefef;
color: #999933;
}
.textfield:hover {
background: #FBFCF8;
}
.textfield:focus {
background: #ffffff;
}
table {
width: 90%;
border: 1px solid #EBD696;
background-color: #FFFFFF;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
th {
padding: 3px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color: #EBD696;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 16px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EBD696;
}
td {
padding: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBD696;
border-bottom-color: #EBD696;
}
form {
margin: 0;
padding: 0;
}
.textfield {
display: block;
float: left;
width: 190px;
background-color: #F3F4E8;
margin: 3px;
border: 1px solid #D6D9AE;
font-size: 12px;
padding: 5px;
}
label {
display: block;
float: left;
text-align: right;
font-weight: bold;
width: 150px;
margin: 3px;
padding: 5px;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
.button {
display: block;
float: left;
padding: 0px;
background-color: #FFFF99;
margin: 3px;
border: 2px solid #FFCC66;
color: #6C0B02;
}
#wrap #main #content .contactform .hide {
display: none;
}
.textfield:hover {
background: #FBFCF8;
}
.textfield:focus {
background: #ffffff;
}
.clear2 {
clear: left;
height: 1px;
font-size: 1px;
margin: 0;
padding: 0;
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<h1 id="sitename"><a href="#">Happy<span> Holidays</span></a></h1>
<ul id="topmenu">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
<li><a href="tables.html">Tables</a></li>
<li><a href="forms.html">Forms</a></li>
</ul>
</div>
<div id="header">
<h2 class="description">A Free CSS Template by Ramblingsoul <span>Happy Holidays!</span></h2>
</div>
<div id="main">
<div id="content">
<h2>Lorem Ipsum Dolor Sit Amet <span class="seo">Posted on 20 December 2007</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ultricies massa in mauris. Sed gravida iaculis urna. Suspendisse rhoncus, ante nec porta adipiscing, elit nisl aliquet lectus, a cursus leo ante ut lacus. In dignissim viverra neque. Vestibulum at tortor sodales tellus semper aliquam. Pellentesque vel lacus. Vestibulum luctus aliquet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi non metus id enim feugiat facilisis. Nam adipiscing ligula. Etiam imperdiet orci eget pede. Fusce est mi, porta viverra, fermentum sit amet, commodo id, lacus. Donec dui turpis, ultrices nec, placerat eget, ultricies in, libero.
</p>
<p> Here is a list of Heading Tags</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>
Etiam pretium egestas dolor. Nulla facilisi. Etiam pede nibh, suscipit quis, vulputate auctor, facilisis quis, lectus. Curabitur dui. Praesent iaculis consequat justo. Aliquam tristique arcu sed felis. Morbi at massa. Vivamus aliquet posuere sem. Integer ut turpis in ligula tristique gravida. Cras rutrum pulvinar urna. Donec ac sem ac magna molestie feugiat. Sed nec eros. Vivamus nonummy enim sit amet nibh. Sed sit amet diam. Nulla semper nonummy justo.
</p>
<p>
Sed neque. Nam at ante quis ipsum volutpat interdum. Vivamus laoreet quam posuere eros. Integer magna. Donec convallis nisi non risus. Quisque interdum, lacus id convallis fringilla, leo massa fringilla augue, vitae sodales est dolor eget mauris. Sed posuere, sem et scelerisque vulputate, odio sapien iaculis justo, nec placerat leo ipsum sed neque. Nullam sagittis. Ut egestas, nunc sit amet vehicula commodo, orci nisi blandit justo, eu nonummy pede elit at mi. Donec ipsum urna, scelerisque in, fermentum id, laoreet in, erat. Suspendisse potenti. Quisque velit. Fusce enim. Aliquam ullamcorper. Nulla facilisis tellus et diam. Sed sodales nonummy augue. Maecenas facilisis, dolor ut mollis pretium, tortor nibh aliquam diam, sit amet tempor est arcu non velit. Curabitur mi lacus, bibendum nec, posuere bibendum, accumsan vel, lorem. Sed leo nulla, scelerisque vel, varius imperdiet, semper eu, neque.
</p>
<div class="post" id="1">
<h2><a href="#">About Clean & Green</a></h2>
<small>
</small>
<div class="entry"></div>
<p class="metadata">Posted by Admin on 23 October 2007</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque convallis erat at dui. Vivamus tristique libero a velit. Aliquam lectus nisl, interdum et, facilisis ac, tempor sed, metus. Aliquam vestibulum viverra erat. Quisque nec libero at tellus cursus mattis. Mauris facilisis leo eu ligula. Proin eu leo. Pellentesque pharetra enim quis nulla. Morbi est nulla, condimentum viverra, mattis vel, vestibulum sit amet, neque. Sed lacinia, nisi scelerisque feugiat blandit, justo orci interdum lectus, in sollicitudin diam sem eget mauris. Duis adipiscing felis in orci. Proin in lacus eu mi porttitor venenatis. Nam id leo. Suspendisse egestas tortor non magna. Vestibulum ante. Suspendisse at elit sit amet dui consectetuer tristique. Nulla gravida bibendum urna.</p>
<h4>Unordered List</h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit. </li>
<li>In nonummy, ipsum a varius gravida, justo justo sagittis felis, convallis ornare odio erat sed leo.</li>
<li> Sed laoreet massa ac erat iaculis faucibus. </li>
<li>Maecenas dapibus. </li></ul>
<p></p>
<h3>Ordered List</h3>
<p>Ordred List Example</p>
<ol>
<li>Suspendisse ac sapien in turpis rutrum consectetuer.</li>
<li> Quisque vel tellus. </li>
<li>Sed orci turpis, rutrum sed, commodo eu, ullamcorper sit amet, velit. </li>
<li>Praesent malesuada, enim sit amet pretium ultrices, libero libero vulputate metus, a porttitor magna nulla nec massa. </li>
</ol>
<div class="postinfo"> Filed under : Category | Posted By : Author | Permalink </div>
</div>
</div>
<div id="sidebar">
<h2>Recent Posts</h2>
<ul>
<li>
<a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#"> consectetuer adipiscing elit.</a></li>
<li><a href="#"> Integer ultricies massa in mauris.</a></li>
<li><a href="#"> Sed gravida iaculis urna. </a></li>
<li><a href="#">Suspendisse rhoncus, </a></li>
<li><a href="#">ante nec porta adipiscing, elit nisl aliquet </a></li>
<li><a href="#">lectus, a cursus leo ante ut lacus. </a></li>
<li><a href="#">In dignissim viverra neque. Vestibulum </a></li>
<li><a href="#">at tortor sodales tellus semper aliquam.</a></li>
<li><a href="#"> Pellentesque vel lacus.</a></li>
<li><a href="#"> Vestibulum luctus aliquet ante. </a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#"> et magnis dis parturient montes, </a></li>
<li><a href="#">nascetur ridiculus mus. </a></li>
<li><a href="#">Morbi non metus id enim feugiat facilisis.</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footercontents">
Copyright © Information Goes Here
| <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Goes</a> | <a href="#">Here</a></div>
<div id="credits">
<a href="http://ramblingsoul.com">CSS Template</a> by Rambling Soul</div>
</div>
</body>
</html>
Related examples in the same category