chary : Design 4 « Templates « HTML / CSS

chary

     

<!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>Chary &middot; Wary</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Sadhana Ganapathiraju" />
<meta name="description" content="Chary . Wary is a simply stunning template for a blog." />
<meta name="keywords" content="chary,wary,xhtml,css,free templates,templates,simplygold,sadhana,sadhana ganapathiraju" />
<style type='text/css'>
* { margin: 0; padding: 0; }

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

/* Links */

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

a:link { color: #567ec4; border-bottom-color: #567ec4;}

a:visited { color: #81a2c3; border-bottom-color: #81a2c3; }

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

/* Headings */

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

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, dl
{
  margin: 15px 25px; 
  line-height: 2.0em;
}

ol { margin-left: 30px; }

ul { list-style-type: square; }

/* Images */

.drop-shadow
{
  float: left;
  position: relative;
  margin: 10px 3px 0 10px !important;
  margin: 10px 3px 0 5px; 
  background: transparent url(chary-images/drop_shadow.png) bottom right no-repeat !important;
  background: transparent url(chary-images/drop_shadow_ie.gif) bottom right no-repeat;
}

.drop-shadow img
{
  padding: 4px;
  display: block;
  position: relative;
  margin: -6px 6px 6px -6px;
  background-color: #ffffff;
  border: 1px solid #a9a9a9;
}

.drop-shadow p
{
  right: 11px;
  bottom: 0px;
  color: #eeeeee;
  padding: 5px 10px;
  position: absolute; 
  background-color: #2e333b;
  border-top: 1px solid #111111;
}

/* Other Html Elements */

blockquote, pre 
{ 
  padding: 10px;
  color: #555555;
  margin: 20px 30px; 
  background-color: #f9f9f9; 
  border: 1px solid #e9e9e9;
}

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

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

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

/* Structure */

body { }

#header { background-color: #363633; border-bottom: 1px solid #000000; }

#navigation 
{ 
  float: left; 
  clear: both; 
  width: 100%; 
  background-color: #eeeeee; 
  border-bottom: 1px solid #dddddd;
}

#content-wrapper
{
  clear: both;
  width: 750px;
  margin: 0 auto;
  text-align: center;
}

#content { float: left; padding: 20px 0; }

#footer 
{ 
  float: left; 
  clear: both; 
  width: 100%; 
  color: #999999;
  background-color: #363633; 
}

/* Header */

#header h1 { font-size: 13px; margin: 0; padding: 20px 25px; }

#header a { border-bottom-width: 0; color: #ffffff; }

/* Navigation */

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

#navigation li { float: left; }

#navigation a
{
  float: left;
  display: block;
  color: #567ec4; 
  padding: 5px 8px;
  border-bottom-width: 0; 
}

#navigation a:hover, #navigation a:active 
{ 
  color: #000000; 
  background: #73a340 url(chary-images/menu_hover.jpg) top left repeat-x; 
}

#navigation li.active a
{
  color: #000000; 
  background: #73a340 url(chary-images/menu_hover.jpg) top left repeat; 
}

/* Content */

#content p
{
  float: left;
  margin: 10px 25px;
}

#content a.drop-shadow p { margin: 0; bottom: 10px; }

a.drop-shadow { border-bottom-width: 0; font-weight: normal; }

a.dropshadow:hover, a.dropshadow:active { background-color: #eeeeee; }

/* Footer */

#footer a { color: #81a2c3; border-bottom-color: #81a2c3; }

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

#meta div
{ 
  padding: 0;
  width: 25%;
  float: left;
  margin: 10px 50px 0;
}

#meta h3 
{
  font-size: 12px;
  margin-left: 25px;
  color: #9ebb33;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#meta li
{
  list-style-image: url(chary-images/pushpin.gif);
}

#meta li a
{
  display: block;
  padding: 3px 8px;
  border-bottom-color: #585855;
}

#meta li a:hover, #meta li a:active
{
  background-color: #474744;
  border-bottom-color: #585855;
}

#copyright 
{ 
  border-top: 1px solid #1c1c1c;
  background-color: #252522; 
  padding: 10px; 
  clear: both;
} 

</style>


<!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="ie-win.css" /><![endif]-->
<link rel="start" title="SimplyGold" href="http://www.free-css.com/" />
</head>
<body>
<div id="header">
  <h1><a href="#00">Chary &middot; Wary</a></h1>
</div>
<div id="navigation">
  <ul>
    <li><a href="http://www.free-css.com/">Home</a></li>
    <li class="active"><a href="#showcase/free_templates/">Free Templates</a></li>
    <li><a href="#showcase/commercial_templates/">Commercial Templates</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><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/the_mephisto_club.jpg" width="100" height="150" alt="The Mephisto Club by Tess Gerritsen" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/dark_celebration.jpg" width="100" height="150" alt="Dark Celebration by Christine Freehan" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/ricochet.jpg" width="100" height="150" alt="Ricochet by Sandra Brown" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/echo_park.jpg" width="100" height="150" alt="Echo Park by Michael Connelly" class="captionated" /></a></p>
    <hr />
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/the_world_is_flat.jpg" width="100" height="150" alt="The World is Flat by Thomas L. Friedman" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/act_of_treason.jpg" width="100" height="150" alt="Act of Treason by Vince Flynn" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/rich_dad_poor_dad.jpg" width="100" height="150" alt="Rich Dad, Poor Dad" class="captionated" /></a></p>
    <p><a href="http://www.free-css.com/" class="drop-shadow"><img src="chary-images/freakonomics.jpg" width="100" height="150" alt="Freakonomics" class="captionated" /></a></p>
  </div>
</div>
<div id="footer">
  <div id="meta">
    <div class="recent">
      <h3>Recently Reviewed</h3>
      <ul>
        <li><a href="http://www.free-css.com/">300 by Frank Miller</a></li>
        <li><a href="http://www.free-css.com/">A Big Fat Supernatural Wedding by Sherrilyn Kenyon</a></li>
        <li><a href="http://www.free-css.com/">Strange Candy by Laurell K. Hamilton</a></li>
        <li><a href="http://www.free-css.com/">The Time Traveler's Wife by Audrey Niffenegger</a></li>
        <li><a href="http://www.free-css.com/">Wicked by Gregory Maguire</a></li>
        <li><a href="http://www.free-css.com/">The Ice Dragon by George R. R. Martin</a></li>
        <li><a href="http://www.free-css.com/">Path of destruction by Drew Karpshyn</a></li>
        <li><a href="http://www.free-css.com/">Grave Surprise by Charlaine Harris</a></li>
        <li><a href="http://www.free-css.com/">Fahrenheit 451 by Ray Bradbury</a></li>
        <li><a href="http://www.free-css.com/">The Absolute Sandman by Neil Gaiman</a></li>
      </ul>
    </div>
    <div class="upcoming">
      <h3>To Be Read Still</h3>
      <ul>
        <li><a href="http://www.free-css.com/">The Mephisto Club by Tess Gerritsen</a></li>
        <li><a href="http://www.free-css.com/">The Husband by Dean Koontz</a></li>
        <li><a href="http://www.free-css.com/">The DaVinci Code by Dan Brown</a></li>
        <li><a href="http://www.free-css.com/">Angels Fall by Nora Roberts</a></li>
        <li><a href="http://www.free-css.com/">Twelve Sharp by Janet Evanovich</a></li>
        <li><a href="http://www.free-css.com/">Imperium by Robert Harris</a></li>
        <li><a href="http://www.free-css.com/">Under Orders by Dick Francis</a></li>
        <li><a href="http://www.free-css.com/">The Memory Keeper's Daughter by Kim Ewards</a></li>
        <li><a href="http://www.free-css.com/">Act of Treason by Vince Flynn</a></li>
        <li><a href="http://www.free-css.com/">The Collectors by David Baldacci</a></li>
      </ul>
    </div>
    <div class="authors">
      <h3>Favorite Authors</h3>
      <ul>
        <li><a href="http://www.free-css.com/">Suzanne Brockmann</a></li>
        <li><a href="http://www.free-css.com/">Dan Brown</a></li>
        <li><a href="http://www.free-css.com/">J. K. Rowling</a></li>
        <li><a href="http://www.free-css.com/">Tess Gerritsen</a></li>
        <li><a href="http://www.free-css.com/">Kay Hooper</a></li>
        <li><a href="http://www.free-css.com/">Tom Clancy</a></li>
        <li><a href="http://www.free-css.com/">John Grisham</a></li>
        <li><a href="http://www.free-css.com/">Vince Flynn</a></li>
        <li><a href="http://www.free-css.com/">Michael Connelly</a></li>
        <li><a href="http://www.free-css.com/">Dean Koontz</a></li>
      </ul>
    </div>
    <hr />
  </div>
  <div id="copyright"> Design copyright &copy; 2006 <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | <a href="#showcase/free_templates/" title="More Free Templates">Free Templates</a> | <a href="#showcase/commercial_templates/" title="More Commercial Templates">Commercial Templates</a> | <a href="http://validator.w3.org/check/referer" title="Xhtml 1.1 Strict">Xhtml Happy</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Css 2.0 Strict">Css Happy</a> </div>
</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.	chasmogamous
43.	chesspiece
44.	chic
45.	chicanery
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