tinfoil_helmet
?<!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="#" />
<meta name="keywords" content="#" />
<meta name="author" content="#" />
<style type='text/css'>
/* culture shock: tinfoil by pogy366 - Sept. 2005 */
/******* structure and layout *******/
body {
font-family:"Courier New", Courier, sans-serif;
font-size: 8pt;
color: #000000;
background: #ffffff;
margin:0 0 0 0;
padding:0 0 0 0;
background: #ffffff url(tinfoil_helmet-images/tinfoil_header.jpg) no-repeat;
}
.wrap {
position:relative;
width:770px;
margin:175px 0 0 0;
padding:0 0 0 0;
text-align:right;
}
.header {
position:relative;
clear:none;
width:570px;
height:50px;
margin:150px 0 0 200px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:right;
}
.header_title {
position:absolute;
clear:both;
top:0px;
right:0px;
width:500px;
margin:-120px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#000000;
text-align:right;
/*line-height:1em;*/
}
.leftnav {
position:relative;
clear:none;
width:200px;
margin:55px 0 0 10px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:left;
line-height:2em;
}
.rightarea {
position:relative;
float:right;
clear:none;
width:535px;
margin:0 0 0 0;
padding:0 5px 0 5px;
border-left: #eeeeee 2px solid;
background:#ffffff;
color:#000000;
text-align:left;
font-size:9pt;
}
/******* fonts and links *******/
a {
color:#F0A434;
text-decoration:none;
background:#ffffff;
}
a:hover {
color:#F0A434;
text-decoration:underline;
background:#ffffff;
line-height:1em;
}
#over a {
color:#818181;
text-decoration:overline;
background:#ffffff;
}
#over a:hover {
color:#F0A434;
text-decoration:none;
background:#ffffff;
}
#grey {
color:#818181;
background:#ffffff;
}
.news_date {
color:#818181;
font-weight:bold;
background:#ffffff;
}
.rightarea h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11pt;
color:#F0A434;
background:#ffffff;
}
.leftnav strong {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9pt;
color:#000000;
background:#ffffff;
}
.pagetitle {
font-family:Arial, Helvetica, sans-serif;
font-size:24pt;
font-weight:bold;
letter-spacing:.4em;
color:#F0A434;
background:transparent;
}
.pagedescription {
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
letter-spacing:.2em;
color:#B48540;
background:transparent;
}
/******* 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 : tinfoil helmet</title>
</head>
<body>
<div class="wrap clearfix">
<div class="header_title clearfix"><span class="pagetitle">culture shock</span><br />
<span class="pagedescription">tinfoil helmet</span></div>
<div class="header clearfix" id="over"><a href="#">home</a> . <a href="#">about</a> . <a href="#">forum</a> . <a href="#">design</a> . <a href="#">info</a> . <a href="#">contact</a></div>
<div class="rightarea clearfix">
<h2>Welcome</h2>
This is my first attempt at creating a design/template for public consumption. It's rather a bare-bones design for a number of reasons, the biggest being that i'm still a novice at css and i'm lacking in the fancy-pants eye candy you see from better designers.
<p>In any case, it's a start for me and i hope someone, anyone, can use it if even for a retro-fit or basis for their own design.</p>
<h2>Geek Stuff About the Design</h2>
<em>Tinfoil Helmet</em> was tested on a Windows machine with Firefox1.0.7, IE6.0, Netscape7.2 and Opera7.54 with valid css and xhtml 1.0-strict.
<p>The header image is a whopping 17.24KB, with the .psd included in the images folder. Bend, fold, staple and manipulate the image at will.</p>
<p>Since <em>Tinfoil Helmet</em> is open source, you're free to take it and do what you please. If you're feeling the design, let me know about it at <a href="mailto:rkrause@dbfnetwork.info">rkrause@dbfnetwork.info</a>.</p>
<h2>Now For Some Dead Language Text</h2>
<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 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 class="leftnav clearfix" id="grey">
<strong>news ››</strong><br />
<span class="news_date">09/26/05:</span><br />
Picking up more signals from <a href="#">Planet Xia-0745</a>, prompting me to add several more layers of signal-screening tinfoil to the helmet. It's so heavy that it makes my neck sore, but the signals are greatly reduced making it worth the stress.
<p><span class="news_date">09/25/05:</span><br />
Mail man delivered yet another envelope containing a tracking device, this time tucked inside the pages of a Victoria's Secret catalog. Sutdied the catalog many, many, many times to be sure no other tracking devices were overlooked.</p>
</div>
</div>
</body>
</html>
Related examples in the same category