gamingtemplate : Game « Templates « HTML / CSS






gamingtemplate

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Gaming template</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 10px;
    text-align: center;
    background: #5d5d5d url(gamingtemplate-images/page_bg.gif);
    margin: 0px;
    padding: 10px;
}

html, #wrapper, h1 {
    margin: 0px;
    padding: 0px;
}

img { border: 0px; }

#wrapper {
    margin: auto;
    text-align: left;
    width: 710px;
    position: relative;
}

h1, h2, h3 {
    font-size: 10px;
}


h1 {
    line-height: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

h2 {
    margin: 0px 0px 5px 0px;
    padding: 0px;
}

h3 {
    padding: 4px 0px 0px 0px;
}

.block {
    display: block;
}

.clear {
    clear: both;
    height: 10px;
}

.left {
    float: left;
    margin: 5px 20px 0px 0px;
}

.right {
    float: right;
    margin: 0px 0px 0px 20px;
}

.box {
  min-height: 107px;
  /*border: 1px dashed red;*/
}

.imgbox {
  height: 107px;
  width: 143px;
  float: right;
}

.readmore {
    text-align: right;
}

 /* page structure */

#wrapper {
    background: url(gamingtemplate-images/body_t.gif) top no-repeat;
    padding-top: 20px;
}

#body {
    background: url(gamingtemplate-images/body_bg.gif) repeat-y;
    padding-bottom: 10px;
}

#body p {
    background: white;
}
#nav {
    position: absolute;
    top: 25px;
    left: 253px;
    width: 450px;
  height:35px;
  background: url(gamingtemplate-images/nav.gif) repeat-x;
}
#nav ul{
  padding: 0px;
  margin: 0px;
  list-style-type: square;
  list-style-position: inside;
}
#nav li{
  padding: 7px 16px 0px 16px;
  margin: 0px;
  height:35px;
  list-style-type: square;
  list-style-position: inside;
  float:left;
  border-right: 1px solid #FFFFFF;
  display:inline;
}

.lastchild{border-right: 0px none #FFFFFF !important;}

#nav a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
}
#nav a:hover{
  color:#fcff85;
}

#current {
    float: left;
    width: 235px;
    margin-left: 10px;
    margin-top: -10px;
    background: url(gamingtemplate-images/menu_bg.gif) repeat-y;
    border-bottom: 1px solid #05256b;
}

* html #current {
    margin-left: 5px;
}

#content {
    float: right;
    width: 450px;
    padding-top: 40px;
    margin-right: 8px;
}

* html #content {
    margin-right: 4px;
}

#footer {
    background: url(gamingtemplate-images/body_b.gif) no-repeat;
    text-align: center;
    padding-right: 10px;
    padding-left: 480px;
    padding-bottom: 30px;
}

#copyright {
    position: relative;
    top: -8px;
    color: #989898;
}

/* current column */

#current .nav {
    margin: 21px 6px 5px 5px;
}

#current ul {
    border: 1px solid #8497c2;
    margin: 0px;
    padding: 0px;
}

* html #current ul {
    padding: 3px 0px;
    padd\ing: 0px;
}

#current li {
    list-style: none;
    border: 1px solid #4e698f;
    background: #01285f url(gamingtemplate-images/harry.gif) left center no-repeat;
    padding: 0px 0px 0px 20px;
    margin: 3px;
}

#current li.readmore {
    text-align: right;
    background-image: none;
}

#current ul a {
    color: #beddff;
    text-decoration: none;
    display: block;
    padding: 3px 12px 3px 0px;
}

* html #current ul a {
    width: 100%;
    w\idth: auto;
}

#current ul a:hover {
    color: white;
}

#current .readmore {
    padding: 3px 4px 4px 20px;
}

* html #current .readmore {
    padding: 0px 4px 1px 20px;
    padd\ing: 3px 4px 4px 20px;
}

#current .readmore a {
    text-decoration: underline;
    display: inline;
}

#currenttitle {
    position: absolute;
    left: 15px;
    top: 409px;
}

* html #currenttitle {
    top: 411px;
}

/* page content */

#content h2 {
    line-height: 1;
    margin: 0px;
    padding: 20px 0px 0px 0px;
}

#content h3 {
  margin: 10px 0px;
  padding: 0px;
  text-transform: capitalize;
}

#content p {
    margin: 10px 0px;
    padding: 0px;    
}

#content .contentbox {
    border: 1px solid #e1e1e1;
    border-top: none;
    padding: 5px 20px 10px 20px;
}

* html #content .contentbox {
    padding-bottom: 11px;
}

#content, #content a {
    color: #868686;
}

#content a:hover {
    color: #000;
}

</style>


</head>

<body>
<div id="wrapper">

  <div id="nav">
    <ul>
    <li><a href="http://www.freewebsitetemplates.com">home</a></li>
    <li><a href="http://www.freewebsitetemplates.com">reviews</a></li>
    <li><a href="http://www.freewebsitetemplates.com">gallery</a></li>
    <li><a href="http://www.freewebsitetemplates.com">community</a></li>
    <li class="lastchild"><a href="http://www.freewebsitetemplates.com">contact</a></li>
    </ul>
  </div><!-- end nav -->
  
  <h2 id="currenttitle"><img src="gamingtemplate-images/title_current_games.gif" width="224" height="28" alt="current games" /></h2>
  <div id="body">
  
    <div id="current">
      <a href="/"><img src="gamingtemplate-images/logo.jpg" width="235" height="396" alt="logo" /></a>
      <div class="nav">
      <ul>
      <li><a href="http://www.freewebsitetemplates.com">Golden Eye 007</a></li>
      <li><a href="http://www.freewebsitetemplates.com">Harry Potter &amp; the Chamber of Secret</a></li>
      <li><a href="http://www.freewebsitetemplates.com">Prince of Persia: Sands of Time</a></li>
      <li><a href="http://www.freewebsitetemplates.com">Resident Evil: Code Veronica X</a></li>
      <li><a href="http://www.freewebsitetemplates.com">The Legend of Zelda: Majora's Mask</a></li>
      <li><a href="http://www.freewebsitetemplates.com">Tomb Raider: The Lost Artifact</a></li>
      <li class="readmore"><a href="http://www.freewebsitetemplates.com">More Games</a></li>
      </ul>
      </div><!-- end .nav -->
    </div><!-- end current -->
    
    <div id="content">
      <h2><img src="gamingtemplate-images/title_video_games.gif" width="450" height="37" alt="best video games" /></h2>
      <div class="contentbox">
      <div class="box">
        <div class="imgbox"><img src="gamingtemplate-images/picture_1.jpg" width="110" height="107" alt="nintendo ds" class="right" /></div>
        <h3>nintendo ds</h3>
        <p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
<p class="readmore"><a href="http://www.freewebsitetemplates.com">more</a></p>
      </div>
      <div class="box">
        <div class="imgbox"><img src="gamingtemplate-images/picture_2.jpg" width="105" height="78" alt="controller" class="right" /></div>
        <h3>NYKO Air Flo XL controller</h3>
        <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
        text. This is just a place holder so you can see how the site would look like.</p> 
        <p class="readmore"><a href="http://www.freewebsitetemplates.com">more</a></p>
      </div>
      </div><!-- end .contentbox -->
      <h2><img src="gamingtemplate-images/title_most_popular.gif" width="450" height="38" alt="most popular downloads" /></h2>
      <div class="contentbox">
      
      <img src="gamingtemplate-images/picture_3.jpg" width="85" height="71" alt="female with gun" class="left" />
      <h3>urban preditor</h3>
      <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
      <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
      <p class="readmore"><a href="http://www.freewebsitetemplates.com">Download now</a></p>
      
      <img src="gamingtemplate-images/picture_4.jpg" width="85" height="71" alt="female with dimond" class="left" />
      <h3>xtreme war session</h3>
      <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
      <p class="readmore"><a href="http://www.freewebsitetemplates.com">Download now</a></p>
      <br />
    </div><!-- end .contentbox -->
    </div><!-- end content -->
    <div class="clear"></div>
  </div><!-- end body -->
  
  <div id="footer" class="clear">
  <div id="copyright">Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.</div>
  </div><!-- end footer -->
  
</div><!-- end wrapper -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.metamorph_endgame
2.games
3.gamezone
4.halo