thespring2
<!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>The Spring</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
* { margin: 0; padding: 0; text-decoration: none; border: 0; }
body { font: normal 0.7em Verdana, Sans-serif; background: #515151; }
#container { width: 44em; background: #d0cc73; }
#logo { position: absolute; top: 2em; left: 46em; }
#logo a:hover { background: none; }
#logo img { width: 16.1em; height: 7.9em; }
#top { position: absolute; top: 0; left: 0; }
#top img { width: 44em; }
#sidebar { width: 10em; position: absolute; top: 11em; left: 0; padding: 2em; }
#sidebar h2 { margin-top: -0.1em; }
#sidebar a:hover { color: #d0cc73; }
#body { width: 26em; padding: 12.7em 2em 2em 2em; margin-left: 14em; background: #fff; }
#message { padding: 0.01em 1em 1em 1em; background: #F6F5E3; }
#menu { position: absolute; top: 12.75em; left: 46em; width: 18em; }
#menu li { font: normal 1.2em Georgia, Helvetica, Sans-serif; letter-spacing: 0.15em; padding: 0; }
#menu li a { width: 5em; display: block; padding: 0; color: #808080; background: url("thespring2-images/div.menu.a.gif") 0 0.35em no-repeat; padding-left: 1em; }
#menu li.active a, #menu li.active a:hover { background: url("thespring2-images/div.menu.a.active.gif") 0 0.35em no-repeat; color: #fff; }
#menu li a:hover { background: url("thespring2-images/div.menu.a.hover.gif") 0 0.35em no-repeat; color: #999999; }
#menu span.underline { text-decoration: underline; }
#recommended { width: 10em; padding: 2em; position: absolute; top: 27.5em; left: 0; }
#recommended h2 { margin-top: 1.3em; }
h1 { font: normal 2em Georgia, Helvetica, Sans-serif; }
h2 { font: normal 1.4em Georgia, Helvetica, Sans-serif; margin: 0.75em 0 0.2em 0; color: #505050; }
p { line-height: 135%; margin-bottom: 0.5em; }
ul { list-style: none; }
li { margin-bottom: 0.3em; background: url("thespring2-images/li.gif") 0.1em 0.45em no-repeat; padding-left: 0.75em; }
acronym { border-bottom: 0.06em dotted #000; }
a { color: #706d29; padding: 0 0.1em 0 0.1em; }
a:hover { background: #706d29; color: #fff; }
img.out { width: 2.075ex; height: 1.2ex; }
</style>
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="styles/handheld.css" />
</head>
<body>
<div id="container">
<div id="logo"> <a href="http://www.free-css.com/"><img src="thespring2-images/logo.gif" width="180" height="88" alt="" /></a> </div>
<div id="top"> <img src="thespring2-images/top.gif" width="493" alt="" /> </div>
<div id="sidebar">
<h2> Where am I? </h2>
<p> You're on example page uses <acronym title="Open Source Web Design">OSWD</acronym> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> design's project. This template is publicized on <acronym title="Gnu is Not Unix">GNU</acronym> <acronym title="General Public License">GPL</acronym> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> license, so you can use and modify this work saving information about author. </p>
</div>
<div id="body">
<h1> About </h1>
<h2> How I can pay back? </h2>
<p> In simpliest way you can just write mail to me. <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> Otherwise it's possible to send me some money or aids. </p>
<p> I really don't intend to be mad to you, if you decide to help me with getting own computer <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, tablet <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, <a href="http://www.free-css.com/">digital camera</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> or <a href="http://www.free-css.com/">Adobe</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> <a href="http://www.free-css.com/">Creative Suite 2</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />. </p>
<p> Also I don't despise any work-offer or orders. </p>
<p> Do you want to know more? Just write me! <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> </p>
<div id="message">
<h2> Something important </h2>
<p> Currently I'm going to after scholarship and I need letters of commendation. </p>
<p> It's very essential for me. </p>
<p> If you're pleased of my work or it prove usable for you, write me an e-mail <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, please, and I'll send you my home address. </p>
<p> It's low cost, but it could affect on my whole life. </p>
</div>
<h2> Template </h2>
<p> It's simple, very usable and accessible project. </p>
<p> I dedicate it to my sweet girlfriend - Asia. </p>
<p> People think, that, if validators like Watchfire <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> WebXACT <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, say them, that their website is <a href="http://www.w3.org/WAI"><acronym title="Web Accessibility Initiative">WAI</acronym></a>'s <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> triple ,,A" valid, that's true. </p>
<p> In their opinion all disable people are using text web browsers. But what about people having eye-defect or using <acronym title="Personal Digital Assistant">PDA</acronym>-s, touch-pads or high resolution displays? </p>
<p> It's exactly secret of my designs - they're simple, but strongly accessible - even for those users. </p>
<h2> Author </h2>
<p> My name is Grzesiek and I'm sixteen years old Pole <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, who's interesting for <acronym title="Human-Computer Interaction">HCI</acronym>, usability, functionality and accessibility of <acronym title="World Wide Web">WWW</acronym>. </p>
<p> I'm not certificated specialist. It's just my whole life. </p>
<p> In my opinion Internet should be accessible for everyone, 'cause information should be free. That's why I, for example, support <a href="http://www.free-css.com/"><acronym title="Open Source Web Design">OSWD</acronym></a>. </p>
<p> I haven't dual 2.7Ghz <a href="http://www.free-css.com/">Apple</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> <a href="http://www.free-css.com/">PowerMac</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, <a href="http://www.free-css.com/">Adobe</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> <a href="http://www.free-css.com/">Photoshop CS 2</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, commercial <a href="http://www.free-css.com/">reports</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> contributed by <a href="http://www.free-css.com/">Nielsen Norman Group</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> or any books. I'm creating on lend laptop. My dream is <a href="http://www.free-css.com/">Apple</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> <a href="http://www.free-css.com/">PowerBook</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> <a href="http://www.free-css.com/">12"</a> <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" />, but it isn't possible to realize. </p>
<p> Anyway, I like that, what I do and I want do it in future. </p>
<p> I think, that <a href="http://www.free-css.com/"><acronym title="Open Source Web Design">OSWD</acronym></a> can help me in development my passion. </p>
<p> How? For example I can do for you, as <a href="http://www.free-css.com/"><acronym title="Open Source Web Design">OSWD</acronym></a>'s user, some design, report, application or implementation of some software. I already done some derivative works for a dozen poeple - in that for <a href="http://oswd.org"><acronym title="Open Source Web Design">OSWD</acronym></a>'s visitors. </p>
</div>
</div>
<div id="menu" title="Navigation">
<ul>
<li> <a href="http://www.free-css.com/" accesskey="h"><span class="underline">H</span>ome</a> </li>
<li> <a href="http://www.free-css.com/" accesskey="o"><span class="underline">O</span>ffer</a> </li>
<li class="active"> <a href="http://www.free-css.com/" accesskey="a"><span class="underline">A</span>bout</a> </li>
<li> <a href="http://www.free-css.com/" accesskey="c"><span class="underline">C</span>ontact</a> </li>
</ul>
</div>
<div id="recommended">
<h2> Recommended </h2>
<ul>
<li> <a href="http://www.free-css.com/"><acronym title="Open Source Web Design">OSWD</acronym></a> </li>
<li> <a href="http://www.free-css.com/">Grzesiek's photos</a> </li>
</ul>
<h2> Warning! </h2>
<p> You've 16-19 years, are inteligent, ambitious and speak good English? Want you take part with me in <a href="http://www.thinkquest.com">ThinkQuest</a>? <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> I'm waiting for you! <img src="thespring2-images/a.out.gif" class="out" width="12" height="7" alt="" /> </p>
</div>
</body>
</html>
Related examples in the same category