Pistachio
<?xml version="1.0" encoding="utf-8"?><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="raZor: http://openwebdesign.org/userinfo.phtml?user=raZor" />
<meta name="generator" content="author" />
<style type='text/css'>
/*
Pistachio:
while eating pistachios left over from Christmas,
I couldn't help but notice that the colors look pretty
good together: (tan) #f4e295 & (green) #709f30...
Or you can pick green to be #8fa44d, a lighter green
*/
body {
background-color: white;
margin: 0;
font-family: Georgia;
}
#container {
background-color: #709f30;
}
#header {
padding-left: 5px;
padding-top: 5px;
height: 40px;
font-family: Georgia, Helvetica;
font-size: 25px;
}
#header img {
vertical-align: middle;
}
#ruler {
width: 100%;
color: black;
background-color: #f4e295;
border-bottom: dashed 1px gray;
border-top: dashed 1px gray;
/*padding-left: 16%;
height: 30px;
padding-top: 10px;*/
}
#ruler2 {
margin-left: 16%;
color: black;
background-color: #f4e295;
border-bottom: dashed 1px gray;
border-top: dashed 1px gray;
}
#ruler a, #ruler2 a {
text-decoration: none;
/*font-size: 16px;*/
font-weight: bold;
line-height: 40px;
color: black;
padding-left: 10px;
padding-right: 10px;
}
#ruler a:hover, #ruler2 a:hover {
background-color: #709f30;
}
#navigation {
padding: 5px;
float: left;
width: 15%;
}
#navigation .linkbox {
margin-bottom: 15px;
}
#navigation .linkbox h2 {
margin-bottom: 5px;
margin-top: 5px;
margin-left: -5px;
margin-right: -5px;
padding-left: 5px;
text-transform: uppercase;
background-color: #f4e295;
font-size: 12px;
border-top: dashed 1px gray;
border-bottom: dashed 1px gray;
}
#navigation .linkbox a {
color: black;
}
#navigation .linkbox a:hover {
color: red;
}
#main {
margin: 0;
/*border: solid 1px red;*/
}
#right {
}
/*
content & right column
*/
#content {
background-color: white;
margin-left: 16%;
margin-top: 0;
/*border: solid 1px black;*/
padding: 5px;
/*padding-right: 400px;*/
border-left: dashed 1px gray;
/*width: 60%;*/
}
#rightColumn {
float: right;
width: 30%;
/*border: dashed 1px gray;*/
background-color: white;
padding-left: 5px;
padding-right: 5px;
margin-left: 20px;
}
#content h1 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
border-bottom: dashed 1px gray;
margin-left: 5px;
margin-right: 5px;
width: 60%;
}
#rightColumn h1 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
border-bottom: dashed 1px gray;
margin-left: 5px;
margin-right: 5px;
}
#content h2, #rightColumn h2 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 16px;
/*background-color: #f4e295;*/
padding: 3px;
}
#content h3, #rightColumn h3 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
/*background-color: #f4e295;*/
padding: 3px;
}
#content p, #rightColumn p {
text-indent: 25px;
}
#content .book:first-letter, #rightColumn .book:first-letter {
float:left;
font-size: 50px;
color: black;
}
#content img, #rightColumn img {
float: left;
border: dashed 1px #709f30;
margin: 5px;
/*padding: 3px;*/
}
#content th, #rightColumn th {
font-size: 12px;
font-style: italic;
text-align: left;
}
#content tr.green td, #rightColumn tr.green td {
/*background-color: #709f30;*/
background-color: #8fa44d;
border-top: dashed 1px gray;
}
#content tr.creme td, #rightColumn tr.creme td {
background-color: #f4e295;
border-top: dashed 1px gray;
}
#content ul, #rightColumn ul {
list-style-image: url('Pistachio-images/arrow1.gif');
/*list-style-image: url('Pistachio-images/arrow2.gif'); the lighter green */
}
#content ol, #rightColumn ol {
}
</style>
<title>Pistachio</title>
</head>
<body link="#000000" vlink="#000000" alink="#000000">
<div id='container'>
<div id='header'>
<img src='Pistachio-images/pistachio.gif' alt='Nut' /> Pistachio
</div><!-- end header -->
<div id='ruler'>
<a href=''>About</a>
<a href=''>Contact</a>
<a href=''>Legal</a>
<a href=''>Help</a>
</div><!-- end ruler -->
<div id='main'>
<div id='navigation'>
Navigation
<div class='linkbox'>
<h2>flavors</h2>
<a href=''>Vanilla</a>
<br/>
<a href=''>Chocolate</a>
<br/>
<a href=''>Strawberry</a>
<br/>
<a href=''>Pineapple</a>
<br/>
<a href=''>French Vanilla</a>
</div>
<div class='linkbox'>
<h2>user settings</h2>
<p>
You are logged in as John Doe.
</p>
<a href=''>Edit preferences</a>
<br/>
<a href=''>Change profile</a>
<br/>
<a href=''>Logout</a>
</div>
<div class='linkbox'>
<h2>validate</h2>
<a href='http://validator.w3.org/check?uri=referer'>Validate XHTML</a>
<br/>
<a href='http://jigsaw.w3.org/css-validator/check/referer'>Validate CSS</a>
<br/>
<a href='index2.html'>Alternate view</a>
</div>
</div><!-- end navigation -->
<div id='content'>
<div id='rightColumn'>
<h1>Extra column</h1>
<h2>3-column layout</h2>
<p>
If you like, you can put an extra column on the right side. Some people think this makes your
website too cluttered, and I tend to agree -- but at least you have the option.
</p>
<p class='book'>
Your right column can contain anything that the main content column does.
</p>
<ul>
<li>Directions to your house</li>
<li>Your favorite soup recipe</li>
<li>Information about products or services</li>
</ul>
</div><!-- end rightColumn -->
<h1>Welcome to Pistachio</h1>
<h2>Paragraph styles</h2>
<p>This is Pistachio, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
<p> This free template is released under a Creative Commons Attributions 2.5 license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p class='book'>
Pistachio is 100% valid XHTML-Strict and CSS. This paragraph shows how you can automatically
make the first letter in every paragraph look just like the beginning of a chapter in a book.
</p>
<h2>Image styles</h2>
<p><img src='Pistachio-images/apricot.jpg' alt='nuts'/>
Images are wrapped by default with a dashed green border with text centered around it. I think it looks rather nice. This is a picture of some apricot kernels I got from stock.xchng, it isn't pistachios but I just liked the image.
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>
<li> Unordered list</li>
<li> Has a cool green arrow</li>
<li> As the list marker</li>
</ul>
<ol>
<li> Ordered lists</li>
<li> Are pretty much boring</li>
<li> Just the usual list</li>
</ol>
<table cellspacing='0' width='400'>
<tr><th>Name</th><th>Weight</th><th>Phone No</th></tr>
<tr class='green'><td>Jane</td><td>135 lbs</td><td>555-1234</td></tr>
<tr class='creme'><td>Jack</td><td>165 lbs</td><td>333-1234</td></tr>
<tr class='green'><td>Jill</td><td>127 lbs</td><td>222-1234</td></tr>
<tr class='creme'><td>Jerry</td><td>174 lbs</td><td>777-1234</td></tr>
</table>
</div>
<!-- end content -->
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a> </div>
<!-- end main -->
</div><!-- end container -->
</body>
</html>
Related examples in the same category