red-round
?<!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>Red and Round</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #333333;
background-color: #ffffff;
font: normal 76%/1.6 "Lucida Grande", "Trebuchet MS", Verdana, Sans-Serif;
}
/* Links */
a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #aaaaaa; }
a:link { color: #2255aa; }
a:visited { color: #6699ee; }
a:hover, a:active { color: #aa3322; border-bottom-style: solid; }
/* Headings */
h1, h2, h3, h4, h5, h6 { color: #551111; padding: 10px 0 5px; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4, h5 { font-size: 1.4em; }
h6 { font-size: 1.0em; font-weight: bold; text-transform: uppercase; }
/* Lists */
ul
{
margin: 10px 35px;
line-height: 2.0em;
list-style-type: square;
}
ol
{
margin: 10px 40px;
line-height: 2.0em;
}
dl
{
margin: 10px 35px;
line-height: 1.7em;
}
dt, dd { padding: 5px 0; }
/* Other Html Elements */
p
{
margin: 15px 0;
line-height: 1.6em;
}
abbr, acronym, cite, kbd
{
cursor: help;
font-style: normal;
border-bottom: 1px dotted #888888;
}
pre { overflow: auto; }
blockquote, pre
{
margin: 20px 35px;
padding: 5px 10px;
background-color: #ffffff;
border: 1px solid #cfcfcf;
}
code { font-family: Consolas, Monaco; }
hr
{
height: 1px;
clear: both;
visibility: hidden;
}
body
{
padding: 0 10px;
}
/* Who cares about navigation, sidebar, and footer in print? Nobody. */
#navigation { display: none; }
#sidebar { display: none; }
#extras { display: none; }
/* The header is more contentious, but we're showing the copyright block, so... */
#header { display: none; }
</style>
<link rel="stylesheet" type="text/css" media="screen" href="master.css" />
<!--[if lt ie 8]><link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" /><![endif]-->
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/"><span>Red and Round</span></a></h1>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li class="active"><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div class="post">
<h2 class="post-title"><a href="http://www.free-css.com/">More Examples</a></h2>
<div class="post-content">
<p>Hi there! <a href="http://www.free-css.com/">Red and Round</a> is a free template by <a href="http://www.free-css.com/">Sadhana Ganapathiraju</a>. Normally, I
don't create a template as simple as this one. Indeed, I started this one to be something else entirely, but I took
one look at the page with only its "print" stylesheet (look below) and I fell in love. (So: I also provided a print
stylesheet, which I don't usually do. ;-)</p>
<p><img src="print_screenshot.png" width="380" height="268" alt="What the template looked like with only the print stylesheets" /></p>
<p>The header pic was posted to <a href="http://www.sxc.hu/photo/654238">stock.xchng</a> and modified to suit my needs.
So -- hey, wait, <strong>what header image</strong>?! You don't actually see it in the template as I liked the template
much better without it. But I provided the pictures in the download files, because other people might like it the other
way. ;-) There are three header images, though all of them are based on the same base image. Be sure to change the two
lines as instructed in the stylesheet!</p>
<p>Do drop me an e-mail or a link if you find the template useful! :-)</p>
<p>Like all other templates, this one is also released under <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/"> Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>, so feel free to use it and modify it as you wish.
The template was designed for a blog, but if it works for other types of websites, then, hey, all the best for you! Here's <code>some code</code>, <kbd title="Keyboard text">some keyboard text</kbd>, <cite title="Looks blah">a citation</cite>, <strong>some strong text</strong>, <em>some emphasized text</em>.</p>
<blockquote>
<p>Here comes a blockquote. It's a very short one, as you can see.</p>
</blockquote>
<h3>Here comes an unordered list</h3>
<ul>
<li>This is the first item</li>
<li>And the second one</li>
<li>And the third one</li>
<li>And the fourth one</li>
<li>And the fifth one</li>
</ul>
<h3>And here comes an ordered list</h3>
<ol>
<li>This is the first item</li>
<li>And the second one</li>
<li>And the third one</li>
<li>And the fourth one</li>
<li>And the fifth one</li>
</ol>
<p>This is another paragraph just to close off the examples. I included a link that says the design was by me. I kindly
ask you not to remove it, but if you really don't want it on your site, it's okay if you remove it. </p>
<pre><code>This is code in a block, though it doesn't look anything like code</code></pre>
<p>All links in the site except for the "design credit link" need to be modified, btw.</p>
</div>
<p class="post-footer"> Posted By: <a href="#00">Fisterkit</a> on July 5, 2006 | <a href="#02">Comments(275)</a> | <a href="#03">Trackbacks(321)</a> </p>
</div>
</div>
<div id="sidebar">
<div id="sidenotes">
<h3>Quick Links</h3>
<dl>
<dt>Hilarious Windows 2000 Source Code Review</dt>
<dd><a href="http://www.kuro5hin.org/story/2004/2/15/71552/7795">Who knew Microsoft programmers swore so much?</a></dd>
<dt>God Created the World, With a Computer!</dt>
<dd><a href="http://www.pi.pwp.blueyonder.co.uk/creation.html">In the beginning, there was the Computer</a></dd>
<dt>The Fully Automated System</dt>
<dd><a href="http://thedailywtf.com/forums/thread/92732.aspx">It was to be the perfect system.</a></dd>
<dt>Persistence Gets the Job Done</dt>
<dd><a href="http://thedailywtf.com/forums/thread/92484.aspx">Kristopher has the pleasure of working with Robert, the Infallible Programmer.</a></dd>
<dt>Not Another DLL!</dt>
<dd><a href="http://thedailywtf.com/forums/thread/92281.aspx">"Told ya' so."</a></dd>
<dt>Legendary Configuration</dt>
<dd><a href="http://thedailywtf.com/forums/thread/92037.aspx">Not too many of us are locky to work side-by-side with a living Software legend.</a></dd>
<dt>Surgical Module Changes</dt>
<dd><a href="http://thedailywtf.com/forums/thread/91869.aspx">Tom's experience on the Client Management Module</a></dd>
<dt>Credits</dt>
<dd>The first two articles are from <a href="http://www.digg.com/">Digg</a> and the rest from <a href="http://www.thedailywtf.com/">The Daily WTF</a>.</dd>
</dl>
</div>
<div id="syndicate">
<h3>Subscribe</h3>
<ul>
<li><a href="#12">Rss Feed</a></li>
<li><a href="#13">Atom Feed</a></li>
<li><a href="#14">E-mail Subscription</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="extras">
<div id="friends">
<h6>Friends</h6>
<ul>
<li><a href="http://www.free-css.com/">Veer & Virile</a></li>
<li><a href="http://www.free-css.com/">Bits & Pieces</a></li>
<li><a href="http://www.free-css.com/">Someone with a Blog</a></li>
<li><a href="http://www.free-css.com/">Design First</a></li>
<li><a href="http://www.free-css.com/">Last Upside Down</a></li>
<li><a href="http://www.free-css.com/">Jerk Around the Town</a></li>
<li><a href="http://www.free-css.com/">Wikipedia</a></li>
<li><a href="http://www.free-css.com/">Google</a></li>
<li><a href="http://www.free-css.com/">GodPowers</a></li>
<li><a href="http://www.free-css.com/">Chocolates</a></li>
</ul>
</div>
<div id="links">
<h6>Interesting Tidbits</h6>
<dl>
<dt><a href="http://www.free-css.com/">Aliquam Mollis Odio Ut Pedu</a></dt>
<dd>Vestibulum enim erat, tristique quis, dignissim et, imperdiet ac, augue. Proin ac risus id urna venenatis viverra.</dd>
<dt><a href="http://www.free-css.com/">Vivamus Eget Metus Eget Est</a></dt>
<dd> Mauris sollicitudin feugiat nisl. Fusce lorem justo, pharetra sit amet, vestibulum in, convallis at, tortor. Suspendisse
eget lacus in mauris suscipit iaculis. Ut risus eros, scelerisque ac. </dd>
<dt><a href="http://www.free-css.com/">Etiam Mattis</a></dt>
<dd> Maecenas adipiscing lectus nec velit consectetuer scelerisque. </dd>
</dl>
</div>
<div id="about">
<h6>About</h6>
<p> Nullam eu eros eget massa fringilla porta. Donec consectetuer. Praesent vel ipsum. Vivamus vitae orci. Qui
sque sit amet est. Suspendisse dapibus orci. Pellentesque semper mi vestibulum libero. Vivamus pharetra tu
rpis eu neque. Morbi convallis. Nunc a ipsum eu lorem. <a href="http://www.free-css.com/">More →</a> </p>
</div>
</div>
<hr />
<p id="copyright"> Design by <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> |
All rights reserved | <a href="http://www.free-css.com/">Terms of Service</a> | <a href="http://www.free-css.com/">Privacy</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">About</a> | <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict">Xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2" title="Valid CSS 2.0 Strict">Css</a> </p>
</div>
<hr />
</body>
</html>
Related examples in the same category