soccer01 : Sport « Templates « HTML / CSS

HTML / CSS » Templates » Sport 
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.jpgrepeat fixed; color: #363535; font: normal 11px/18px verdana, arial, helvetica, sans-serif; margin-bottom: 10px; }

#wrapper background: url(soccer01-images/bg.gifrepeat-y 00%; border-bottom: 1px solid #336600; margin: auto; width: 650px; }

#header background: url(soccer01-images/bg_header.jpgno-repeat 00%; 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.gifno-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.gifno-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.pngno-repeat 05px;
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.gifno-repeat 02px; 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.gifrepeat-x 015px; 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.gifno-repeat 00%; 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.gifno-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 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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.