Pistachio : Design 6 « Templates « HTML / CSS






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

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.package
66.paddy-harvest
67.pagedrape
68.paivi-k
69.paleforest
70.palmtrees
71.pamphlet
72.pancorbo
73.papira
74.paradigm
75.paradise1983
76.parchmenter
77.particle
78.particles
79.pastel
80.pastelco
81.pastelflowers
82.pastries
83.path-fider
84.patternmaker
85.PattyMcFatPat01
86.PattyMcFatPat03
87.pc
88.Pear Template
89.pear
90.pedestrian
91.penchantforphotos
92.pencilpink
93.people
94.perfectblemish
95.performance
96.perplex
97.personified
98.pillars
99.pills
100.pinnacle
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination