speedracing : Design 7 « Templates « HTML / CSS






speedracing

  

<!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>SpeedRacing | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
  margin:0;
  padding:0;
}
html {
  min-width:940px;
}
body {
  background:url(speedracing-images/tail-top.gif) repeat-x left top #fff;
  font-family:Tahoma, Arial, helvetica, sans-serif;
  font-size:100%;
  line-height:1em;
  color:#454545;
  min-width:940px;
}
object {
  vertical-align:top;
  outline:none;
}
input, textarea, select {
  font-family:Tahoma, Arial, helvetica, sans-serif;
  font-size:1em;
  vertical-align:middle;
  font-weight:normal;
}
fieldset {
  border:0;
}
p {
  margin:0;
  padding:0;
}
img {
  border:0;
  vertical-align:top;
  text-align:left;
}
ul, ol {
  list-style:none;
}
#main {
  width:940px;
  margin:0 auto;
}
#header, #content, #footer {
  font-size:0.75em;
}
.col-1, .col-2, .col-3 {
  float:left;
}
#content .col-1 {
  width:526px;
  padding:12px 0;
}
#content .col-2 {
  width:305px;
  float:right;
}
.fleft {
  float:left;
}
.fright {
  float:right;
}
.clear {
  clear:both;
}
.alignright {
  text-align:right;
}
.aligncenter {
  text-align:center;
}
.wrapper {
  width:100%;
  overflow:hidden;
}
.extra-wrap {
  overflow:hidden;
}
.container {
  width:100%;
}
#search-form label {
  color:#fff;
  font-size:16px;
  line-height:1.2em;
  text-transform:uppercase;
  float:left;
  margin-right:13px;
}
#search-form input {
  background-color:#fff;
  border:0;
  width:174px;
  float:left;
  padding:4px 3px 4px 3px;
  margin-right:12px;
}
#search-form .link1 {
  position:relative;
  top:-2px;
}
#login-form .field {
  height:23px;
  width:100%;
  overflow:hidden;
}
#login-form label {
  color:#fff;
  font-weight:bold;
  float:left;
  width:93px;
}
#login-form label.extra {
  font-weight:normal;
}
#login-form .field input {
  border:1px solid #115bbe;
  padding:1px 3px 1px 3px;
  width:107px;
  float:right;
}
#login-form input.extra {
  width:12px;
  height:12px;
  padding:0;
  float:left;
  margin-top:2px;
}
#login-form .field1 {
  padding-top:5px;
  height:28px;
}
#login-form .field1 a {
  text-decoration:none;
  display:inline-block;
  float:right;
  color:#35b3d8;
  cursor:pointer;
  margin-top:-4px;
  background:url(speedracing-images/button-left1.png) no-repeat left top;
}
#login-form .field1 a em {
  display:inline-block;
  padding:0 5px;
  background:url(speedracing-images/button-right1.png) no-repeat right top;
}
#login-form .field1 a b {
  font-style:normal;
  display:inline-block;
  background:url(speedracing-images/button-tail1.png) repeat-x left top;
  padding:4px 11px 4px 11px;
}
#login-form .field1 a span {
  color:#fff;
  display:block;
  margin:-17px 0 0 -1px;
}
#login-form .field1 a:hover {
  color:#0f56ba;
}
#login-form ul {
  width:100%;
  left:-18px;
  position:relative;
}
#login-form ul li {
  padding:0 0 6px 18px;
  background:url(speedracing-images/arrow1.gif) no-repeat left 5px;
}
#login-form ul li.last {
  padding-bottom:0;
}
#login-form ul li a {
  color:#c1f0ff;
}
#contacts-form {
  clear:right;
  width:100%;
  overflow:hidden;
}
#contacts-form fieldset {
  border:none;
  float:left;
}
#contacts-form .field {
  clear:both;
}
#contacts-form label {
  float:left;
  width:97px;
  line-height:18px;
  padding-bottom:8px;
  font-weight:bold;
  color:#454545;
}
#contacts-form input {
  width:265px;
  padding:1px 0 1px 3px;
  border:1px solid #ccc;
  color:#70635b;
}
#contacts-form textarea {
  width:421px;
  height:282px;
  padding:1px 0 1px 3px;
  border:1px solid #ccc;
  color:#70635b;
  margin-bottom:15px;
  overflow:auto;
}
#contacts-form .link1 {
  float:right;
}
.box-list {
  width:100%;
  overflow:hidden;
}
.box-list li {
  float:left;
  width:305px;
  margin-right:13px;
}
.box-list li .box1 p {
  margin:0;
}
.box-list li .box1 p a {
  position:relative;
  top:5px;
}
.box-list li.alt {
  margin-right:12px;
}
.box-list li.last {
  margin-right:0;
}
.news {
  margin-bottom:-14px;
}
.news li {
  background:url(speedracing-images/arrow1.gif) no-repeat left 5px;
  padding:0 0 14px 18px;
}
.news li a {
  color:#c1f0ff;
  font-size:.92em;
  text-decoration:none;
  font-weight:bold;
}
.news li a:hover {
  text-decoration:underline;
}
.news li p {
  color:#fff;
  margin:4px 0 0 0;
}
.sitemap {
  padding-bottom:20px;
}
.sitemap li {
  padding:0 0 0 16px;
  line-height:1.83em;
  background:url(speedracing-images/arrow.gif) no-repeat left 8px;
}
.list {
  margin-top:-14px;
}
.list li {
  line-height:1.83em;
  width:100%;
  overflow:hidden;
  vertical-align:top;
  padding-top:14px;
}
.list li img {
  float:left;
  margin-right:20px;
}
.list li a {
  font-weight:bold;
  text-decoration:none;
}
.list li a:hover {
  text-decoration:underline;
}
.img-box1 {
  width:100%;
  overflow:hidden;
  padding-bottom:20px;
}
.img-box1 img {
  float:left;
  margin:0 30px 0 0;
}
p {
  line-height:1.83em;
  margin-bottom:20px;
}
.p0 {
  margin:0;
}
.address {
  float:left;
  line-height:1.83em;
  margin-right:59px;
}
.address b {
  width:78px;
  float:left;
}
a {
  color:#1f7dd2;
  outline:none;
}
a:hover {
  text-decoration:none;
}
h2 {
  font-size:40px;
  line-height:1.2em;
  margin-bottom:10px;
}
h2 b {
  display:block;
  padding-left:95px;
  margin-top:-12px;
}
h3 {
  font-size:32px;
  line-height:1.2em;
  letter-spacing:-1px;
  margin-bottom:15px;
}
h4 {
  font-size:28px;
  line-height:1.2em;
  margin-bottom:10px;
}
h3 b, h4 b {
  color:#1f7dd2;
}
.link1 {
  font-size:16px;
  text-decoration:none;
  color:#fff;
  float:left;
  text-transform:uppercase;
  display:inline-block;
  cursor:pointer;
  background:url(speedracing-images/button-left.png) no-repeat left top;
}
.link1 em {
  display:inline-block;
  padding:0 5px;
  background:url(speedracing-images/button-right.png) no-repeat right top;
}
.link1 b {
  display:inline-block;
  background:url(speedracing-images/button-tail.gif) repeat-x left top;
  padding:3px 9px 4px 9px;
}
.box {
  background:#fff;
  width:100%;
  margin-bottom:20px;
}
.box .border-bot {
  background:url(speedracing-images/border-bot.gif) repeat-x left bottom;
}
.box .left-bot-corner {
  background:url(speedracing-images/left-bot-corner.gif) no-repeat left bottom;
}
.box .right-bot-corner {
  background:url(speedracing-images/right-bot-corner.gif) no-repeat right bottom;
}
.box .inner {
  padding:0 0 10px 21px;
}
.box1 {
  width:263px;
  background:url(speedracing-images/box1-bot.jpg) no-repeat left bottom;
}
.box1.alt {
  background:url(speedracing-images/box1-bot1.jpg) no-repeat left bottom;
  width:900px;
}
.box1 .inner {
  padding:34px 22px 28px 29px;
}
.box2 {
  width:100%;
  background-color:#176ac7;
}
.box2 .border-top {
  background:url(speedracing-images/border-top.gif) repeat-x left top;
}
.box2 .left-top-corner {
  background:url(speedracing-images/left-top-corner.gif) no-repeat left top;
}
.box2 .right-top-corner {
  background:url(speedracing-images/right-top-corner.gif) no-repeat right top;
}
.box2 .inner {
  padding:12px 48px 25px 32px;
}
.box2 h4 {
  color:#fff;
  padding-left:17px;
  margin-bottom:30px;
}
.box2 h4 b {
  color:#c1f0ff;
}
.box3 {
  width:100%;
  border-top:2px solid #3593da;
  background:url(speedracing-images/border-top1.gif) repeat-x left top #176ac7;
}
.box3 .right-bot-corner {
  background:url(speedracing-images/right-bot-corner1.gif) no-repeat right bottom;
}
.box3 .left-bot-corner {
  background:url(speedracing-images/left-bot-corner1.gif) no-repeat left bottom;
}
.box3 .inner {
  padding:7px 49px 36px 48px;
}
.box3 h4 {
  color:#fff;
  margin-bottom:36px;
}
.box3 h4 b {
  color:#c1f0ff;
}
#header {
  height:419px;
  position:relative;
}
#header .row-1 {
  height:88px;
}
#header .row-1 .fleft {
  padding:20px 0 0 22px;
}
#header .row-1 .fright {
  padding:34px 34px 0 0;
}
#header .row-1 .fright ul li {
  float:left;
  padding-left:23px;
}
#header .row-2 {
  background:url(speedracing-images/nav-tail.gif) repeat-x left top;
  margin-bottom:-3px;
  position:relative;
}
#header .row-2 .left {
  background:url(speedracing-images/nav-left.gif) no-repeat left top;
}
#header .row-2 ul {
  height:58px;
  width:100%;
  overflow:hidden;
  background:url(speedracing-images/nav-right.gif) no-repeat right top;
}
#header .row-2 ul li {
  float:left;
  text-transform:uppercase;
  font-size:16px;
  line-height:1.2em;
  background:url(speedracing-images/divider.gif) no-repeat right 4px;
  padding:4px 2px 0 0;
}
#header .row-2 ul li.last {
  background:none;
  padding-right:0;
}
#header .row-2 ul li.last a {
  width:188px;
}
#header .row-2 ul li a {
  text-decoration:none;
  color:#fff;
  width:186px;
  text-align:center;
  display:block;
  padding:14px 0 0 0;
  cursor:pointer;
  background:url(speedracing-images/spacer.gif);
}
#header .row-2 ul li a span {
  display:block;
  height:40px;
}
#header .row-2 ul li a:hover, #header .row-2 ul li a.active {
  background:url(speedracing-images/nav-act.png) repeat-x left top;
}
#header .row-2 ul li a:hover span, #header .row-2 ul li a.active span {
  background:url(speedracing-images/nav-arrow.gif) no-repeat center bottom;
}
#header .row-3 {
  height:276px;
  overflow:hidden;
  background:url(speedracing-images/header-tail.gif) repeat-x left top;
}
#header .row-3 .inside {
  padding:35px 0 0 50px;
  width:350px;
  position:relative;
  z-index:2;
}
#header .row-3 .inside p {
  color:#fff;
  line-height:1.5em;
}
#header .extra {
  position:absolute;
  left:0;
  top:142px;
}
#content {
  padding-bottom:30px;
}
#content .inner_copy, #content .inner_copy a {
  border:0;
  float:right;
  background:#000;
  color:#f00;
  width:100%;
  line-height:10px;
  font-size:10px;
  margin:-50% 0 0 0;
  overflow:hidden;
  padding:0;
}
#content .indent {
  padding:0 0 0 49px;
}
#footer .footer-nav {
  background:url(speedracing-images/footer-nav-tail.gif) repeat-x left top;
}
#footer .footer-nav .left {
  background:url(speedracing-images/footer-nav-left.gif) no-repeat left top;
}
#footer .footer-nav ul {
  width:100%;
  overflow:hidden;
  padding:15px 0 16px 0;
  background:url(speedracing-images/footer-nav-right.gif) no-repeat right top;
}
#footer .footer-nav ul li {
  float:left;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  line-height:1em;
  border-right:1px solid #fff;
  padding:0 72px;
}
#footer .footer-nav ul li.last {
  border:0;
}
#footer .footer-nav ul li a {
  color:#fff;
}
#footer .footerlink {
  background:url(speedracing-images/footer-tail.gif) repeat-x left top #000;
  color:#fff;
  line-height:1.67em;
  padding:18px 25px 23px 25px;
}
.footerlink p {
  margin:0;
  padding:0;
  line-height:normal;
  white-space:nowrap;
  text-indent:inherit;
  color:#fff;
}
.footerlink a {
  color:#fff;
  font-weight:normal;
  margin:0;
  padding:0;
  border:none;
  text-decoration:underline;
  background-color:transparent;
}
.footerlink a:hover {
  color:#fff;
  background-color:transparent;
  text-decoration:none;
}
.footerlink .lf {
  float:left;
}
.footerlink .rf {
  float:right;
}
a {
  outline:none;
}


</style>


<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_600.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_400.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_700.font.js" type="text/javascript"></script>
<script src="js/NewsGoth_Dm_BT_400.font.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, #header .row-2 ul li a, .extra img, #search-form a, #search-form a em, #login-form .field1 a, #login-form .field1 a em, #login-form .field1 a b');</script>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body id="page2">
<!-- START PAGE SOURCE -->
<div id="main">
  <div id="header">
    <div class="row-1">
      <div class="fleft"><a href="#"><img src="speedracing-images/logo.gif" alt="" /></a></div>
      <div class="fright">
        <ul>
          <li><a href="#"><img src="speedracing-images/icon1.gif" alt="" /></a></li>
          <li><a href="#"><img src="speedracing-images/icon2.gif" alt="" /></a></li>
          <li><a href="#"><img src="speedracing-images/icon3.gif" alt="" /></a></li>
        </ul>
      </div>
    </div>
    <div class="row-2">
      <div class="left">
        <ul>
          <li><a href="index.html"><span>home</span></a></li>
          <li><a href="about-us.html" class="active"><span>about</span></a></li>
          <li><a href="articles.html"><span>articles</span></a></li>
          <li><a href="contact-us.html"><span>contact</span></a></li>
          <li class="last"><a href="sitemap.html"><span>sitemap</span></a></li>
        </ul>
      </div>
    </div>
    <div class="row-3">
      <div class="inside">
        <h2>Speed is the Source <b>of Emotions</b></h2>
        <p>Sed ut perspiciatis unde omnis iste natus error sit volutem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
        <form action="#" id="search-form">
          <fieldset>
            <label>Search:</label>
            <input type="text" />
            <a href="#" class="link1"><em><b>Go!</b></em></a>
          </fieldset>
        </form>
      </div>
    </div>
    <div class="extra"><img src="speedracing-images/header-img.png" alt="" /></div>
  </div>
  <div id="content">
    <div class="box">
      <div class="border-bot">
        <div class="right-bot-corner">
          <div class="left-bot-corner">
            <div class="inner">
              <div class="box1 alt">
                <div class="inner">
                  <h4><b>About</b> Your Website</h4>
                  <p class="p0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="indent">
      <div class="wrapper">
        <div class="col-1">
          <h3><b>About</b> Your Team</h3>
          <ul class="list">
            <li><img src="speedracing-images/2page-img1.jpg" alt="" /><a href="#">Team Member One</a><br />
              Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor.</li>
            <li><img src="speedracing-images/2page-img2.jpg" alt="" /><a href="#">Another Team Member</a><br />
              Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor.</li>
            <li><img src="speedracing-images/2page-img3.jpg" alt="" /><a href="#">Another Team Member</a><br />
              Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor.</li>
            <li><img src="speedracing-images/2page-img4.jpg" alt="" /><a href="#">Another Team Member</a><br />
              Eusus consequam vitae habitur amet nullam vitae condis phasellus sed justo. Orcivel mollis intesque eu sempor ridictum a non laorem lacingilla wisi. Nuncrhoncus eros maurien ulla facilis tor.</li>
          </ul>
        </div>
        <div class="col-2">
          <div class="box2">
            <div class="border-top">
              <div class="left-top-corner">
                <div class="right-top-corner">
                  <div class="inner">
                    <h4><b>Latest</b> News</h4>
                    <ul class="news">
                      <li><a href="#">May 21, 2010</a>
                        <p>Lorem ipsum dolor sit amet, coisectur adipisicing elit, sed doeiusmo.</p>
                      </li>
                      <li><a href="#">May 12, 2010</a>
                        <p>Ut enim ad minim veniam, qnostrud exercitation ullamco.</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box3">
            <div class="right-bot-corner">
              <div class="left-bot-corner">
                <div class="inner">
                  <h4><b>Login</b> Form</h4>
                  <form action="#" id="login-form">
                    <fieldset>
                      <div class="field">
                        <label>Username:</label>
                        <input type="text" />
                      </div>
                      <div class="field">
                        <label>Password:</label>
                        <input type="password" />
                      </div>
                      <div class="field1">
                        <label class="extra">Remember Me:</label>
                        <input type="checkbox" class="extra" />
                        <a href="#"><em><b>Log In<span>Log In</span></b></em></a></div>
                      <ul>
                        <li><a href="#">Forgot your password?</a></li>
                        <li class="last"><a href="#">Register</a></li>
                      </ul>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="footer-nav">
      <div class="left">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Contacts</a></li>
          <li class="last"><a href="#">Sitemap</a></li>
        </ul>
      </div>
    </div>
    <div class="footerlink">
      <p class="lf">Copyright &copy; 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
      <p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
      <div style="clear:both;"></div>
    </div>
  </div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.singapore
97.sinorcaish
98.six-oh-six
99.sixpence
100.sixties_style
101.skipopia
102.skitemplate
103.sky
104.sliced
105.slight_amnesia
106.socialnet
107.softenedcells
108.solemnity
109.solitude
110.soloss
111.solutions
112.somewhere-peaceful
113.soniatemplate
114.space
115.spaced
116.spasaloon
117.spatter
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous