football-card : Sport « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Sport

football-card

     

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

body {
  padding: 6px 0px 12px;
  background-color: #fff;
  color: #333333;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

a {
  text-decoration: underline;
}

a:hover {
  color: #305785;
  background-color: inherit;
}

span {
  display: none;
}

img {
  border: none;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

p {
  margin: 10px 0px 10px;
  text-align: justify;
  line-height: 15px;
}

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

input {
  padding-top: 2px;
  background-color: #fff;
  color: #666666;
  font-family: verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
}

select {
  background-color: #fff;
  color: #666666;
  font-family: verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 11px;
}


#container {
  margin: 0px auto;
  padding-top: 7px;
  width: 732px;
  background: url('football-card-images/background_top.gif') repeat-x 0px 0px;
  text-align: justify;
}


/* Page Header */

#page_header {
  margin-bottom: 1px;
  background: url('football-card-images/header_image.gif') no-repeat 100% 0px;
  width: 732px;
  height: 174px;
  overflow: hidden;
}

#page_header h1 {
  width: 221px;
  height: 174px;
  background: url('football-card-images/website_name.gif') #387e28 no-repeat 50% 50%;
  color: #fff;
}


/* Page Menu */

#page_menu {
  width: 732px;
  height: 44px;
  overflow: hidden;
}

#page_menu ul {
  width: 732px;
  height: 44px;
}

#page_menu li {
  margin-left: 1px;
  height: 44px;
  float: left;
  text-align: center;
  overflow: hidden;
}

#page_menu li.black {
  margin: 0px;
}

#page_menu li a {
  padding: 0px 12px;
  color: inherit;
  background: url('football-card-images/menu_bgred.gif') #a52322 no-repeat 0px 0px;
  overflow: hidden;
  display: block;
  cursor: pointer;
}

#page_menu li.black a {
  color: inherit;
  background: url('football-card-images/menu_bgblack.gif') #000000 no-repeat 0px 0px;
  border-right: #a52322 1px solid;
}

#page_menu li a:hover {
  color: inherit;
  background-color: #891d1c;
}

#page_menu li.black a:hover {
  color: inherit;
  background-color: #424242;
}

#page_menu li strong {
  height: 44px;
  display: block;
}

#page_menu li#game {
  width: 96px;
}

#page_menu li#game strong {
  width: 95px;
  background: url('football-card-images/menu_game.gif') no-repeat 0px 50%;
}

#page_menu li#autographs {
  width: 90px;
}

#page_menu li#autographs strong {
  width: 90px;
  background: url('football-card-images/menu_autograph.gif') no-repeat 0px 50%;
}

#page_menu li#rookies {
  width: 76px;
}

#page_menu li#rookies strong {
  width: 76px;
  background: url('football-card-images/menu_rookies.gif') no-repeat 0px 50%;
}

#page_menu li#cards {
  width: 112px;
}

#page_menu li#cards strong {
  width: 112px;
  background: url('football-card-images/menu_cards.gif') no-repeat 0px 50%;
}

#page_menu li#commons {
  width: 88px;
}

#page_menu li#commons strong {
  width: 88px;
  background: url('football-card-images/menu_commons.gif') no-repeat 0px 50%;
}

#page_menu li#nonsports {
  width: 88px;
}

#page_menu li#nonsports strong {
  width: 88px;
  background: url('football-card-images/menu_nonsports.gif') no-repeat 0px 50%;
}

#page_menu li#myebay {
  width: 81px;
}

#page_menu li#myebay strong {
  width: 81px;
  background: url('football-card-images/menu_myebay.gif') no-repeat 0px 50%;
}

#page_menu li#contactus {
  width: 94px;
}

#page_menu li#contactus strong {
  width: 94px;
  background: url('football-card-images/menu_contactus.gif') transparent no-repeat 0px 50%;
}


/* Page Search */

#page_search {
  margin-top: 10px;
  margin-left: 480px;
  width: 250px;
  height: 36px;
  z-index: 1;
  position: absolute;
}

#page_search h3 {
  padding-top: 6px;
  width: 60px;
  display: block;
  color: #666;
  background-color: inherit;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  float: left;
}

#page_search form {
  padding-right:0;
}

#page_search select, #page_search input {
  margin-top: 2px;
  width: 130px;
  height: 19px;
  float: left;
}

#page_search input.button {
  margin:2px 0 0 10px;
  width: 23px;
  height: 19px;
  float:left;
}



/* Page Content */

#page_content {
  padding: 5px 0px 0px;
  width: 732px;
  background: url('football-card-images/content_background.gif') repeat-y 0px 0px;
}

.content_box {
  margin: 0px auto;
  padding: 11px 0px 0px;
  width: 710px;
}

.content_box h2 {
  height: 18px;
}


/* Welcome Text*/

#welcome_text {
  padding: 0px 11px;
}

#welcome_text h2 {
  width: 160px;
  background: url('football-card-images/welcome_header.gif') no-repeat 0px 0px;
}


/* Services Column */

#services_column {
  padding-top: 1px;
  width: 424px;
  text-align: right;
  float: left;
}

#services1 {
  margin: 2px 0px 0px auto;
  width: 414px;
  height: 117px;
  background: url('football-card-images/_thumbnail01.gif') #64970c no-repeat 0px 0px;
  color: #fff;
  overflow: hidden;
  text-align: left;
}

#services2 {
  margin: 2px 0px 0px auto;
  width: 414px;
  height: 112px;
  background: url('football-card-images/_thumbnail02.gif') #731f21 no-repeat 0px 0px;
  color: #d5bcbd;
  overflow: hidden;
  text-align: left;
}

#services3 {
  margin: 2px 0px 0px auto;
  width: 414px;
  height: 119px;
  background: url('football-card-images/_thumbnail03.gif') #282828 no-repeat 0px 0px;
  color: #bfbfbf;
  overflow: hidden;
  text-align: left;
}

.services_textbox {
  margin-left: 155px;
  margin-right: 10px;
  width: 248px;
}

.services_textbox p {
  margin-bottom: 5px;
}

.link-more {
  padding-top: 5px;
  padding-right: 10px;
  text-align: right;
  font-weight: bold;
  font-size: 10px;
}

.link-more a {
  color: #fff;
  background-color: inherit;
}

.link-more a:hover {
  color: #d7d7d7;
  background-color: inherit;
}


/* Order Cards */

#order_cards {
  margin: 3px 0px 3px 16px;
  color: #9f0b17;
  background-color: inherit;
  font-weight: bold;
  border: #98141b 1px solid;
  float: left;
  font-family: tahoma, arial, sans-serif;
  font-size: 11px;

  width : 283px;
  voice-family : "\"}\"";
  voice-family : inherit;
  width : 281px;
}

#order_cards {
  clear: right;
}

#order_cards a {
  color: #9f0b17;
  background-color: inherit;
}

#order_cards a:hover {
  color: #387e28;
  background-color: inherit;
}

#order_cards h2 {
  margin-bottom: 12px;
  width: 281px;
  height: 28px;
  color: inherit;
  background: url('football-card-images/order_header.gif') #387e28 no-repeat 0px 0px;
}

#order_accept {
  margin: 10px auto 2px;
  text-align: center;
}

#order_cards ul {
  padding: 0px 3px 0px 4px;
  font-size: 10px;
  height: 95px;
}

#order_cards li {
  padding: 0px 5px;
  color: #9f432b;
  background-color: #fff;
  background-position: 5px 0px;
  background-repeat: no-repeat;
  float: left;
}

#order_cards li#online {
  background-image: url('football-card-images/order_online.gif');
}

#order_cards li#phone {
  background-image: url('football-card-images/order_phone.gif');
}

#order_cards li#mail {
  background-image: url('football-card-images/order_mail.gif');
}

#order_cards li a {
  display: block;
  background: inherit;
  background-position: 0px 0px;
  color: #9f432b;
  font-weight: bold;
  text-decoration: none;
  text-align:center;
  text-transform: lowercase;
  cursor: pointer;
}

#order_cards li a .block {
  display: block;
  border: #cccccc 1px solid;
}

#order_cards li a:hover .block {
  color: inherit;
  background-color: #f2f2f2;
}

#order_cards li a span {
  width: 79px;
  height: 73px;
  display: block;
}

#order_cards li a strong {
  line-height: 12px;
  width: 79px;
  display: block;
}

#order_cards li#phone strong {
  width: 80px;
}

#order_text {
  padding: 0px 15px 12px;
}

#order_text p {
  line-height: 14px;
}


/* Mailing List */

#mailing_list {
  margin-bottom: 1px;
  margin-left: 16px;
  width: 283px;
  height: 67px;
  float: left;
  background-color: #3f72ae;
  color: #fff;
  overflow: hidden;
  font-family: tahoma, arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

#mailing_list h2 {
  padding-top: 8px;
  font-size: 11px;
  font-weight: bold;
}

#mailing_list form {
  margin-left: 43px;
  padding-top: 15px;
}

#mailing_list input {
  margin-right: 15px;
  padding: 2px 0px 1px;
  border: none;
  width: 160px;
  font-family: tahoma, arial, sans-serif;
  font-size: 12px;
  float: left;
}

#mailing_list input.button {
  margin: 0px;
  padding: 0px;
  width: 23px;
  height: 17px;
  background: none;
}


/* Footer Links */

#footer_links {
  padding: 18px 0px 0px;
  color: #083360;
  background: url('football-card-images/footer_background.gif') #fff repeat-x 0px 1px;
  font-family: tahoma, arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

#footer_links a {
  color: #083360;
  text-decoration: none;
  background-color: inherit;
}

#footer_links a:hover {
  color: #185799;
  background-color: inherit;
}

#footer_links ul {
  margin: 0px auto;
  padding: 0px 0px 0px 100px;
}

#footer_links li {
  padding: 0px 12px 0px 10px;
  color: inherit;
  background: url('football-card-images/footer_links_div.gif') #fff no-repeat 100% 100%;
  text-transform: lowercase;
  float: left;
}

#footer_links li.last {
  padding-right: 10px;
  background: none;
}


/* Page Footer */

#page_footer {
  padding: 15px 20px 0px;
  color: #000;
  background-color: #fff;
  font-family: tahoma, arial, sans-serif;
  font-weight: bold;
  text-align: center;
}

#page_footer a {
  color: #000;
  background-color: inherit;
}

#page_footer a:hover {
  color: #5c5c5c;
  background-color: inherit;
}


</style>


</head>
<body>
<div id="container">
  <!-- Start of Page Header -->
  <div id="page_header">
    <h1><span>Football Card</span></h1>
    <h3><span>Company Caption Here</span></h3>
  </div>
  <!-- End of Page Header -->
  <!-- Start of Page Menu -->
  <div id="page_menu">
    <ul>
      <li class="black" id="game"><a href="http://www.free-css.com/"><strong><span>Home</span></strong></a></li>
      <li id="autographs"><a href="http://www.free-css.com/"><strong><span>Autographs</span></strong></a></li>
      <li id="rookies"><a href="http://www.free-css.com/"><strong><span>Rookies</span></strong></a></li>
      <li id="cards"><a href="http://www.free-css.com/"><strong><span>Number Cards</span></strong></a></li>
      <li id="commons"><a href="http://www.free-css.com/"><strong><span>Commons</span></strong></a></li>
      <li id="nonsports"><a href="http://www.free-css.com/"><strong><span>Nonsports</span></strong></a></li>
      <li id="myebay"><a href="http://www.free-css.com/"><strong><span>My Ebay</span></strong></a></li>
      <li id="contactus"><a href="http://www.free-css.com/"><strong><span>Contact Us</span></strong></a></li>
    </ul>
  </div>
  <!-- End of Page Menu -->
  <!-- Start of Page Search -->
  <div id="page_search">
    <form action="http://www.free-css.com/">
      <div>
        <h3>Search: </h3>
        <input name="search" type="text" size="20" />
        <input type="image" src="football-card-images/search_button.gif" alt="Go" class="button" />
        <div class="clearthis">&nbsp;</div>
      </div>
    </form>
  </div>
  <!-- End of Page Search -->
  <!-- Start of Page Content -->
  <div id="page_content">
    <div id="welcome_text">
      <div class="content_box">
        <h2><span>Welcome to Our Website</span></h2>
        <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&#8217;re having problems editing the template Please don&#8217;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. <a href="http://www.free-css.com/">More...</a></p>
      </div>
    </div>
    <!-- Start of Services Column -->
    <div id="services_column">
      <!-- Start of Service Listing 1 -->
      <div id="services1">
        <div class="services_textbox">
          <h2><span>Services 1</span></h2>
          <p> Please don&#8217;t remove the link at the bottom. We have worked hard to make the templates and ask that you respect our hard work so we can continue providing you with high quality templates. </p>
          <div class="link-more"> <a href="http://www.free-css.com/">more</a> </div>
          <div class="clearthis">&nbsp;</div>
        </div>
      </div>
      <!-- End of Service Listing 1 -->
      <!-- Start of Service Listing 2 -->
      <div id="services2">
        <div class="services_textbox">
          <h2><span>Services 2</span></h2>
          <p> If you really want to remove the link you can buy a copyright free version on our website. Thanks. </p>
          <div class="link-more"> <a href="http://www.free-css.com/">more</a> </div>
          <div class="clearthis">&nbsp;</div>
        </div>
      </div>
      <!-- End of Service Listing 2 -->
      <!-- Start of Service Listing 3 -->
      <div id="services3">
        <div class="services_textbox">
          <h2><span>Services 3</span></h2>
          <p> Please Please don&#8217;t remove the link at the bottom. We have worked hard to make the templates and ask that you respect our hard work so we can continue providing you with high quality templates. </p>
          <div class="link-more"> <a href="http://www.free-css.com/">more</a> </div>
          <div class="clearthis">&nbsp;</div>
        </div>
      </div>
      <!-- End of Service Listing 3 -->
    </div>
    <!-- End of Services Column -->
    <!-- Start of Order Cards -->
    <div id="order_cards">
      <div id="order_accept">
        <h3><span>We Accept:</span></h3>
        <img src="football-card-images/order_creditcards.gif" width="278" height="28" alt="Paypal, Visa, Mastercard, Amex Discover, eCheck" /> </div>
      <h2><span>Three Ways to Order Cards</span></h2>
      <ul>
        <li id="online"><a href="http://www.free-css.com/"><span>&nbsp;</span><strong class="block">Online</strong></a></li>
        <li id="phone"><a href="http://www.free-css.com/"><span>&nbsp;</span><strong class="block">Phone</strong></a></li>
        <li id="mail"><a href="http://www.free-css.com/"><span>&nbsp;</span><strong class="block">Mail</strong></a></li>
      </ul>
      <div class="clearthis">&nbsp;</div>
      <div id="order_text">
        <p> If you really want to remove the link you can buy a copyright free version on our website. <br />
          <br />
          Thanks. </p>
      </div>
    </div>
    <!-- End of Order Cards -->
    <!-- Start of Mailing List -->
    <div id="mailing_list">
      <h2>Join the Sports Card Mailing List Email</h2>
      <form action="http://www.free-css.com/">
        <div>
          <input type="text" />
          <input type="image" src="football-card-images/mailinglist_button.gif" alt="Go" class="button" />
        </div>
      </form>
    </div>
    <!-- End of Mailing List -->
    <div class="clearthis">&nbsp;</div>
  </div>
  <!-- End of Page Content -->
  <!-- Start of Footer Links -->
  <div id="footer_links">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Mage Rone</a></li>
      <li><a href="http://www.free-css.com/">Rookies</a></li>
      <li><a href="http://www.free-css.com/">Number Cards</a></li>
      <li><a href="http://www.free-css.com/">Commons</a></li>
      <li class="last"><a href="http://www.free-css.com/">Contact Us</a></li>
    </ul>
    <div class="clearthis">&nbsp;</div>
  </div>
  <!-- End of Footer Links -->
  <!-- Start of Page Footer -->
  <div id="page_footer"> Web design by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> </div>
  <!-- End of Page Footer -->
</div>
</body>
</html>








Related examples in the same category

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