purgatory_shuffle
?<!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: purgatory shuffle by pogy366 - Sept. 2005 */
/******* structure and layout *******/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #eeeeee;
background: #161B13;
margin:0 0 0 0;
padding:0 0 0 0;
background: #161B13 url(purgatory_shuffle-images/header.jpg) no-repeat;
background-position:0px 3px;
}
.wrap {
position:relative;
width:780px;
margin:188px 0 0 0;
padding:0 0 0 0;
text-align:left;
}
.pagetitle {
position:absolute;
clear:both;
top:20px;
left:0;
width:200px;
margin:-160px 0 0 15px;
padding:0 0 0 0;
text-align:left;
line-height:.5em;
background:transparent;
}
.header {
position:relative;
clear:none;
width:769px;
margin:0 0 0 0;
padding:0 5px 1px 5px;
text-align:left;
font-size:8pt;
border-top:1px solid #67738D;
border-bottom:1px solid #67738D;
border-right:1px solid #67738D;
letter-spacing:.3em;
background:#454E61;
}
.news {
position:relative;
float:right;
margin:-1px 0 5px 5px;
padding:0 5px 10px 10px;
width:240px;
/*background:#67738D;*/
background:#454E61;
text-align:left;
color:#CBD5EA;
font-size:8pt;
border:1px solid #67738D;
border-top:none;
}
.left_content {
position:relative;
margin:6px 0 0 8px;
padding:0 0 0 0;
width:500px;
background:#161B13;
text-align:left;
color:#eeeeee;
font-size:9pt;
line-height:1.7em;
}
/******* top navigation *******/
#nav ul{
padding:0 0 0 0;
margin:0 0 0 0;
white-space: nowrap;
color:#ffffff;
float:left;
width:100%;
background:transparent;
list-style:none;
}
#nav ul li{
display:inline;
list-style:none;
}
#nav ul li a{
margin: 0 0 0 0;
padding: .1em 1em .1em .5em;
background-color: #454E61;
color: #CED6E2;
text-decoration:none;
float: left;
border-left:1px solid #454E61;
border-right:1px solid #454E61;
}
#nav ul li a:hover{
background-color: #555E72;
color: #cccc99;
text-decoration:none;
border-left:1px solid #67738D;
border-right:1px solid #67738D;
}
#nav a.nav, #nav a.nav:hover {
background-color: #67738D;
color: #000000;
text-decoration:none;
}
/******* fonts and colors *******/
a {
color:#CCD8F2;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
a:visited {
color:#999999;
text-decoration:underline;
}
#news a {
color:#eeeeee;
text-decoration:underline;
}
#news a:hover {
color:#cccccc;
text-decoration:none;
}
#pagetitle {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:28pt;
color:#CCCC99;
letter-spacing:-.1em;
}
.pagedescription {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#ffffff;
letter-spacing:.2em;
}
.right_title {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#CCCC99;
letter-spacing:.2em;
text-transform:uppercase;
}
.left_title {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
color:#CCCC99;
letter-spacing:.2em;
text-transform:uppercase;
}
/******* 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 : purgatory shuffle</title>
</head>
<body>
<div class="wrap clearfix">
<div class="pagetitle clearfix" id="pagetitle">culture shock<br />
<span class="pagedescription">purgatory shuffle & other regrets in the afterlife</span></div>
<div class="header clearfix" id="nav">
<ul>
<li><a href="#">:home</a></li>
<li><a href="#">:about</a></li>
<li><a href="#">:forum</a></li>
<li><a href="#">:design</a></li>
<li><a href="#">:info</a></li>
<li><a href="#">:contact</a></li>
</ul>
</div>
<div class="news" id="news"><p><span class="right_title">News</span><br />
<strong>›› 09/27/87</strong><br />
Bought another shirt yesterday. Suprise, it's black.</p>
<p><strong>›› 09/20/87</strong><br />
Been listening to Depeche Mode's "Music for the Masses" continuously for the past 16 days. I'm still good for another 10.</p>
<p><strong>›› 08/14/87</strong><br />
Since I last checked, Morrissey is still a god.</p>
<p><span class="right_title">Other Designs</span><br />
Including this design, there are now a whopping two templates in the Culture Shock archive.</p>
<p>Check out <a href="http://www.dbfnetwork.info/cultureshock/">Tinfoil Helmet</a>.</p>
</div>
<div class="left_content cleafix">
My sophmore attempt at an open source design/template for OSWD is themed to a throw-back to my high school days of depressed introspection and angst fueled by a soundtrack with songs from the Cure, Bauhaus and the Smiths. Damn it, i was goth before there was even the word goth. We were called freaks and rejects and we liked it!
<p>Wait... i'm sorry, i got a little carried away there for a minute.</p>
<p><span class="left_title">Web Geek Information</span><br />
<em>Purgatory Shuffle</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>
<p>The header image is a hefty 23KB and the .psd is in the images folder. Bend, fold, staple and manipulate the image at will.</p>
<p>Since <em>Purgatory Shuffle</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>
<p><span class="left_title">Now For Some Dead Language</span><br />
Cui per ardentem sine fraude Troiam castus <a href="#">Aeneas patriae superstes</a> 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>
</body>
</html>
Related examples in the same category