market-leader
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Market Leader</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { padding:0; margin:0; outline:0; }
body {
background:#fff;
font-family: Arial, sans-serif;
font-size:12px;
line-height:18px;
color:#6d6d6d;
}
input, textarea, select { font-family: Arial, sans-serif; font-size:12px; color:#6d6d6d; }
a img { border:0; }
a { color:#0184c4; text-decoration: underline; cursor:pointer; }
a:hover { color:#1c6183; text-decoration: none; }
.notext { font-size:0; line-height:0; text-indent: -4000px; display:block; }
.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }
.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }
h2 { font-size:23px; line-height:26px; color:#0188c9; }
h3 { font-size:16px; line-height:20px; color:#000; }
h2, h3 { font-family: "Trebuchet MS", Arial, sans-serif;}
h1#logo { font-size:0; line-height:0; width:245px; height:74px; float:left; }
h1#logo a{ display:block; height:74px; text-indent: -4000px; background:url(images/logo.gif); }
.shell { width:980px; margin:0 auto; }
#header { height:74px; background:url(images/header.gif);}
#navigation { float:right; height:30px;}
#navigation ul{ float:left; height:30px; list-style-type:none; padding-top:27px;}
#navigation ul li{ float:left; display:inline; margin-left:10px;}
#navigation ul li a{ float:left; width:110px; height:30px; text-align: center; background:url(images/nav.gif) no-repeat 0 0; line-height:30px; text-decoration: none; color:#7b7b7b; }
#navigation ul li a:hover,
#navigation ul li a.active { background-position:right 0; color:#fff;}
#slider { height:390px; background:url(images/slider.gif);}
.slider-holder { height:390px; position:relative; overflow:hidden; z-index:100}
.slides { width:894px; height:315px; position:relative; overflow:hidden; top:59px; left:43px;}
.slides .jcarousel-clip{ width:894px; height:315px; position:relative; overflow:hidden; }
.slides ul{ width:758px; height:315px; position:relative; overflow:hidden; list-style-type: none;}
.slides ul li{ float:left; display:inline; width:758px; height:315px; position:relative; overflow:hidden; margin:0 0 0 136px; left:-68px;}
.slide-shadow { position:absolute; bottom:0; height:26px; width:771px; background:url(images/slide-shadow.png); left:-6px;}
.slide-bg { width:758px; height:267px; position:relative; overflow:hidden; background:url(images/slide-bg.gif); padding:5px; }
.slide-image{ float:left; width:271px; }
.slide-info{ float:left; width:440px; padding:30px 0 0 15px; }
.slide-info p{ padding:13px 0 20px;}
.slider-nav { font-size:0; line-height:0; }
.slider-nav a{ width:43px; height:46px; text-indent: -4000px; position:absolute; top:165px; }
.slider-nav a.prev{ left:0; background:url(images/prev.gif); }
.slider-nav a.next{ left:937px; background:url(images/next.gif); }
.learn-button { width:165px; height:37px; background:url(images/learn-button.gif); }
#main { width:100%; background:url(images/main.gif) repeat-x 0 0; padding:45px 0 40px 0;}
.col { float:left; display:inline; width:280px; margin-right:70px; padding:10px 0;}
.col-last { margin-right:0;}
.col h3 { padding-bottom:12px; }
.col p { padding-bottom:12px; }
.three-cols { background:url(images/three-cols.gif) repeat-y center 0; width:100%;}
.ico { background-repeat:no-repeat; background-position:0 1px; padding-left:26px; }
.ico1 { background-image:url(images/ico1.gif)}
.ico2 { background-image:url(images/ico2.gif)}
.ico3 { background-image:url(images/ico3.gif)}
p.more { font-size:11px; }
p.more a{ background:url(images/more.gif) no-repeat 0 center; padding-left:11px;}
#footer { height:57px; background:url(images/footer.gif); line-height:56px; white-space:nowrap; color:#5c5c5c;}
#footer span{ color:#cfcfcf; padding:0 5px;}
#footer a{ color:#5c5c5c; text-decoration: none;}
#footer a:hover{ color:#0184c4;}
</style>
<!--[if lte IE 6]><link rel="stylesheet" href="market-leader-css/ie6.css" type="text/css" media="all" /><![endif]-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script src="js/jquery-func.js" type="text/javascript"></script>
</head>
<body>
<!-- Header -->
<div id="header">
<div class="shell">
<!-- Logo -->
<h1 id="logo"><a href="#">Company Name - simple solution</a></h1>
<!-- End Logo -->
<!-- Navigation -->
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->
</div>
</div>
<!-- End Header -->
<!-- Slider -->
<div id="slider">
<div class="shell">
<div class="slider-holder">
<div class="slides">
<ul>
<!-- Slide -->
<li>
<div class="slide-bg">
<div class="slide-image"> <a href="#"><img src="market-leader-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan interdum nulla. Nunc venenatis tincidunt sem, nec tempus purus congue viverra. Nullam venenatis tempus libero, quis venenatis metus rhoncus et. Nulla rutrum luctus ante, quis varius justo aliquam sit amet.</p>
<a href="#" class="notext learn-button">Learn More</a> </div>
</div>
<span class="slide-shadow"> </span> </li>
<!-- End Slide -->
<!-- Slide -->
<li>
<div class="slide-bg">
<div class="slide-image"> <a href="#"><img src="market-leader-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan interdum nulla. Nunc venenatis tincidunt sem, nec tempus purus congue viverra. Nullam venenatis tempus libero, quis venenatis metus rhoncus et. Nulla rutrum luctus ante, quis varius justo aliquam sit amet.</p>
<a href="#" class="notext learn-button">Learn More</a> </div>
</div>
<span class="slide-shadow"> </span> </li>
<!-- End Slide -->
<!-- Slide -->
<li>
<div class="slide-bg">
<div class="slide-image"> <a href="#"><img src="market-leader-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan interdum nulla. Nunc venenatis tincidunt sem, nec tempus purus congue viverra. Nullam venenatis tempus libero, quis venenatis metus rhoncus et. Nulla rutrum luctus ante, quis varius justo aliquam sit amet.</p>
<a href="#" class="notext learn-button">Learn More</a> </div>
</div>
<span class="slide-shadow"> </span> </li>
<!-- End Slide -->
</ul>
</div>
<!-- Slider Navigation -->
<div class="slider-nav"> <a href="#" class="prev">previous</a> <a href="#" class="next">next</a> </div>
<!-- End Slider Navigation -->
</div>
</div>
</div>
<!-- End Slider -->
<!-- Main -->
<div id="main">
<div class="shell">
<!-- Cols -->
<div class="three-cols">
<div class="cl"> </div>
<!-- Col -->
<div class="col">
<h3 class="ico ico1">Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan interdum nulla. Nunc venenatis tincidunt sem, nec tempus purus congue viverra.</p>
<p>Nullam venenatis tempus libero, quis venenatis metus rhoncus et. Nulla rutrum luctus ante, quis varius justo aliquam sit amet.</p>
<p class="more"><a href="#">Lorem Impsum</a></p>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col">
<h3 class="ico ico2">Tempus libero varius</h3>
<p>Deugiat tincidunt ac a tortor. Sed nec elit quis tellus dictum pharetra. Mauris nec ante eu mauris consequat ultricies nec vitae purus. Proin nec urna odio. </p>
<p>Mauris sapien justo, commodo non mollis sed, dictum sit amet dolor. Maecenas purus lacus, viverra a sollicitudin eget, posuere vel diam.</p>
<p class="more"><a href="#">Lorem Impsum</a></p>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col col-last">
<h3 class="ico ico3">Ipsum in faucibus sed</h3>
<p>Quisque mi eros, sodales non semper at, egestas eget libero. Nullam pharetra aliquam molestie. Proin cursus lorem a elit ornare iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nunc ultricies massa id nibh ultricies in pharetra sapien sagittis. Donec imperdiet eros vitae purus interdum suscipit eu faucibus libero.</p>
<p class="more"><a href="#">Lorem Impsum</a></p>
</div>
<!-- End Col -->
<div class="cl"> </div>
</div>
<!-- End Cols -->
</div>
</div>
<!-- End Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<p class="left"> <a href="#">Home</a> <span>|</span> <a href="#">About</a> <span>|</span> <a href="#">Services</a> <span>|</span> <a href="#">Contact</a> </p>
<p class="right">© 2010 Company Name. Design by <a href="http://chocotemplates.com">Chocotemplates.com</a></p>
</div>
</div>
<!-- End Footer -->
</body>
</html>
Related examples in the same category