Ganesh01 : Design 5 « Templates « HTML / CSS






Ganesh01

    

    <!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">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Ganesh 01 : Sunshine</title>
<style type='text/css'>
/*
Theme Name: Ganesh Iyer
Theme URI: http://ganesh.frih.net/
Description: 
Version: 1
Author: Ganesh Iyer
Author URI: http://ganesh.frih.net/

  Ganesh v1
   http://ganesh.frih.net

  Designed for Ganesh's blog,
  whose blog you will find at http://binarybonsai.com/

  The CSS, XHTML and design is released under GPL:
  http://www.opensource.org/licenses/gpl-license.php

*/




body{
  background: #fff url(Ganesh01-img/bg.gif) repeat-x;
  color: #222;
  padding: 0px;
  margin: 0;
  font-size: 12.9px;
  line-height: 150%;
  word-spacing: 1px;
  font-family: Tahoma, Verdana,'Trebuchet MS';
}

.alt {
  background-color: #F0F8FF;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  }

a, a.visited, a.active{
  color:#FF6600;
  text-decoration: none;
}
a:hover{
  color: #000;
  text-decoration: underline;
}


#container{
  margin: 0 auto;
  width: 900px !important;
  padding: 0px 0px;
  background: #ffffff;
}

#head{
  font-family: 'Lucida Sans';
  color: #fff;
  margin: 15px 0 0 0;
  height: 105px;
  padding: 20px 0px 0 30px;
  width: 900px;
  background: url(Ganesh01-img/hdr.jpg) no-repeat;;
}

#head h1 a, #head h1{
  color: #fff;
  font-size: 28px;

}
#head h1 a:hover{
  color: #EDEEEF;
  text-decoration: none;
}
#nav{
  background: url(Ganesh01-img/nav.gif) repeat-x;
  word-spacing: 16px;
  color: #fff;
  padding: 10px 70px;
  font-size:  16px;
  font-family: 'Trebuchet MS';
}
#nav a, #nav a.active, #nav a.visited{
  color:#fff;
}
#nav a:hover{
  color:#FBAF00;
}
#content{
  padding: 12px 5px;
  width: 70%;
  margin: 5px;
  float: left;
}
#content h2 a{
  color: #FF6600;
}
#content h2 a:hover{
  color: #000;
  text-decoration: none;
}


.cbox{
  background: #CCFFCC;
  padding:  5px 20px;
  width: 20px
}
#side{
  float: right;
  width: 25%;
  padding: 20px 5px;
  color: #000;
}
#side a{
  color: #FF6600
}
#side a:hover{
  color: #000;
  text-decoration: none;
  background : #F2F2F2;

}
#side h2{
  font-size: 110%;

}



html>body .entry ul {
  margin-left: 0px;
  padding: 0 0 0 30px;
  list-style: none;
  padding-left: 10px;
  text-indent: -10px;
  }

html>body .entry li {
  margin: 7px 0 8px 10px;}
  
.entry{
  padding: 0px 55px;
}

.entry ul li:before, #side ul ul li:before {
  content: "\00BB \0020";
  }

.entry ol {
  padding: 0 0 0 35px;
  margin: 0;
  }

.entry ol li {
  margin: 0;
  padding: 0;
  }

.postmetadata ul, .postmetadata li {
  display: inline;
  list-style-type: none;
  list-style-image: none;
  }

#side ul, #side ul ol {
  margin: 0;
  padding: 0;
    list-style-type: none;
  }

#side ul li {
  list-style-type: none;
  list-style-image: none;
  margin-bottom: 15px;
  }

#side ul p, #side ul select {
  margin: 5px 0 8px;
  }

#side ul ul, #side ul ol {
  margin: 5px 0 0 10px;
  }

#side ul ul ul, #side ul ol {
  margin: 0 0 0 10px;
  }

ol li, #side ul ol li {
  list-style: decimal outside;
  }

#side ul ul li, #side ul ol li {
  margin: 3px 0 0;
  padding: 0;
 }
  
#side img{
  border: 0px;
}
/* End Entry Lists */

/**/
.postmetadata{
  color: #808080;
  padding: 4px 30px;
  background: #F2F2F2;
  border-bottom: 3px solid #ccc;
}
/**/

/* Begin Comments*/
.alt {
  margin: 0;
  padding: 10px;
  }

.commentlist {
  padding: 0;
  text-align: justify;
  }

.commentlist li {
  margin: 15px 0 3px;
  padding: 5px 10px 3px;
  list-style: none;
  }

.commentlist p {
  margin: 10px 5px 10px 0;
  }

#commentform p {
  margin: 5px 0;
  }

.nocomments {
  text-align: center;
  margin: 0;
  padding: 0;
  }

.commentmetadata {
  margin: 0;
  display: block;}


.commentlist li, #commentform input, #commentform textarea {
  font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
  }

.commentlist li {
  font-weight: bold;
  }

.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  }

.commentlist p {
  font-weight: normal;
  line-height: 1.5em;
  text-transform: none;
  }

#commentform p {
  font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  }

.commentmetadata {
  font-weight: normal;
  }

/* End Comments */


/*Img*/
p img {
  padding: 0;
  max-width: 100%;
  }



img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline;
  }

img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline;
  }

.alignright {
  float: right;
  }

.alignleft {
  float: left
  }
/* End Images */


.time {
  float: left;
  width: 50px;
  color: Black;
  line-height: 100%;
  font-size: 140%;
  text-align: center;
  margin-right: 6px;
  padding-bottom: 3px;
}
.day{
  background : url(Ganesh01-img/date.gif) no-repeat;
  padding:7.2px 0px;
}
.month {
  color: White;
  font-variant:small-caps;
  border-bottom: 1px solid #000;
  background: Black;
  margin-top: 3px;
  font-size: 110%;
  }
  
#footer{
  clear:both;
  background: #000;
  color: #fff;
  font-family: 'Trebuchet MS';
  padding: 12px 0px 12px 220px;
}
#footer a, #footer a:active, #footer a:visited{
  color: #fff
}
#footer a:hover{
  color:#FF7B24;

}

</style>
</head>
<body>
<div id="container">
<div id="head">
<h1>Ganesh 01 : Sunshine</h1>
<div class="description">Your tagline here</div>
</div>
<div id="nav"><a href="#">Home</a> | <a href="#">Home</a> | <a href="#">Home</a> | <a href="#">Home</a></div>
<div id="content">
<div class="time day"><small>11<br />
2008</small>
<div class="month"><small>Jan</small></div>
</div>
<!-- by admin -->
<h2><a href="#">About the Design</a></h2>
<p>I had made this layout a few months ago for my personal blog. It was basically a wordpress skin. I tweaked a few things and have decided to launch this as a Open Source Design.Some of its features are:</p>
<ul>
<li>Valid xhtml and css</li>
<li>Great for blogs</li>
<li>Easy Integration</li>
</ul>
<p>If you like this design then please visit my website - <a href="http://ganeshnomicks.blogspot.com/">Ganeshnomicks</a> for more free designs and designing articles. if you use this design then please link back to me.</p>
<p class="postmetadata">Posted in <a href="#">Category</a> <strong>|</strong> <a href="#">Edit</a><strong>|</strong> <a href="#">No Comments ?</a></p>
<div class="time day"><small>23<br />
2007</small>
<div class="month"><small>Nov</small></div>
</div>
<!-- by admin -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed nunc. Integer malesuada. Vivamus semper. Proin tincidunt rutrum elit. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras congue arcu sit amet dui. Quisque mi. Quisque mattis velit at dui. Ut leo neque, dignissim in, faucibus in, elementum ut, est. Vivamus sed eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aliquam elit. Nullam diam. Donec neque lacus, rhoncus at, tincidunt eget, semper quis, ipsum. Quisque blandit tristique nulla. Aliquam id felis vitae felis pulvinar rhoncus. Donec aliquam mauris quis orci. Donec cursus, magna blandit interdum porttitor, mi nunc interdum metus, eget malesuada enim enim sed augue. Etiam lectus. Suspendisse vulputate dictum nisl. Donec nec sem at nisl rhoncus dictum. Nulla ultrices massa. Integer eleifend facilisis enim. Cras pede. Suspendisse potenti. Donec at eros. Ut dapibus neque ac nisi convallis lacinia. Curabitur non mi. Mauris tempus porttitor erat. Aenean massa elit, lobortis non, pellentesque a, mollis sit amet, sem. Vivamus semper tellus eu magna. Vivamus sed mi sit amet libero pellentesque hendrerit. Curabitur lacinia viverra ligula.</p>
<p class="postmetadata">Posted in <a href="#">Category</a> <strong>|</strong> <a href="#">Edit</a><strong>|</strong> <a href="#">No Comments ?</a></p>
<div class="time day"><small>30<br />
2007</small>
<div class="month"><small>Nov</small></div>
</div>
<!-- by admin -->
<h2><a href="#">Some more Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ligula. Quisque tortor. Nulla ut nibh sed enim mattis porttitor. Aliquam a ante non tellus ultrices fringilla. Cras aliquam libero eget eros. Fusce feugiat pharetra mauris. Etiam egestas arcu sed ligula. Curabitur fringilla. Nulla facilisi. Nam lacinia rutrum metus. Proin diam urna, facilisis a, dignissim id, porttitor non, dui. Aliquam dolor nisi, tempus quis, placerat in, pulvinar id, dui. Integer cursus consequat nibh. Vivamus nulla.</p>
<p>Aenean gravida rutrum lectus. Nulla facilisi. Sed laoreet. Nunc ornare metus nec nisl. Nulla euismod nunc vel nisl. Etiam non nisl. Duis non dui ut tellus venenatis lobortis. Morbi gravida. In condimentum sapien eu nulla. Vivamus sed mi sit amet libero pellentesque hendrerit. Curabitur lacinia viverra ligula.</p>
<p class="postmetadata">Posted in <a href="#">Category</a> <strong>|</strong> <a href="#">Edit</a><strong>|</strong> <a href="#">No Comments ?</a></p>
</div>
<div id="side">
<ul>
<li>
<h2>Links</h2>
</li>
<li class="c1">
<ul>
<li><a href="http://ganeshnomicks.blogspot.com/">Ganeshnomicks</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Test</a></li>
<li><a href="http://ganeshnomicks.blogspot.com/">Ganesh's Blog</a></li>
<li><a href="http://ganeshnomicks.blogspot.com/">Ganeshnomicks</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li>
<h2>About</h2>
<p>Write a little paragraph about you here. Lorem Ipsum Quisque mi. Quisque mattis velit at dui. Ut leo neque, dignissim in, faucibus in, elementum ut, est. Vivamus sed eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
</ul>
</div>
<div id="footer">Copyright (C) Your Name<br />
All rights reserved.<br />
Site designed by <a href="http://ganeshnomicks.blogspot.com/" title="Ganesh Iyer">Ganesh Iyer</a></div>
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.euphonics
46.europe
47.everydayseries
48.evolution
49.exalted
50.excess
51.excursus
52.Executive Template
53.executive
54.Exotic_Blue
55.Exotic_Red
56.fotografix
57.fotolandia
58.foundation
59.foxy
60.fractalbroccoli
61.fragrance
62.frankincense
63.freches-fruechtchen
64.free-css-lunch
65.freecsstemplate 55
66.freecsstemplateno57
67.freecsswebsitetemplate39
68.freecss_greentextile
69.freecss_modern
70.freecss_monolit
71.freecss_redleaves
72.freecss_set
73.freeport
74.freeradicals
75.freestyle
76.frozenage
77.ftd-redblack
78.ftdbusiness
79.ftdcinema
80.ftddrops
81.ftdExplosionBlue
82.ftditight
83.ftdkiwi
84.ftdlagoon
85.ftdLight
86.ftdLightBlue
87.ftdluminescent
88.ftdMoonLight
89.ftdprime
90.ftdspace
91.ftdvivid
92.ftdworld
93.funkytimes
94.funride
95.futuremag-aio
96.fword_three
97.galaxy
98.gallerize
99.gamberetto
100.gameportal
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies