simple-solution
<!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>Simple Solution</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:17px;
color:#5d5d5d;
padding-bottom:10px;
}
input, textarea, select { font-family: Arial, sans-serif; font-size:11px; }
a img { border:0; }
a { color:#0095aa; text-decoration: underline; cursor:pointer; }
a:hover { color:#5d5d5d; text-decoration: none; }
.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:40px; line-height:36px; text-transform: uppercase; }
h2 strong{ color:#8a1212; }
h3 { font-size:17px; line-height:19px; color:#2b2b2b; }
h4 { font-size:12px; line-height:17px;}
h1#logo { font-size:0; line-height:0; width:278px; height:85px; float:left; }
h1#logo a{ display:block; height:85px; text-indent: -4000px; background:url(images/logo.gif); }
.shell { width:970px; margin:0 auto; }
#top { height:85px; background:url(images/top.gif);}
#navigation { float:right; white-space:nowrap;}
#navigation ul{ list-style-type: none; line-height:14px; padding-top:35px; float:left; }
#navigation ul li{ float:left; display:inline; border-right:solid 1px #757171; padding-right:8px; margin-right:8px; }
#navigation ul li.last{ margin-right:0; border:0; padding-right:0; }
#navigation ul li a{ color:#fff; text-decoration: none;}
#navigation ul li a:hover,
#navigation ul li a.active { color:#00e0ff; }
#header { height:290px; background:url(images/header.gif); border-top:solid 1px #fff; border-bottom:solid 1px #fff;}
#slider { height:290px; position:relative; }
#slider-holder { height:200px; position:relative; overflow:hidden; top:50px; width:876px; left:47px;}
#slider-holder ul{ height:200px; position:relative; overflow:hidden; width:876px; list-style-type: none;}
#slider-holder .jcarousel-clip{ height:200px; position:relative; overflow:hidden; width:876px; }
#slider-holder ul li{ height:200px; position:relative; overflow:hidden; float:left; width:876px; }
#slider .slide-image{ width:316px; float:left; }
#slider .slide-info{ width:540px; float:left; padding-left:20px; }
#slider .slide-info p{ padding-top:10px;}
#slider-nav { font-size:0; line-height:0;}
#slider-nav a{ width:47px; height:44px; position:absolute; top:110px; text-indent: -4000px;}
#slider-nav a.prev{ background:url(images/prev.gif); left:-10px; }
#slider-nav a.next{ background:url(images/next.gif); right:-10px; }
#footer { height:51px; background:url(images/footer.gif); white-space:nowrap; line-height:50px; color:#686868; }
#footer .left span{ color:#c8c7c7; padding:0 3px;}
#footer a{ color:#686868; text-decoration: none;}
#footer a:hover{ color:#0095aa; }
#main { width:100%; background:url(images/main.gif) repeat-x 0 0; padding:13px 0 30px 0;}
.cols {}
.col { float:left; display:inline; width:270px; margin-right:80px;}
.col-right { float:right; display:inline; width:270px;}
h3.tab { height:46px; background:url(images/tab.gif) no-repeat 0 0; width:202px; padding:0 10px; line-height:46px; margin-bottom:15px;}
.ico { display:block; padding:0 0 0 30px; background-repeat:no-repeat; background-position:0 center; }
.ico1 { background-image:url(images/ico1.gif)}
.ico2 { background-image:url(images/ico2.gif)}
.ico3 { background-image:url(images/ico3.gif)}
.entry { }
.entry p{ padding-bottom:15px; }
.more { font-size:11px; background:url(images/more.gif) no-repeat 0 4px; padding:0 0 0 10px;}
</style>
<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>
<!-- Logo + Navigation -->
<div id="top">
<div class="shell">
<h1 id="logo"><a href="#">Company Name</a></h1>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">The Store</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- End Logo + Navigation -->
<!-- Slider -->
<div id="header">
<div class="shell">
<div id="slider">
<div id="slider-holder">
<ul>
<li>
<div class="cl"> </div>
<div class="slide-image"> <a href="#"><img src="simple-solution-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2><strong>A FULL-SERVICE</strong><br />
OUTSOURCING<br />
PARTNER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula pretium vestibulum. Pellentesque aliquet molestie velit, non semper nunc dapibus quis.</p>
</div>
<div class="cl"> </div>
</li>
<li>
<div class="cl"> </div>
<div class="slide-image"> <a href="#"><img src="simple-solution-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2><strong>A FULL-SERVICE</strong><br />
OUTSOURCING<br />
PARTNER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula pretium vestibulum. Pellentesque aliquet molestie velit, non semper nunc dapibus quis.</p>
</div>
<div class="cl"> </div>
</li>
<li>
<div class="cl"> </div>
<div class="slide-image"> <a href="#"><img src="simple-solution-css/images/slide-image.jpg" alt="" /></a> </div>
<div class="slide-info">
<h2><strong>A FULL-SERVICE</strong><br />
OUTSOURCING<br />
PARTNER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula pretium vestibulum. Pellentesque aliquet molestie velit, non semper nunc dapibus quis.</p>
</div>
<div class="cl"> </div>
</li>
</ul>
</div>
<div id="slider-nav"> <a href="#" class="prev">Previous</a> <a href="#" class="next">Next</a> </div>
</div>
</div>
</div>
<!-- End Slider -->
<!-- Main -->
<div id="main">
<div class="shell">
<!-- Cols -->
<div class="cols">
<div class="cl"> </div>
<!-- Col -->
<div class="col">
<h3 class="tab"><span class="ico ico1">Business Modeling</span></h3>
<div class="entry">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula pretium vestibulum. Pellentesque aliquet molestie velit, non semper nunc dapibus quis.<br />
<a href="#" class="more">Read more</a></p>
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula pretium vestibulum. Pellentesque aliquet molestie velit, non semper nunc dapibus quis.<br />
<a href="#" class="more">Read more</a></p>
</div>
</div>
<!-- End Col -->
<!-- Col -->
<div class="col">
<h3 class="tab"><span class="ico ico2">Business Planing</span></h3>
<div class="entry">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Consectetur adipiscing elit. In eu nisi sit amet nisi pretium ultricies. Ut non urna adipiscing ligula.<br />
<a href="#" class="more">Read more</a></p>
<h4>Pretium vestibulum</h4>
<p>Pellentesque aliquet molestie velit, non semper nunc dapibus quis.Quisque orci sem, dapibus ut aliquet et, elementum nec urna. Donec at est ac velit gravida malesuada.<br />
<a href="#" class="more">Read more</a></p>
<h4>Integer nec</h4>
<p>Aante id velit iaculis adipiscing sed id arcu. Nulla libero mi, adipiscing ac dignissim sed, mattis ut lacus. .<br />
<a href="#" class="more">Read more</a></p>
</div>
</div>
<!-- End Col -->
<!-- Last Col -->
<div class="col-right">
<h3 class="tab"><span class="ico ico3">Project Planing</span></h3>
<div class="entry">
<h4>Sed eu ipsum.</h4>
<p>Ut arcu consectetur ornare eget sed tortor. Vivamus nec viverra lectus. Nullam rhoncus, sapien sed consequat volutpat, lectus lorem commodo tortor, nec vulputate nibh velit quis ante.<br />
<a href="#" class="more">Read more</a></p>
<h4>Proin quis enim.</h4>
<p>Nisi. Nullam sit amet erat lacus. Cras sed vestibulum felis. Fusce dictum lacinia nisi in venenatis. Etiam laoreet cursus facilisis.<br />
<a href="#" class="more">Read more</a></p>
</div>
</div>
<!-- End Last Col -->
<div class="cl"> </div>
</div>
<!-- End Cols -->
</div>
</div>
<!-- End Main -->
<!-- Footer -->
<div id="footer">
<div class="shell"> <span class="left"> <a href="#">Home</a> <span>|</span> <a href="#">Support</a> <span>|</span> <a href="#">My Account</a> <span>|</span> <a href="#">The Store</a> <span>|</span> <a href="#">Contact</a> </span> <span class="right"> © 2010 - CompanyName Design by <a href="http://chocotemplates.com">Chocotemplates.com</a> </span> </div>
</div>
<!-- End Footer -->
</body>
</html>
Related examples in the same category