halo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Halo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background: #000000;
font-family: tahoma, arial;
font-size: 11px;
font-weight: normal;
line-height: 15px;
margin: 0;
padding: 0;
text-align: center;
}
* html body {
line-height: 13px;
}
a:link {
color: #E7B12D;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #E7B12D;
font-weight: bold;
text-decoration: none;
}
a:hover, a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#footer a:link {
color: #92E80B;
font-weight: bold;
text-decoration: none;
}
#footer a:visited {
color: #92E80B;
font-weight: bold;
text-decoration: none;
}
#footer a:hover, #footer a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#nav a:link {
background: url(halo-images/btn-bg.gif) no-repeat;
color: #C7C6C6;
display: block;
font-size: 10px;
font-weight: bold;
height: 20px;
padding-top: 6px;
text-align: center;
text-decoration: none;
width: 71px;
}
#nav a:visited {
background: url(halo-images/btn-bg.gif) no-repeat;
color: #C7C6C6;
display: block;
font-size: 10px;
font-weight: bold;
height: 20px;
padding-top: 6px;
text-align: center;
text-decoration: none;
width: 71px;
}
#nav a:hover, #nav a:active {
background: url(halo-images/btn-bg.gif) no-repeat;
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
height: 20px;
padding-top: 6px;
text-align: center;
text-decoration: none;
width: 71px;
}
#bottom {
background: url(halo-images/main-bottom.jpg) no-repeat;
clear: both;
display: block;
height: 236px;
width: 820px;
}
#container {
margin: 0 auto;
text-align: left;
width: 820px;
}
#contenttr {
background: url(halo-images/top-right-bg.jpg) no-repeat;
color: #BBD2A8;
display: block;
height: 355px;
padding-left: 30px;
padding-top: 30px;
width: 558px;
}
#csoon {
background: url(halo-images/c-soon-bg.jpg) no-repeat;
color: #B7B7B7;
float: left;
display: block;
height: 157px;
margin-left: 15px;
margin-top: 60px;
padding-left: 35px;
padding-top: 15px;
width: 134px;
}
#deal {
margin-top: 30px;
width: 588px;
}
#dealleft {
float: left;
padding-top: 10px;
width: 160px;
}
#dealright {
float: left;
margin-left: 20px;
margin-top: 10px;
width: 300px;
}
#footer {
clear: both;
color: #FFFFFF;
padding-left: 200px;
width: 620px;
}
* html #footer {
padding-left: 210px;
width: 610px;
}
#footer ul {
list-style: none;
margin: 0;
margin-left: 20px;
padding: 0;
}
#footer li {
float: left;
list-style: none;
margin: 0;
margin-right: 20px;
padding: 0;
}
#header {
width: 820px;
}
#logo {
background: url(halo-images/main-left.jpg) no-repeat;
display: block;
float: left;
height: 426px;
width: 215px;
}
#nav {
margin-bottom: 10px;
margin-top: 10px;
width: 588px;
}
#nav ul {
list-style: none;
margin: 0;
margin-left: 20px;
padding: 0;
}
#nav li {
float: left;
list-style: none;
margin: 0;
margin-right: 20px;
padding: 0;
}
#player {
float: left;
display: block;
height: 105px;
margin-left: 25px;
margin-top: 78px;
width: 106px;
}
* html #player {
margin-left: -22px;
}
#screenshots {
background: url(halo-images/ss-bg.jpg) no-repeat;
display: block;
float: right;
height: 132px;
margin-left: 28px;
margin-right: 80px;
padding-left: 20px;
padding-top: 35px;
width: 177px;
}
* html #screenshots {
margin-right: 40px;
}
#topright {
float: left;
width: 588px;
}
#videobox {
background: url(halo-images/video-box-bg.jpg) no-repeat;
display: block;
float: left;
height: 120px;
padding-left: 20px;
padding-top: 15px;
margin-left: 20px;
margin-top: 80px;
width: 391px;
}
#videobox ul {
list-style: none;
margin: 0;
margin-left: 20px;
margin-top: 10px;
padding: 0;
}
#videobox li {
float: left;
list-style: none;
margin: 0;
margin-right: 50px;
padding: 0;
}
/* ------------------------------------------------- CLASE'S --- */
.calign {
margin-left: 110px;
}
.heading {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}
.heading2 {
color: #E7B12D;
font-size: 14px;
font-weight: bold;
}
.ss1 {
float: left;
margin-bottom: 5px;
}
.ss2 {
float: left;
margin-bottom: 5px;
margin-left: 5px;
}
.ss3 {
clear: both;
float: left;
}
.ss4 {
float: left;
margin-left: 5px;
}
.play {
margin-left: 115px;
margin-top: 10px;
}
.player1 {
float: left;
}
.video {
float: left;
margin-right: 14px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="topright">
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Community</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Games</a></li>
<li><a href="http://www.free-css.com/">Download</a></li>
<li><a href="http://www.free-css.com/">Catalog</a></li>
</ul>
<div style="clear:both"></div>
</div>
<div id="contenttr">
<div id="screenshots"> <img src="halo-images/ss-1.jpg" alt="ScreenShot" class="ss1" /> <img src="halo-images/ss-2.jpg" alt="ScreenShot" class="ss2" /> <img src="halo-images/ss-3.jpg" alt="ScreenShot" class="ss3" /> <img src="halo-images/ss-4.jpg" alt="ScreenShot" class="ss4" /></div>
<div class="heading">Welcome to Halo Games</div>
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<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>You can remove any link to our websites from this template you're free to use the template without linking
back to us.</p>
<div id="dealleft"> <img src="halo-images/ad-special-price.jpg" alt="Special Price" /></div>
<div id="dealright">
<div class="heading">Features</div>
<p><b>Feature 1:</b> If you're looking for beautiful and professionally made templates you can find them at Template Beauty.com.</p>
<p><b>Feature 2:</b> To find great hosting providers visit Web Hosting Zoom.</p>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="csoon">
<div class="heading2">Coming Soon</div>
<p><img src="halo-images/ss-5.jpg" alt="ScreenShot" /></p>
<p>This is a demo text. It will be replaced by the original.</p>
</div>
<div id="videobox"> <img src="halo-images/ss-6.jpg" alt="ScreenShot" class="video" /> <img src="halo-images/ss-7.jpg" alt="ScreenShot" class="video" /> <img src="halo-images/ss-8.jpg" alt="ScreenShot" class="video" /> <img src="halo-images/ss-9.jpg" alt="ScreenShot" class="video" /> <img src="halo-images/ss-10.jpg" alt="ScreenShot" class="video" />
<ul>
<li><a href="http://www.free-css.com/">Play</a></li>
<li><a href="http://www.free-css.com/">Play</a></li>
<li><a href="http://www.free-css.com/">Play</a></li>
<li><a href="http://www.free-css.com/">Play</a></li>
<li><a href="http://www.free-css.com/">Play</a></li>
</ul>
<p class="play"><a href="http://www.free-css.com/"><< Previous</a> | <a href="http://www.free-css.com/">Next >></a></p>
</div>
<div id="player"> <img src="halo-images/circle-topl.jpg" alt="Stop" class="player1" /> <img src="halo-images/circle-topr.jpg" alt="Play" class="player1" /> <img src="halo-images/circle-bottoml.jpg" alt="Pause" class="player1" /> <img src="halo-images/circle-bottomr.jpg" alt="F.Forward" class="player1" /></div>
<div id="footer">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Community</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Games</a></li>
<li><a href="http://www.free-css.com/">Download</a></li>
<li><a href="http://www.free-css.com/">Catalog</a></li>
</ul>
<br />
<br />
<p class="calign">© Copyright Information goes here. | designed by <a href="http://www.freewebsitetemplates.com">free website templates</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category