sunshine
<!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>
<title>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(sunshine-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(sunshine-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(sunshine-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(sunshine-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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<div id="head">
<h1>Sunshine</h1>
<div class="description">Your tagline here</div>
</div>
<div id="nav"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Home</a></div>
<div id="content">
<div class="time day"><small>11<br />
2008</small>
<div class="month"><small>Jan</small></div>
</div>
<h2><a href="http://www.free-css.com/">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 - Ganeshnomicks 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="http://www.free-css.com/">Category</a> <strong>|</strong> <a href="http://www.free-css.com/">Edit</a><strong>|</strong> <a href="http://www.free-css.com/">No Comments ?</a></p>
<div class="time day"><small>23<br />
2007</small>
<div class="month"><small>Nov</small></div>
</div>
<h2><a href="http://www.free-css.com/">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="http://www.free-css.com/">Category</a> <strong>|</strong> <a href="http://www.free-css.com/">Edit</a><strong>|</strong> <a href="http://www.free-css.com/">No Comments ?</a></p>
<div class="time day"><small>30<br />
2007</small>
<div class="month"><small>Nov</small></div>
</div>
<h2><a href="http://www.free-css.com/">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="http://www.free-css.com/">Category</a> <strong>|</strong> <a href="http://www.free-css.com/">Edit</a><strong>|</strong> <a href="http://www.free-css.com/">No Comments ?</a></p>
</div>
<div id="side">
<ul>
<li>
<h2>Links</h2>
</li>
<li class="c1">
<ul>
<li><a href="http://www.free-css.com/">Tutorials</a></li>
<li><a href="http://www.free-css.com/">Layouts</a></li>
<li><a href="http://www.free-css.com/">Test</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Menus</a></li>
<li><a href="http://www.free-css.com/">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/">Ganesh Iyer</a></div>
</div>
</body>
</html>
Related examples in the same category