summerbreeze
<!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" lang="en" xml:lang="en">
<head>
<title>Summer Breeze</title>
<style type='text/css'>
body {
margin:1em;
padding:0;
height:100%;
background-color:#B8D7DC;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}
#head {
margin:2em auto 0 auto;
width: 794px;
height:230px;
background: #848D90;
background-image : url(summerbreeze-picks/1.jpg);
}
#textbox{
margin: 2em 0 0 8em;
width: 35em;
height:4em;
}
h1{
text-align: center;
font-size: 3.0em;
letter-spacing:.2em;
color:#3B6243;
font-family : "firenze sf", verdana, arial, sans-serif;
}
.navbox{
float: right;
height: 30px;
width: 50%;
margin: 0 0 0 0em;
padding-right: 5px;
}
#menu ul {
margin: 0em;
padding:0em .5em 0 .5em;
margin-bottom: 0em;
float: left;
font-family:"verdana", arial, sans-serif,firenze sf ;
font-size:1.0em;
width: 100%;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
color:#6C480E;
padding: 0px 15px;
text-decoration: none;
}
#menu ul li a:visited{
color: blue;
}
#menu ul li a:hover{
color: #000;
background-color: #B8D7DC;
}
div#container{
width: 794px;
margin:0 auto 0 auto;
padding:25px 0 0 0;
background-color: #fff;
background-image : url(summerbreeze-picks/2.jpg);
background-repeat:repeat-x;
}
div#content{
float: right;
width: 600px;
padding:0 2px 0 0;
}
.firstbigletter {
font-family:Georgia;
color:#000;
font-size:20px;
font-weight:normal;
line-height:80%;
letter-spacing:2px;
}
p {
margin: 10px 0px 0px 5px;
font-family : 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
color : #3F4B37;
font-size : 1.0em;
letter-spacing:.03em;
}
img.right {
float : right;
margin-left :8px;
}
img.left {
float : left;
margin-left :8px;
}
div#sidebar{
float: left;width: 160px;
margin: 1em .5em -20em 0;
background:#E8F0F3;
padding: 0 .5em .5em .5em;
}
#sidebar p {
margin: 0px 0px 2px 0px;
font-family : 'Verdana', Geneva, Lucida, Helvetica, Arial, sans-serif;
color : #000;
font-size : 0.8em;
letter-spacing:.02em;
padding: .5em;
border-bottom:1px solid #D87A18;
}
h2{
text-align: left;
font-size: 1.3em;
letter-spacing:.2em;
color: #3B6243;
font-family : "firenze sf", verdana, arial, sans-serif ;
margin: .7em 0 0 0;
}
h3{
font-size: .7em;
letter-spacing:.1em;
color:#261B00;
font-family : "verdana", arial, sans-serif ;
font-weight: bold;
padding:0 0 0 .5em;
margin: .7em 0 0 0;
}
a {
color:#B47F0F;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:none;
}
#calendar {
width: 165px;
padding: 0; margin: 0;
border-left: 1px solid #A2ADBC;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #616B76; text-align: center;
background-color: #fff;
}
.nav, .nav a {
font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
}
caption {
margin: 0;
padding: 0;
width: 165px;
background: #889C9D;
color: #fff;
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th {
font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #616B76;
background: #C5DDF5;
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
border-top: 1px solid #A2ADBC;
}
.today, td.today a, td.today a:link, td.today a:visited {
color: #F6F4DA;
font-weight: bold;
background: #DBC1B4;
}
td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 20px;
height: 20px;
text-align: center;
}
td a {
text-decoration: none;
font-weight: bold;
display: block;
}
td a:link, td a:visited{
color: #608194;
}
td a:hover, td a:active{
color: #6aa3ae;
}
#footer {
clear:both;
margin:2em auto 0 auto;
padding:0;
width: 795px;
height:2em;
line-height:2em;
text-align:center;
font-size:.9em;
background-color:#fff;
border-top:1px solid #999999;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="head">
<div class="navbox">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Events</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
</ul>
</div>
</div>
<br />
<div id="textbox">
<h1>Summer Breeze</h1>
</div>
</div>
<div id="container">
<div id="content">
<h2>Thoughts of summer</h2>
<p> <img class="right" src="summerbreeze-picks/7.jpg" alt=""></img> <span class="firstbigletter">S</span>ame time every year around the end of march or so I always start
thinking about summer and the fact that its just around the
corner. From the smell of freshly mowed grass,the lilacs in
my back yard to the songs of all the different birds
building there nests in my crab apple trees and those warm
summer breezes. </p>
<p> <span class="firstbigletter">I</span> look forward to Saturday mornings going fishing with my son and my two grandsons
later on firing up the ol barbecue grill and sitting back with a tall glass of lemonade.
Catch and release fire fly competitions, bat mitten,Frisbees and baseball
with the whole family at the same time what chaotic fun!. </p>
<p><span class="firstbigletter">N</span>ot to brag mind ya but I can invite five people to a cookout and 15 will show up
not including drive bys and neighbors but there always welcome and always contribute
to the fun and being the musically inclined bunch we are we usually end up in an acoustic guitar jam and we even write our own songs. </p>
<p><span class="firstbigletter">W</span>ell I guess it will all come full circle soon enough but for now Spring has sprung!<br />
I hear the fish are starting to bite and you couldn't hold me back with a truck.
Enough rambling hope you find this template useful. </p>
<hr />
<h4>Oh yea this template:</h4>
<p><img class="right" src="summerbreeze-picks/sb.jpg" alt=""></img> <span class="firstbigletter">C</span>oded in Notepad: <br />
It is valid xhtml 1.0 Strict and Valid css.<br />
No conditional comments, no hacks.<br />
Drove it around the block a couple a times runs good. </p>
<h4>Browsers tested:</h4>
<ul>
<li>- IE7</li>
<li>- IE6</li>
<li>- IE5.5</li>
<li>-Mozilla Firefox 1.5</li>
<li>-Mozilla Firefox 2.0</li>
</ul>
<h4>Platforms tested:</h4>
- Windows XP / 2000 / 98 </div>
<div id="sidebar">
<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
<caption>
<a href="http://www.free-css.com/" title="previous month" class="nav">«</a> March<a href="http://www.free-css.com/" title="next month" class="nav">»</a>
</caption>
<tr>
<th scope="col" abbr="Sunday" title="Sunday">S</th>
<th scope="col" abbr="Monday" title="Monday">M</th>
<th scope="col" abbr="Tuesday" title="Tuesday">T</th>
<th scope="col" abbr="Wednesday" title="Wednesday">W</th>
<th scope="col" abbr="Thursday" title="Thursday">T</th>
<th scope="col" abbr="Friday" title="Friday">F</th>
<th scope="col" abbr="Saturday" title="Saturday">S</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td >6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><a href="http://www.free-css.com/">10</a></td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td><a href="http://www.free-css.com/">13</a></td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td><a href="http://www.free-css.com/">23</a></td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="today"><a href="http://www.free-css.com/">31</a></td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<h3>Memorial Day</h3>
<p> Always the first big family get together of the season
outdoors.
A beautifull spot along the mississippi <a href="http://www.free-css.com/">read....</a></p>
<h3>4th of July</h3>
<p> Well because of the little incident with uncle Johns
barn last year we have to re think the setting off our own fire works
thing. <a href="http://www.free-css.com/">read....</a></p>
<h3> Look ma! <br />
no Lorem ipsum</h3>
<p> Well I thought I would give it a shot and use real text
for this design because sometimes the best filler text for a design is actual text . </p>
</div>
<div id="footer"> <strong>By Coollew</strong> </div>
</div>
</body>
</html>
Related examples in the same category