games : Game « Templates « HTML / CSS






games

   

<!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">
<head>
<title>Slave to the Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
  margin: 0px;
  padding: 0px;
}

body {
  color: #fff;
  background-color: #c80400;
  font-family: verdana, arial, sans-serif;
  font-size: 10px;
  line-height: 15px;
}

a {
  color: #fff;
  background-color: inherit;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

span {
  display: none;
}

img {
  border: none;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

p {
  padding: 7px 0px 8px;
  text-align: justify;
}

input {
  border: 0px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
}

.clearthis {
  margin : 0px;
  height : 1px;
  clear : both;
  float : none;
  font-size: 1px;
  line-height: 0px;
  overflow : hidden;
  visibility: hidden;
}

#body_wrapper {
  margin-right: auto;
  width: 1004px;
  background: url('games-images/background.jpg') repeat-y 0% 0%;
}

#rightcolumn {
  width: 775px;
  float: right;
  text-align: left;
}

/* Page Header */

#page_header {
  background: url('games-images/header_bg.jpg') no-repeat 0% 0%;
  width: 775px;
  height: 193px;
}


/* Main Navigational Menu */

#mainnav {
  width: 775px;
  height: 45px;
  background: url('games-images/headernav_bg.jpg') repeat-x 0% 0%;
  overflow: hidden;
}

#mainnav ul {
  height: 44px;
  border-bottom: #fff 1px solid;
}

#mainnav li {
  height: 44px;
  float: left;
  border-left: #fff 1px solid;
}

#mainnav li a {
  margin: 13px 5px 0px 6px;
  display: block;
  height: 21px;
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

li#mainnav_01 a {
  margin-left: 10px;
  width: 40px;
  background-image: url('games-images/headernav_01.jpg');
}

li#mainnav_02 a {
  width: 52px;
  background-image: url('games-images/headernav_02.jpg');
}

li#mainnav_03 a {
  width: 69px;
  background-image: url('games-images/headernav_03.jpg');
}

li#mainnav_04 a {
  width: 62px;
  background-image: url('games-images/headernav_04.jpg');
}

li#mainnav_05 a {
  width: 83px;
  background-image: url('games-images/headernav_05.jpg');
}

li#mainnav_06 a {
  width: 60px;
  background-image: url('games-images/headernav_06.jpg');
}

li#mainnav_07 a {
  width: 74px;
  background-image: url('games-images/headernav_07.jpg');
}

li#mainnav_08 a {
  width: 42px;
  background-image: url('games-images/headernav_08.jpg');
}

li#mainnav_09 a {
  width: 49px;
  background-image: url('games-images/headernav_09.jpg');
}

li#mainnav_10 a {
  width: 45px;
  background-image: url('games-images/headernav_10.jpg');
}

li#mainnav_11 a {
  margin-right: 0px;
  width: 60px;
  background-image: url('games-images/headernav_11.jpg');
}


/* Center Column */

#centercolumn {
  width: 552px;
  color: #333;
  background-color: #fff;
  float: left;
  text-align: center;
}

#centercolumn_2 {
  margin: 8px auto;
  width: 542px;
  text-align: left;
}

#centercolumn a {
  color: #333;
  background-color: inherit;
}

#centercolumn a:hover {
  text-decoration: none;
}


/* Center Column News Box */

.newsbox {
  margin-bottom: 5px;
  width: 542px;
  background: url('games-images/newsbox_bg.jpg') repeat-y;
}

.newsbox_header {
  padding: 19px 10px 5px;
  background: url('games-images/newsbox_bg_top.jpg') no-repeat 0% 0%;
  height: 22px;
}

.newsbox_header h2 {
  padding-left: 20px;
  width: 330px;
  float: left;
  font-size: 10px;
  font-weight: bold;
}

.newsbox_header strong {
  float: right;
}

.newsbox_content {
  padding: 0px 10px 20px;
  background: url('games-images/newsbox_bg_bot.jpg') no-repeat 0% 100%;
  line-height: 14px;
}

.newsbox_comments a {
  text-decoration: none;
}

.newsbox_comments a:hover {
  color: #959595;
  background-color: inherit;
}


/* Right Sidebar */

#rightsidebar {
  margin: 5px 0px 10px 7px;
  width: 209px;
  float: left;
  color: inherit;
  background-color: inherit;
}


/* Team Roster */

#teamroster {
  margin-bottom: 9px;
  width: 209px;
  background: url('games-images/teamroster_bg.jpg') repeat-y;
}

#teamroster_header {
  padding: 17px 7px 0px;
  background: url('games-images/teamroster_bg_top.jpg') no-repeat 0% 0%;
}

#teamroster h2 {
  height: 35px;
  background: url('games-images/teamroster_title.jpg') no-repeat 0% 0%;
}

#teamroster_content {
  padding: 0px 7px 10px;
  background: url('games-images/teamroster_bg_bot.jpg') no-repeat 0% 100%;
}

#teamroster_categories {
  padding: 0px 7px 10px;
  font-weight: bold;
}

#teamroster_categories a {
  text-decoration: none;
}

#teamroster_categories a:hover {
  text-decoration: underline
}

#teamroster ul {
  padding-left: 1px;
  padding-right: 1px;
}

#teamroster li {
  color: #a71b1f;
  background-color: #a71a1e;
  background-repeat: no-repeat;
  background-position: 45% 3px;
  border: #ffd5d7 1px solid;
  text-align: center;
  float: left;
}

#teamroster li a {
  display: block;
  margin-top: 77px;
  width: 94px;
  height: 25px;
  color: #a71b1f;
  background: #ffe0e2 url('games-images/teamroster_name_bg.jpg') no-repeat;
  overflow: hidden;
  line-height: 23px;
  text-decoration: none;
}

#teamroster li a:hover {
  color: #380100;
  background-color: inherit;
}

li#roster_twitch {
  background-image: url('games-images/teamroster_tb01.jpg');
}

li#roster_rock {
  background-image: url('games-images/teamroster_tb02.jpg');
}

li#roster_badkarma {
  background-image: url('games-images/teamroster_tb03.jpg');
}

li#roster_mostly {
  background-image: url('games-images/teamroster_tb04.jpg');
}

li#roster_thebowl {
  background-image: url('games-images/teamroster_tb05.jpg');
}

li#roster_doggerz {
  background-image: url('games-images/teamroster_tb06.jpg');
}

li#roster_drew {
  background-image: url('games-images/teamroster_tb07.jpg');
}

li#roster_nogusta {
  background-image: url('games-images/teamroster_tb08.jpg');
}

#teamroster .more_button {
  padding: 10px 0px 0px;
  text-align: center;
}

#teamroster .more_button a {
  display: block;
  margin: 0px auto;
  width: 52px;
  height: 21px;
  background: url('games-images/teamroster_button_more.gif') no-repeat 0% 0%;
}


/* Team Sponsors */

#teamsponsors {
  width: 209px;
  color: inherit;
  background-color: #a21219;
}

#teamsponsors h2 {
  height: 46px;
  border-bottom: #c80400 1px solid;
  background: url('games-images/teamroster_title.jpg') no-repeat 9px 50%;
}

#teamsponsors_content {
  padding: 15px 10px;
  text-align: center;
}

#teamsponsors .more_button {
  padding: 10px 0px 0px;
}

#teamsponsors .more_button a {
  display: block;
  margin: 0px auto;
  width: 68px;
  height: 70px;
  background: url('games-images/teamsponsors_button_more.gif') no-repeat 0% 0%;
}


/* Left Column and Sidebar */

#leftcolumn {
  width: 229px;
  color: #000;
  background-color: inherit;
  float: right;
  text-align: left;
  font-size: 9px;
}

#leftcolumn ul {
  width: 100%;
  overflow: hidden;
}

#leftcolumn li {
  margin-bottom: 1px;
  padding: 3px 10px 5px 35px;
  color: inherit;
  background: #b3b3b3 url('games-images/latestmatches_bullet.gif') no-repeat 9px 50%;
}

#leftsidebar {
  margin-right: 6px;
  width: 223px;
}

#leftsidebar a {
  color: #000;
  background-color: inherit;
  text-decoration: none;
}

#leftsidebar a:hover {
  text-decoration: underline;
}

#leftsidebar h2 {
  height: 54px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
}

#leftsidebar .more_button {
  padding-left: 48px;
  height: 50px;
  background: url('games-images/latestmatches_bg_bot.gif') no-repeat 0% 100%;
}

#leftsidebar .more_button a {
  display: block;
  margin-top: 14px;
  width: 52px;
  height: 21px;
  background: url('games-images/button_more.gif') no-repeat 0% 0%;
  float: left;
}


/* Recent Record */

#recentrecord {
  width: 229px;
  height: 193px;
  color: #fff;
  background: #f21000 url('games-images/recentrecord_bg.jpg') repeat-y 0% 0%;
  font-weight: bold;
}

#recentrecord a {
  text-decoration: none;
}

#recentrecord a:hover {
  text-decoration: underline;
}

#recentrecord h2 {
  width: 229px;
  height: 76px;
  color: inherit;
  background: #c80400 url('games-images/recentrecord_title.jpg') no-repeat 0% 50%;
}

#recentrecord ul {
  width: 229px;
}

#recentrecord li {
  color: inherit;
  background: #a21219 url('games-images/recentrecord_bullet.gif') no-repeat 9px 50%;
}


/* Latest Matches */

#latestmatch {
  color: inherit;
  background-color: #313131;
  border-top: #fff 1px solid;
}

#latestmatch h2 {
  background-image: url('games-images/latestmatches_title.jpg');
}

#latestmatch li {
  color: inherit;
  background-color: #b3b3b3;
  background-image: url('games-images/latestmatches_bullet.gif');
}


/* Gaming Services */

#gamingservices {
  color: inherit;
  background-color: #313131;  
}

#gamingservices h2 {
  background-image: url('games-images/gamingservices_title.jpg');
}

#gamingservices li {
  padding-right: 5px;
  color: inherit;
  background-color: #cdcdcd;
  background-image: url('games-images/gamingservices_bullet.gif');
}

#gamingservices .more_button {
  padding-top: 2px;
  background-image: url('games-images/gamingservices_bg_bot.jpg');
}


/* Quick Links */

#quicklinks {
  color: inherit;
  background-color: #000;
}

#quicklinks h2 {
  background-image: url('games-images/quicklinks_title.jpg');
}

#quicklinks li {
  color: inherit;
  background-color: #babdbf;
  background-image: url('games-images/quicklinks_bullet.gif');
}

#quicklinks .more_button {
  padding-top: 4px;
  padding-bottom: 5px;
  background-image: url('games-images/quicklinks_bg_bot.gif');
}


/* Page Footer */

#page_footer {
  margin-left: 229px;
  margin-right: 222px;
  padding: 20px 0px 0px;
  width: 552px;
  text-align: center;
  color: #fff;
  background-color: #464646;
  position: relative;
  top: -20px;
}

</style>


</head>
<body>
<div id="body_wrapper">
  <div id="rightcolumn">
    <!-- Start Page Header -->
    <div id="page_header">
      <h1><span>Slave to the Game</span></h1>
      <h3><span>Online Gaming Community</span></h3>
    </div>
    <!-- End of Page Header -->
    <!-- Start of Main Navigation Menu -->
    <div id="mainnav">
      <ul>
        <li id="mainnav_01"><a href="http://www.free-css.com/"><span>Home</span></a></li>
        <li id="mainnav_02"><a href="http://www.free-css.com/"><span>Roster</span></a></li>
        <li id="mainnav_03"><a href="http://www.free-css.com/"><span>About Us</span></a></li>
        <li id="mainnav_04"><a href="http://www.free-css.com/"><span>Matches</span></a></li>
        <li id="mainnav_05"><a href="http://www.free-css.com/"><span>Downloads</span></a></li>
        <li id="mainnav_06"><a href="http://www.free-css.com/"><span>Servers</span></a></li>
        <li id="mainnav_07"><a href="http://www.free-css.com/"><span>Sponsors</span></a></li>
        <li id="mainnav_08"><a href="http://www.free-css.com/"><span>Links</span></a></li>
        <li id="mainnav_09"><a href="http://www.free-css.com/"><span>Forum</span></a></li>
        <li id="mainnav_10"><a href="http://www.free-css.com/"><span>Admin</span></a></li>
        <li id="mainnav_11"><a href="http://www.free-css.com/"><span>Members</span></a></li>
      </ul>
      <div class="clearthis">&nbsp;</div>
    </div>
    <!-- End of Main Navigation Menu -->
    <!-- Start of Center Column -->
    <div id="centercolumn">
      <div id="centercolumn_2">
        <!-- Start of News Box 1 -->
        <div class="newsbox">
          <div class="newsbox_header">
            <!-- News Title -->
            <h2>F.E.A.R update v1.2</h2>
            <!-- News Date -->
            <strong>10/31/2005</strong>
            <div class="clearthis">&nbsp;</div>
          </div>
          <div class="newsbox_content">
            <!-- News Text -->
            <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. <br />
              <br />
              If you're having problems editing the template Please don't hesitate to ask for help on the forum. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. <br />
              <br />
              Your feedback is very important to us and we will do everything to fulfill your wishes. <br />
              <br />
              <a href="http://www.free-css.com/">More...</a> </p>
          </div>
        </div>
        <!-- End of News Box 1 -->
        <!-- Start of News Box 2 -->
        <div class="newsbox">
          <div class="newsbox_header">
            <!-- News Title -->
            <h2>Nvidia Forceware 81.87 Beta Released</h2>
            <!-- News Date -->
            <strong>10/27/2005</strong>
            <div class="clearthis">&nbsp;</div>
          </div>
          <div class="newsbox_content">
            <!-- News Text -->
            <p> Posted By: Drew </p>
            <p> Nvidia have released their latest "unofficial official" graphics drivers - the 81.87 Beta Forceware. The main difference between these and the recent 81.85 drivers is the addition of optimizations/compatibility fixes for Call of Duty 2. <br />
              <br />
              http://www.nzone.com/object/nzone_downloads_winxp_2k_32bit_81.87.html </p>
          </div>
        </div>
        <!-- End of News Box 2 -->
        <!-- Start of News Box 3 -->
        <div class="newsbox">
          <div class="newsbox_header">
            <!-- News Title -->
            <h2>Match Tonight</h2>
            <!-- News Date -->
            <strong>10/25/2005</strong>
            <div class="clearthis">&nbsp;</div>
          </div>
          <div class="newsbox_content">
            <!-- News Text -->
            <p> Posted By: Drew </p>
            <p> Opponent: 505 Parachute Infantry Regiment <br />
              Server: S2tG #2 unless they post otherwise <br />
              Map: CoD_UO_carentan <br />
              Match Date: Wednesday October 26th @ 9:00 PM EST <br />
              S2tG has allies first
              Sign up on the calendar </p>
          </div>
        </div>
        <!-- End of News Box 3 -->
        <!-- Start of News Box 4 -->
        <div class="newsbox">
          <div class="newsbox_header">
            <!-- News Title -->
            <h2>CoD2 Review @IGN</h2>
            <!-- News Date -->
            <strong>10/25/2005</strong>
            <div class="clearthis">&nbsp;</div>
          </div>
          <div class="newsbox_content">
            <!-- News Text -->
            <p> Posted By: Randall </p>
            <p> http://pc.ign.com/articles/661/661230p1.html <br />
              <br />
              8.5 out of 10 because of health management implemetation. </p>
          </div>
        </div>
        <!-- End of News Box 4 -->
        <!-- Start of News Box 5 -->
        <div class="newsbox">
          <div class="newsbox_header">
            <!-- News Title -->
            <h2>Match Tonight</h2>
            <!-- News Date -->
            <strong>10/22/2005</strong>
            <div class="clearthis">&nbsp;</div>
          </div>
          <div class="newsbox_content">
            <!-- News Text -->
            <p> Posted By: Drew </p>
            <p> Opponent: |Terror Squad| <br />
              Server: S2tG #2 <br />
              Map: arnhem <br />
              Match Date: Saturday October 22th @ 9:30 PM EST <br />
              S2tG has allies first </p>
          </div>
        </div>
        <!-- End of News Box 5 -->
      </div>
    </div>
    <!-- End of Center Column -->
    <!-- Start of Right Sidebar -->
    <div id="rightsidebar">
      <!-- Start of Team Roster -->
      <div id="teamroster">
        <div id="teamroster_header">
          <h2><span>Team Roster</span></h2>
        </div>
        <div id="teamroster_content">
          <div id="teamroster_categories"> <a href="http://www.free-css.com/">Staff</a> | <a href="http://www.free-css.com/">Captains</a> </div>
          <ul>
            <li id="roster_twitch"><a href="http://www.free-css.com/">twitch</a></li>
            <li id="roster_rock"><a href="http://www.free-css.com/">rock</a></li>
            <li id="roster_badkarma"><a href="http://www.free-css.com/">BadKarma</a></li>
            <li id="roster_mostly"><a href="http://www.free-css.com/">mostly</a></li>
            <li id="roster_thebowl"><a href="http://www.free-css.com/">TheBowl</a></li>
            <li id="roster_doggerz"><a href="http://www.free-css.com/">doggerz</a></li>
            <li id="roster_drew"><a href="http://www.free-css.com/">Drew</a></li>
            <li id="roster_nogusta"><a href="http://www.free-css.com/">Nogusta</a></li>
          </ul>
          <div class="clearthis">&nbsp;</div>
          <div class="more_button"> <a href="http://www.free-css.com/"><span>More</span></a> </div>
        </div>
      </div>
      <!-- End of Team Roster -->
      <!-- Start of Team Sponsors -->
      <div id="teamsponsors">
        <h2><span>Team Sponsors</span></h2>
        <div id="teamsponsors_content"> <a href="http://www.free-css.com/"><img src="games-images/teamsponsors_surrealmedia.jpg" width="186" height="63" alt="Surreal Media" /></a>
          <div class="more_button"> <a href="http://www.free-css.com/"><span>More</span></a> </div>
        </div>
      </div>
      <!-- End of Team Sponsors -->
    </div>
    <!-- End of Right Sidebar -->
    <div class="clearthis">&nbsp;</div>
  </div>
  <!-- Start of Left Column -->
  <div id="leftcolumn">
    <!-- Start of Recent Record -->
    <div id="recentrecord">
      <h2><span>Recent Record</span></h2>
      <ul>
        <li>TWL : 105 - 43 - 6</li>
        <li>OGL : 101 - 35 - 16</li>
        <li>TWL : 105 - 43 - 6</li>
      </ul>
      <div class="clearthis">&nbsp;</div>
    </div>
    <!-- End of Recent Record -->
    <!-- Start of Left Sidebar -->
    <div id="leftsidebar">
      <!-- Start of Latest Matches -->
      <div id="latestmatch">
        <h2><span>Latest Match</span></h2>
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li>s2tg&#62;Dark|</li>
          <li>s2tg&#62;[#tS]</li>
          <li>s2tg&#62;WFC</li>
          <li>s2tg&#62;sinister</li>
          <li>s2tg&#62;|CoL|</li>
          <li>s2tg&#60;=3rd=</li>
          <li>s2tg&#60;|AAA|</li>
          <li>s2tg&#62;=[R.E.C]=</li>
          <li>s2tg&#60;|CBW|</li>
          <li>s2tg&#62;witw </li>
        </ul>
        <div class="more_button"> <a href="http://www.free-css.com/"><span>More</span></a> </div>
        <div class="clearthis">&nbsp;</div>
      </div>
      <!-- End of Latest Matches -->
      <!-- Start of Gaming Services -->
      <div id="gamingservices">
        <h2><span>Gaming Services</span></h2>
        <ul>
          <li>CoD:UO 205.234.150.42:28960</li>
          <li>CoD:UO 205.234.150.42:28961</li>
          <li>Teamspeak 66.225.194.130:7900</li>
        </ul>
        <div class="more_button"> <a href="http://www.free-css.com/"><span>More</span></a> </div>
        <div class="clearthis">&nbsp;</div>
      </div>
      <!-- End of Gaming Services -->
      <!-- Start of Quick Links -->
      <div id="quicklinks">
        <h2><span>Quick Links</span></h2>
        <ul>
          <li><a href="http://www.free-css.com/">TeamWarfare League</a></li>
          <li><a href="http://www.free-css.com/">OGL Online Gaming League</a></li>
          <li><a href="http://www.free-css.com/">F.E.A.R Portal</a></li>
          <li><a href="http://www.free-css.com/">GotFrag</a></li>
        </ul>
        <div class="more_button"> <a href="http://www.free-css.com/"><span>More</span></a> </div>
        <div class="clearthis">&nbsp;</div>
      </div>
      <!-- End of Quick Links -->
    </div>
    <!-- End of Left Sidebar -->
  </div>
  <!-- End of Left Column -->
  <div class="clearthis">&nbsp;</div>
  <!-- Start of Page Footer -->
  <div id="page_footer"> <small>Web design by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a></small> </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

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