DarkFusion
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dark Fusion</title>
<style type='text/css'>
body {
background : #333 url(http://www.sirbastian.com/DarkFusion-websiteimages/bg2.gif) repeat 50% 0%;
color : #B0B0B0;
margin : 1em 2em;
padding : 1em 2em;
}
DIV.programlisting {
background-color: #efefff; padding: 10px; border: 1px solid #aaaaaa; margin: 5px;
}
/* Links */
a:link, a:visited {
text-decoration : none;
color : #75a4c6;
background : transparent;
}
a:hover {
text-decoration : none;
border-bottom : 1px dotted ;
background: url("http://www.sirbastian.com/DarkFusion-websiteimages/linkpulse.gif");
}
/* Menu Links */
div#menu a, div#menu a:visited {
display : block;
width : 92%;
border : 1px solid #333;
color : #75A4C6;
background : #222;
padding-left: 5px;
margin: 3px 3px 0px 3px;
letter-spacing : 1px;
text-transform: lowercase;
}
div#menu a:hover {
display : block;
width : 92%;
border : 1px solid #60BFD5;
color : #000;
background : #4aa9bf;
padding-left: 5px;
margin: 3px 3px 0px 3px;
letter-spacing : 1px;
text-transform: lowercase;
}
div.submenu a, div.submenu a:visited {
display : block;
width : 87% !important;
border : 1px solid #3C3C3C !important;
color : #75A4C6;
background : #303030 !important;
padding-left: 5px;
margin: 3px 3px 0px 10px !important;
letter-spacing : 1px;
text-transform: lowercase;
}
div.submenu a:hover {
display : block;
width : 87%;
border : 1px solid #60BFD5 !important;
color : #000;
background : #4aa9bf !important;
padding-left: 5px;
margin: 3px 3px 0px 10px;
letter-spacing : 1px;
text-transform: lowercase;
}
div.stats {
display : block;
width : 87% !important;
border : 1px solid #3C3C3C !important;
color : #75A4C6;
background : #303030 !important;
padding-left: 5px;
margin: 3px 3px 0px 10px !important;
letter-spacing : 1px;
text-transform: lowercase;
}
.button {
border: 0px !important;
color: inherit;
background: transparent !important;
}
.button:hover {
color: inherit;
border: 0px !important;
background: transparent !important;
position: relative;
top: 1.5px;
}
/* Footer and Comment Links */
#footer a:link, .news-date a:link, #footer a:visited, .news-date a:visited {
text-decoration : none;
color : #777;
background : transparent;
font-weight:bold;
}
#footer a:hover, .news-date a:hover {
text-decoration : none;
border-bottom : 1px dotted ;
}
/* Header */
div#header {
color : inherit;
height : 8em;
background : #12130e url(http://www.sirbastian.com/DarkFusion-websiteimages/bannercode2.gif) repeat 100% 0%;
border : 1px solid #666;
}
div.title {
padding : 5em 1em 1em;
text-transform : lowercase;
font-weight : bold;
letter-spacing : 2px;
color : #e4e8eb;
background : transparent;
}
div.title:first-letter {
font-style : italic;
font-size : 200%;
letter-spacing : 1px;
text-transform : uppercase;
}
div.bar-l {
position : absolute;
left : 4em;
background : #141414;
color : #888;
border-style : solid;
border-color : #666;
border-width : 0 0 0 1px;
letter-spacing : 3px;
font-weight : bold;
padding-left : 5px;
line-height : 20px;
}
div.bar-r {
background : #141414;
color : #777;
border-style : solid;
border-color : #666;
border-width : 0 1px 1px;
padding : 0px 5px 0 0;
line-height : 20px;
text-align: right;
letter-spacing: 1px;
}
.text {
color : #777;
letter-spacing : 1px;
font-weight : normal;
text-transform : lowercase;
text-decoration : none;
background : #141414;
}
/* Forms */
form.scheme {
height : 16px;
margin : 0;
text-align : right;
}
#search {
position : absolute;
left : 3px;
margin-top: 1em;
text-align: center !important;
line-height : 20px;
color : #B0B0B0;
}
input, textarea, select {
border: #666 1px solid;
font: 100% Verdana, Tahoma, Helvetica, sans-serif;
background: #141414;
color: #ccc;
}
/* Menu */
div#menu {
font-family : Tahoma, Verdana, Helvetica, sans-serif;
position : absolute;
left : 4em;
width : 164px;
line-height : 16px;
color : #ccc;
border-color : #666;
background : #141414;
border-style : solid;
border-width : 0 1px 1px 1px;
padding-bottom: 3px;
}
h2.menu-title {
font-size: 100%;
color: #888;
background : transparent;
padding-right : 5px ;
margin: 2px 0 2px 0;
text-align : right;
letter-spacing: 2px;
font-weight: bold;
}
/* Middle */
div#middle {
margin : 0 0 0 165px;
}
/* Content */
div.content {
line-height : 1.8em;
padding : 1.5em;
border-style : solid;
border-color : #666;
border-width : 0 1px 1px;
background : #222;
color : inherit;
}
p {
padding : 0.5em 0;
margin : 0em 1em 0;
}
/* Intro */
div.intro, div.rank {
border : 1px solid #4B4B4B;
font-size : 100%;
line-height : 1.8em;
padding : 0.5em 0.3em;
margin : 1em 3.5em 0 0;
color : #b1ed61;
background : #141414;
}
div.intro p:first-letter {
font-style : italic;
font-size : 200%;
color : #b1ed61;
background : transparent;
}
/* News */
h2#news {
font-size: 125%;
margin: 2em 0 0.5em 0.5em;
}
h2.news-title {
font-size : 100%;
color : #8db4df;
border: 1px solid #4B4B4B;
line-height : 1.8em;
font-weight : bold;
padding: 0 5px;
margin : 0.5em 3.5em 0 0;
letter-spacing : 2px;
background-color : #141414;
}
span.news-date {
color : #777;
letter-spacing : 1px;
font-size : 90%;
font-weight : normal;
text-transform : lowercase;
text-decoration : none;
float : right;
background : #141414;
}
div.news-body {
margin: 0em 3.5em 3em 0em;
border-width: 0 1px 1px 1px;
border-style : solid;
border-color : #4B4B4B;
background : #1E1E1E;
padding : 5px;
}
/* News Comments */
div.comments {
margin: 2.5em;
}
div.break {
width: 80%;
border-bottom: 1px dotted #666;
}
span.c-title {
padding : 5em 0 0 0;
font-weight : bold;
font-size : 125%;
letter-spacing : 2px;
color : #75a4c6;
background : transparent;
}
/* Footer */
div#footer {
background : #141414;
color : #666;
border-style : solid;
border-color : #666;
border-width : 0 1px 1px;
padding : 4px 5px;
line-height : 16px;
text-align: right;
}
/* List styles */
ol.decimal {
list-style-type: decimal
}
ul.circle {
list-style: inside circle
}
pre {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.0em;
}
.list {
font-size : 100%;
padding : 0.8em;
}
/* Filter Styles */
.filter {
border-style: solid;
border-width: 0 0 1px 0;
border-color: #4b4b4b;
font-weight: normal;
padding-bottom: 10px;
}
.rank {
padding: 10px !important;
}
.rank-c {
font-weight: bold;
color : #75a4c6;
}
.note {
border: 1px dotted #4b4b4b;
padding: 5px;
margin: 5px;
background-color: #222;
color: #B0B0B0;
}
div.backaroo {
text-align: center
}
</style>
<link title="Half Life" href="./css/corelight.css" type="text/css" rel="alternate stylesheet">
<link title="GameFaqs" href="./css/core3.css" type="text/css" rel="alternate stylesheet">
<link title="Robots" href="./css/core4.css" type="text/css" rel="alternate stylesheet">
<script src="./scripts/styleswitcher.js" type="text/javascript"></script>
<style type="text/css">body
{
font : 10px Verdana, Tahoma, Helvetica, sans-serif;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="YOUR STUFF" name="robots">
<meta content="YOUR STUFF" name="description">
<meta content="YOUR STUFF" name="keywords">
</head>
<body>
<div id="header">
<div class="title"> Dark Fusion </div></div>
<div class="bar-r"><span class="text">..LOL MOTTO </span></div>
<!-- I know this menu code is horrible... but I am too lazy to fix it -->
<div id="menu">
<h2 class="menu-title"> Main</h2><a title="OMG" href="LOLSITE">+ home </a>
<div class="submenu"><a title="OMG" href="#"> LINK 1 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 2 </a>
</div>
</div>
<h2 class="menu-title"> SUBMENU 1 </h2>
<div class="submenu"><a title="OMG" href="#"> LINK 1 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 2 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 3 </a>
</div>
</div>
</div>
<h2 class="menu-title"> SUBMENU 2 </h2>
<div class="submenu"><a title="OMG" href="#"> LINK 1 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 2 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 2 </a>
</div>
</div>
<h2 class="menu-title"> SUBMENU 3 </h2>
<a title="OMG" href="#"> LINK 1 </a>
</div>
<h2 class="menu-title"> SUBMENU 4 </h2>
<div class="submenu"><a title="OMG" href="#"> LINK 1 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 2 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 3 </a>
<div class="submenu"><a title="OMG" href="#"> LINK 4 </a>
</div>
</div>
</div>
<h2 class="menu-title"> Contact</h2>
<a href="mailto:OMGEMAILLOLZ">@ E-Mail</a>
</div>
<h2 class="menu-title"> Stats</h2>
<div class="stats">This is where I put my load time.
</div>
<div id="search">
<form name="searchform" action="http://www.google.com/search" method="get">search the web:
<input type="text" value="" name="as_q">
<input type="submit" value="Go!"> </form>
<a class="button" href="">
<img border="0px" src="" alt="Image buttons go here" height="15" width="80" /></a>
<a class="button" href="">
<img border="0px" src="" alt="Image buttons go here" height="15" width="80" /></a>
</div>
</div>
<div id="middle">
<div class="content">
<div class="intro">
<p>
SOME RANDOM TEXT
</p>
</div>
<h2 id="news">
<img height="31" alt="Latest News.." src="news2.gif" width="185"></h2>
<p align="center"> </p>
<h2 class="news-title"><span class="news-date"></span>TITLE</h2>
<div class="news-body">
<p>
DIS WHERE YOUR WORDS GO!
</p>
</div>
<h2 class="news-title"><span class="news-date"></span>TITLE</h2>
<div class="news-body">
<p>
VALID HTML + CSS.
</p>
</div>
<h2 class="news-title"><span class="news-date"></span>TITLE</h2>
<div class="news-body">
<p>
THIS IS MY FIRST OSWD TEMPLATE, SO I HOPE YOU LIKE IT. :)
</p>
</div>
<p align="center"> </p></div>
<!-- The copywrite text MUST be left on the template. If you remove it you will burn in hell :) -->
<div id="footer">© <a href="http://www.sirbastian.com">Sirbastian manning</a> 2004 - 2005</div></div>
</body>
</html>
Related examples in the same category