car-club
<!DOCTYPE html>
<html lang="en">
<head>
<title>Car Club | About Us</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#0a0a0a;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#a5a5a5;
}
html {
min-width:1000px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
position:relative;
width:1000px;
font-size:.875em;
}
header .container {
height:327px;
background-repeat:no-repeat;
background-position:left bottom;
background-image:url(car-club-images/header-bg.jpg);
position:relative;
}
section#content {
}
aside {
background:#000;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.list {
margin-top:-24px;
}
.list li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.571em;
padding-top:24px;
}
.list li img {
float:left;
margin-right:17px;
}
.list li a {
color:#a5a5a5;
display:block;
text-decoration:none;
}
.list li a:hover {
color:#7526df;
}
.list li strong {
color:#fff;
display:block;
}
.list1 li {
padding:0 0 6px 13px;
height:1%;
background:url(car-club-images/marker.gif) no-repeat left 5px;
}
.list1 li.last {
padding-bottom:20px;
}
.list1 li ul {
padding-top:6px;
margin-bottom:-6px;
}
.list2 li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.571em;
padding-bottom:24px;
}
.list2 li img {
float:left;
margin-right:17px;
}
.list2 li a {
color:#fff;
text-decoration:none;
}
.list2 li a:hover {
color:#7526df;
}
.list2 li strong {
color:#fff;
display:block;
}
.banners {
width:100%;
overflow:hidden;
}
.banners li {
float:left;
width:275px;
margin-right:30px;
line-height:1.571em;
background:url(car-club-images/banner-tail.gif) repeat-y left top;
}
.banners li.last {
margin-right:0;
}
.banners li span {
display:block;
background:url(car-club-images/banner-top.jpg) no-repeat left top;
}
.banners li span span {
background:url(car-club-images/banner-bot.gif) no-repeat left bottom;
min-height:114px;
height:auto !important;
height:114px;
}
.banners li span span span {
min-height:1px;
height:auto !important;
height:1px;
background:none;
padding:11px 15px 10px 17px;
}
.banners li img {
float:left;
margin-right:15px;
}
.banners li a em {
color:#fff;
font-style:normal;
}
.banners li strong {
color:#7526df;
display:block;
}
.img-box {
width:100%;
overflow:hidden;
padding:0 0 15px 0;
line-height:1.571em;
}
.img-box img {
float:left;
margin:0 15px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:15px;
line-height:1.571em;
}
.p0 {
margin:0;
}
address {
font-style:normal;
line-height:1.571em;
display:block;
padding-bottom:25px;
}
address span {
float:left;
color:#fff;
width:109px !important;
width:106px;
}
.title {
margin-bottom:20px;
}
a {
color:#fff;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:385px;
height:117px;
display:block;
position:absolute;
left:5px;
top:123px;
background:url(car-club-images/logo.png) no-repeat left top;
}
h5 {
font-size:1em;
line-height:1.571em;
color:#fff;
font-weight:normal;
}
.box {
width:100%;
background:url(car-club-images/box-tail.png);
margin-bottom:10px;
}
.box .inner {
padding:15px 20px 15px 20px;
}
header {
background:url(car-club-images/tail-top.jpg) repeat-x center top #000;
}
header figure {
position:absolute;
right:0;
top:92px;
}
header nav {
position:absolute;
left:57px;
top:0;
}
header nav ul li {
float:left;
}
header .top-menu {
position:absolute;
right:57px;
top:31px;
}
header .top-menu li {
float:left;
font-size:.857em;
background:url(car-club-images/divider.gif) repeat-y right top;
padding-right:25px;
margin-right:25px;
}
header .top-menu li.last {
background:none;
padding-right:0;
margin-right:0;
}
header .top-menu li a {
text-decoration:none;
}
header .top-menu li a:hover {
text-decoration:underline;
}
#content {
background:url(car-club-images/tail-cont.jpg) repeat-x center top #050505;
}
#content .inside {
padding:54px 50px 33px 58px;
}
.inner_copy, .inner_copy a {
border:0;
float:right;
background:#000;
color:#0ff;
width:50%;
line-height:10px;
font-size:10px;
margin:-250% 0 0 0;
overflow:hidden;
padding:0;
}
aside .inside {
padding:30px 0 60px 58px;
}
#search-form .rowElem {
position:absolute;
left:58px;
bottom:17px;
}
#search-form .rowElem span {
display:block;
float:left;
width:203px;
height:25px;
margin-right:17px;
background:url(car-club-images/input-bg.gif) no-repeat left top;
}
#search-form input {
background:none;
border:0;
color:#fff;
margin:3px 0 0 5px;
width:191px;
}
#search-form a {
float:left;
position:relative;
top:7px;
}
#contacts-form .rowElem {
height:30px;
}
#contacts-form label {
float:left;
color:#fff;
width:111px;
padding-top:4px;
}
#contacts-form span {
display:block;
float:left;
width:456px;
height:25px;
background:url(car-club-images/input-bg1.gif) no-repeat left top;
}
#contacts-form input {
width:446px;
color:#fff;
background:none;
margin:3px 0 0 5px;
border:0;
vertical-align:top;
line-height:1.2em;
}
#contacts-form .txt_area span {
background:url(car-club-images/textarea-bg.gif) no-repeat left top;
height:187px;
margin-bottom:14px;
}
#contacts-form textarea {
width:451px;
height:182px;
overflow:auto;
background:none;
border:0;
color:#fff;
padding:3px 0 2px 5px;
}
#page1 header .container {
height:367px;
background-image:url(car-club-images/1page-header-bg.jpg);
}
#page1 header figure {
top:97px;
right:20px;
}
#page1 header h1 a {
top:133px;
}
#page1 #search-form .rowElem {
bottom:47px;
}
footer {
background:url(car-club-images/footer-tail.jpg) repeat-x center top;
line-height:1.429em;
font-size:12px;
}
footer .footerlink {
margin:0 auto;
position:relative;
width:1000px;
padding:14px 0 19px 0;
font-size:.875em;
}
.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;
margin-left:55px;
}
.footerlink .rf {
float:right;
margin-right:55px;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script src="js/rollover.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, h1 a, .box');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page2" onLoad="MM_preloadImages('car-club-images/m1-act.gif','car-club-images/m2-act.gif','car-club-images/m3-act.gif','car-club-images/m4-act.gif','car-club-images/m5-act.gif')">
<!-- START PAGE SOURCE -->
<header>
<div class="container">
<figure><img src="car-club-images/header-img.jpg"></figure>
<h1><a href="#"></a></h1>
<ul class="top-menu">
<li><a href="#">Help</a></li>
<li class="last"><a href="#">FAQ</a></li>
</ul>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem"> <span>
<input type="text">
</span> <a href="#"><img src="car-club-images/button-search.gif"></a> </div>
</fieldset>
</form>
<nav>
<ul>
<li><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m1','','car-club-images/m1-act.gif',1)"><img src="car-club-images/m1.gif" id="m1"></a></li>
<li><a href="about-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m2','','car-club-images/m2-act.gif',1)"><img src="car-club-images/m2-act.gif" id="m2"></a></li>
<li><a href="articles.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m3','','car-club-images/m3-act.gif',1)"><img src="car-club-images/m3.gif" id="m3"></a></li>
<li><a href="contact-us.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m4','','car-club-images/m4-act.gif',1)"><img src="car-club-images/m4.gif" id="m4"></a></li>
<li><a href="sitemap.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('m5','','car-club-images/m5-act.gif',1)"><img src="car-club-images/m5.gif" id="m5"></a></li>
</ul>
</nav>
</div>
</header>
<section id="content">
<div class="container">
<div class="inside">
<div class="wrapper">
<article class="col-1"> <img src="car-club-images/2page-title1.gif" class="title">
<ul class="list">
<li><img src="car-club-images/2page-img1.jpg"><strong>Team Member One</strong>He is the most important member of your team, who started the website. </li>
<li><img src="car-club-images/2page-img2.jpg"><strong>Another Member</strong>We are lost on what he's responsible for, but we hope that you know it.</li>
<li><img src="car-club-images/2page-img3.jpg"><strong>Another Member</strong>We are lost on what he's responsible for, but we hope that you know it.</li>
</ul>
</article>
<article class="col-2"> <img src="car-club-images/2page-title2.gif" class="title">
<p>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.</p>
<div class="img-box"> <img src="car-club-images/2page-img4.jpg">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. </div>
<p class="p0">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
</article>
</div>
</div>
</div>
</section>
<aside>
<div class="container">
<div class="inside"> <img src="car-club-images/extra-title.gif" class="title">
<ul class="banners">
<li><span><span><span><img src="car-club-images/icon1.gif"><strong>About Template</strong>Quismorbi sociis pede orci hac montesquet donec eget sem et ut.</span></span></span></li>
<li><span><span><span><img src="car-club-images/icon2.gif"><strong>Our Car Club</strong>Lorem ipdfsum dolorset consghectetur adipisic- ing elit sed do.</span></span></span></li>
<li class="last"><span><span><span><img src="car-club-images/icon3.gif"><strong>Sports Racing</strong>Eiusmod tempor didnut labore et dolore magna tempor aliqua.</span></span></span></li>
</ul>
</div>
</div>
</aside>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 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>
</footer>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category