Response layout with avatar image
<!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</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<style type='text/css'>
/* ----------------------------------------------
Template Name : VectorLover
Template Code : S-0026
Version : 1.1
Author : Erwin Aligam
Author URI : http://www.styleshout.com/
Last Date Modified : January 17, 2010
------------------------------------------------ */
/* ----------------------------------------------
HTML ELEMENTS
------------------------------------------------- */
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
body {
background: #CCC url(VectorLover-images/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(VectorLover-images/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(VectorLover-images/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(VectorLover-images/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(VectorLover-images/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(VectorLover-images/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(VectorLover-images/left-tab.gif) no-repeat;
}
#nav ul li#current a {
color: #4B3D2C;
background: transparent url(VectorLover-images/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(VectorLover-images/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: bold;
}
#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(VectorLover-images/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(VectorLover-images/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;
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(VectorLover-images/clock.gif) no-repeat 0 2px;
padding-left: 30px;
}
.post-footer a.comments {
margin: 0 10px 0 5px;
padding: 7px 5px;
background: #FAF7F5 url(VectorLover-images/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(VectorLover-images/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(VectorLover-images/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>
<!-- wrap starts here -->
<div id="wrap">
<!--header -->
<div id="header">
<h1 id="logo-text"><a href="index.html" title="">vectorlover</a></h1>
<p id="slogan">put your site slogan here...</p>
<div id="top-menu">
<p><a href="index.html">rss feed</a> | <a href="index.html">contact</a> | <a href="index.html">login</a></p>
</div>
<!--header ends-->
</div>
<!-- navigation starts-->
<div id="nav">
<ul>
<li><a href="index.html">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="index.html">Services</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
<!-- navigation ends-->
</div>
<!-- content starts -->
<div id="content">
<div id="main">
<h2><a href="index.html">A Blog Entry</a></h2>
<p class="post-info">Posted by <a href="index.html">erwin</a> | Filed under <a href="index.html">templates</a>, <a href="index.html">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="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
posuere nunc justo tempus leo.</p>
<p>
Donec mattis, purus nec placerat bibendum, <a href="index.html">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="index.html">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="index.html" class="comments">Comments (3)</a> |
<span class="date">July 20, 2008</span> |
<a href="index.html" class="edit">Edit</a>
</p>
<h3 id="comments">3 Responses</h3>
<ol class="commentlist">
<li class="alt" id="comment-63">
<cite>
<img alt="" src="images/gravatar.jpg" class="avatar" height="40" width="40" />
<a href="index.html">Erwin</a> Says: <br />
<span class="comment-data"><a href="#comment-63" title="">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="images/gravatar.jpg" class="avatar" height="40" width="40" />
admin Says: <br />
<span class="comment-data"><a href="#comment-67" title="">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="images/gravatar.jpg" class="avatar" height="40" width="40" />
<a href="index.html">Erwin</a> Says: <br />
<span class="comment-data"><a href="#comment-71" title="">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="index.html" 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>
<!-- main ends -->
</div>
<div id="sidebar">
<h3>About</h3>
<p>
<a href="index.html"><img src="images/gravatar.jpg" width="40" height="40" alt="image" 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="index.html" 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="images/search.gif" />
</p>
</form>
<h3>Sidebar Menu</h3>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
</ul>
<h3>Sponsors</h3>
<ul class="sidemenu">
<li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate <br />
<span>Over 6,000+ Premium Web Templates</span></a>
</li>
<li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts <br />
<span>Premium WordPress & Joomla Themes</span></a>
</li>
<li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com <br />
<span>Affordable Web Hosting Provider</span>
</a></li>
<li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock <br />
<span>Download Amazing Stock Photos</span></a>
</li>
<li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft <br />
<span>Website Builder Software & Tools</span></a>
</li>
<li><a href="http://www.ehostinfo.com/" title="Web Hosting">Web Hosting <br />
<span>Top 10 Hosting Reviews</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
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>
<!-- sidebar ends -->
</div>
<!-- content ends-->
</div>
<!-- footer starts -->
<div id="footer">
<p>
© All your copyright info here
Design by <a href="http://www.styleshout.com/">styleshout</a> |
<a href="http://www.cssportal.com/">CSS Portal</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="index.html">Home</a> |
<a href="index.html">Sitemap</a> |
<a href="index.html">RSS Feed</a>
</p>
<!-- footer ends-->
</div>
<!-- wrap ends here -->
</div>
</body>
</html>
Related examples in the same category