clearfootball
<!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>Green Football</title>
<style type='text/css'>
h1 {
font-size: 25px;
padding: 0;
margin: 0;
}
img {
border: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#wrapper {
width: 720px;
margin: 0 auto;
margin-top: 30px;
}
#navbar {
border: 1px solid #ccc;
margin: 0px 5px 0px 5px;
padding: 4px;
background-color: #A3A38F;
}
#header {
}
#leftcolumn { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
float: left;
min-height: 40px;
margin-bottom: 10px;
}
* html #leftcolumn {height:40px} /* IE Min-Height Hack */
#leftcolumn h1 a:link{
color: #305493;
text-decoration: none;
}
#leftcolumn h1 a:visited{
color: #305493;
text-decoration: none;
}
#leftcolumn h1 a:hover{
color: #305493;
text-decoration: none;
}
#centercolumn {
text-align: right;
display: inline; /* IE Hack */
min-height: 40px;
width: 548px;
float: right;
margin-bottom: 10px;
}
* html #centercolumn {height:40px} /* IE Min-Height Hack */
#footer {
background-image: url(clearfootball-images/cs-footer.jpg);
margin: 0 5px 5px 5px;
display: inline; /* IE Hack */
padding: 9px 29px 29px 29px;
float: left;
width: 659px;
min-height: 18px;
color: #738FB7;
font-weight: bold;
}
* html #footer {height:18px} /* IE Min-Height Hack */
#footer a:link, #footer a:visited , #footer a:hover {
color: #738FB7;
text-decoration: none;
}
.mainleftcolumn {
display: inline; /* IE Hack */
float: left;
min-height: 40px;
margin-bottom: 10px;
width: 447px
}
.mainrightcolumn {
display: inline; /* IE Hack */
min-height: 40px;
width: 250px;
float: right;
margin-bottom: 10px;
color: #80A1CC;
font-size: 14px;
}
.mainrightcolumn img {
display: block;
}
.left-mid {
padding: 0px 16px 0px 16px;
background-color: #F1F4F8;
}
.left-bottom {
padding: 0;
margin: 14px;
background-color: #fff;
}
.left-bottom h1{
color: #91A900;
}
.left-mid h1{
color: #91A900;
}
.left-mid ul , .left-mid li{
color: #91A900;
margin: 0;
padding: 0;
text-indent: 15px;
list-style: none;
font-size: 12px;
}
.main-content {
margin: 9px;
color: #91A900;
}
.main-content a:link {
color: #7297C7;
text-decoration: none;
}
.main-content a:visited {
color: #7297C7;
text-decoration: none;
}
.main-content a:hover {
color: #91A900;
text-decoration: none;
}
.main-content h1 {
color: #7297C7;
}
.mainnav li{
list-style: none;
display:inline;
margin-left: 15px;
}
.mainnav li a:link , .mainnav li a:visited , .mainnav li a:hover{
list-style: none;
display:inline;
margin-left: 15px;
text-decoration: none;
color: #666;
font-size: 12px;
font-weight: bold
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<!-- Start Wrapper -->
<div id="wrapper">
<!-- Begin Logo -->
<div id="leftcolumn">
<h1><a href="http://www.free-css.com/">Free CSS Templates</a></h1>
</div>
<!-- End Logo -->
<!-- Begin Right Utility Links -->
<div id="centercolumn">
<ul class="mainnav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Code-Sucks</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
</ul>
</div>
<!-- End Right Utility Links -->
<!-- Begin Banner -->
<img src="clearfootball-images/top-text.jpg" alt="Feature Text" /><br />
<br />
<!-- End Banner -->
<!-- Begin Main Left Column -->
<div class="mainleftcolumn"><img src="clearfootball-images/cs-feature.jpg" alt="Feature Image Number 1" /> <img src="clearfootball-images/cs-feature-2.jpg" alt="Feature Image Number 2" />
<div class="main-content">
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br />
<br />
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco <br />
<br />
laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru.</div>
<div class="main-content">
<h1>Lorem Ipsum</h1>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum</div>
<div class="main-content">
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br />
<br />
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco <br />
<br />
laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru.</div>
</div>
<!-- End Main Left Column -->
<!-- Begin Main Right Column -->
<div class="mainrightcolumn">
<!-- Begin Right Blue Content -->
<img src="clearfootball-images/mainrighttop.jpg" style="display:block;" alt="" />
<div class="left-mid">
<h1>Hello There.. </h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br />
<br />
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco <br />
<br />
laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru. <br />
<br />
<h1>Upcoming Events </h1>
<ul>
<li>16.12.06 - Winter ball</li>
<li>17.12.06 - Earners Forum Party</li>
<li>18.12.06 - Wicked Fire Dance</li>
<li>19.12.06 - Eire Studio Festival</li>
<li>25.12.06 - Santa's Coming :)</li>
<li>11.01.07 - Keith Donegan B'Day</li>
</ul>
<br />
<h1>Industry News </h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br />
<br />
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco <br />
<br />
laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru. </div>
<img src="clearfootball-images/mainrightbottom.jpg" style="display:block;" alt="bottom banner" />
<!-- End Right Blue Content -->
<div class="left-bottom">
<h1>Keith Donegan</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br />
<br />
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e
xercitation ullamco <br />
<br />
laboris nisi ut aliquip ex ea commodo consequat. Duis aute iru. </div>
</div>
<div id="footer"> Copyright © with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006/07
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/clearfootball-images/vcss" alt="Valid CSS!" /> </a> </div>
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category