stargazer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : StarGazer
Description: Fixed-width, two-column design suitable for small sites and blogs.
Version : 1.0
Released : 20071222
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>StarGazer by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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 {
background: #000000 url(stargazer-images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #999999;
}
h1, h2, h3 {
}
h1 {
font-size: 3em;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.8em;
line-height: 180%;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
hr {
display: none;
}
/* Header */
#header {
width: 960px;
height: 80px;
margin: 0 auto;
background: url(stargazer-images/img02.jpg);
}
#header h1, #header h2 {
float: left;
margin: 0;
text-transform: uppercase;
color: #FFFFFF;
}
#header h1 {
padding: 30px 0 0 20px;
font-size: 3em;
}
#header h2 {
padding: 47px 0 0 8px;
font-size: 1.8em;
font-style: italic;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 960px;
height: 51px;
margin: 0 auto;
background: url(stargazer-images/img03.jpg);
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 12px 10px 0 20px;
}
#menu a {
text-decoration: none;
letter-spacing: -1px;
font-size: 1.2em;
font-weight: bold;
}
#menu a:hover {
text-decoration: underline;
}
/* Page */
#page {
width: 920px;
margin: 0 auto;
padding: 30px 20px 20px 20px;
background: url(stargazer-images/img04.jpg) no-repeat;
}
/* Content */
#content {
float: left;
width: 605px;
}
.post {
margin-bottom: 40px;
}
.post .title {
border-bottom: 1px solid #454545;
}
.post .title a {
text-decoration: none;
}
.post .entry {
padding: 0 20px;
}
.post .meta {
height: 20px;
padding: 15px 20px;
background: url(stargazer-images/img05.gif) no-repeat;
line-height: normal;
}
.post .meta a {
text-decoration: none;
font-weight: bold;
}
.post .meta a:hover {
text-decoration: underline;
}
.post .meta .byline {
float: left;
}
.post .meta .comments {
float: right;
}
/* Sidebar */
#sidebar {
float: right;
width: 295px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
padding: 0 0 20px 20px;
list-style: square inside;
}
#sidebar h2 {
height: 50px;
padding: 13px 20px 0 20px;
background: url(stargazer-images/img06.gif) no-repeat;
font-size: 1.6em;
}
/* Search */
#search {
padding: 20px;
text-align: center;
}
#search input {
margin-bottom: 10px;
padding: 3px 5px;
background: #1F1F1F url(stargazer-images/img06.gif) no-repeat center center;
border: 1px solid #454545;
font: bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#search #s {
width: 80%;
background: #1F1F1F;
}
/* Calendar */
#calendar {
padding-bottom: 20px;
}
#calendar table, #calendar caption {
width: 80%;
margin: 0 auto;
text-align: center;
}
#calendar caption {
text-transform: uppercase;
letter-spacing: .25em;
font-weight: bold;
}
#calendar thead th {
background: #333333;
}
#calendar tbody td {
background: #111111;
}
#calendar a {
text-decoration: none;
font-weight: bold;
}
#calendar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
width: 960px;
margin: 0 auto;
padding: 20px 0;
background: url(stargazer-images/img07.gif) no-repeat;
}
#footer p {
margin: 0;
line-height: normal;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="#">StarGazer</a></h1>
<h2>By Free CSS Templates</h2>
</div>
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<hr />
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Sitename.com!</a></h2>
<div class="entry">
<p><strong>StarGazer</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header image is from <a href="http://www.nasa.gov/">NASA</a> (slightly edited). You're free to use this template for both commercial or personal use. This design is also available as a <a href="http://www.freewpthemes.net/preview/stargazer">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free Wordpress Themes</a>. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy :)</p>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet.</p>
</div>
<p class="meta"><span class="byline">Posted by <a href="#">Someone</a> on December 22, 2007</span> <a href="#" class="comments">18 comments</a></p>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem Ipsum Dolor</a></h2>
<div class="entry">
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet. Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet.</p>
</div>
<p class="meta"><span class="byline">Posted by <a href="#">Someone</a> on December 22, 2007</span> <a href="#" class="comments">18 comments</a></p>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li id="search">
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input name="submit" type="submit" value="Search" />
</div>
</form>
</li>
<li id="calendar">
<h2>Calendar</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
November 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="October" colspan="3" id="prev"><a href="#" title="View posts for October 2007">« Oct</a></td>
<td class="pad"> </td>
<td abbr="December" colspan="3" id="next"><a href="3" title="View posts for October 2007">Dec »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="3" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td><a href="#">12</a></td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td id="today">24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#" title="View all posts filed under Uncategorized">Uncategorized</a> (3) </li>
<li><a href="#" title="View all posts filed under Lorem Ipsum">Lorem Ipsum</a> (42) </li>
<li><a href="#" title="View all posts filed under Urna Congue Rutrum">Urna Congue Rutrum</a> (28) </li>
<li><a href="#" title="View all posts filed under Augue Praesent">Augue Praesent</a> (55) </li>
<li><a href="#" title="View all posts filed under Vivamus Fermentum">Vivamus Fermentum</a> (13) </li>
</ul>
</li>
</ul>
<div style="clear: both; height: 40px;"> </div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<hr />
<div id="footer">
<p>(c) 2007 Sitename.com. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> | <a href="http://free-templates.ru">free-templates.ru</a></p>
</div>
</body>
</html>
Related examples in the same category