Continue read link
<!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>Fresh Pick</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 : FreshPick
Template Code : S-0029
Version : 1.0
Author : Erwin Aligam
Author URI : http://www.styleshout.com/
Last Date Modified : April 24, 2009
------------------------------------------------ */
/* ----------------------------------------------
HTML ELEMENTS
------------------------------------------------- */
body {
font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
color: #666666;
margin: 0;
padding: 0;
background: #FFF url(FreshPick-images/bg.gif) repeat-x;
text-align: center;
}
/* Links */
a:link, a:visited {
text-decoration: none;
color: #0788C3;
}
a:hover {
border-bottom: 1px dotted #0788C3;
}
a:link.more-link, a:visited.more-link {
padding-bottom: 2px;
font-weight: bold;
color: #0788C3;
border-bottom: 1px dotted #0788C3;
}
a:hover.more-link {
text-decoration: none;
}
/* Headers */
h1, h2, h3, h4 {
font: bold 1em/1.5em Georgia, 'Times New Roman', Times, serif;
color: #555;
margin: 10px 20px 7px 20px;
}
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; }
h2 { font-size: 2.8em; font-weight: normal; }
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; }
h4 { font-size: 1.4em; }
/* Lists */
ul, ol {
margin: 10px 20px;
padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }
dt {
font-weight: bold;
color: #1980AF;
}
dd {
padding-left: 20px;
}
p, dl { margin: 10px 20px; }
/* 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: 3px 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 #F0F0F0;
background: #F8F8F8;
}
acronym {
cursor: help;
border-bottom: 1px dotted #555;
}
blockquote {
margin: 10px 20px;
padding: 10px 10px 10px 32px;
border: 1px solid #F0F0F0;
background: #f8f8f8 url(FreshPick-images/quote.gif) no-repeat 12px 12px;
font-weight: normal;
font-size: 17px;
line-height: 1.5em;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, Serif;
color: #555;
}
strong {
font-weight: bold;
}
/* start - table */
table {
border-collapse: collapse;
margin: 10px 20px;
}
tr { background: #FFF; }
tr.altrow { background: #F9F9F9; }
th, td {
text-align: left;
border-width: 1px;
border-style: solid;
}
th {
color: #555;
background: #F0FBFF;
padding: .8em 1em;
border-color: #D8EBF5 #D8EBF5 #B9DBEE #D8EBF5;
}
td {
border-color: #EFEFEF;
padding: .7em 1em;
}
/* end - table */
/* form elements */
form {
margin: 10px 20px;
padding: 15px 25px 25px 25px;
border: 1px solid #F0F0F0;
background: #F8F8F8;
}
form p {
border-bottom: 1px solid #E6E6E6;
padding: 12px 0 5px 0; margin: 0;
color: #666666;
}
label {
font-weight: bold;
color: #666666;
}
input, select, textarea {
margin: 5px 0;
padding: 5px;
color: #6A6969;
border-width: 1px;
border-style: solid;
border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;
font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
input:focus, select:focus, textarea:focus {
color: #7BA857;
background: #EFFAE6;
}
#name, #email, #message, #website {
width: 380px;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 30px;
margin: 0;
padding: 2px 3px;
color: #FFF;
background:#B4DB6F;
border-width: 1px;
border-style: solid;
border-color: #B6DE8F #91BD37 #91BD37 #B6DE8F;
}
/* ------------------------------------------
LAYOUT
------------------------------------------- */
#wrap {
width: 920px;
margin: 0 auto;
text-align: left;
}
/* Header */
#header {
position: relative;
margin: 0 auto;
height: 245px;
}
#header h1#logo-text { margin: 0; padding: 0; }
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0 5px 0 0;
font: bold 62px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;
letter-spacing: -5px;
color: #1980AF;
text-decoration: none;
/* change the values of top and left to adjust the position of the logo*/
top: 30px; left: 30px;
}
#header h1#logo-text a:hover { border: none; }
#header p#slogan {
position: absolute;
margin: 0; padding: 0 5px 0 0;
font-family: Georgia, 'Times New Roman', Times, serif;;
font-weight: bold;
font-size: 13px;
line-height: 1.8em;
font-style: italic;
letter-spacing: -.3px;
color: #999;
/* change the values of top and left to adjust the position */
top: 102px; left: 32px;
}
#header #header-image {
position: absolute;
top: 12px; right: 30px;
width: 292px;
height: 234px;
background: url(FreshPick-images/header-bg.png) no-repeat;
}
/* navigation */
#header #nav {
position: absolute;
left: 0px; bottom: 20px;
margin: 0; padding: 0 0 0 20px;
width: 900px;
border-bottom: 1px solid #F2F2F2;
/* z-index: 99999; */
}
#header #nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#header #nav ul li {
float: left;
margin: 0; padding: 0;
}
#header #nav ul li a:link,
#header #nav ul li a:visited {
float: left;
margin: 0;
padding: 5px 15px 10px 15px;
color: #666666;
font: bold 14px 'Trebuchet MS', Arial, Sans-Serif;
text-transform: uppercase;
border-right: 1px solid #EEE;
}
#header #nav ul li a:hover,
#header #nav ul li a:active {
border: none;
color: #000;
border-right: 1px solid #EEE;
}
#header #nav ul li#current a {
background: transparent url(FreshPick-images/current.gif) repeat-x left bottom;
color: #222;
}
#header #nav ul li.first a:link,
#header #nav ul li.first a:visited {
border-left: 1px solid #F1F1F1;
}
/* Featured Block */
#featured {
clear: both;
background: #F8FAFD;
border: 1px solid #DCF1FB;
margin: 3px 0 15px 10px;
padding-bottom: 20px;
width: 900px;
}
#featured h2 {
font: normal 3.8em Georgia, 'Times New Roman', Times, Serif;
color: #295177;
letter-spacing: -2.0px;
margin-bottom: 0;
padding-bottom: 3px;
border-bottom: 1px solid #EBEBEB;
}
#featured h2 a {
color: #295177;
border: none;
}
#featured .image-block {
float: left;
width: 330px;
margin: 20px 0 0 25px;
padding: 10px 0 0 0;
display: inline;
border-right: 1px solid #DCF1FB;
}
#featured .image-block img {
background: #FFF;
border: 1px solid #DFEAF0;
padding: 12px;
}
#featured .text-block {
float: right;
width: 510px;
margin: 15px 25px 0 0;
display: inline;
}
#featured a.more-link {
background: #B4DB6F;
padding: 5px 10px 5px 10px;
margin-top: 15px;
color: #FFF;
text-decoration: none;
border: 1px solid #BADE7D;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
line-height: 20px;
display: block;
float: left;
}
#featured a.more-link:hover {
background: #008EFD;
border-color: #007DE2;
}
/* Content */
#content-outer {
clear: both;
float: left;
width: 920px;
margin: 0; padding: 0;
background: transparent url(FreshPick-images/hor-line.gif) repeat-y center 0;
}
#content-wrap {
float: left;
width: 920px;
background: transparent url(FreshPick-images/dotted-lines.gif) repeat-x;
}
#content {
float: left;
width: 900px;
margin-left: 10px;
display: inline;
padding-bottom: 40px;
}
/* columns */
#left {
width: 580px;
float: left;
padding-top: 15px;
}
#right {
width: 285px;
float: right;
padding-top: 5px;
}
#right h3 {
margin-left: 10px;
}
#left h2 {
font: normal 3.6em Georgia, 'Times New Roman', Times, Serif;
color: #444;
letter-spacing: -2.2px;
margin-bottom: 0px;
padding-bottom: 3px;
padding-left: 3px;
border-bottom: 1px solid #EBEBEB;
}
#left h2 a {
color: #444;
border: none;
}
#left .entry {
background: url(FreshPick-images/dotted-lines.gif) repeat-x left bottom;
padding-bottom: 15px;
}
#left .entry h3 a {
color: #444;
border: none;
}
/* sidebar quick search */
#right form#quick-search {
padding: 0; margin: 10px 0 0 10px;
width: 270px; height: 33px;
background: #fff url(FreshPick-images/header-search.gif) no-repeat;
border: none;
}
#right form#quick-search p {
margin: 0; padding: 0;
border: none;
}
#right form#quick-search input {
border: none;
background: transparent;
color: #BABABA;
margin: 0; padding: 5px;
font-size: .9em;
float: left;
}
#right form#quick-search .tbox {
margin: 6px 0 0 5px;
width: 220px;
display: inline;
}
#right form#quick-search .btn{
width: 24px; height: 24px;
margin: 5px 0 0 0; padding: 0;
}
#right form#quick-search label {
display: none;
}
/* sidemenus */
.sidemenu ul {
text-align: left;
margin: 10px 8px 8px 8px; padding: 0;
border-top: 1px solid #EBEBEB;
}
.sidemenu ul li {
list-style: none;
background: url(FreshPick-images/dotted-lines.gif) repeat-x left bottom;
padding: 7px 5px;
margin: 0;
}
* html body .sidemenu ul li {
height: 1%;
}
.sidemenu ul li a,
.sidemenu ul li a:visited {
color: #5D95CA;
padding-left: 0;
font-weight: bold;
}
.sidemenu ul li a span {
color: #9F9F9F;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-style: normal;
font-weight: normal;
font-size: .9em;
}
.sidemenu ul li a:hover { color: #000; border: none; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { background: none; }
/* footer */
#footer-outer {
clear: both;
float: left;
width: 920px;
background: url(FreshPick-images/dotted-lines.gif) repeat-x;
font-size: .9em;
color: #777;
}
#footer-wrap {
float: left;
width: 900px;
margin-left: 10px;
display: inline;
}
#footer-wrap h3 {
font-size: 2.4em;
}
#footer-wrap .col-a {
width: 300px;
float: left;
}
#footer-wrap .col-b {
width: 295px;
float: right;
}
/* footer-list */
#footer-outer .footer-list ul {
border-top: 1px solid #E6E6E6;
list-style: none;
padding: 0;
margin-left: 20px;
}
#footer-outer .footer-list ul li {
background: url(FreshPick-images/dotted-lines.gif) repeat-x left bottom;
}
#footer-outer .footer-list ul li a {
display: block;
width: 98%;
line-height: 2em;
padding: 5px 0;
margin-left: 0;
color: #77A6D3;
border: none;
}
#footer-outer .footer-list ul li a span {
font-style: italic;
font-weight: normal;
font-family: Georgia, 'Times New Roman', Times, Serif;
font-size: .95em;
}
#footer-outer .footer-list ul li a:hover,
#footer-outer .footer-list ul li a:hover span {
color: #333;
}
/* footer-bottom */
#footer-bottom {
float: left;
clear: both;
background: url(FreshPick-images/dotted-lines.gif) repeat-x;
width: 920px;
margin: 30px auto 0 auto;
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
font-size: .9em;
color: #777;
border-bottom: 50px solid #FFF;
}
#footer-bottom a:hover { border: none; }
#footer-bottom .bottom-left {
float: left;
padding-left: 5px;
}
#footer-bottom .bottom-right {
text-align: right;
padding-right: 0;
}
/* post */
.post {
margin-bottom: 15px;
background: url(FreshPick-images/dotted-lines.gif) repeat-x left bottom;
padding-bottom: 15px;
}
.post .image-section {
clear: both;
display: block;
margin: 25px 0 10px 20px;
padding: 0;
}
.post .image-section img {
background: #FAFAFA;
border: 1px solid #ECECEC;
padding: 12px;
}
.post .postmeta {
padding: 5px 15px; margin: 20px 20px 15px 20px;
background: #f9fbfd;
border: 1px solid #eaf1f5;
}
.post .postmeta a { background: transparent; }
.post .postmeta a:hover { border: none; }
.post .postmeta a.comments { margin: 0 10px 0 5px; }
.post .postmeta a.readmore { margin: 0 10px 0 5px; }
.post .postmeta .date { margin: 0 10px 0 5px; }
.post .post-info,
#featured .post-info { font-size: .95em; margin-top: 0; color: #B0B0B0; }
.post .post-info a, .post .post-info a:visited,
#featured .post-info a, #featured .post-info a:visited { color: #8BB92E; border: none; }
.post .tags {
padding: 5px 15px; margin: 20px 20px 15px 20px;
border-top: 1px solid #eaf1f5;
border-bottom: 1px solid #eaf1f5;
}
/* comments list */
ol.commentlist {
margin: 12px 20px;
padding: 0;
border-style: solid;
border-color: #F0F0F0;
border-width: 1px 1px 0 1px;
}
.commentlist li {
margin: 0;
padding: 10px;
list-style: none;
border-bottom: 1px solid #F0F0F0;
}
.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: 5px 0 0 0;
}
.commentlist li.alt {
background: #F8F8F8;
}
/* archives */
ul.archive {
background: url(FreshPick-images/dotted-lines.gif) repeat-x left top;
margin: 15px 20px 20px 20px;
padding: 0;
}
ul.archive li {
list-style: none;
background: url(FreshPick-images/dotted-lines.gif) repeat-x left bottom;
margin: 0;
padding: 10px 5px;
}
ul.archive li .post-title {
margin: 0;
padding: 0;
font-size: 1.2em;
}
ul.archive li .post-title a {
color: #555;
}
ul.archive li .post-title a:hover {
border: none;
color: #222;
}
ul.archive li .post-details {
font-size: .9em;
margin-left: 0;
margin-top: 0;
}
ul.archive li .post-details a {
border: none;
}
/* pagenavigation */
.page-navigation {
margin: 10px 20px 10px 20px;
padding: 5px 15px;
background: #F9F9F9;
border: 1px solid #F0F0F0;
width: 510px;
}
.page-navigation a:hover {
border: none;
color: #333;
}
/* thumbnails */
p.thumbs {
padding: 10px 0 0 0px;
margin: 0 0 0 15px;
}
.thumbs img {
position: relative;
padding: 8px;
margin: 4px;
background: #FAFAFA;
border: 1px solid #EDEDED;
}
.thumbs img:hover {
border: 1px solid #D2D2D2;
}
.thumbs a:hover { background-color: transparent; border: none }
/* alignment classes & additional classes*/
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }
.no-bg { background: none; }
/* clearing */
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
</style>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
<!--header -->
<div id="header">
<h1 id="logo-text"><a href="index.html" title="">Freshpick</a></h1>
<p id="slogan">Just Another Styleshout CSS Template... </p>
<div id="nav">
<ul>
<li class="first" id="current"><a href="index.html">Home</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>
<div id="header-image"></div>
<!--header ends-->
</div>
<!-- featured starts -->
<div id="featured" class="clear">
<a name="TemplateInfo"></a>
<div class="image-block">
<img src="images/img-featured.jpg" alt="featured"/>
</div>
<div class="text-block">
<h2><a href="index.html">Read me first</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><strong>FreshPick</strong> is a free, W3C-compliant, CSS-based website template
by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose. All I ask is that you give me credit by including a <strong>link back</strong> to
<a href="http://www.styleshout.com/">my website</a>.
</p>
<p>
You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
For premium commercial designs, you can check out
<a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate.com</a>.
</p>
<p><a href="index.html" class="more-link">Read More</a></p>
</div>
<!-- featured ends -->
</div>
<!-- content -->
<div id="content-outer" class="clear"><div id="content-wrap">
<div id="content">
<div id="left">
<div class="entry">
<h3><a href="index.html">Aliquam Risus Justo</a></h3>
<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><a class="more-link" href="index.html">continue reading</a></p>
</div>
<div class="entry">
<h3>Lorem Ipsum Dolor Sit Amet</h3>
<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><a class="more-link" href="index.html">continue reading</a></p>
</div>
<div class="entry">
<h3>Lorem Ipsum</h3>
<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><a class="more-link" href="index.html">continue reading</a></p>
</div>
</div>
<div id="right">
<div class="sidemenu">
<h3>Sidebar Menu</h3>
<ul>
<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="archives.html">Archives</a></li>
<li>
<a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
</ul>
</div>
<div class="sidemenu">
<h3>Sponsors</h3>
<ul>
<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>
</div>
<h3>Search</h3>
<form id="quick-search" action="index.html" method="get" >
<p>
<label for="qsearch">Search:</label>
<input class="tbox" id="qsearch" type="text" name="qsearch" value="type and hit enter..." title="Start typing and hit ENTER" />
<input class="btn" alt="Search" type="image" name="searchsubmit" title="Search" src="images/search.gif" />
</p>
</form>
</div>
</div>
<!-- content end -->
</div></div>
<!-- footer starts here -->
<div id="footer-outer" class="clear"><div id="footer-wrap">
<div class="col-a">
<h3>Image Gallery </h3>
<p class="thumbs">
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
</p>
<h3>Lorem ipsum dolor</h3>
<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.
</p>
</div>
<div class="col-a">
<h3>Lorem Ipsum</h3>
<p>
<strong>Lorem ipsum dolor</strong> <br />
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>
<div class="footer-list">
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">magna sed purus</a></li>
</ul>
</div>
</div>
<div class="col-b">
<h3>About</h3>
<p>
<a href="index.html"><img src="images/gravatar.jpg" width="40" height="40" alt="firefox" 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>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. <a href="index.html">Learn more...</a></p>
</div>
<!-- footer ends -->
</div></div>
<!-- footer-bottom starts -->
<div id="footer-bottom">
<div class="bottom-left">
<p>
© 2010 <strong>Your Copyright Info Here</strong>
Design by <a href="http://www.styleshout.com/">styleshout</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a>
</p>
</div>
<div class="bottom-right">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
<a href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="index.html">Home</a> |
<a href="index.html">Sitemap</a> |
<a href="index.html">RSS Feed</a>
</p>
</div>
<!-- footer-bottom ends -->
</div>
<!-- wrap ends here -->
</div>
</body>
</html>
Related examples in the same category