Dark_Portal : Dark « Templates « HTML / CSS






Dark_Portal

  

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dark Portal</title>
<style type='text/css'>
A:link {color: #BC2601;}
A:visited {color: red}
A:active {color: red}
A:hover {color: red;}

body  {
  background-color:#000000;
  }

#main  {
  position:relative;
  width:700px;
  margin: auto;
  }

#top  {
  position:relative;
  width:700px;
  height:300px;
  background: url('top.jpg') no-repeat;
  }

#menu  {
  position:relative;
  width:700px;
  height:25px;
  margin: 0 0 0 0;
  background: url('menu.jpg') repeat-x;
  }

#body  {
  position:relative;
  width:700px;
  margin: 0 0 0 0;
  }

#sidebar  {
  float:right;
  width:10em;
  margin:1em 0 0 0;
  padding:3px;
  }

#sidebar h2  {
  text-align:left;
  clear:both;
  padding:0 0 0 1.5em;
  color:#000000;
  background-color:#BC2601;
  font-style: italic;
  font-size: 14px;
  }

#content  {
  clear:left;
  text-align:left;
  margin:1.2em 10.5em 0 0;
  padding:1em 1ex 1em 1.5ex;
  }

#content h2  {
  text-indent:30px;
  color:#000000;
  background-color:#BC2601;
  font-size: 20px;
  }


#footer {
  border-top:1px solid #BC2601;
  padding-top:0px;
  text-align:center;
  width:90%;
  margin:auto;
  font-size: 10px;
  }


h1  {
  color: #BC2601;
  font-size:40px;
  position: relative;
  top: 50px;
  left: 100px;
  font-style: italic;
  }



legend  {
  color:#BC2601;
  }

p  {
  color:#BC2601;
  }

</style>


</head>
<body>
<center>
<div id="main">
 <div id="top" align="left">
  <h1>Dark Portal</h1>
 </div>

 <div id="menu">
  <table border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td width="150" height="25" align="center">
  </td>
  <td width="100" height="25" align="center">
  <a href="#">Home</a>
  </td>
  <td width="100" height="25" align="center">
  <a href="#">About</a>
  </td>
  <td width="100" height="25" align="center">
  <a href="#">FAQs</a>
  </td>
  <td width="100" height="25" align="center">
  <a href="#">Forum</a>
  </td>
  <td width="100" height="25" align="center">
  <a href="mailto:admin@kernelsgamez.com">Contact</a>
  </td>
  <td width="150" height="25" align="center">
  </td>
  </tr>
  </table>
 </div>

 <div id="sidebar">
  <fieldset><legend>News</legend>
  <h2>News</h2>
  <p>Today I woke up, ate some food and went to school.<br />
  <font size="1"><a href="#">Read More...</a></font></p>

  <h2>Latest Posts</h2>
  <p>
  <a href="#">New Template</a> <font size="1">-18/10/05</font><br />
  <a href="http://www.kernelsgamez.com">Kernel's Gamez</a><br /><font size="1">-16/10/05</font><br />
  <a href="#">Boredom...</a><br /><font size="1">-15/10/05</font>
  </p>
  </fieldset>
 </div>

 <div id="content">
  <h2>Welcome to Dark Portal</h2>
  <p>This design is XHTML and CSS valid. It uses only 1 table. Some code is taken from <a href="http://oswd.org/design/preview/id/2063">Localize</a>. The inspiration came to me from <a href="http://oswd.org/design/preview/id/2199">Andreas 01</a> and from the photo I took the other day.</p>

  <h2>Timeline</h2>
  <p>This design only took me 2-3 days to complete. This is also my first design for <a href="http://oswd.org/">oswd</a>, so it might not be that good.</p>

  <h2>About</h2>
  <p>Since this is an open source design, feel free to change it all you like, as long as you leave the link to my site and email in the footer.</p>

  <h2>Compatibility</h2>
  <p>This design looks best in <a href="http://www.mozilla.org/products/firefox/">Firefox</a>. There are some compatibility issues with Internet Explorer, but only minor ones.</p>
 </div>

<div id="footer">
<p>Made by <a href="http://www.kernelsgamez.com">Kernel's Gamez</a> for oswd. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and CSS.</p>
</div>


</div>
</center>
</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.DarkFusion
13.darkgrunge
14.darkit
15.darkportfolio
16.darkshine
17.DarkSplinter
18.darkTech
19.darktheme
20.shadowed
21.midnight
22.midnightalley
23.Dark background, white links
24.Dark background with white border
25.Dark backgrounds