roundhouse
<!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>Round House</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 20px;
background: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
margin-top: 1.5em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #40C1D4;
}
a:hover {
text-decoration: none;
color: #D8B077;
}
/* Header */
#header {
height: 100px;
background: url(roundhouse-images/img01.gif) repeat-x left bottom;
}
#logo {
float: left;
height: 50px;
}
#logo h1, #logo h2 {
float: left;
margin: 0 0 0 20px;
}
#logo h1 {
padding: 10px 0 0 0;
letter-spacing: -2px;
font-size: 2.4em;
}
#logo h2 {
padding: 22px 0 0 5px;
letter-spacing: -1px;
font-size: 1.4em;
font-weight: normal;
font-style: italic;
}
#logo a {
text-decoration: none;
color: #40C1D4;
}
#menu {
float: left;
clear: left;
height: 50px;
background: url(roundhouse-images/img02.gif) no-repeat;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
display: block;
margin: 14px 10px 0 10px;
padding: 0 10px;
background: #40C1D4;
text-decoration: none;
letter-spacing: -1px;
font-size: 1.4em;
color: #FFFFFF;
}
#menu a:hover {
background: #0083A9;
}
#search {
float: right;
width: 200px;
height: 100px;
background: url(roundhouse-images/img03.gif);
}
#search h2 {
margin: 0;
}
#search form {
padding: 20px 0 0 20px;
}
#search fieldset {
border: none;
}
#search legend {
font-weight: bold;
color: #FFFFFF;
}
#search #s {
width: 140px;
height: 30px;
padding: 10px 10px 0 10px;
background: #B5E6EE;
border-top: 1px solid #B9E7EF;
border-left: 1px solid #B9E7EF;
border-right: 1px solid #C1EBF1;
border-bottom: 1px solid #C1EBF1;
font: bold 1.2em Georgia, "Times New Roman", Times, serif;
color: #0083A9;
}
#search #x {
display: none;
}
/* Page */
#page {
padding: 30px 0;
}
/* Content */
#content {
float: right;
width: 60%;
padding-right: 5%;
}
.post {
}
.post .meta {
margin: 0;
text-align: center;
font: bold 11px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
.post .meta a {
color: #CCCCCC;
}
.post .title {
margin: 0;
padding: 15px 0;
text-align: center;
font-size: 2.4em;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}
.post .title a {
text-decoration: none;
}
.post .title a:hover {
border-bottom: 1px solid #EEEEEE;
}
.post .entry {
padding: 20px;
line-height: 200%;
}
.post .links {
margin: 0;
padding: 10px 0;
font-weight: bold;
border-bottom: 1px solid #EEEEEE;
text-align: center;
}
.post .tags {
margin: 0;
padding: 10px 0;
font-size: .8em;
text-align: center;
}
.post .tags a {
padding-left: 10px;
}
/* Sidebar */
#sidebar {
margin-right: 70%;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
background: url(roundhouse-images/img05.gif) no-repeat;
}
#sidebar li ul {
padding: 10px;
}
#sidebar li li {
margin: 0;
padding: 5px 10px;
background: none;
border-bottom: 1px dotted #EEEEEE;
}
#sidebar h2 {
height: 35px;
margin: 0;
padding: 15px 0 0 20px;
background: url(roundhouse-images/img06.gif) no-repeat right top;
color: #FFFFFF;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: none;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
#calendar th, #calendar td {
padding: 5px 0;
}
#calendar thead th {
border-top: 2px solid #EEEEEE;
border-bottom: 2px solid #EEEEEE;
}
#calendar tfoot td {
border-top: 2px solid #EEEEEE;
}
#calendar tbody td {
border-bottom: 1px dotted #EEEEEE;
}
#calendar tbody a {
font-weight: bold;
}
#calendar #today {
background: #EEEEEE;
font-weight: bold;
}
#calendar #next {
text-align: right;
}
#calendar #prev {
text-align: left;
}
/* Footer */
#footer {
clear: both;
height: 50px;
background: #40C1D4 url(roundhouse-images/img07.gif);
color: #FFFFFF;
}
#footer p {
margin: 0;
padding: 0 20px;
line-height: normal;
}
#footer .legal {
float: left;
height: 32px;
padding-top: 18px;
background: url(roundhouse-images/img08.gif) no-repeat;
}
#footer .credits {
float: right;
height: 32px;
padding-top: 18px;
background: url(roundhouse-images/img09.gif) no-repeat right top;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="header">
<div id="search">
<form method="get" action="http://www.free-css.com/">
<fieldset>
<legend>Quick Search</legend>
<input id="s" type="text" name="s" value="" />
<input id="x" type="submit" value="Search" />
</fieldset>
</form>
</div>
<div id="logo">
<h1><a href="http://www.free-css.com/">Round House</a></h1>
<h2><a href="http://www.free-css.com/">CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Blogs</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
</ul>
</div>
</div>
<div id="page">
<div id="content">
<div class="post">
<p class="meta"><small>Posted on October 24th, 2007 by <a href="http://www.free-css.com/">Someone</a></small></p>
<h1 class="title"><a href="http://www.free-css.com/">About This Template</a></h1>
<div class="entry">
<p><strong>Round House </strong> is a free, fully standards-compliant CSS template designed by Free CSS Templates. This free template is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Have fun with it :)</p>
<p>This template is also available as a WordPress theme at Free WordPress Themes.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li><a href="http://www.free-css.com/">Consectetuer adipiscing elit</a></li>
<li><a href="http://www.free-css.com/">Metus aliquam pellentesque</a></li>
<li><a href="http://www.free-css.com/">Urnanet non molestie semper</a></li>
<li><a href="http://www.free-css.com/">Proin gravida orci porttitor</a></li>
</ul>
<h3>Heading Level 3</h3>
<p>While this one is followed by a blockquote:</p>
<blockquote>
<p>Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
</blockquote>
</div>
<p class="links"><a href="http://www.free-css.com/" class="comments">Comments (33)</a> <a href="http://www.free-css.com/" class="permalink">Permalink</a></p>
<p class="tags"><strong>Tags:</strong> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a> <a href="http://www.free-css.com/">dolor</a> <a href="http://www.free-css.com/">ipsum</a> <a href="http://www.free-css.com/">lorem</a> <a href="http://www.free-css.com/">sit amet</a></p>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a href="http://www.free-css.com/">Aliquam libero</a></li>
<li><a href="http://www.free-css.com/">Consectetuer elit</a></li>
<li><a href="http://www.free-css.com/">Metus pellentesque</a></li>
<li><a href="http://www.free-css.com/">Suspendisse mauris</a></li>
<li><a href="http://www.free-css.com/">Urnanet molestie semper</a></li>
<li><a href="http://www.free-css.com/">Proin orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="http://www.free-css.com/">September</a> (23)</li>
<li><a href="http://www.free-css.com/">August</a> (31)</li>
<li><a href="http://www.free-css.com/">July</a> (31)</li>
<li><a href="http://www.free-css.com/">June</a> (30)</li>
<li><a href="http://www.free-css.com/">May</a> (31)</li>
</ul>
</li>
<li id="calendar">
<h2>Calendar</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2007
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev"><a href="http://www.free-css.com/">« Sep</a></td>
<td class="pad"> </td>
<td abbr="November" colspan="3" id="next"><a href="http://www.free-css.com/">Nov »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td><a href="http://www.free-css.com/">14</a></td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</div>
</div>
<div id="footer">
<p class="legal">©2007 All Rights Reserved.</p>
<p class="credits">Designed by <a target="_blank" href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category