soccer01 : Sport « Templates « HTML / CSS






soccer01

  

<!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>Soccer 01</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* LAYOUT */

* { padding: 0; margin: 0; }

body { background: #039a01 url(soccer01-images/grass.jpg) repeat fixed; color: #363535; font: normal 11px/18px verdana, arial, helvetica, sans-serif; margin-bottom: 10px; }

#wrapper { background: url(soccer01-images/bg.gif) repeat-y 0% 0%; border-bottom: 1px solid #336600; margin: 0 auto; width: 650px; }

#header { background: url(soccer01-images/bg_header.jpg) no-repeat 0% 0%; width: 650px; height: 133px; }

#header h1 { color: #eee8aa;; font: 35px/35px georgia, times new roman, times, serif; letter-spacing: 2px; padding: 20px 0 0 130px; }

#leftcolumn { display: inline; width: 180px; float: left; }

#maincolumn { background: url(soccer01-images/bg_main.gif) no-repeat top right; float: right; width: 430px; padding: 10px 20px 20px 0; display: inline; position: relative; }

#maincolumn p { padding-bottom: 15px; }

#footer { color: #e5f5e5; background-color: #336600; padding: 10px 0 15px 0; height: 30px; text-align: center; }

#footer a { background-image: none; padding: 0; color: #e5f5e5; text-decoration: underline; outline: none; }

#footer a:hover { color: #eee8aa; text-decoration: underline; }

.clear { clear: both; background: none; }

/* NAVIGATION TOP */

#navtop ul { padding: 0; margin: 0 4px 0 0; background: #336600 url(soccer01-images/bg_navigation.gif) no-repeat; float: right; width: 645px; }

* html #navtop ul { width: 100%; }

#navtop ul li { display: inline; }

#navtop ul li a { background-image: none; padding: 3px 10px 3px 20px; color: #e5f5e5; text-decoration: none; float: right; text-transform: uppercase; outline: none; }

#navtop ul li a:hover { color: #eee8aa; text-decoration: underline; }

#navigation { width: 175px; }

/* NAVIGATION LEFT */

#navigation ul { margin-left: 4px; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; }

#navigation a { background-image: none; display: block; padding: 5px 3px 5px 7px; width: 165px; background-color: #008000; border-bottom: 1px solid #e5f5e5; outline: none; }

#navigation a:link,#navigation a:active,#navigation a:visited  { color: #e5f5e5; text-decoration: none; }

#navigation a:hover { background-color: #039a01; border-bottom: 1px solid #336600; color: #eee8aa; }

/* SITE STYLES */

#maincolumn h1 { background: url(soccer01-images/trophy.png) no-repeat 0% 5px;
font: 20px/42px georgia, times new roman, times, serif; letter-spacing: 2px; padding-left: 36px; }

#maincolumn h2, #maincolumn h3 { background-color: #e5f5e5; font: bold 16px/22px georgia, times new roman, times, serif; letter-spacing: 2px; border-top: 1px solid #363636; border-bottom: 1px solid #363636; margin-bottom: 10px; padding-left: 5px; }

#maincolumn h4, #maincolumn h5, #maincolumn h6 { font: bold 11px/18px verdana, arial, helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; }

a, a:link, a:active, a:visited { background: url(soccer01-images/link.gif) no-repeat 0% 2px; color: #3cb371; font-weight: bold; outline: none; padding-left: 15px; text-decoration: underline; }

a:hover { color: #ff8c00; text-decoration: none; }

div.news { background: url(soccer01-images/h2_line.gif) repeat-x 0% 15px; text-align: center; }

div.news p { text-align: left; }

div.news a, div.news a:link, div.news a:active, div.news a:visited { background: url(soccer01-images/page.gif) no-repeat 0% 0%; color: #363636; padding: 0 0 5px 21px; }

div.news a:hover { color: #999; text-decoration: none; }

div.news strong { color: #336600; font: normal 16px/32px georgia, times new roman, times, serif; letter-spacing: 2px; background-color: #fff; padding: 0 5px 0 5px; }

div.tableleft { font-size: 10px; margin: 10px 0 10px 10px; }

div.tableleft table { border: 1px solid #336600; margin-top: 5px; }

div.tableleft td { padding: 0 0 0 2px; }

div.tableleft .yourteam { background-color: #039A01; color: #fff; }

div.tableleft .otherteam { background-color: #fff; }

#leftcolumn h3 { font: bold 11px/18px verdana,arial, helvetica, sans-serif; text-transform: uppercase; letter-spacing: 2px; margin: 10px 0 10px 0; }

#leftcolumn h4 { background: url(soccer01-images/ball.gif) no-repeat left 6px; margin: 10px 5px 0 0; font: bold 11px/18px verdana,arial, helvetica, sans-serif; text-transform: uppercase; letter-spacing: 2px; text-align: right; border-top: 1px solid #336600; padding-top: 5px; }



</style>


</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
  <!-- Begin Header -->
  <div id="header">
    <h1>Soccer 01</h1>
  </div>
  <!-- End Header -->
  <!-- Begin Navigation -->
  <div id="navtop">
    <ul>
      <li><a href="http://www.free-css.com/">Sitemap</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
      <li><a href="http://www.free-css.com/">Home</a></li>
    </ul>
  </div>
  <!-- End Navigation -->
  <!-- Begin Left Column -->
  <div id="leftcolumn">
    <div id="navigation">
      <ul>
        <li><a href="http://www.free-css.com/">> Home</a></li>
        <li><a href="http://www.free-css.com/">> Page</a></li>
        <li><a href="http://www.free-css.com/">> Page</a></li>
        <li><a href="http://www.free-css.com/">> Page</a></li>
        <li><a href="http://www.free-css.com/">> Page</a></li>
      </ul>
    </div>
    <div class="tableleft">
      <h3>Season 2006-07</h3>
      <p> <strong>Sunday 13 May 2007</strong> <br />
        Liverpool 2 - 2 Charlton </p>
      <h4>Tables</h4>
      <table width="164" border="0" cellpadding="0" cellspacing="0">
        <tr style="background: #336600; color: #fff;">
          <td width="18"><strong>#</strong></td>
          <td><strong>Team</strong></td>
          <td width="30"><div align="center"><strong>P</strong></div></td>
          <td width="30"><div align="center"><strong>Pts</strong></div></td>
        </tr>
        <tr class="otherteam">
          <td width="18">1</td>
          <td>Man Utd </td>
          <td width="30"><div align="center">38</div></td>
          <td width="30"><div align="center">89</div></td>
        </tr>
        <tr class="otherteam">
          <td width="18">2</td>
          <td>Chelsea </td>
          <td width="30"><div align="center">38</div></td>
          <td width="30"><div align="center">83</div></td>
        </tr>
        <tr class="yourteam">
          <td width="18">3</td>
          <td>Liverpool </td>
          <td width="30"><div align="center">38</div></td>
          <td width="30"><div align="center">68</div></td>
        </tr>
        <tr class="otherteam">
          <td width="18">4</td>
          <td>Arsenal</td>
          <td width="30"><div align="center">38</div></td>
          <td width="30"><div align="center">68</div></td>
        </tr>
        <tr class="otherteam">
          <td width="18">5</td>
          <td>Spurs</td>
          <td width="30"><div align="center">38</div></td>
          <td width="30"><div align="center">60</div></td>
        </tr>
      </table>
    </div>
  </div>
  <!-- End Left Column -->
  <!-- Begin Right Column -->
  <div id="maincolumn">
    <h1>Welcome! (h1)</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sapien enim, cursus in, aliquam sit amet, convallis eget, metus. Duis dui mi, varius at, lacinia eget, ullamcorper et, tortor. Pellentesque ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci mi, varius eget, mollis vel, rhoncus a, leo. Ut eros enim, vehicula quis, gravida ac, sodales sit amet, orci. Nulla eleifend tristique erat.</p>
    <div class="news"><strong>Latest News</strong>
      <p> <a href="http://www.free-css.com/">Nunc commodo metus et lorem. Phasellus vel libero.</a></p>
      <p> <a href="http://www.free-css.com/">Vestibulum eu enim. Mauris pharetra. Vestibulum ligula libero, vestibulum quis, commodo non, sagittis eget, elit.</a></p>
      <p> <a href="http://www.free-css.com/">Ut nec tellus. Nunc ligula quam, vulputate ut, imperdiet nec, luctus at, magna. Nunc posuere nulla ac tortor.</a></p>
    </div>
    <h2>Headline! (h2, h3)</h2>
    <p>Quisque vulputate. Aliquam condimentum, odio vel ultrices sodales, augue lorem vehicula mi, vel nonummy nisl eros et tortor. Duis laoreet pellentesque lorem. Nam sagittis condimentum libero. Nullam a ante vel massa accumsan elementum. Sed mauris metus, tincidunt quis, blandit at, viverra a, ligula. Pellentesque neque metus, mattis non, tincidunt vitae, euismod scelerisque, nulla. Fusce justo. Donec nec nibh. Sed suscipit bibendum leo. Nulla erat ligula, egestas consequat, sagittis ut, fermentum a, diam. Sed turpis est, aliquam nec, lacinia sed, aliquam non, libero. Ut turpis. Pellentesque viverra pharetra quam.</p>
    <p> <a href="http://www.free-css.com/">This is a link</a></p>
    <h4>Headline (h4, h5, h6)</h4>
    <p>Aenean dapibus, leo vitae eleifend porta, sem ipsum nonummy est, eu fermentum arcu lectus in lacus. Vestibulum tristique metus eu lorem. Pellentesque sed erat. Morbi pharetra condimentum massa. Vestibulum vel nulla at eros porta tempus. Fusce at lorem. Nulla facilisis. Phasellus nisl. Integer id massa nec tellus rutrum pellentesque. Mauris orci mauris, dictum vitae, varius eget, vestibulum quis, risus. Pellentesque dictum, magna vitae pulvinar interdum, orci lacus posuere neque, et lacinia dui eros ut erat. Ut purus. Nullam ac tellus et eros condimentum interdum.</p>
    <div class="clear"></div>
  </div>
  <!-- End Right Column -->
  <div class="clear"></div>
  <div id="footer"> &copy; Copyright 2007 by Your Name | Design by <a href="http://www.wfiedler-online.de">wfiedler</a><br />
    Icons by IconArchive (Free for non-commercial use) </div>
</div>
<!-- End Wrapper -->
</body>
</html>

   
    
  








Related examples in the same category

1.football-card
2.basketball
3.golf
4.sport-zone
5.sportscars
6.sports_cafe
7.sports_templates
8.sports_turf
9.winter-olympics
10.yoga