slight_amnesia
?<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter your description here." />
<meta name="keywords" content="enter, keywords" />
<meta name="author" content="Original design by pogy366 - http://www.raykdesign.net" />
<style type='text/css'>
/* culture shock: slight amnesia v1.0 by pogy366: http://www.raykdesign.net - Dec. 2005 */
/* general page structure and layout */
html, body {
height:100%;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:0 0 0 0;
padding:0 0 0 0;
background:#B9CC8B url(slight_amnesia-img/body_bg_green.jpg) repeat-y;
text-align:center;
}
#left_container {
position:absolute;
left:0;
top:0;
width:15em;
height:100%;
margin:0 0 0 0;
padding:0 0 0 0;
background:#9BAC72;
}
#left_quote {
position:relative;
left:0;
width:9.65em;
margin:0 0 0 0;
padding:.1em 5% .5em 5%;
background:#9BAC72;
font-size:1.3em;
font-style:italic;
color:#EAEEE0;
text-align:left;
}
#left_text {
position:relative;
width:16.7em;
margin:0 0 0 0;
padding:.5em 5% .5em 5%;
background:#9BAC72;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
text-align:left;
}
#right_container_outer {
position:absolute;
left:16.3em;
top:1em;
width:42em;
height:100%;
margin:0 0 0 0;
padding:0 0 0 0;
background:#B9CC8B url(slight_amnesia-img/navbar_fade.jpg) top repeat-x;
}
.navbar {
position:relative;
left:0;
top:0;
width:42em;
height:2em;
margin:0 0 0 0;
padding:0 0 0 0;
background:#ffffff;
}
#navbar_fade {
position:relative;
left:0;
top:0;
width:42em;
height:3em;
margin:0 0 0 0;
padding:0 0 0 0;
background:#CBD9A9 url(slight_amnesia-img/navbar_fade_green.jpg) top repeat-x;
border-left:1px solid #9CA97C;
border-right:1px solid #9CA97C;
}
#right_container_inner {
position:relative;
left:0;
top:0;
width:42em;
margin:0 0 0 0;
padding:0 0 .2em 0;
background:#CBD9A9;
border-left:1px solid #9CA97C;
border-right:1px solid #9CA97C;
}
#rci_left_column {
position:relative;
width:31em;
margin:-1em 0 0 .2em;
padding:0 1em 0 1em;
background:transparent;
font-size:.9em;
color:#000000;
text-align:left;
}
#rci_right_column {
position:relative;
float:right;
clear:both;
width:12.5em;
margin:0 1em 0 0;
padding:0 0 0 0;
background:#CBD9A9;
font-size:.8em;
color:#4F5936;
text-align:left;
}
#rci_right_column ul {
margin:.9em 0 0 1.4em !important;
margin:.9em 0 0 1.6em;
padding:0 0 0 0;
list-style-type:circle;
}
#rci_right_column li {
margin:0 0 .3em 0;
padding:0 0 0 0;
}
#footer {
position:relative;
width:48.9em;
height:2.5em;
margin:0 0 0 0;
padding:.3em .5em 0 0;
background:#B9CC8B;
border-top:1px solid #9CA97C;
font-size:.85em;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
text-align:right;
}
/* top navigation bar */
#nav ul{
padding:0 0 0 0;
margin: 0 0 0 0;
white-space: nowrap;
font-size:1em;
color:#000000;
float:left;
width:100%;
height:2em;
background:#B9CC8B;
list-style:none;
}
#nav ul li{
display:inline;
list-style:none;
}
#nav ul li a{
margin: 0 .4em 0 0;
padding: .4em 1em .46em 1em;
color:#7B885C;
font-weight:bold;
text-decoration:none;
float: left;
background:#CBD9A9;
border-left:1px solid #8EA459;
border-top:1px solid #8EA459;
border-right:1px solid #8EA459;
}
#nav ul li a:hover{
color:#000000;
background:#9CA97C;
font-weight:bold;
text-decoration:none;
}
#nav #current li {
color:#000000;
background:#EDE9E6;
}
#nav #current a {
color:#000000;
background:#9CA97C;
text-decoration:none;
}
/* font styles */
h2 {
font-family:Arial, Helvetica, sans-serif;
margin:0 0 -.3em 0;
padding:.8em 0 .5em 3.3em;
font-size:1.9em;
color:#000000;
background-image:url(slight_amnesia-img/leafs_green.jpg);
background-repeat:no-repeat;
background-position:.1em .1em;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
margin:0 0 -.8em;
padding:0 0 0 0;
font-size:1em;
color:#000000;
}
#rci_right_column h3 {
font-family:Arial, Helvetica, sans-serif;
margin:0 0 -.8em;
padding:0 0 0 0;
font-size:1.1em;
font-weight:bold;
color:#000000;
}
#left_text h3 {
font-family:Arial, Helvetica, sans-serif;
margin:0 0 -.7em;
padding:0 0 0 0;
font-size:1.2em;
color:#000000;
}
.small {
font-family:"Courier New", Courier, mono;
font-size:.85em;
text-transform:uppercase;
}
/* link styles */
#right_container_inner a {
color:#547699;
text-decoration:underline;
}
#right_container_inner a:hover {
color:#ffffff;
text-decoration:none;
}
/* images */
#logo {
margin:.5em 0 0 0;
width:15em;
height:14em;
}
img {
border:none;
}
/* misc styles */
blockquote {
margin:.3em .6em .7em .6em;
padding:.05em .5em .05em .5em;
background:#D2DEB6;
border:1px solid #9CA97C;
font-family:Arial, Helvetica, sans-serif;
color:#57692D;
}
/* workarounds and hacks */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<title>culture shock: slight amnesia</title>
</head>
<body>
<div id="left_container">
<img id="logo" alt="Leaves" src="slight_amnesia-img/leaves_brown.jpg" />
<div id="left_quote">"A nice spot to put an inspirational quote or poem to help set the mood."</div>
<div id="left_text">
<h3>Left Column</h3>
<p>Quaeque vos bubus veneratur albis clarus Anchisae Venerisque sanguis inpetret, bellante prior, iacentem lenis in hostem.</p>
<p>Iam mari terraque manus potentis Medus Albanasque timet securis, iam Scythae responsa petunt, superbi nuper, et Indi. Iam Fides et Pax et Honor Pudorque priscus et neglecta redire Virtus audet adparetque beata pleno Copia cornu.</p>
</div>
</div>
<div id="right_container_outer">
<div class="navbar" id="nav">
<ul>
<li id="current"><a href="#" title="Return Home">Home</a></li>
<li><a href="#" title="Learn About What This Means">About</a></li>
<li><a href="#" title="Speak Your Mind on the Forum">Forum</a></li>
<li><a href="#" title="Designs and Other Art">Design</a></li>
<li><a href="#" title="Site Information">Info</a></li>
<li><a href="#" title="Contact Information">Contact</a></li>
</ul>
</div>
<div id="navbar_fade"></div>
<div id="right_container_inner" class="clearfix">
<div id="rci_right_column">
<h3>Right Column</h3>
<p>Cui per ardentem sine fraude Troiam castus Aeneas patriae superstes liberum munivit iter, daturus plura relictis: di, probos mores docili iuventae, di, senectuti placidae quietem, Romulae genti date remque prolemque et decus omne.</p>
<p>Quaeque vos bubus veneratur albis <a href="#">clarus</a> Anchisae Venerisque sanguis inpetret, bellante prior, iacentem lenis in hostem. iam mari terraque manus potentis Medus Albanasque timet securis, iam Scythae responsa petunt, superbi nuper, et Indi. Iam Fides et Pax et Honor Pudorque priscus et neglecta redire <a href="#">Virtus audet</a> adparetque beata pleno Copia cornu.</p>
<h3>Links</h3>
<ul>
<li><a href="http://www.openwebdesign.org/" title="http://www.openwebdesign.org/">OWD</a></li>
<li><a href="http://www.oswd.org/" title="http://www.oswd.org/">OSWD</a></li>
<li><a href="http://www.alistapart.com/" title="http://www.alistapart.com/">A List Apart</a></li>
<li><a href="http://www.csszengarden.com/" title="http://www.csszengarden.com/">CSS Zen Garden</a></li>
</ul>
</div>
<div id="rci_left_column">
<h2>Slight Amnesia (v1.0)</h2>
<p>This is what I come up with when I start flinging code around with no real objective or vision. My main goal was to focus on overall accessibility and broswer text-resizing being as painless as possible.</p>
<p>There's a <a href="index2.html" title="Alternate Look">flipside to this design</a> with an alternate style sheet.</p>
<h3>What's Under the Hood?</h3>
<p><em>Slight Amnesia (v1.0)</em> was tested in Windows with Firefox1.0.7, IE6.0, Netscape7.2 and Opera7.54 and was built with valid <a href="http://jigsaw.w3.org/css-validator/" title="CSS Validator">css</a> and <a href="http://validator.w3.org/check?uri=referer" title="XHTML Validator">xhtml 1.0-strict</a> and conforms to section 508 and a <a href="http://www.w3.org/TR/WCAG10/" title="WCAG Information">WCAG 1.0 A</a> rating.</p>
<blockquote><p>As is, download time for 56k is 3.57 seconds; ISDN 128K at 1.23 seconds; T1 at .29 seconds and weighs in at 16.9KB.</p></blockquote>
<h3>Better Living Through Open Source Design</h3>
<p>This is an open source design originally developed for the OSWD community
and is free to be used and adpated as such.</p>
<p>You're not obligated in any way to credit me if you use this design, but a link back to either <a href="http://www.openwebdesign.org/userinfo.phtml?user=pogy366" title="Profile on OWD">OWD</a> or my <a href="http://www.raykdesign.net" title="http://www.raykdesign.net">website</a> would be more than enough.</p>
<p>If you want to send me feedback about this design or let me know what you've done with it, please contact me through the OWD with the above link. Thanks and good luck.</p>
<h3>Dead Text</h3>
<p>Quaeque vos bubus veneratur albis clarus Anchisae Venerisque sanguis inpetret, bellante prior, iacentem lenis in hostem. iam mari terraque manus potentis Medus Albanasque timet securis, iam Scythae responsa petunt, superbi nuper, et Indi. Iam Fides et Pax et Honor Pudorque priscus et neglecta redire Virtus audet adparetque beata pleno Copia cornu.</p>
</div>
</div>
<div id="footer">Copyright © 2005 - Site Name</div>
</div>
</body>
</html>
Related examples in the same category