inapickle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>In a pickle</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* Set styles for body and head */
body
{
margin: 0 auto;
padding: 0;
font-size: 76%;
font-family: "Georgia", serif;
background-color: #ffffff;
}
#container
{
margin: 30px auto;
width: 620px;
background-color: #ffffff;
text-align: left;
}
#header
{
margin:0;
padding: 0;
width: 100%;
border: 0px solid #aaaaaa;
}
#header-a
{
display: block;
margin: 0 5px 0 5px;
float: right;
font-size: 1em;
font-weight: bold;
color: #000000;
}
#header-a:hover
{
color: #9FBA0F;
}
#sitename
{
float: right;
clear: right;
color: #4C6F0F;
font-size: 60px;
letter-spacing: -3px;
margin: 20px 0 0 0;
}
#leftcol
{
float: left;
font-size: 1.1em;
line-height: 1.3em;
color: #0F0F0C;
margin: 0 10px 0 10px;
padding: 4px;
width: 170px;
background-color: #ffffff;
border: 3px solid #4C6F0F;
}
#leftcol h1
{
font-size: 1.3em;
line-height: 1.3em;
font-weight: bold;
margin: 0;
padding: 10px 10px 0 10px;
background-color: #DAF29F;
}
#leftcol h2
{
font-size: 1.2em;
line-height: 1.2em;
font-weight: bold;
margin: 0;
padding: 0 10px 0 10px;
background-color: #DAF29F;
}
.text
{
margin: 0;
padding: 10px 10px 10px 10px;
background-color: #DAF29F;
}
#leftcol a
{
color: #DF3400;
text-decoration: underline;
}
#leftcol a:hover
{
color: #4C6F0F;
}
#leftcol ul
{
margin: 0;
padding: 5px 10px 5px 10px;
list-style: none;
background-color: #DAF29F;
}
#leftcol li
{
margin: 0;
padding: 5px 10px 5px 10px;
border-top: 1px dotted #4c6f0f;
}
#leftcol li a
{
color: #0F0F0C;
font-style: italic;
text-decoration: none;
}
#leftcol li a:hover
{
color: #DF3400;
text-decoration: none;
}
#leftcol img
{
float: left;
background-color: #ffffff;
border: 1px solid #4C6F0F;
padding: 2px;
margin: 0 5px 5px 0;
}
#main
{
margin: 0 0 0 220px;
padding: 0;
color: #0F0F0C;
font-size: 1.1em;
line-height: 1.3em;
text-align: justify;
}
#main a
{
color: #DF3400;
text-decoration: underline;
}
#main a:hover
{
color: #4C6F0F;
}
#main img
{
float: right;
background-color: #ffffff;
border: 1px solid #4C6F0F;
padding: 2px;
margin: 0 0 5px 10px;
}
#main .copy
{
margin: 0 0 10px 0;
}
#dateline
{
color: #0F0F0C;
margin: 0;
padding: 10px 5px 3px 0;
background-color: #ffffff;
font-size: 10px;
font-weight: normal;
text-align: left;
border-bottom: 2px solid #9FBA0F;
}
#quote
{
margin: 10px 50px 10px 50px;
padding: 12px;
background-color: #DAF29F;
font-size: 1.1em;
font-style: italic;
line-height: 1.3em;
font-weight: normal;
text-align: right;
border: 0px solid #9FBA0F;
}
#quote img
{
float: left;
margin-right: 5px;
padding: 0;
border: 0;
}
#main h1
{
font-size: 2em;
}
#main h2
{
font-size: 1.7em;
}
#main h3
{
font-size: 1.5em;
}
#footer
{
border-top: 2px solid #cccccc;
margin: 30px 0 0 0;
padding: 10px;
clear: both;
color: #a0a0a0;
font-size: 1em;
text-align: center;
}
#footer a
{
color: #a0a0a0;
text-decoration: none;
}
#footer a:hover
{
color: #606060;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> <a href="http://www.free-css.com/">ABOUT</a> <a href="http://www.free-css.com/">CONTACT</a> <a href="http://www.free-css.com/">Home</a>
<div id="sitename">in a pickle</div>
<img src="pickle5.jpg" alt="pickle" /> </div>
<div id="leftcol">
<h1>Welcome</h1>
<div class="text">Ah, lovely shades of green. Put an introductory paragraph here or a greeting or a salutation or a dirty limerick. </div>
<h2>Menu</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Menu item two</a></li>
<li><a href="http://www.free-css.com/">Menu item three</a></li>
<li><a href="http://www.free-css.com/">Menu item four</a></li>
<li><a href="http://www.free-css.com/">Menu item five</a></li>
</ul>
<h2>My favorite pickles</h2>
<div class="text"> <img src="pickle5.jpg" width="40" height="137" alt="" /> <a href="http://www.free-css.com/">Jubilation</a>, she loves me again, I fall on the floor and I laughing, Jubilation, she loves me again, I fall on the floor and I laughing </div>
</div>
<div id="main">
<h1>Everyone loves pickles</h1>
<div class="copy">Well, everyone I know does anyway. And most everyone loves free stuff - like this template. It's free for you to download and modify as you wish - no strings attached. I would, however, appreciate it if you leave the credit for the original Design to me in the footer. </div>
<div class="copy">If you like this Design and decide to use it, drop me an email at info@websiteDesignbasics.com and let me know what you did with it. Thanks. </div>
<h2>Pickle history</h2>
<div class="copy">This is a simple, two-column layout with lots of white space and soothing green shades. The font is Georgia and is set at a comfortable size for easy reading. </div>
<div class="copy"><img src="pickle5.jpg" width="120" height="137" alt="" />The only graphics included are the big pickle and the "quote" mark graphic for the blockquote so the page loads very fast. You'll most likely want to replace the big pickle with something else - unless you're a pickle nut like me - mmmmmm, pickles! When you replace it I suggest using a cut out graphic instead of a boring rectangle to retain the sense of white space, but it's your template now, so knock yourself out. I am always interested to see what people do with templates I create so feel free to let me know what you've used it for. </div>
<div id="quote"><img src="quote.gif" width="47" height="34" alt="" />Oh, Hamlet, how camest thou in such a pickle? (Act 5, Scene 1.) </div>
<h3>Pickle facts</h3>
<div class="copy">Pickling is one of the oldest forms of food preservation. Although many vegetables are also sold in pickled form, gherkins/cucumbers (fruits) are the leading pickled food in the world, giving rise to the misnomer commonly known as "Pickles".</div>
<div id="dateline">Posted today: The 43rd day of Picklefest</div>
</div>
<div id="footer"> Your company name : <a href="http://www.websiteDesignbasics.com">Design by websiteDesignbasics.com</a> </div>
</div>
</body>
</html>
Related examples in the same category