dreamy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dreamy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Theme Name: Ginger Ninja! v2
Description: The new Ginger Ninja! theme.
Version: 1.0
Author: Donny Burnside
Author URI: http://www.ginger-ninja.net/
*/
/* Generic Styling */
body {
background:url(dreamy-images/bg-body.png) repeat-x top center #E8F7F9;
font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
font-size:62.5%; /* Sets default font size to 10px */
color:#222222;
}
* {
margin:0;
padding:0;
}
img {
border:0;
}
p {
margin-bottom:1.75em;
}
a {
text-decoration:none;
color:#B4C835;
}
a:hover {
text-decoration:none;
color:#6CC7DC;
}
/* Structure */
#wrapper {
margin:0 auto;
width:700px;
background:#ffffff;
font-size:1.20em;
}
#header {
height:140px;
background:url(dreamy-images/bg-header.jpg) no-repeat;
}
#menu {
height:35px;
line-height:35px;
background:url(dreamy-images/bg-menu.png) repeat-x;
padding:0 10px;
}
#sidebar {
float:right;
width:180px;
background:#efefef;
margin-right:10px;
}
#content {
float:left;
width:500px;
min-height:400px;
}
#footer {
clear:both;
height:100px;
background:url(dreamy-images/bg-footer.jpg) no-repeat;
}
/* Entries */
.entry {
padding:5px 10px;
text-align:justify;
line-height:1.75em;
}
.entry-title {
font-size:1.90em;
font-weight:normal;
letter-spacing:-1px;
}
.date {
font-size:0.9em;
color:#bbb;
cursor:default;
letter-spacing:1px;
}
.comments {
margin-top:-1em;
}
.comments a {
color:#6CC7DC;
background:url(dreamy-images/icon-comment.png) no-repeat 0px 2px;
padding-left:20px;
padding-right:2px;
}
.comments a:hover {
color:#B4C835;
}
/* Menu */
#menu ul {
list-style-type:none;
}
#menu li {
float:left;
}
#menu li a {
padding:0 15px;
display:block;
color:#ffffff;
margin-right:2px;
}
#menu li a:hover {
background:url(dreamy-images/bg-menu-hover.png) no-repeat center center;
}
/* Sidebar */
#sidebar ul {
list-style-type:none;
margin-top:10px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}
#sidebar li a:hover {
background:#edebed;
color:#6CC4D8;
}
#sidebar-bottom {
height:20px;
background:url(dreamy-images/bg-sidebar-bottom.gif) no-repeat top center;
}
/* Footer */
#footer-valid {
float:left;
padding-top:55px;
padding-left:20px;
cursor:default;
color:#ffffff;
}
#footer-valid a {
color:#ffffff;
text-decoration:none;
}
#footer-valid a:hover {
color:#ffffff;
text-decoration:underline;
}
/* Heading's */
h1 {
font-size:2.5em;
font-weight:normal;
cursor:default;
position:relative; top:50px; left:30px;
letter-spacing:1px;
color:#aaaaaa;
font-style:italic;
}
/* Feed */
#feed {
height:25px;
width:126px;
background:url(dreamy-images/bg-feed.gif) no-repeat;
margin:0 auto;
padding-left:26px;
}
a.feed-button {
display:block;
width:100px;
height:25px;
background:url("dreamy-images/button-feed.png") 0 0 no-repeat;
text-decoration: none;
}
a:hover.feed-button {
background-position:0 -25px;
}
/* Extra's */
#ad-top {
width:480px;
height:72px;
background:url(dreamy-images/bg-ad-top.png) no-repeat;
padding:5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Dreamy</h1>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
</ul>
</div>
<div id="sidebar">
<div id="feed"> <a class="feed-button" href="http://www.free-css.com/"> </a></div>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
</ul>
<div id="sidebar-bottom"> </div>
</div>
<div id="content">
<div id="ad-top">
<!-- Insert 468x60 banner advertisement -->
</div>
<div class="entry">
<div class="entry-title"><a href="http://www.free-css.com/">Lorem Ipsum</a></div>
<div class="date">Posted on 30 November 2006</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<div class="comments"><a href="http://www.free-css.com/">3 comments</a></div>
</div>
</div>
<div id="footer">
<div id="footer-valid"> <a href="http://validator.w3.org/check/referer">xhtml</a> / <a href="http://www.ginger-ninja.net/">ginger ninja!</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category