coolracing : Effect « Templates « HTML / CSS






coolracing

    

<!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>Cool Racing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider for www.csstemplateheaven.com */

* {margin: 0;
    padding: 0;
}

body { font-family:Arial, Helvetica, sans-serif;
       font-size: 62.5%;
}

#header-{
  background-image: url(coolracing-images/header_bg.jpg);
  background-repeat: repeat-x;
  height: 169px;
}

#header_menu{
  background-image: url(coolracing-images/header_menu.jpg);
  background-repeat: repeat-x;
  text-align: right;
  height: 73px;
  padding-top: 10px;
}

#container {
  font-size: 1.2em;
}

#left {
  float: left;
  width: 161px;
  margin-left: 20px!important;
  margin-left: 10px;
    padding-top: 27px;
}

#right {
  float: right;
  width: 210px;
  margin-right: 5px;
  padding-top: 27px;
}

#content {
  margin-right: 250px;
  margin-left: 210px;
  padding: 5px;
}

#footer {
  background-image: url(coolracing-images/footer_bg.jpg);
  background-repeat: repeat-x;
  height: 23px;
  text-align: center;
  font-size: .9em;
  padding-top: 60px;
}

p{  margin-top: 8px;
  margin-bottom: 8px;
}

h1{
  color: #FFFFFF;
  font-size: 3em;
  padding-top: 70px;
  padding-left: 50px;
}

.heading_color{
  color: #FF9900;  
}


h2 {
  margin-bottom: 15px;
  border-bottom: 1px solid #A7AAB3;
}

h3 {margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #A7AAB3;
}

h4 {
  background-image: url(coolracing-images/menu_tab.jpg);
  height: 31px;
  width: 146px;
  padding-top: 5px;
  padding-left: 15px;
}

.images_left {float: left;
               margin: 5px;
}

.thumbs {border: 1px solid gray;
         margin: 5px;
     padding: 1px;
}

a:link {color: #000000}     /* unvisited link */
a:visited {color: #333333}  /* visited link */
a:hover {color: #FF6633}   /* mouse over link */
a:active {color: #FF3333}   /* selected link */

/***********************************'   Left side Menu  *******************************/

#navlist
{
  padding-left: 0;
  margin-left: 0;
  border-bottom: 1px solid #C2C2CA;
  width: 160px;
}

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid #C2C2CA;
}

#navlist li a {
  text-decoration: none;

}

/***********************************'  header-Menu  ****************/

.navlist li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  font-weight: bold;
  font-size: 1.1em;
}

</style>


</head>
<body>
<div id="header">
  <h1><span class="heading_color">Cool</span> Racing</h1>
</div>
<div id="header_menu">
  <ul class="navlist">
    <li><a href="http://www.free-css.com/">Log in</a></li>
    <li><a href="http://www.free-css.com/">Sign up!</a></li>
  </ul>
</div>
<div id="container">
  <div id="left">
    <h4>Menu</h4>
    <div id="navcontainer">
      <ul id="navlist">
        <li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
        <li><a href="http://www.free-css.com/">Item two</a></li>
        <li><a href="http://www.free-css.com/">Item three</a></li>
        <li><a href="http://www.free-css.com/">Item four</a></li>
        <li><a href="http://www.free-css.com/">Item five</a></li>
      </ul>
    </div>
  </div>
  <div id="right"><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_2.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_2.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_2.jpg" alt="" width="48" height="48" class="thumbs" /><img src="coolracing-images/demo_car_1.jpg" alt="" width="48" height="48" class="thumbs" /></div>
  <div id="content">
    <h2>About this template </h2>
    <p>This template is created by Dieter Schneider Desember 2006. It's valid Xhtml 1.0 Strict! If you want the PSD file for this  template you can purchase it at CssTemplateHeaven.com for only 7$, this will give you a lot more flexibility. I kindly ask you to not  remove the copyright in the footer if you have the free version of this  template. Tested in the latest versions of FF, Opera and in IE 6.0. Enjoy your template. </p>
    <h3>Lorem ipsum dolor sit amet</h3>
    <p><img src="coolracing-images/cool_original_logo.jpg" alt="" width="208" height="141" class="images_left" /> This will spice up your template pretty well, only seven dollars :) </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu magna at nulla feugiat dapibus. Nam nec turpis. Donec tortor. Integer venenatis. Donec accumsan gravida pede. Proin quis leo auctor dolor euismod fringilla. Praesent sodales leo sit amet neque. Donec lorem ipsum, cursus eget, consectetuer et, ultricies sed, massa. Donec rhoncus erat quis neque. Fusce euismod condimentum nulla.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu magna at nulla feugiat dapibus. Nam nec turpis. Donec tortor. Integer venenatis. Donec accumsan gravida pede. Proin quis leo auctor dolor euismod fringilla. Praesent sodales leo sit amet neque. Donec lorem ipsum, cursus eget, consectetuer et, ultricies sed, massa. Donec rhoncus erat quis neque. Fusce euismod condimentum nulla.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu magna at nulla feugiat dapibus. Nam nec turpis. Donec tortor. Integer venenatis. Donec accumsan gravida pede. Proin quis leo auctor dolor euismod fringilla. Praesent sodales leo sit amet neque. Donec lorem ipsum, cursus eget, consectetuer et, ultricies sed, massa. Donec rhoncus erat quis </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu magna at nulla feugiat dapibus. Nam nec turpis. Donec tortor. Integer venenatis. Donec accumsan gravida pede. Proin quis leo auctor dolor euismod fringilla. Praesent sodales leo sit amet neque. Donec lorem ipsum, cursus eget, consectetuer et, ultricies sed, massa. Donec rhoncus erat quis neque. Fusce euismod condimentum nulla.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu magna at nulla feugiat dapibus. Nam nec turpis. Donec tortor. Integer venenatis. Donec accumsan gravida pede. Proin quis leo auctor dolor euismod fringilla. Praesent sodales leo sit amet neque. Donec lorem ipsum, cursus eget, consectetuer et, ultricies sed, massa. Donec rhoncus erat quis </p>
  </div>
  <div id="footer">&copy; <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a> | Created by Dieter Schneider 2006</div>
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.amazinglycool
2.exposure
3.expressivestars
4.extended
5.external
6.extracts
7.falling-away
8.fantasy
9.flare
10.flashyweb
11.flash_web
12.fireworks
13.floating
14.falling
15.fantasyland
16.metamorph_weird
17.metamorph_violet
18.metamorph_violetdream
19.metamorph_mydesign
20.metamorph_myst
21.metamorph_mywaves
22.metamorph_myweb
23.metamorph_freedom_lt
24.metamorph_gloryfield
25.metamorph_horizon
26.bubble
27.classic-luxury
28.classic
29.classique
30.classliclink
31.civilized
32.metamorph_cool
33.metamorph_imaginary
34.metamorph_infinity
35.metamorph_newage
36.metamorph_madness
37.metamorph_heaven
38.metamorph_lensflare
39.metamorph_shinyblur_lt
40.metamorph_sparks_lt
41.metamorph_soulfrost
42.metamorph_space
43.metamorph_spaceglowing
44.metamorph_sphere
45.metamorph_starwars
46.metamorph_steel
47.metamorph_stones
48.abundant
49.chalkboard
50.cool-web
51.coolblack
52.CoolishBlack
53.coolzone
54.cool_web
55.creative-media
56.creative-mind
57.creative
58.creevykeel
59.decayed
60.essence
61.essential
62.auroradesktop
63.scenic-reflections