chicanery : Design 4 « Templates « HTML / CSS






chicanery

     

<!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>Chicanery | Trickery and Subterfuge</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="Chincanery is a beautiful free template that's standards-compliant." />
<style type='text/css'>
* { margin: 0; padding: 0; }

html
{
  color: #333333;
  background-color: #f9f9f9;
  font: normal 12px/1.6em "Trebuchet MS", "Lucida Grande", Verdana, Sans-Serif;
}

/* Links */

a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #333333; }

a:link { color: #252b3b; border-bottom-color: #252b3b; }

a:visited { color: #53584a; border-bottom-color: #53584a; }

a:hover, a:active { color: #000000; border-bottom-style: solid; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0 15px; line-height: 1.2em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; border-bottom-width: 0; }

h1 { font-size: 32px; }

h2 { font-size: 28px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

/* Lists */

ul, ol
{
  margin: 1em 0;
  line-height: 1.8em;
}

ol li { margin-left: 2.5em; }

ul { padding-left: 2em; list-style-type: square; }

/* Other Html Elements */

blockquote
{
  clear: both;
  padding: 1em;
  margin: 2em 3em;
  font-size: 0.9em;
  line-height: 1.7em;
  background-color: #eeeeee;
  border: 1px solid #a9a9a9;
  background: #eeeeee url(chicanery-images/right_quotes.png) 95% 85% no-repeat;
}

code { font-family: Consolas, Monaco, Verdana, "Courier New"; font-size: .93em; }

abbr, acronym, cite { border-bottom: 1px dotted #333333; cursor: help; }

ins { font-weight: bold; text-decoration: none; }

p { margin: 10px 0; }

hr { visibility: hidden; height: 1px; clear: both; }

/* Structure */

body 
{
  border-top: 10px solid #252b3b;
}

#header 
{ 
  float: left;
  width: 100%; 
  padding: 30px 0;
  background-color: #79960E; 
}

#navigation
{
  float: left;
  clear: both;
  width: 100%;
  max-height: 40px;
  border-bottom: 1px solid #506309; 
  background: #879675 url(chicanery-images/menu.png) center left repeat;
}

#content-wrapper
{
  clear: both;
  width: 750px;
  margin: 0 auto;
  padding: 20px 0; 
  background-color: #f9f9f9;
}

#content
{
  float: left;
  width: 100%;
  background-color: #f9f9f9;
}

#footer
{
  clear: both;
  padding: 10px 0; 
  margin: 10px 0 0;  
  text-align: center; 
  background-color: #d6e2a9;
  border-top: 1px solid #a1aa7f;
  border-bottom: 10px solid #5f654b;
}

/* Header */

#header h1
{
  margin: 0;
  float: left;
  font-size: 13px;
  padding: 5px 20px;
  border-right: 1px solid #546342;
}

#header h1 a { font-weight: bold; color: #000000; }

#header h2 
{
  float: left; 
  color: #222222;
  margin: 5px 10px;
  font-size: 12px;
}

/* Navigation */

#navigation ul { list-style-type: none; margin: 0; padding: 0; float: left; line-height: 1.5em; }

#navigation li { float: left; } 

#navigation a
{
  float: left;
  display: block;
  padding: 8px 10px;
  border-bottom-width: 0;
}

#navigation a:hover
{
  background: transparent url(chicanery-images/menu_hover.png) center left repeat;
}

/* Content */

#content .block
{
  width: 26%; 
  float: left;
  padding: 10px; 
  min-height: 280px;
  margin: 10px 10px; 
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
}

#content .block:hover
{
  background-color: #eaf0d3;
}

/* Footer */

#footer a { color: #414736; border-bottom-color: #414736; }

#footer a:hover, #footer a:active { color: #202514; border-bottom-color: #202514; }

</style>


<!--[if lt ie 7]>
    <link rel="stylesheet" type="text/css" media="screen,projection" href="ie-win.css" />
  <![endif]-->
</head>
<body>
<div id="header">
  <h1><a href="http://www.free-css.com/">Chicanery</a></h1>
  <h2>Learn to trick like a pro from a pro</h2>
</div>
<div id="navigation">
  <ul>
    <li><a href="http://www.free-css.com/">Home</a></li>
    <li><a href="#showcase/free_templates/">Another Link</a></li>
    <li><a href="#showcase/commercial_templates/">Third Linkie</a></li>
    <li><a href="#about/">About</a></li>
    <li><a href="#contact/">Contact</a></li>
  </ul>
</div>
<div id="content-wrapper">
  <div id="content">
    <p>Chicanery is a free template created by Sadhana Ganapathiraju, aka SimplyGold. It's released under <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-
      ShareAlike 2.5 License</a>, which means that you can use it, modify it, and pretty much do whatever you 
      want with the files as long as you don't resell it or use it for commercial purposes.</p>
    <p>If you want to be able to use the templates for commercial purposes, <a href="#contact/"> contact me</a>. I included a small link at the bottom that says "Design by Sadhana Ganapathiraju." You aren't required 
      to keep it, but if you do, it's much appreciated. :-)</p>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut nisi adipiscing lectus egestas mollis. 
        Vestibulum eget nulla ut est imperdiet lacinia. Aliquam blandit augue non sapien. Ut volutpat consectetuer 
        pede. In a quam. Etiam cursus congue mi. Cras pretium euismod augue. Sed faucibus varius velit. Sed pulvinar, 
        libero sit amet imperdiet semper, elit elit suscipit lacus, non sollicitudin mi justo id felis. </p>
    </div>
    <div class="block">
      <p>Sed fringilla. Ut at arcu vel arcu condimentum imperdiet. Morbi lorem nisl, fermentum ac, feugiat eget, auctor vel, velit. 
        Vestibulum venenatis. In hac habitasse platea dictumst. Curabitur tristique diam. Donec mauris. Aenean interdum semper metus. 
        Curabitur et leo. Phasellus vel lorem sit amet velit dictum ornare. Ut et metus ac est sagittis auctor. Quisque nisi odio, 
        scelerisque at, lacinia at, tincidunt ac, orci.</p>
    </div>
    <div class="block">
      <p>Cras venenatis imperdiet purus. Donec id justo ultricies libero sagittis elementum. Ut consectetuer fermentum elit. 
        Donec bibendum nunc. Proin scelerisque vulputate sem. Nullam dui magna, semper id, blandit vel, euismod eget, tellus. 
        Sed at erat. Praesent at erat rutrum ipsum dapibus porttitor. Fusce eu quam vel velit tincidunt sodales. Ut posuere 
        urna id nulla.</p>
    </div>
    <hr />
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut nisi adipiscing lectus egestas mollis. 
        Vestibulum eget nulla ut est imperdiet lacinia. Aliquam blandit augue non sapien. Ut volutpat consectetuer 
        pede. In a quam. Etiam cursus congue mi. Cras pretium euismod augue. Sed faucibus varius velit. Sed pulvinar, 
        libero sit amet imperdiet semper, elit elit suscipit lacus, non sollicitudin mi justo id felis. </p>
    </div>
    <div class="block">
      <p>Sed fringilla. Ut at arcu vel arcu condimentum imperdiet. Morbi lorem nisl, fermentum ac, feugiat eget, auctor vel, velit. 
        Vestibulum venenatis. In hac habitasse platea dictumst. Curabitur tristique diam. Donec mauris. Aenean interdum semper metus. 
        Curabitur et leo. Phasellus vel lorem sit amet velit dictum ornare. Ut et metus ac est sagittis auctor. Quisque nisi odio, 
        scelerisque at, lacinia at, tincidunt ac, orci.</p>
    </div>
    <div class="block">
      <p>Cras venenatis imperdiet purus. Donec id justo ultricies libero sagittis elementum. Ut consectetuer fermentum elit. 
        Donec bibendum nunc. Proin scelerisque vulputate sem. Nullam dui magna, semper id, blandit vel, euismod eget, tellus. 
        Sed at erat. Praesent at erat rutrum ipsum dapibus porttitor. Fusce eu quam vel velit tincidunt sodales. Ut posuere 
        urna id nulla.</p>
    </div>
  </div>
  <hr />
</div>
<div id="footer">
  <p>Design by <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | 
    Copyright &copy; 2006 Your Company Name Here | All Rights Reserved</p>
  <p>Try more <a href="#showcase/free_templates/">free templates</a> or <a 
    href="#showcase/commercial_templates/">commercial templates</a> or <a 
    href="#showcase/themes/">themes</a>.</p>
  <p><a href="http://www.free-css.com/">Legal</a> | <a href="http://www.free-css.com/">Privacy Statement</a> | <a href="http://validator.w3.org/check/referer" 
    title="XHTML 1.0 Strict">Xhtml Happy</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" 
    title="CSS 2.0 Strict">Css Happy</a></p>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year