DarkFusion : Dark « Templates « HTML / CSS

HTML / CSS » Templates » Dark 
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;
}

{
  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 </a>
<div class="submenu"><a title="OMG" href="#">  » LINK </a>
</div>
</div>

<h2 class="menu-title">» SUBMENU </h2>

<div class="submenu"><a title="OMG" href="#">  » LINK </a>
<div class="submenu"><a title="OMG" href="#">  » LINK </a>
<div class="submenu"><a title="OMG" href="#">  » LINK </a>
</div>
</div>
</div>
<h2 class="menu-title">» SUBMENU </h2>

<div class="submenu"><a title="OMG" href="#">  » LINK </a>
<div class="submenu"><a title="OMG" href="#">  » LINK </a>
<div class="submenu"><a title="OMG" href="#">  » LINK </a>
</div>
</div>

<h2 class="menu-title">» SUBMENU </h2>
<a title="OMG" href="#">° LINK </a>
</div>

<h2 class="menu-title">» SUBMENU </h2>
<div class="submenu"><a title="OMG"  href="#">  » LINK </a>
<div class="submenu"><a title="OMG"  href="#">  » LINK </a>
<div class="submenu"><a title="OMG"  href="#">  » LINK </a>
<div class="submenu"><a title="OMG"  href="#">  » LINK </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">&nbsp;</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">&nbsp;</p></div>
<!-- The copywrite text MUST be left on the template. If you remove it you will burn in hell :--> 
<div id="footer">&copy; <a href="http://www.sirbastian.com">Sirbastian manning</a> 2004 2005</div></div>
</body>
</html>

   
    
  
Related examples in the same category
1.metamorph_darkmare
2.metamorph_darknessfall
3.metamorph_darkside
4.metamorph_darksky
5.metamorph_nightsky
6.dark-effect-v2
7.dark-pro
8.Dark 2
9.DarkColors
10.darkened
11.darkforest
12.darkgrunge
13.darkit
14.darkportfolio
15.darkshine
16.DarkSplinter
17.darkTech
18.darktheme
19.Dark_Portal
20.shadowed
21.midnight
22.midnightalley
23.Dark background, white links
24.Dark background with white border
25.Dark backgrounds
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.