the-synopsis
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Synopsis</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
//////////////////////////////////////////////////////////////////////////
Gordon Mackay. All rights reserved.
Use at your own risk. Your server may blow up and browsers may fail miserably.
//////////////////////////////////////////////////////////////////////////
Please see the Creative Commons License at:
http://creativecommons.org/licenses/by-sa/2.0/
*/
body {
background: #FFFFFF;
color: #333333;
font: 62.5% Arial, Helvetica, sans-serif;
margin: 20px 0 20px 0;
padding: 0;
text-align: center;
}
h1,h2,h3,h4 {
background: transparent;
color: #4D6B6D;
line-height: 1.2em;
margin: 0 0 .5em 0;
padding: 0;
}
h1 {
font-size: 2em;
margin-top: .5em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.9em;
}
.post h2 {
background: url(the-synopsis-i/gm_posthdbg.jpg) no-repeat left center;
padding: 0 0 0 25px;
}
#blogheading {
height: 52px;
margin: 0 0 30px 0;
position: relative;
width: auto;
}
#blogheading span {
background: url(the-synopsis-i/gm_synopsis.jpg) no-repeat;
height: 100%;
position: absolute;
width: 100%;
}
#siding {
height: 52px;
margin: 0 0 30px 0;
position: relative;
width: auto;
}
#siding span {
background: url(the-synopsis-i/gm_sidebarhead.jpg) no-repeat;
height: 100%;
position: absolute;
width: 100%;
}
li, dd, blockquote, table, label, p, form {
font-size: 1.1em;
line-height: 1.5;
}
img {
border: 0 none;
}
table {
border: 1px solid #889A9E;
border-collapse: collapse;
}
td, th {
font-size: 1.1em;
padding: 6px;
text-align: left;
vertical-align: top;
}
thead {
background: #ECEEF0;
color: #8C9B9E;
}
a:link {
background: transparent;
color: #546D71;
}
a:visited {
background: transparent;
color: #000000;
}
a:hover,a:focus,a:active {
background: transparent;
color: #000000;
}
ul {
list-style: none;
margin: 1em 0 1em 0;
padding: 0;
}
ul li {
background: url(the-synopsis-i/gm_ulbul.gif) no-repeat left center;
padding: 0 0 0 17px;
}
dl dd {
padding: 0 0 0.8em 0;
}
dl dt {
font-weight: bold;
}
blockquote {
font-style: italic;
}
blockquote strong {
background: transparent;
color: #8C9B9E;
font-weight: bold;
text-transform: none;
}
cite {
font-weight: bold;
letter-spacing: 0.2em;
}
input {
background: transparent;
border: 1px solid #546D71;
color: #8C9B9E;
font-size: 1.1em;
margin: 0.5em 0 0.5em 0;
}
textarea {
background: transparent;
border: 1px solid #546D71;
color: #8C9B9E;
margin: 0.5em 0 0.5em 0;
}
select {
background: #FFFFFF;
border: 1px solid #546D71;
color: #8C9B9E;
font-size: 1.1em;
margin: 0.5em 0 0.5em 0;
}
fieldset {
border: 1px solid #546D71;
margin: 0;
padding: 1em;
}
legend {
background: transparent;
color: #8C9B9E;
font-size: 1.2em;
letter-spacing: 1px;
line-height: 1em;
margin: 0;
padding: 0.5em;
text-transform: uppercase;
}
div.codeholder {
height: 100px;
margin: 1em 0 1em 0;
overflow: auto;
padding: 10px;
width: 320px;
}
code,pre {
background: transparent;
color: #000000;
font: 14px normal monospace, sans-serif;
margin: 0 0 1em 0;
padding: 1em 0 1em 0;
}
code strong {
background: transparent;
color: #333333;
font-weight: bold;
text-transform: none;
}
#wrapper {
background: url(the-synopsis-i/gm_wrapbg.jpg) repeat-y;
border-bottom: 7px solid #546D71;
border-top: 7px solid #546D71;
margin: 0 auto;
padding: 0 7px 0 7px;
text-align: left;
width: 700px;
w\idth: 686px;
}
#logo {
height: 293px;
margin: 0;
padding: 0;
position: relative;
}
#navigation {
height: 49px;
margin: 0;
padding: 0;
}
#navigation img {
margin: 0;
padding: 0;
}
#skipnav {
left: 10px;
margin: 0;
padding: 0;
position: absolute;
top: 270px;
}
#skipnav a {
color: #FFFFFF;
font-size: .8em;
}
#left {
float: left;
width: 386px;
}
#content-left {
padding: 0 14px 6px 14px;
font-size: 1.1em;
}
#right {
float: right;
width: 293px;
}
#content-right {
padding: 14px 14px 6px 14px;
font-size: 1em;
}
#datemainpage {
color: #8C9B9E;
font-size: .9em;
letter-spacing: .1em;
margin-top: -.8em;
text-transform: uppercase;
}
#downloadsbox {
border: 1px solid #546D71;
margin: 0;
padding: .5em;
}
#downloadsbox p {
font-size: 1.1em;
}
#footer {
border-top: 4px solid #546D71;
clear: both;
font-size: 9px;
line-height: 1.2em;
padding: 16px 0 0 10px;
text-transform: uppercase;
}
.clearit {
clear: both;
height: 0;
margin: 0;
padding: 0;
}
.post {
border-bottom: 1px solid #DDDDDD;
margin: 0 0 1em 0;
padding: 0 0 1em 0;
}
.date {
color: #666666;
font-size: 0.9em;
margin: 0;
padding: 0 0 .2em 0;
text-transform: uppercase;
}
p.comment {
display: block;
margin: 0;
}
.bolden {
font-weight: bold;
}
.noborder {
border: 0 none;
}
img.photo {
border: 1px solid #546D71;
margin: 4px;
padding: 4px;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
<script type="text/javascript" src="j/gm.js"></script>
<meta http-equiv="imagetoolbar" content="false" />
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="logo">
<p id="skipnav"><a href="#contentmain">Skip Navigation</a></p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="386" height="293" title="Gordonmac">
<param name="movie" value="the-synopsis-i/logo.swf" />
<param name="quality" value="high" />
<embed src="the-synopsis-i/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="386" height="293"></embed>
</object>
</div>
<div id="navigation"><a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_nav1.jpg" alt="" width="98" height="49" /></a><a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_nav2.jpg" alt="" width="100" height="49" /></a><a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_nav3.jpg" alt="" width="100" height="49" /></a><a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_nav4.jpg" alt="" width="88" height="49" /></a></div>
<div id="content-left">
<h1 id="contentmain">The Synopsis</h1>
<p>We tell ourselves that our life will be complete when our spouse gets his or her act together, when we get a nicer car, are able to go on a nice vacation, when we retire. The truth is, there's no better time to be happy than right now. If not now, when? Your life will always be filled with challenges.</p>
<div id="downloadsbox">
<h2>Free Downloads</h2>
<p>You may use these files freely for either client projects or personal home pages.</p>
<p>Enjoy. </p>
</div>
<p>We tell ourselves that our life will be complete when our spouse gets his or her act together, when we get a nicer car, are able to go on a nice vacation, when we retire. The truth is, there's no better time to be happy than right now. If not now, when? Your life will always be filled with challenges.</p>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<p>It's best to admit this to yourself and decide to be happy anyway. One of my favorite quotes comes from Alfred D Souza. He said, "For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life."</p>
<p>So stop waiting until you finish school, until you go back to school, until you lose ten pounds, until you gain ten pounds, until you have kids, until your kids leave the house, until you start work, until you retire, until you get married, until you get divorced, until Friday night, until Sunday morning, until you get a new car or home, until your car or home is paid off, until spring, until summer, until fall, until winter, until you are off welfare, until the first or fifteenth, until your song comes on, until you've had a drink, until you've sobered up, until you die, until you are born again to decide that there is no better time than right now to be happy...</p>
<p>Happiness is a journey, not a destination.</p>
</div>
</div>
<div id="right">
<div id="content-right">
<div id="blogheading">
<h2><span></span>The Synopsis</h2>
</div>
<div class="post">
<h2>Blog Title</h2>
<p class="date">[ Posted in “Whatever” on 29 January 2005 </p>
<p class="comment"><a href="http://www.free-css.com/">Comment (2)</a> | <a href="http://www.free-css.com/">Read Entire Entry</a></p>
</div>
<form method="get" name="search" id="search" action="http://www.free-css.com/">
<fieldset title="Find Stuff">
<legend>Find Stuff</legend>
<p>Use this form to search through the blog entries.</p>
<label for="blog_item">Search Archives</label>
<br />
<input type="text" name="blog_item" id="blog_item" value="" size="25" />
<br />
<input type="hidden" name="srchgordonmac" value="srchgordonmac" />
<input type="image" class="noborder" src="the-synopsis-i/gm_gobut.jpg" alt="Search The Archives" />
</fieldset>
</form>
<p><a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_rssbut.jpg" alt="" width="34" height="18" /></a> <a href="http://www.free-css.com/"><img src="the-synopsis-i/gm_archives.jpg" alt="" width="100" height="18" /></a></p>
<h3>Test Code Purity</h3>
<p><a target="_blank" href="http://validator.w3.org/check/referer">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
</div>
<br class="clearit" />
</div>
</body>
</html>
Related examples in the same category