besmart
<!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>beSMART</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:20px;
font-family:Georgia, Arial, Helvetica, Sans-Serif;
color:#333;
background:url(images/body-bg.gif) repeat 0 0;
}
a {
color:#ff0000;
text-decoration:none;
cursor:pointer;
}
a:hover {
text-decoration:underline;
}
a img {
border:0;
}
input, textarea, select {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
textarea {
overflow:auto;
}
.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;
}
.shell {
width:980px;
margin:0 auto;
}
.border {
border:1px solid #e8e8e8;
background:#fff;
position:relative;
}
.shadow-l {
background:url(images/shadow-l.png) no-repeat 0 0;
width:25px;
height:686px;
position:absolute;
top:0;
left:-25px;
}
.shadow-r {
background:url(images/shadow-r.png) no-repeat 0 0;
width:25px;
height:686px;
position:absolute;
top:0;
right:-25px;
}
.shadow-b {
background:url(images/shadow-b.png) no-repeat 0 0;
width:980px;
height:20px;
position:absolute;
bottom:-20;
left:0;
}
#header {
background:url(images/header-bg.gif) repeat-x 0 0;
height:109px;
position:relative;
}
#logo a {
background:url(images/logo.gif) no-repeat 0 0;
width:356px;
height:109px;
position:absolute;
top:0;
left:0;
}
.socials {
padding:23px 11px 0 0;
}
.socials ul {
list-style:none;
}
.socials ul li {
display:inline;
float:left;
font-family:"Trebuchet MS", Arial, sans-serif;
font-size:11px;
line-height:16px;
border-right:1px dotted #b9b9b9;
padding:2px 17px 2px 0;
margin:0 15px 0 0;
}
.socials ul li.last {
border:0;
margin:0;
}
.socials ul li a {
float:left;
color:#b9b9b9;
height:16px;
padding:0 0 0 20px;
}
.socials ul li a.rss {
background:url(images/soc-rss.gif) no-repeat 0 0;
}
.socials ul li a.fb {
background:url(images/soc-fb.gif) no-repeat 0 0;
}
.socials ul li a.twit {
background:url(images/soc-twit.gif) no-repeat 0 0;
}
#navigation {
height:43px;
border-top:1px solid #dbdbdb;
border-bottom:1px solid #dbdbdb;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
float:left;
height:43px;
border-right:1px solid #dbdbdb;
font-size:12px;
line-height:43px;
font-weight:bold;
text-transform:uppercase;
}
#navigation ul li a {
float:left;
height:43px;
color:#000;
padding:0 33px;
}
#navigation ul li a:hover, #navigation ul li a.active {
color:#ff0000;
text-decoration:none;
}
.slider {
width:930px;
height:300px;
border:1px solid #dbdbdb;
position:relative;
margin:25px 0 0 24px;
}
.slider .item {
position:relative;
width:928px;
height:298px;
}
.slider .item img {
position:absolute;
top:0;
left:0;
z-index:1;
}
.slider .text {
position:absolute;
top:102px;
left:480px;
z-index:2;
}
.slider .text h3 {
font-size:45px;
line-height:45px;
color:#ff0000;
padding:0 0 0 7px;
}
.slider .text h2 {
font-size:58px;
line-height:58px;
color:#39393d;
text-transform:uppercase;
padding:0 0 0 2px;
}
.slider-nav {
width:92px;
height:18px;
position:absolute;
bottom:9px;
right:6px;
z-index:3;
}
.slider-nav a {
width:18px;
height:18px;
background:#d7d7d8;
margin:0 5px 0 0;
}
.slider-nav a.active {
background:#39393d;
}
#main {
width:932px;
padding:37px 24px 17px 24px;
}
#main h3 {
font-size:12px;
line-height:15px;
color:#000;
text-transform:uppercase;
border-bottom:1px solid #dbdbdb;
padding:0 0 9px 0;
}
#main a.more {
background:url(images/more.gif) no-repeat 0 3px;
font-size:11px;
line-height:14px;
color:#ff0000;
text-decoration:underline;
padding:0 0 0 13px;
}
#main a.more:hover {
text-decoration:none;
}
#content {
width:605px;
}
.highlight h3 {
margin:0 0 9px 0;
}
.highlight p {
padding:0 0 11px 0;
}
.highlight img {
margin:4px 12px 0 12px;
}
.projects {
padding:65px 0 0 0;
}
.projects h3 {
margin:0 0 17px 0;
}
.projects .item {
margin:0 0 28px 0;
}
.projects .image {
width:183px;
height:111px;
border:1px solid #dbdbdb;
padding:2px;
margin:0 20px 0 3px;
}
.projects .text {
width:393px;
}
.projects .text h4 {
font-size:12px;
line-height:15px;
color:#333;
text-transform:uppercase;
padding:3px 0 2px 0;
}
.projects .text p {
padding:0 0 3px 0;
}
#sidebar {
width:300px;
}
.sidebar-nav {
list-style:none;
padding:0 0 17px 0;
}
.sidebar-nav ul {
list-style:none;
}
.sidebar-nav ul li {
border-bottom:1px solid #dbdbdb;
font-size:12px;
line-height:18px;
padding:7px 0;
}
.sidebar-nav ul li a {
background:url(images/bullet.gif) no-repeat 5px 4px;
color:#333;
padding:0 0 0 16px;
}
.btn-buy {
background:url(images/btn-buy.gif) no-repeat 0 0;
display:block;
width:307px;
height:86px;
font-size:40px;
line-height:86px;
color:#b50000;
font-weight:bold;
text-align:center;
margin:0 0 17px 0;
position:relative;
left:-3px;
}
.btn-buy:hover {
text-decoration:none;
}
.advertisement {
padding:0 0 13px 0;
}
.advertisement h3 {
margin:0 0 18px 0;
}
.advertisement .ads {
padding:0 15px 0 7px;
}
.advertisement .ad {
margin:0 0 18px 0;
}
#sidebar .info h3 {
margin:0 0 7px 0;
}
#footer {
font-family:Arial, sans-serif;
font-size:11px;
line-height:14px;
color:#7f7f7f;
padding:18px 27px 20px 38px;
}
#footer a {
color:#7f7f7f;
text-decoration:none;
}
</style>
<link rel="stylesheet" href="besmart-css/jquery.jcarousel.css" type="text/css" media="all" />
<!--[if IE 6]><link rel="stylesheet" href="besmart-css/ie6.css" type="text/css" media="all" /><![endif]-->
<link rel="shortcut icon" href="besmart-css/images/favicon.ico" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/func.js"></script>
</head>
<body>
<div class="shell">
<div class="border">
<div id="header">
<h1 id="logo"><a href="#" class="notext">beSMART</a></h1>
<div class="socials right">
<ul>
<li><a href="#" class="rss">RSS</a></li>
<li><a href="#" class="fb">Facebook</a></li>
<li class="last"><a href="#" class="twit">Twitter</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
<div id="navigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="cl"> </div>
</div>
<div class="slider">
<div class="slider-nav"> <a href="#" class="left notext">1</a> <a href="#" class="left notext">2</a> <a href="#" class="left notext">3</a> <a href="#" class="left notext">4</a>
<div class="cl"> </div>
</div>
<ul>
<li>
<div class="item">
<div class="text">
<h3><em>achieve your</em></h3>
<h2><em>TARGETS</em></h2>
</div>
<img src="besmart-css/images/slider01.gif" alt="" /> </div>
</li>
<li>
<div class="item">
<div class="text">
<h3><em>achieve your</em></h3>
<h2><em>TARGETS</em></h2>
</div>
<img src="besmart-css/images/slider01.gif" alt="" /> </div>
</li>
<li>
<div class="item">
<div class="text">
<h3><em>achieve your</em></h3>
<h2><em>TARGETS</em></h2>
</div>
<img src="besmart-css/images/slider01.gif" alt="" /> </div>
</li>
<li>
<div class="item">
<div class="text">
<h3><em>achieve your</em></h3>
<h2><em>TARGETS</em></h2>
</div>
<img src="besmart-css/images/slider01.gif" alt="" /> </div>
</li>
</ul>
</div>
<div id="main">
<div id="content" class="left">
<div class="highlight">
<h3>Welcome Note</h3>
<img src="besmart-css/images/highlight.gif" alt="" class="right" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#" class="more">Find out more</a> </div>
<div class="projects">
<h3>Latest projects</h3>
<div class="item">
<div class="image left"> <a href="#"><img src="besmart-css/images/project01.jpg" alt="" /></a> </div>
<div class="text left">
<h4>simply dummy title</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is</p>
<a href="#" class="more">Find out more</a> </div>
<div class="cl"> </div>
</div>
<div class="item">
<div class="image left"> <a href="#"><img src="besmart-css/images/project02.jpg" alt="" /></a> </div>
<div class="text left">
<h4>simply dummy title</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is</p>
<a href="#" class="more">Find out more</a> </div>
<div class="cl"> </div>
</div>
<div class="item">
<div class="image left"> <a href="#"><img src="besmart-css/images/project03.jpg" alt="" /></a> </div>
<div class="text left">
<h4>simply dummy title</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is</p>
<a href="#" class="more">Find out more</a> </div>
<div class="cl"> </div>
</div>
<div class="item">
<div class="image left"> <a href="#"><img src="besmart-css/images/project04.jpg" alt="" /></a> </div>
<div class="text left">
<h4>simply dummy title</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is</p>
<a href="#" class="more">Find out more</a> </div>
<div class="cl"> </div>
</div>
</div>
</div>
<div id="sidebar" class="right">
<h3>Some Links</h3>
<div class="sidebar-nav">
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
<a href="#" class="btn-buy"><em>Buy Now</em></a>
<div class="advertisement">
<h3>Advertisement</h3>
<div class="ads">
<div class="ad left"> <a href="#"><img src="besmart-css/images/ad01.gif" alt="" /></a> </div>
<div class="ad right"> <a href="#"><img src="besmart-css/images/ad02.gif" alt="" /></a> </div>
<div class="cl"> </div>
</div>
</div>
<div class="info">
<h3>Some Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</p>
</div>
</div>
<div class="cl"> </div>
</div>
<div class="shadow-l"></div>
<div class="shadow-r"></div>
<div class="shadow-b"></div>
</div>
<div id="footer">
<p class="left">Copyright © 2010, Your Company Here, 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>
</body>
</html>
Related examples in the same category