sportscars : Sport « Templates « HTML / CSS

sportscars
  

<!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>Sports Cars</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by SacDesigner
http://www.sacdesigner.com
sacdesigner@gmail.com
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0;
  padding: 0;
  background: #000000 url(sportscars-images/img01.gif) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #FFFFFF;
}

h1, h2, h3 {
  margin: 0;
  font-weight: normal;
  color: #FFFFFF;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 167%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, ol, ul {
  line-height: 170%;
}

p {
}

ol {
  margin-left: 0;
  padding-left: 0;
  list-style-position: inside;
}

ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

ul li {
  padding-left: 15px;
  background: url(sportscars-images/img07.gif) no-repeat 0px 7px;
}

blockquote {
  margin: 0;
  padding-left: 20px;
  font-style: italic;
}

blockquote * {
  line-height: normal;
}

a {
  color: #666666;
}

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

img {
  border: 5px solid #A60000;
}

img.left {
  float: left;
  margin: 3px 15px 0 0;
}

img.right {
  float: right;
  margin: 3px 0 0 15px;
}

hr {
  display: none;
}

/* Menu */

#menu {
  width: 760px;
  height: 80px;
  margin: 0 auto;
  padding: 0 5px 5px 5px;
  background: #545454;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: inline;
  margin: 0;
  padding: 0;
}

#menu a {
  display: block;
  float: left;
  width: 125px;
  height: 53px;
  padding: 27px 0 0 0;
  background: #A60000 url(sportscars-images/img02.gif) no-repeat;
  border-left: 2px solid #A60000;
  text-decoration: none;
  text-align: center;
  font-size: 136%;
  color: #FFFFFF;
}

#menu a:hover {
  background: #A60000 url(sportscars-images/img04.gif) no-repeat;
  color: #000000;
}

#menu .active a {
  background: #A60000 url(sportscars-images/img03.gif) no-repeat;
  border: none;
  color: #000000;
}

/* Header */

#header {
  width: 760px;
  height: 220px;
  margin: 0 auto;
  padding: 0 5px 5px 5px;
  background: #545454 url(sportscars-images/img05.jpg) no-repeat 5px 0px;
}

/* Logo */

#logo {
  float: right;
  width: 345px;
  height: 220px;
  background: #545454 url(sportscars-images/img06.jpg) no-repeat;
}

#logo h1, #logo h2 {
  text-align: center;
}

#logo h1 {
  padding-top: 77px;
  font-size: 240%;
}

#logo h2 {
  font-size: 150%;
}

#logo a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 730px;
  margin: 0 auto;
  padding: 30px 0;
}

/* Content */

#content {
  float: left;
  width: 375px;
  padding-top: 8px;
}

.twocols {
}

.twocols .title {
  padding-bottom: 10px;
  border-bottom: 1px solid #A60000;
}

.twocols .col1, .twocols .col2 {
  width: 175px;
}

.twocols .col1 {
  float: left;
}

.twocols .col2 {
  float: right;
}

.twocols ul {
}

.twocols ul li {
  padding-left: 0;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 310px;
}

.boxed {
}

.boxed .title {
  height: 33px;
  margin: 0;
  padding: 12px 0 0 20px;
  background: #A60000 url(sportscars-images/img06.jpg) no-repeat;
  text-transform: uppercase;
  font-size: 136%;
  color: #FFFFFF;
}

.boxed .content {
  padding: 20px;
}

.boxed h3 {
  margin: 0;
}

.boxed p, .boxed ul, .boxed ol {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: normal;
}

.boxed ul {
}

.boxed ul li {
  padding: 10px 15px;
  border-top: 1px solid #666666;
}

.boxed ul li.first {
  border: none;
}

/* Search */

#search {
}

#search form {
  margin: 0;
  padding: 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search p {
  margin: 0;
  font-size: 85%;
}

#searchinput {
  width: 180px;
}

#searchsubmit {
}

/* Footer */

#footer {
  width: 740px;
  margin: 0 auto;
  height: 30px;
  padding: 10px;
  background: #A60000;
}

#footer p {
  margin: 0;
  line-height: normal;
  font-size: 85%;
}

#footer a {
}

#legal {
  float: left;
}

#links {
  float: right;
}

</style>


</head>
<body>
<div id="menu">
  <ul>
    <li class="active"><a href="http://www.free-css.com/">Home</a></li>
    <li><a href="http://www.free-css.com/">About</a></li>
    <li><a href="http://www.free-css.com/">Events</a></li>
    <li><a href="http://www.free-css.com/">Galleries</a></li>
    <li><a href="http://www.free-css.com/">Forums</a></li>
    <li><a href="http://www.free-css.com/">Contact</a></li>
  </ul>
</div>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Sports Cars</a></h1>
    <h2><a href="http://www.free-css.com/">Free Template</a></h2>
  </div>
</div>
<div id="page">
  <div id="content">
    <div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #999999;">
      <h1 class="title">Welcome to Sports Cars!</h1>
      <p><img src="sportscars-images/img07.jpg" alt="" width="120" height="160" class="left" /></p>
      <p><strong>Lorem Ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
      <h2>Praesent Scelerisque</h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
      <blockquote>
        <p>&ldquo;Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget.&rdquo;</p>
      </blockquote>
    </div>
    <div>&nbsp;</div>
    <div class="twocols">
      <div class="col1">
        <h3 class="title">Lorem Ipsum Dolor</h3>
        <p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.</p>
        <p><a href="http://www.free-css.com/">Read more&hellip;</a></p>
      </div>
      <div class="col2">
        <h3 class="title">Pellentesque Quis</h3>
        <ul class="list">
          <li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
          <li><a href="http://www.free-css.com/">Vestibulum luctus dui</a></li>
          <li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
          <li><a href="http://www.free-css.com/">Etiam malesuada rutrum</a></li>
          <li><a href="http://www.free-css.com/">Aenean facilisis ligula</a></li>
          <li><a href="http://www.free-css.com/">Vestibulum luctus dui</a></li>
          <li><a href="http://www.free-css.com/">Ut elit vitae augue</a></li>
          <li><a href="http://www.free-css.com/">Sed sagittis leo vehicula</a></li>
          <li><a href="http://www.free-css.com/">Ut elit vitae augue</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="sidebar">
    <div id="search" class="boxed">
      <h2 class="title">Quick Search</h2>
      <div class="content">
        <form id="searchform" method="get" action="http://www.free-css.com/">
          <fieldset>
          <input id="searchinput" type="text" name="searchinput" value="" />
          <input id="searchsubmit" type="submit" value="Search" />
          </fieldset>
        </form>
        <p><a href="http://www.free-css.com/">Advanced Search</a></p>
      </div>
    </div>
    <div id="news" class="boxed">
      <h2 class="title">News &amp; Events</h2>
      <div class="content">
        <ul>
          <li class="first">
            <h3>04 July 2007</h3>
            <p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper&hellip;</a></p>
          </li>
          <li>
            <h3>29 June 2007</h3>
            <p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue&hellip;</a></p>
          </li>
          <li>
            <h3>13 June 2007</h3>
            <p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus sagittis&hellip;</a></p>
          </li>
        </ul>
      </div>
    </div>
    <div id="extra" class="boxed">
      <h2 class="title">Sagittis Convallis</h2>
      <div class="content">
        <ul class="list">
          <li class="first"><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
          <li><a href="http://www.free-css.com/">Vestibulum luctus venenatis</a></li>
          <li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
          <li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
          <li><a href="http://www.free-css.com/">Aenean elementum facilisis</a></li>
          <li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
          <li><a href="http://www.free-css.com/">Sed quis odio sagittis leo</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
  <p id="legal">&copy;2007 Sports Cars. All Rights Reserved<br />
    Designed by <a href="http://www.sacdesigner.com">SacDesigner.com</a></p>
  <p id="links"><a href="http://www.free-css.com/">Privacy</a> | <a href="http://www.free-css.com/">Terms</a> | <a target="_blank" href="http://validator.w3.org/check/referer"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</body>
</html>
Related examples in the same category

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