vectorlover1-0
<!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" xml:lang="en" lang="en">
<head>
<title>VectorLover - Blog</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/* ----------------------------------------------
Template Name : VectorLover
Template Code : S-0026
Version : 1.0
Author : Erwin Aligam
Author URI : http://www.styleshout.com/
Last Date Modified : July 31, 2008
------------------------------------------------ */
/* ----------------------------------------------
HTML ELEMENTS
------------------------------------------------- */
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
body {
background: #CCC url(bg.gif) repeat-x;
font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #6B6B6B;
text-align: center;
}
/* links */
a, a:visited {
color: #79A325;
background: inherit;
text-decoration: none;
}
a:hover {
color: #73471B;
background: inherit;
text-decoration: underline;
}
/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
font-weight: Bold;
padding: 10px;
color: #444;
}
h1 {
font-size: 2.9em;
}
h2 {
font-size: 2.5em;
color: #88AC0B;
}
h3 {
font-size: 1.6em;
font-weight: normal;
padding: 16px 10px 4px 10px;
}
/* Paragraph */
p { padding: 12px 10px; }
/* Lists */
ul, ol {
margin: 10px 20px;
padding: 0 20px;
}
ul { list-style: none; }
dl { padding: 10px; margin: 0; }
dt {
font-weight: bold;
color: #79A62E;
}
dd {
padding-left: 25px;
}
/* images */
img {
background: #FAFAFA;
border: 1px solid #E4E4E4;
padding: 8px;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
code {
margin: 5px 0;
padding: 15px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'Courier New', monospace;
/* white-space: pre; */
border: 1px solid #EEE8E1;
background: #FAF7F5;
}
acronym {
cursor: help;
border-bottom: 1px dotted #895F30;
}
blockquote {
margin: 15px 10px;
padding: 5px 7px 5px 40px;
font-weight: normal;
font-size: 17px;
line-height: 1.6em;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, serif;
color: #80614D;
border: 1px solid #EEE8E1;
background: #FAF7F5 url(quote.gif) no-repeat 15px 15px;
}
/* start - table */
table {
border-collapse: collapse;
margin: 15px 10px;
}
th {
height: 38px;
padding-left: 12px;
padding-right: 12px;
color: #fff;
text-align: left;
background: #ADD163;
border-width: 1px;
border-style: solid;
border-color: #C4DE8F #93C138 #93C138 #C4DE8F;
}
tr {
height: 34px;
background: #fff;
}
td {
padding-left: 11px;
padding-right: 11px;
border: 1px solid #E7F0CC;
}
/* end - table */
/* form elements */
form {
margin: 20px 10px;
padding: 15px 25px 25px 20px;
border: 1px solid #EEE8E1;
background: #FAF7F5;
}
form p {
border-bottom: 1px solid #ECE5DD;
padding: 12px 0 5px 0; margin: 0;
color: #9D6D37;
}
label {
font-weight: bold;
color: #A7743B;
}
input, select, textarea {
margin: 5px 0;
padding: 5px;
color: #6A6969;
border-width: 1px;
border-style: solid;
border-color: #d4d4d4 #ebebeb #ebebeb #d4d4d4;
}
option { padding-right: 0.5em; }
#name, #email, #message, #website{
width: 455px;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 30px;
margin: 0;
padding: 2px 3px;
color: #fff;
background: #A6CD56;
border-width: 1px;
border-style: solid;
border-color: #C4DE8F #8DB836 #8DB836 #C4DE8F;
}
/*-------------------------------------------
LAYOUT
--------------------------------------------*/
#wrap {
position: relative;
width: 952px;
background: #FFF url(wrap.gif) repeat-y center top;
margin: 40px auto 30px auto;
text-align: left;
}
#content {
clear: both;
float: left;
width: 952px;
padding: 25px 0 60px 0;
}
#header {
position: relative;
width: 952px;
height: 245px;
background: #8AB84B url(header.jpg) no-repeat;
color: #fff;
padding: 0;
margin: 0;
}
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 66px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
letter-spacing: -5px;
text-decoration: none;
color: #332616;
/* change the values of top and left to adjust the position of the logo*/
top: 75px; left: 55px;
}
#header p#slogan {
position: absolute;
margin: 0; padding: 0;
font: bold 15px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
color: #322815;
letter-spacing: -0.5px;
/* change the values of top and left to adjust the position of the slogan*/
top: 148px; left: 150px;
}
/* top-menu */
#top-menu {
position: absolute;
margin: 0;
padding: 30px 15px 8px 15px;
background: #74A838 url(top-menu.gif) repeat-x;
font-family: 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
top: 0; right: 70px
}
#top-menu p {
margin: 0; padding: 0;
}
#top-menu a {
font-weight: bold;
color: #fff;
}
/* Navigation */
#nav {
clear: both;
padding: 0; margin: 0;
width: 952px;
height: 50px;
background: #988060 url(nav.gif) no-repeat;
}
#nav ul {
float: left;
list-style: none;
margin: 5px 0 0 0;
height: 45px;
padding: 0 0 0 40px;
}
#nav ul li {
float: left;
margin: 0; padding: 0 0 0 10px;
}
#nav ul li a {
float: left;
margin: 0;
padding: 0 15px 0 5px;
color: #FFF;
font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #E7FAA9;
}
#nav ul li#current {
background: transparent url(left-tab.gif) no-repeat;
}
#nav ul li#current a {
color: #4B3D2C;
background: transparent url(right-tab.gif) no-repeat right top;
}
/* Main Column */
#main {
float: left;
width: 535px;
padding: 0; margin: 0 0 0 40px;
display: inline;
}
#main h2 {
font: bold 2.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
color: #51432F;
padding: 10px 0 5px 5px;
margin-left: 5px;
letter-spacing: -2px;
border-bottom: 1px solid #E4F2C8;
}
#main h2 a {
color: #51432f;
text-decoration: none;
}
#main ul li {
list-style-image: url(bullet.gif);
}
#sidebar {
float: right;
width: 285px;
padding: 0;
margin: 0 45px 0 0;
display: inline;
}
#sidebar h3 {
color: #51432F;
font: bold 1.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
text-transform: none;
letter-spacing: -0.5px;
padding: 5px 0 5px 7px;
margin: 10px 0 5px 10px;
border-bottom: 1px solid #E4F2C8;
}
/* sidebar menu */
#sidebar .sidemenu {
margin: 10px 10px 5px 7px; padding: 0;
text-decoration: none;
}
#sidebar .sidemenu li {
list-style: none;
margin: 0;
padding: 8px 10px;
border-bottom: 1px solid #E8E8E8;
}
* html body #sidebar .sidemenu li {
height: 1%;
}
#sidebar .sidemenu li a {
text-decoration: none;
color: #739A23;
background: none;
font-weight: normal;
}
#sidebar .sidemenu li a span {
color: #7F7F7F;
font-size: .9em;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: italic;
font-weight: normal;
}
#sidebar .sidemenu li a:hover {
color: #000;
background: none;
}
#sidebar .sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar .sidemenu ul li { border: none; }
/* header quick search */
#sidebar form#qsearch {
padding: 0; margin: 20px 0 30px 10px;
border: none;
width: 270px; height: 33px;
background: #F2F0F0 url(qsearch.gif) no-repeat;
}
#sidebar form#qsearch p {
margin: 0; padding: 0;
}
#sidebar form#qsearch input {
float: left;
border: none;
background: transparent;
color: #B8B8B8;
margin: 0;
}
#sidebar form#qsearch .tbox {
margin: 5px 0 0 5px;
width: 220px;
display: inline;
font: 1em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
}
#search form#qsearch .btn{
width: 24px; height: 24px;
}
#sidebar form#qsearch label {
display: none;
}
/* footer */
#footer {
clear: both;
width: 952px;
margin: 0;
padding: 30px 0 25px 0;
background: #CCC url(footer-bottom.gif) no-repeat left top;
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
font-size: 0.95em;
color: #777;
text-align: center;
letter-spacing: .2px;
}
#footer p {
padding:10px 0;
}
#footer a:hover {
color: #555;
border-bottom: 1px dotted #555;
text-decoration: none;
}
/* postmeta */
.post-footer {
padding: 8px 10px;
margin: 15px 10px 10px 10px;
color: #977C57;
border: 1px solid #EEE8E1;
background: #FAF7F5;
}
.post-footer .date{
margin: 0 10px 0 5px;
padding: 7px;
background: #FAF7F5 url(clock.gif) no-repeat 0 2px;
padding-left: 30px;
}
.post-footer a.comments {
margin: 0 10px 0 5px;
padding: 7px 5px;
background: #FAF7F5 url(comments.gif) no-repeat 0 2px;
padding-left: 30px;
color: #977C57;
}
.post-footer a.readmore {
margin: 0 10px 0 5px;
padding: 7px 5px;
background: #FAF7F5 url(doc.gif) no-repeat 0 2px;
padding-left: 30px;
color: #977C57;
}
.post-footer a.edit {
margin: 0 10px 0 5px;
padding: 7px 5px;
background: #FAF7F5 url(edit-doc.gif) no-repeat 0 2px;
padding-left: 30px;
color: #977C57;
}
.post-info { font-size: .95em; padding: 0 10px; margin-left: 2px; color: #A98D76; }
.post-info a, .post-info a:visited { color: #333; }
/* comments list */
ol.commentlist {
margin: 12px 10px;
padding: 0;
border-style: solid;
border-color: #EEE8E1;
border-width: 1px 1px 0 1px;
}
.commentlist li {
margin: 0;
padding: 10px;
list-style: none;
border-bottom: 1px solid #EEE8E1;
}
.commentlist li cite {
display: block;
font-style: normal;
font-weight: bold;
padding: 7px;
}
.commentlist li cite img {
float: left;
margin-right: 10px;
}
.commentlist li cite .comment-data {
font-size: .8em;
font-weight: normal;
}
.commentlist li .comment-text {
clear: both;
margin: 0; padding: 0;
}
.commentlist li.alt {
background: #FAF7F5;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.no-border { border: none; }
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo-text"><a href="http://www.free-css.com/">vectorlover</a></h1>
<p id="slogan">Free CSS Template</p>
<div id="top-menu">
<p><a href="http://www.free-css.com/">rss feed</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://www.free-css.com/">login</a></p>
</div>
</div>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="style.html">Style Demo</a></li>
<li id="current"><a href="blog.html">Blog</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
</ul>
</div>
<div id="content">
<div id="main">
<h2><a href="http://www.free-css.com/">A Blog Entry</a></h2>
<p class="post-info">Posted by <a href="http://www.free-css.com/">erwin</a> | Filed under <a href="http://www.free-css.com/">templates</a>, <a href="http://www.free-css.com/">internet</a> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac <a href="http://www.free-css.com/">convallis aliquam</a>, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p> Donec mattis, purus nec placerat bibendum, <a href="http://www.free-css.com/">dui pede condimentum</a> odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, <a href="http://www.free-css.com/">eget fringilla velit</a> magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. </p>
<p class="post-footer"> <a href="http://www.free-css.com/" class="comments">Comments (3)</a> | <span class="date">July 20, 2008</span> | <a href="http://www.free-css.com/" class="edit">Edit</a> </p>
<h3 id="comments">3 Responses</h3>
<ol class="commentlist">
<li class="alt" id="comment-63"> <cite> <img alt="" src="vectorlover1-0-images/gravatar.jpg" class="avatar" height="40" width="40" /> <a href="http://www.free-css.com/">Erwin</a> Says: <br />
<span class="comment-data"><a href="http://www.free-css.com/">July 20th, 2008 at 8:08 am</a> </span> </cite>
<div class="comment-text">
<p>Comments are great!</p>
</div>
</li>
<li id="comment-67"> <cite> <img alt="" src="vectorlover1-0-images/gravatar.jpg" class="avatar" height="40" width="40" /> admin Says: <br />
<span class="comment-data"><a href="http://www.free-css.com/">July 20th, 2008 at 2:17 pm</a> </span> </cite>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p>
</div>
</li>
<li class="alt" id="comment-71"> <cite> <img alt="" src="vectorlover1-0-images/gravatar.jpg" class="avatar" height="40" width="40" /> <a href="http://www.free-css.com/">Erwin</a> Says: <br />
<span class="comment-data"><a href="http://www.free-css.com/">July 20th, 2008 at 3:17 pm</a> </span> </cite>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
</div>
</li>
</ol>
<h3 id="respond">Leave a Reply</h3>
<form action="http://www.free-css.com/" method="post" id="commentform">
<p>
<label for="name">Name (required)</label>
<br />
<input id="name" name="name" value="Your Name" type="text" tabindex="1" />
</p>
<p>
<label for="email">Email Address (required)</label>
<br />
<input id="email" name="email" value="Your Email" type="text" tabindex="2" />
</p>
<p>
<label for="website">Website</label>
<br />
<input id="website" name="website" value="Your Website" type="text" tabindex="3" />
</p>
<p>
<label for="message">Your Message</label>
<br />
<textarea id="message" name="message" rows="10" cols="20" tabindex="4"></textarea>
</p>
<p class="no-border">
<input class="button" type="submit" value="Submit" tabindex="5" />
</p>
</form>
</div>
<div id="sidebar">
<h3>About</h3>
<p> <a href="http://www.free-css.com/"><img src="vectorlover1-0-images/gravatar.jpg" width="40" height="40" alt="" class="float-left" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. </p>
<h3>Search</h3>
<form id="qsearch" action="http://www.free-css.com/" method="get" >
<p>
<label for="qsearch">Search:</label>
<input class="tbox" type="text" name="qsearch" value="Search this site..." title="Start typing and hit ENTER" />
<input class="btn" alt="Search" type="image" name="searchsubmit" title="Search" src="vectorlover1-0-images/search.gif" />
</p>
</form>
<h3>Sidebar Menu</h3>
<ul class="sidemenu">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">TemplateInfo</a></li>
<li><a href="http://www.free-css.com/">Style Demo</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">More Free Templates</a></li>
<li><a href="http://www.free-css.com/">Premium Templates</a></li>
</ul>
<h3>Links</h3>
<ul class="sidemenu">
<li><a href="http://www.free-css.com/">Alistapart</a></li>
<li><a href="http://www.free-css.com/">CSS Remix</a></li>
<li><a href="http://www.free-css.com/">CSS Mania</a></li>
</ul>
<h3>Sponsors</h3>
<ul class="sidemenu">
<li><a href="http://www.free-css.com/">4templates <br />
<span>Low Cost Hi-Quality Templates</span></a></li>
<li><a href="http://www.free-css.com/">TemplateMonster <br />
<span>Delivering the Best Templates on the Net!</span></a></li>
<li><a href="http://www.free-css.com/">Text Link Ads <br />
<span>Monetized your website</span></a></li>
<li><a href="http://www.free-css.com/">Fotolia <br />
<span>Free stock images or from $1</span></a> </li>
<li><a href="http://www.free-css.com/">FlashDen <br />
<span>Your Choice For Flash Components and Effects</span></a></li>
<li><a href="http://www.free-css.com/">Dreamhost <br />
<span>Premium webhosting</span></a></li>
</ul>
<h3>Wise Words</h3>
<p>"We can let circumstances rule us, or we can take charge and rule our lives from within."</p>
<p class="align-right">- Earl Nightingale</p>
<h3>Support Styleshout</h3>
<p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through the donate link on my website - it will be a great help and will surely be appreciated.</p>
</div>
</div>
<div id="footer">
<p> © All your copyright info here Design by : <a href="http://www.styleshout.com/">styleshout</a> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Sitemap</a> | <a href="http://www.free-css.com/">RSS Feed</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category