face
<!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-gb" lang="en-gb">
<head>
<title>Face</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Gordonmac dot com | Version 12.0.
*********************************
These style-sheets, accompanying graphics and design are copyrighted.
That means YOU MAY NOT USE THEM!! If you are looking for free stuff please visit
the templates and PNG sections of the site instead.
----------------------------------------------- */
@media screen {
* { font-size: 100%; margin: 0; padding: 0; }
html { height: 100%; }
body { background: url(face-i/GM12_bg_body.jpg) #FFFFFF repeat-x 0 0; color: #666666; font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; min-width: 810px; }
p, ul, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, form, input, textarea, blockquote, pre, table { margin: 0 0 .5em 0; }
/* =Headings - Generic styles
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { background: transparent; color: #50514B; font-weight: normal; letter-spacing: .1em; }
#content h2 { font-size: 1.4em; }
#content h3 { font-size: 1.2em; }
#content h4 { font-size: 1em; }
#content h5{ font-size: 1em; }
#content h6 { font-size: 1em; }
/* =Anchors
----------------------------------------------- */
a img { border: none; }
a:link { background: transparent; color: #666666; }
a:visited, a:hover, a:focus, a:active { background: transparent; color: #000000; }
/* =Lists
----------------------------------------------- */
#content ol { list-style-position: inside; list-style-type: lower-roman; }
#content ul { list-style-type: none; }
#content ul li { background: transparent; }
#content dt { font-weight: bold; }
#validation li { display: inline; margin-right: 4px; }
/* =Wrappers
----------------------------------------------- */
#wrapper-a { background: transparent url(face-i/GMV12_bg_wrappera.jpg) no-repeat 793px 44px; border-bottom: 10px double #505148; width: auto; }
#wrapper-b { border-bottom: 10px solid #505148; width: auto; }
#wrapper-c { background: transparent url(face-i/GM12_bg_wrapper.jpg) repeat-y 0 0; text-align: left; width: 788px; }
#content { background: transparent url(face-i/GM12_bg_content.jpg) no-repeat 0 0; width: auto; }
/* =Heading
----------------------------------------------- */
#heading { position: relative; }
#heading h1, #heading h2 { left: -9999px; position: absolute; }
#homebutton { left: 52px; position: absolute; text-indent: -9999px; top: 38px; }
#homebutton a { background: url(face-i/GMV12_bg_homebutton.jpg) no-repeat 0 0; display: block; height: 33px; overflow: hidden; width: 33px; }
/* =General layout
----------------------------------------------- */
#content-a { float: left; width: 386px; }
#content-a-inner { padding: 233px 20px 0 66px; }
#content-b { float: left; width: 402px; }
#content-b-inner { padding: 45px 20px 0 5px; }
#footer { background: transparent url(face-i/GM12_bg_footer.jpg) no-repeat 0 0; clear: both; height: 50px; text-indent: -9999px; }
/* =Main Navigation
----------------------------------------------- */
#nav-main{ background: url(face-i/GM12_bg_nava.jpg) #FFFFFF no-repeat 0 100%; list-style-type: none; padding-bottom: 38px; }
#nav-main li { margin: 0; }
#nav-main li a { display: block; height: 23px; overflow: hidden; text-indent: -9999px; width: 184px; }
#nav-main-about a { background: url(face-i/GM12_bg_nava_about.jpg) no-repeat 0 0; }
#nav-main-downloads a { background: url(face-i/GM12_bg_nava_downloads.jpg) no-repeat 0 0; }
#nav-main-tutorials a { background: url(face-i/GM12_bg_nava_tutorials.jpg) no-repeat 0 0; }
#nav-main-contact a { background: url(face-i/GM12_bg_nava_contact.jpg) no-repeat 0 0; }
#nav-main-about a:hover, #nav-main-about a:focus, #nav-main-about a:active, #nav-main-downloads a:hover, #nav-main-downloads a:focus, #nav-main-downloads a:active, #nav-main-tutorials a:hover, #nav-main-tutorials a:focus, #nav-main-tutorials a:active, #nav-main-contact a:hover, #nav-main-contact a:focus, #nav-main-contact a:active { background-position: -280px 0; }
/* =Forms
----------------------------------------------- */
label { background: transparent; color: #999999; display: block; }
label span { background: transparent; color: #D1E010; font-size: .8em; text-transform: uppercase; }
input, textarea, select { background: transparent url(face-i/GM12_form_inputtext.jpg) repeat-x 0 0; border: 1px solid #DDDDDD; color: #666666; display: block; font: .9em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; margin-top: .5em; -moz-border-radius: 4px; padding: 2px; }
#contactform table td { padding: 0; }
#contactform-name, #contactform-email, #contactform-subject, #contactform-message { width: 180px; }
#contactform-subject, #contactform-message { width: 369px; }
#contactform-message { height: 140px; }
#subscribe-name, #subscribe-email { width: 200px; }
input.imagesubmit { border: none; margin: 0; padding: 0; }
/* =Quotations
----------------------------------------------- */
blockquote { font-style: normal; margin-left: 10px; margin-right: 10px; text-indent: -.7em; }
blockquote cite { display: block; font-style: normal; margin: .5em 0 0 .6em; }
q { color: #999999; font-style: italic; }
/* =Code
----------------------------------------------- */
code, pre, var { background: transparent; color: #50514B; font: 1em Pragmata, "Courier New", Courier, monospace; }
pre { background: #FFFFFF; border: 1px solid #DDDDDD; height: auto; -moz-border-radius: 4px 4px 0 0; overflow: -moz-scrollbars-horizontal; overflow: auto; padding: 4px; width: 367px; }
pre.php { color: #B22222; }
pre.php span.comment { color: #FFA500 !important; }
pre.php var { color: #333333; }
pre.html span.comment { color: #999999 !important; }
/* =Misc. Text Formatting
----------------------------------------------- */
kbd { background: transparent; color: #000000; font: 1em Pragmata, "Courier New", Courier, monospace; }
del { background: transparent; color: #DDDDDD; }
ins { background: transparent; color: #333333; text-decoration: underline; }
/* =Warnings and notes
----------------------------------------------- */
p.note-general, p.note-warning { background: transparent; border: 1px solid #DDDDDD; color: #999999; font-size: .9em; padding: 2px 4px 2px 34px; }
p.note-general { background: url(face-i/GM12_note_general.gif) no-repeat 8px 4px; }
p.note-warning { background: url(face-i/GM12_note_warning.gif) no-repeat 8px 4px; }
p.note-general:before { background: transparent; color: #50514B; content: 'Note: '; font-weight: bold; }
p.note-warning:before { background: transparent; color: #FF6347; content: 'Warning: '; font-weight: bold; }
p.note-general:hover { border: 1px solid #D1E010; color: #666666; }
p.note-warning:hover { border: 1px solid #FF6347; color: #666666; }
}
@media print {
body { background: #FFFFFF; color: #333333; font: 8pt Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6, code, pre { color: #333333; }
h2 { font-size: 10pt; }
h3 { font-size: 9pt; }
h4, h5, h6 { font-size: 8pt; }
abbr, acronym { border-bottom: none; }
abbr:after, acronym:after { content: ' (' attr(title) ') '; }
a:after { content: ' (' attr(href) ') '; }
a { color: #333333; text-decoration: none; }
#nav-main, form { display: none; }
#heading { border-bottom: 2px solid #666666; }
}
</style>
<!--[if IE 6]>
<style type="text/css">
#content { height: 1em; }
pre{ overflow: auto; overflow-y: hidden;}
</style>
<![endif]-->
</head>
<body id="gordonmac-com" class="home">
<div id="wrapper-a">
<div id="wrapper-b">
<div id="wrapper-c">
<div id="content">
<div id="heading">
<h1>Free CSS Templates</h1>
<h2><q>HTML TEMPLATES & OTHER SILLY THINGS</q></h2>
<p id="homebutton"><a href="http://www.free-css.com/">Home Page</a></p>
</div>
<div id="content-a">
<div id="content-a-inner">
<ul id="nav-main">
<li id="nav-main-about"><a href="http://www.free-css.com/">Home</a></li>
<li id="nav-main-downloads"><a href="http://www.free-css.com/">Downloads</a></li>
<li id="nav-main-tutorials"><a href="http://www.free-css.com/">Tutorials</a></li>
<li id="nav-main-contact"><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h2>About this site </h2>
<p>This web site belongs to Gordon Mackay, a hobbyist web developer from the Highlands of Scotland.</p>
<p>The site offers several resources for web developers. Those resources include free HTML/CSS templates, free Macromedia Fireworks PNG files and some PHP scripts.</p>
<h2>Additional Pages</h2>
<ul>
<li><a href="http://www.free-css.com/">Colophon</a></li>
<li><a href="http://www.free-css.com/">Accessibility</a></li>
<li><a href="http://www.free-css.com/">Linkage (sites and people I like)</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
</ul>
<h2>Updates</h2>
<form id="subscribeform" method="post" action="index.htm">
<div>
<label>Your Name:
<input type="text" name="subscribe-name" id="subscribe-name" />
</label>
<label>Your Email:
<input type="text" name="subscribe-email" id="subscribe-email" />
</label>
<input type="image" alt="send message" class="imagesubmit" onmouseover="this.src='face-i/GM12_form_subscribe_over.jpg';" onmouseout="this.src='face-i/GM12_form_subscribe.jpg';" src="face-i/GM12_form_subscribe.jpg" />
</div>
</form>
<p>Subscribe via <a href="http://www.free-css.com/">RSS</a></p>
<h2>A Quick Note</h2>
<p>This site is built to be as accessible as possible to the people who visit, it uses the most modern code available to web developers to ensure this is possible.</p>
<ul id="validation">
<li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
<li><a href="http://www.free-css.com/">RSS</a></li>
<li>By <a href="http://www.gordonmac.com/">Gordon Mackay</a></li>
</ul>
</div>
</div>
<div id="content-b">
<div id="content-b-inner">
<h2 id="mainheading">Welcome</h2>
<p>We convince ourselves that life will be better after we get married, have a baby, then another. Then we are frustrated that the kids aren't old enough and we'll be more content when they are. After that we're frustrated that we have teenagers to deal with. We will certainly be happy when they are out of that stage.</p>
<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>
<p>It's best to admit this to yourself and decide to be happy anyway. One of my favourite 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>
<h3>Contact Me </h3>
<form id="contactform" method="post" action="http://www.free-css.com/">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><label for="contactform-name">Name: <span>(required)</span></label>
<input type="text" name="contactform-name" id="contactform-name" />
</td>
<td><label for="contactform-email">Email Address: <span>(required)</span></label>
<input type="text" name="contactform-email" id="contactform-email" />
</td>
</tr>
<tr>
<td colspan="2"><label for="contactform-subject">Subject: <span>(required)</span></label>
<input type="text" name="contactform-subject" id="contactform-subject" />
</td>
</tr>
<tr>
<td colspan="2"><label for="contactform-message">Message: <span>(required)</span></label>
<textarea cols="50" rows="10" id="contactform-message"></textarea>
<input type="image" alt="send message" class="imagesubmit" onmouseover="this.src='face-i/GM12_form_submit_over.jpg';" onmouseout="this.src='face-i/GM12_form_submit.jpg';" src="face-i/GM12_form_submit.jpg" />
</td>
</tr>
</tbody>
</table>
</form>
<p>This perspective has helped me to see that there is no way to happiness. Happiness is the way. So, treasure every moment that you have. And treasure it more because you shared it with someone special, special enough to spend your time... and remember that time waits for no one...</p>
<h3>Headings</h3>
<p>So stop <q>waiting until you finish school</q>, 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="footer">
<p id="copyright">© 2005 Gordon Mackay. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category