businesslike
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>BusinessLike</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
outline:0;
}
body {
font-size: 12px;
line-height: 1.3;
font-family: Arial, Helvetica, Sans-Serif;
color: #fff;
background: url('images/body-bg.gif');
}
a {
color: #ffd927;
text-decoration: none;
cursor:pointer;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0;
}
input, textarea, select {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
textarea {
overflow: auto;
}
.hidden {
display:none;
}
.cl {
display: block;
height: 0;
font-size: 0;
line-height: 0;
text-indent: -4000px;
clear: both;
}
.notext {
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
.left, .alignleft {
float: left;
display: inline;
}
.right, .alignright {
float: right;
display: inline;
}
h2 {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:19px;
color:#ffd900;
font-weight:bold;
}
h3 {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:18px;
color:#ffd927;
font-weight:bold;
text-shadow:1px 1px 0 #000;
}
h4 {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:19px;
color:#8f8f8f;
font-weight:bold;
}
.shell {
width:945px;
margin:0 auto;
}
#header {
background:url('images/header-bg.gif') repeat-x;
height:122px;
}
#header .shell {
padding-bottom:20px;
position:relative;
}
h1#logo {
float:left;
padding:35px 0 0 0;
margin-left:-3px;
}
h1#logo a {
float:left;
width:241px;
height:57px;
background:url('images/logo.gif') no-repeat 0 0;
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
#navigation {
position:absolute;
top:46px;
right:-10px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
display:inline;
padding-left:1px;
}
#navigation ul li a {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:13px;
color:#a6dd1f;
text-shadow:0px 2px 1px #000;
}
#navigation ul li a {
float:left;
display:inline;
width:97px;
line-height:27px;
height:30px;
text-align:center;
}
#navigation ul li a.active, #navigation ul li a:hover {
float:left;
background:url('images/nav-active.gif') no-repeat center 0;
color:#fff;
text-decoration:none;
padding-bottom:3px;
}
#main {
padding-top:11px;
padding-bottom:31px;
}
.intro {
width:945px;
height:380px;
;
position:relative;
padding-bottom:12px;
}
.jcarousel-clip, .slider-carousel {
width:945px;
float:left;
background:url('images/slide-bg.gif') no-repeat 0 0;
position:relative;
padding-bottom:16px;
}
.slider-carousel ul {
list-style:none;
}
.slider-carousel ul li {
padding-bottom:6px;
position:relative;
}
.slider-carousel a img {
margin-top:46px;
margin-left:22px;
float:left;
display:inline;
}
.slider-carousel .entry {
float:left;
width:530px;
height:187px;
padding:47px 0 21px 32px;
overflow:hidden;
}
.slider-carousel .entry h2 {
text-shadow:1px 1px 2px #000;
padding-bottom:7px;
}
.slider-carousel a.button {
float:left;
width:105px;
height:32px;
background:url('images/slider-button.gif') no-repeat 0 0;
cursor:pointer;
font-size: 0;
line-height: 0;
text-indent: -4000px;
position:absolute;
left:296px;
bottom:0px;
}
.slider-carousel .entry ul li {
background:url('images/entry-arrow.gif') no-repeat 0 center;
padding-left:20px;
}
.slider-carousel .entry ul {
padding-bottom:20px;
}
.slider-carousel .entry p {
padding-bottom:10px;
}
.slider-navigation {
float:left;
width:945px;
height:86px;
position:absolute;
bottom:-79px;
left:0;
}
.slider-navigation ul {
list-style:none;
}
.slider-navigation ul li {
float:left;
display:inline;
width:187px;
padding-left:2px;
}
.slider-navigation ul li.first {
padding-left:0;
}
.slider-navigation ul li a {
float:left;
display:inline;
width:177px;
height:66px;
background:url('images/slider-nav.gif') no-repeat 0 0;
color:#fff;
font-size:10px;
padding-top:20px;
padding-left:10px;
}
.slider-navigation ul li a:hover {
text-decoration:none;
}
.slider-navigation ul li a em {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:13px;
font-style:normal;
display:block;
}
span.button1 {
float:left;
width:50px;
height:46px;
background:url('images/button1.png') no-repeat 0 bottom;
padding-left:10px;
padding-top:3px;
}
span.button2 {
float:left;
width:56px;
height:50px;
background:url('images/button2.png') no-repeat 0 bottom;
padding-left:10px;
padding-top:3px;
}
span.button3 {
float:left;
width:49px;
height:48px;
background:url('images/button3.png') no-repeat 0 bottom;
padding-left:10px;
padding-top:3px;
}
span.button4 {
float:left;
width:44px;
height:57px;
background:url('images/button4.png') no-repeat 0 bottom;
padding-left:10px;
padding-top:3px;
}
span.button5 {
float:left;
width:40px;
height:57px;
background:url('images/button5.png') no-repeat 0 bottom;
padding-left:10px;
padding-top:3px;
}
.slider-navigation ul li a:hover, .slider-navigation ul li a.active {
background-image:none;
background-color:#505050;
}
.slider-navigation .hidden-id {
display:none;
}
span.promo {
width:175px;
height:174px;
background:url('images/promo.png') no-repeat 0 0;
position:absolute;
top:0;
right:0;
}
.main-boxes {
}
.box {
width:304px;
float:left;
padding-right:16px;
background:url('images/box-bg.gif') repeat-y 0 0;
position:relative;
}
.last {
padding:0;
}
.box-t {
background:url('images/box-t.gif') no-repeat 0 top;
}
.box-b {
background:url('images/box-b.gif') no-repeat 0 bottom;
padding-bottom:8px;
}
.box h3 {
padding:11px 0 8px 15px;
}
.box ul {
list-style:none;
min-height:150px;
height: auto !important;
height:150px;
background:url('images/box-separator.gif') repeat-x center top;
padding-top:9px;
}
.box ul li {
float:left;
display:inline;
padding:6px 15px;
font-size:13px;
color:#fff;
background:url('images/box-separator.gif') no-repeat center bottom;
}
.box ul li span {
background:url('images/box-arrow.gif') no-repeat 0 center;
padding-left:13px;
}
.box ul span {
font-size:13px;
font-weight:bold;
color:#adff00;
}
.box a.details {
width:57px;
height:22px;
float:left;
margin:16px 0 0 18px;
background:url('images/details.gif') no-repeat 0 bottom;
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
.box .price {
padding-right:12px;
}
.box .price p {
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:10px;
color:#fed257;
text-shadow:1px 0px 1px #000;
text-align:right;
line-height:24px;
}
.box ul li.last-item {
background:url('images/box-separator.gif') repeat-x center bottom;
margin: 0 2px;
padding-bottom:16px;
}
.box .price p.green {
font-family:Arial, Helvetica, Sans-Serif;
font-size:40px;
color:#adff00;
text-shadow:none;
font-weight:bold;
}
.box .price p.green span {
font-size:26px;
}
.box .best-deals {
width:65px;
height:65px;
float:left;
background:url('images/best-deal.png') no-repeat 0 0;
position:absolute;
top:-9px;
right:-10px;
}
.more {
float:left;
width:943px;
font-family:"Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size:17px;
color:#ffd900;
text-transform:uppercase;
text-shadow:1px 1px 0px #000;
line-height:57px;
background:url('images/more-bg.gif') repeat-y 0 0;
margin-top:13px;
}
.more a {
color:#fff;
text-decoration:underline;
}
.more a:hover {
text-decoration:none;
}
.more-t {
background:url('images/more-t.gif') no-repeat 0 top;
}
.more-b {
background:url('images/more-b.gif') no-repeat 0 bottom;
}
.more .more-entry {
padding-left:21px;
}
#main-cols {
background:#212121 url('images/cols-bg.gif') repeat-x;
}
#main-cols .shell {
}
.col {
width:278px;
float:left;
color:#c9c9c9;
line-height:15px;
background: url('images/col-separator.gif') no-repeat right center;
min-height:250px;
height:auto !important;
height:250px;
padding:7px 25px 7px 8px;
}
.col h4 {
padding-bottom:14px;
padding-top:10px;
}
.col ul {
list-style:none;
}
.col ul li {
padding-bottom:13px;
}
.col a {
color:#c9c9c9;
}
#main-cols .last {
padding:7px 0 0 14px;
background:none;
width:245px;
}
ul.social {
list-style:none;
}
ul.social li {
float:left;
display:inline;
padding-right:6px;
}
ul.social li a {
display:block;
width:28px;
height:28px;
background:url('images/social.gif') no-repeat 0 0;
font-size: 0;
line-height: 0;
text-indent: -4000px;
}
ul.social li a.twitter {
background-position:-35px 0;
}
ul.social li a.del {
background-position:-70px 0;
}
ul.social li a.rss {
background-position:-104px 0;
}
.last {
color:#898989;
font-size:11px;
}
.last p.white {
font-weight:bold;
color:#f0f0f0;
font-size:12px;
}
.last a {
font-size:11px;
color:#fffefe;
text-decoration:underline;
}
.last a:hover {
text-decoration:none;
}
.last a.gray {
color:#b1b1b1;
}
#footer {
padding:24px 0;
background:url('images/footer-bg.gif') repeat-x 0 top;
color:#a2a1a1;
}
#footer .shell {
}
#footer a {
color:#a2a1a1;
text-decoration:underline;
}
#footer a:hover {
text-decoration: none;
}
#footer p.text-right {
text-align:right;
}
#footer span {
padding:0 1px;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="businesslike-css/ie6.css" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="header">
<div class="shell">
<h1 id="logo"><a href="#">businesslike premium html/css template</a></h1>
<div id="navigation">
<ul>
<li><a class="active" href="#"><span>HOME</span></a></li>
<li><a href="#"><span>ABOUT</span></a></li>
<li><a href="#"><span>SERVICES</span></a></li>
<li><a href="#"><span>PROJECTS</span></a></li>
<li><a href="#"><span>BLOG</span></a></li>
<li><a href="#"><span>CONTACT</span></a></li>
<li><a href="#"><span>TEMPLATES</span></a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div class="shell">
<div class="intro">
<div class="slider-carousel">
<ul>
<li> <a href="#"><img src="businesslike-css/images/monitor.gif" alt="" /></a>
<div class="entry">
<h2>USABLE WEBSITE DEISGN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<ul>
<li>Nulla in metus nec diam pulvinar euismod eu at risus.</li>
<li>Sed vulputate magna suscipit sapien rutrum a vehicula neque fringilla.</li>
<li>Mauris at neque sed mauris porttitor rutrum eget nec velit.</li>
<li>Fusce eu mi nec augue sodales congue vitae dignissim nisi.</li>
</ul>
<span class="promo"> </span> </div>
<a class="button" href="#">FIND OUT MORE</a> </li>
<li> <a href="#"><img src="businesslike-css/images/monitor.gif" alt="" /></a>
<div class="entry">
<h2>USABLE WEBSITE DEISGN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<ul>
<li>Nulla in metus nec diam pulvinar euismod eu at risus.</li>
<li>Sed vulputate magna suscipit sapien rutrum a vehicula neque fringilla.</li>
<li>Mauris at neque sed mauris porttitor rutrum eget nec velit.</li>
<li>Fusce eu mi nec augue sodales congue vitae dignissim nisi.</li>
</ul>
<a class="button" href="#">FIND OUT MORE</a> <span class="promo"> </span> </div>
</li>
<li> <a href="#"><img src="businesslike-css/images/monitor.gif" alt="" /></a>
<div class="entry">
<h2>USABLE WEBSITE DEISGN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<ul>
<li>Nulla in metus nec diam pulvinar euismod eu at risus.</li>
<li>Sed vulputate magna suscipit sapien rutrum a vehicula neque fringilla.</li>
<li>Mauris at neque sed mauris porttitor rutrum eget nec velit.</li>
<li>Fusce eu mi nec augue sodales congue vitae dignissim nisi.</li>
</ul>
<a class="button" href="#">FIND OUT MORE</a> <span class="promo"> </span> </div>
</li>
<li> <a href="#"><img src="businesslike-css/images/monitor.gif" alt="" /></a>
<div class="entry">
<h2>USABLE WEBSITE DEISGN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<ul>
<li>Nulla in metus nec diam pulvinar euismod eu at risus.</li>
<li>Sed vulputate magna suscipit sapien rutrum a vehicula neque fringilla.</li>
<li>Mauris at neque sed mauris porttitor rutrum eget nec velit.</li>
<li>Fusce eu mi nec augue sodales congue vitae dignissim nisi.</li>
</ul>
<a class="button" href="#">FIND OUT MORE</a> <span class="promo"> </span> </div>
</li>
<li> <a href="#"><img src="businesslike-css/images/monitor.gif" alt="" /></a>
<div class="entry">
<h2>USABLE WEBSITE DEISGN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet lacus at metus accumsan porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula ut dui adipiscing commodo.</p>
<ul>
<li>Nulla in metus nec diam pulvinar euismod eu at risus.</li>
<li>Sed vulputate magna suscipit sapien rutrum a vehicula neque fringilla.</li>
<li>Mauris at neque sed mauris porttitor rutrum eget nec velit.</li>
<li>Fusce eu mi nec augue sodales congue vitae dignissim nisi.</li>
</ul>
<a class="button" href="#">FIND OUT MORE</a> <span class="promo"> </span> </div>
</li>
</ul>
<div class="slider-navigation">
<ul>
<li class="first"><a class="active" href="#"><span class="hidden-id">1</span><span class="button1"></span><em>WEB DESIGN</em>Lorem ipsum dolor sit amet,elit.</a></li>
<li><a href="#"><span class="hidden-id">2</span><span class="button2"></span><em>PRINT DESIGN</em>Lorem ipsum dolor sit amet,elit.</a></li>
<li><a href="#"><span class="hidden-id">3</span><span class="button3"></span><em>LOGO DESIGN</em>Lorem ipsum dolor sit amet,elit.</a></li>
<li><a href="#"><span class="hidden-id">4</span><span class="button4"></span><em>PACKAGE DESIGN</em>Lorem ipsum dolor sit amet,elit.</a></li>
<li><a href="#"><span class="hidden-id">5</span><span class="button5"></span><em>HOSTING</em>Lorem ipsum dolor sit amet,elit.</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
</div>
<div class="main-boxes">
<div class="box">
<div class="box-b">
<div class="box-t">
<h3>COOL CSS TEMPLATES</h3>
<ul>
<li><span>90 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit</li>
<li><span>10 Praesent</span> aliquet lacus at metus accumsan porta, adipiscing elit</li>
<li class="last-item"><span>45 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit, proin in ligula ut dui</li>
</ul>
<a class="details" href="#">DETAILS</a>
<div class="price">
<p>ONLY FOR</p>
<p class="green"><span>$</span>42</p>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-b">
<div class="box-t">
<h3>EXTENDED LICENSE</h3>
<ul>
<li><span>90 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit</li>
<li><span>10 Praesent</span> aliquet lacus at metus accumsan porta, adipiscing elit</li>
<li class="last-item"><span>45 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit, proin in ligula ut dui</li>
</ul>
<a class="details" href="#">DETAILS</a>
<div class="price">
<p>ONLY FOR</p>
<p class="green"><span>$</span>42</p>
</div>
</div>
</div>
</div>
<div class="box last">
<div class="box-b">
<div class="box-t">
<h3>COOL OFFER 3</h3>
<span class="best-deals"></span>
<ul>
<li><span>90 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit</li>
<li><span>10 Praesent</span> aliquet lacus at metus accumsan porta, adipiscing elit</li>
<li class="last-item"><span>45 Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit, proin in ligula ut dui</li>
</ul>
<a class="details" href="#">DETAILS</a>
<div class="price">
<p>ONLY FOR</p>
<p class="green"><span>$</span>98</p>
</div>
</div>
</div>
</div>
<div class="cl"> </div>
<div class="more">
<div class="more-b">
<div class="more-t">
<div class="more-entry">
<p>Limited time offer, ACT NOW! GET CUSTOM DESIGN ONLY FOR $298. <a href="#">FIND OUT MORE!</a></p>
</div>
</div>
</div>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="main-cols">
<div class="shell">
<div class="col">
<h4>GET IN TOUCH</h4>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat commodo ante, sit </li>
<li>
<p><span>New York:</span> +34 44344 443</p>
<p><span>Ottawa:</span> +34 44344 443</p>
</li>
<li>
<p><a href="#">info@businesslike.com</a></p>
<p><a href="#">sales@businesslike.com</a></p>
</li>
</ul>
</div>
<div class="col">
<h4>FOLLOW US</h4>
<ul class="social">
<li><a class="facebook" href="#">facebook</a></li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="del" href="#">del</a></li>
<li><a class="rss" href="#">rss</a></li>
</ul>
</div>
<div class="col last">
<h4>BLOG ROLL</h4>
<ul>
<li>
<p class="white">Lorem ipsum dolor sit amet, consectetur </p>
<p>posted on 20.07.09 in <a class="gray" href="#">Topicname</a> by <a href="#">admin</a></p>
</li>
<li>
<p class="white">Sed vel diam mattis dolor tincidunt volutpat </p>
<p>posted on 20.07.09 in <a class="gray" href="#">Topicname</a> by <a href="#">admin</a></p>
</li>
<li>
<p class="white">Duis lacus odio, mattis eu tristique id, </p>
<p>posted on 20.07.09 in <a class="gray" href="#">Topicname</a> by <a href="#">admin</a></p>
</li>
<li>
<p class="white">Maecenas malesuada fermentum eros</p>
<p>posted on 20.07.09 in <a class="gray" href="#">Topicname</a> by <a href="#">admin</a></p>
</li>
</ul>
</div>
<div class="cl"> </div>
</div>
</div>
<div id="footer">
<div class="shell">
<p class="left">Copyright © 2010 <a href="#">Domain Name</a> - All Rights Reserved</p>
<p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://chocotemplates.com/">ChocoTemplates.com</a></p>
<div class="cl"> </div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category