wcsst-23
<!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>WCSST 23</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:18px;
font-family:Arial, Helvetica, Sans-Serif;
color:#eaebe0;
background:#222 url(images/body-bg.jpg) no-repeat 0 0;
}
html, body {
height:100%;
}
a {
color:#ffc600;
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:hidden;
}
.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:982px;
margin:0 auto;
}
#header {
height:85px;
}
#logo {
font-size:29px;
line-height:29px;
font-weight:normal;
padding:15px 0 0 0;
}
#logo a {
color:#fbfbfb;
}
#logo a span {
font-size:15px;
line-height:15px;
color:#ffc600;
display:block;
padding:0;
}
#logo a:hover {
text-decoration:none;
}
#navigation {
background:url(images/nav-bg.gif) repeat-x 0 0;
height:45px;
position:relative;
margin:0 22px 0 0;
}
#navigation .edge {
width:24px;
height:45px;
position:absolute;
top:0;
}
#navigation .l {
background:url(images/nav-l.png) no-repeat 0 0;
left:-24px;
}
#navigation .r {
background:url(images/nav-r.png) no-repeat 0 0;
right:-24px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
display:inline;
float:left;
background:url(images/nav-li-bg.gif) no-repeat right 0;
height:45px;
font-family:"Myriad Pro", Arial, sans-serif;
font-size:18px;
line-height:38px;
font-weight:normal;
padding:0 35px 0 0;
}
#navigation ul li.last {
background:none;
padding:0;
}
#navigation ul li a {
float:left;
height:38px;
color:#fff;
padding:0 10px;
}
#navigation ul li a:hover {
text-decoration:none;
color:#000;
}
#navigation ul li a.active {
background:url(images/nav-a-c.gif) repeat-x 0 0;
height:45px;
position:relative;
}
#navigation ul li a.active .btn-active {
width:34px;
height:45px;
position:absolute;
top:0;
}
#navigation ul li a.active .active-l {
background:url(images/nav-a-l.png) no-repeat 0 0;
left:-34px;
}
#navigation ul li a.active .active-r {
background:url(images/nav-a-r.png) no-repeat 0 0;
right:-34px;
}
#navigation ul li a.active:hover {
color:#fff;
}
#head {
}
.slider-bg {
background:url(images/slider-bg.png) no-repeat 0 0;
width:838px;
height:266px;
padding:20px 97px 16px 47px;
}
.slider-holder {
height:302px;
position:relative;
margin:0 0 39px 0;
}
.slider-holder a {
position:relative;
}
.slider-holder .slide-btn {
width:46px;
height:175px;
position:absolute;
top:64px;
}
.slider-holder .prev {
background:url(images/btn-prev.gif) no-repeat 0 0;
left:1px;
}
.slider-holder .next {
background:url(images/btn-next.gif) no-repeat 0 0;
right:1px;
}
.slider {
}
.slider h2 {
font-size:28px;
line-height:28px;
font-weight:normal;
padding:0 0 2px 0;
}
.slider p {
}
.slider .item {
width:888px;
height:269px;
}
.slider .more {
background:url(images/slide-more.gif) no-repeat 0 0;
width:144px;
height:53px;
display:block;
position:absolute;
left:16px;
bottom:6px;
}
.slider .info {
width:430px;
height:156px;
position:relative;
padding:50px 0 63px 22px;
}
.slider .price {
background:url(images/order-bg.gif) no-repeat 0 0;
width:153px;
height:269px;
margin:0 50px 0 0;
position:relative;
}
.slider .price h3 {
font-family:"Myriad Pro", Arial, sans-serif;
font-size:66px;
line-height:66px;
color:#fff;
letter-spacing:-5px;
padding:118px 0 34px 8px;
}
.slider .price h3 span {
font-size:24px;
letter-spacing:0;
padding:0 0 0 4px;
}
.slider .price .add {
background:url(images/btn-add.gif) no-repeat 0 0;
width:109px;
height:19px;
display:block;
margin:0 auto;
position:absolute;
left:20px;
bottom:13px;
}
#main {
padding:0 0 30px 0;
}
#main .head {
padding:0 0 30px 0;
}
#main .head .box-widget {
min-height:192px;
height:auto !important;
height:192px;
padding:0 0 55px 0;
}
#main .head .box-widget .more {
margin:13px 0 0 -10px;
position:absolute;
bottom:0;
}
#main .box-widget {
margin:0 25px 0 0;
}
#main .box-widget .more {
margin:30px -10px 0 auto;
}
#main .box-widget-last {
margin-right:0;
}
#main .box-widget-wide {
margin-right:0;
}
#main .box-widget-wide .more {
margin:30px -10px 0 auto;
}
#main .box-widget-wide {
width:654px;
}
#main .box-soltions {
}
#main .box-soltions .more {
left:0;
}
#main .box-services {
}
#main .box-services .more {
right:-10px;
}
#main .box-links {
}
#main .box-links .more {
right:-10px;
}
#main .box-quality {
}
#main .box-quality .more {
}
.box-widget {
width:310px;
position:relative;
}
.box-widget h2 {
font-size:23px;
line-height:23px;
padding:0 0 2px 0;
}
.box-widget h3 {
font-size:15px;
line-height:15px;
color:#ffc600;
border-bottom:1px solid #414141;
padding:0 0 20px 0;
margin:0 0 13px 0;
}
.box-widget ul {
list-style:none;
}
.box-widget ul li {
background:url(images/bullet.gif) no-repeat 0 10px;
font-size:13px;
line-height:25px;
padding:0 0 0 20px;
}
.box-widget ul li a {
color:#fff;
text-decoration:underline;
}
.box-widget ul li a:hover {
text-decoration:none;
}
.box-widget .info {
}
.box-widget .info img {
margin:0 10px 0 0;
}
.box-widget .info p {
}
.box-widget .info a {
}
.box-widget .more {
background:url(images/widget-more.png) no-repeat 0 0;
width:113px;
height:46px;
display:block;
}
.box-widget .quote {
}
#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -41px;
}
.footer, #footer-push {
height:41px;
}
.footer {
background:url(images/footer-bg.gif) repeat-x 0 0;
font-size:10px;
line-height:41px;
text-transform:uppercase;
}
.footer, .footer a {
color:#9b9b9b;
text-decoration:none;
}
.footer p {
margin:0;
padding:12px 0 0 0;
line-height:normal;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
</style>
<link rel="stylesheet" href="wcsst-23-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-23-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.min.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<!--[if IE 6]><link rel="stylesheet" href="wcsst-23-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="shell" id="wrapper">
<div id="header">
<h1 id="logo" class="left"><a href="#">WCSST 23<span>free website template</span></a></h1>
<div id="navigation" class="right"> <span class="edge l"> </span> <span class="edge r"> </span>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active"><span class="btn-active active-l"> </span>About Us<span class="btn-active active-r"> </span></a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li class="last"><a href="#">Contacts</a></li>
</ul>
</div>
<div class="cl"> </div>
</div>
<div id="head">
<div class="slider-holder">
<div class="slider-bg"> <a href="#" class="slide-btn prev notext">prev</a> <a href="#" class="slide-btn next notext">next</a>
<div class="slider">
<ul>
<li>
<div class="item">
<div class="info left">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
<a href="#" class="more notext">Read More</a> </div>
<div class="price right">
<h3>$99.<span>99</span></h3>
<a href="#" class="add notext">Add to Cart</a> </div>
<div class="cl"> </div>
</div>
</li>
<li>
<div class="item">
<div class="info left">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
<a href="#" class="more notext">Read More</a> </div>
<div class="price right">
<h3>$99.<span>99</span></h3>
<a href="#" class="add notext">Add to Cart</a> </div>
<div class="cl"> </div>
</div>
</li>
<li>
<div class="item">
<div class="info left">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
<a href="#" class="more notext">Read More</a> </div>
<div class="price right">
<h3>$99.<span>99</span></h3>
<a href="#" class="add notext">Add to Cart</a> </div>
<div class="cl"> </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main">
<div class="head">
<div class="box-widget box-solutions left">
<h2>Solutions</h2>
<h3>Plenty of great ideas</h3>
<div class="info"> <img src="wcsst-23-css/images/widg01.gif" alt="" class="left" />
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
<div class="cl"> </div>
</div>
<a href="#" class="more notext">Read More</a> </div>
<div class="box-widget box-services left">
<h2>Services</h2>
<h3>Great variety</h3>
<div class="info"> <img src="wcsst-23-css/images/widg02.gif" alt="" class="left" />
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
<div class="cl"> </div>
</div>
<a href="#" class="more notext">Read More</a> </div>
<div class="box-widget box-widget-last box-links left">
<h2>Quick Links</h2>
<h3>Suggested urls</h3>
<div class="info">
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur el amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor sit amet ispum dolor</a></li>
</ul>
</div>
<a href="#" class="more notext">Read More</a> </div>
<div class="cl"> </div>
</div>
<div class="box-widget box-widget-wide left">
<h2>A bit about the company</h2>
<h3>What we do</h3>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu</p>
<p class="quote">"Start blockquote here. nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh."</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu uote aney nibh in augue.</p>
</div>
<a href="#" class="more notext">Read More</a> </div>
<div class="box-widget box-quality box-widget-last right">
<h2>Top Quality</h2>
<h3>Outstanding products</h3>
<div class="info"> <img src="wcsst-23-css/images/widg03.gif" alt="" class="left" />
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
<div class="cl"> </div>
</div>
<a href="#" class="more notext">Read More</a> </div>
<div class="cl"> </div>
</div>
<div id="footer-push"> </div>
</div>
<div class="footer">
<div class="shell">
<p class="lf">Copyright © 2010 <a href="#">SiteName</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/" target="_blank">Free CSS Templates</a> by <a href="http://www.websitecsstemplates.com/" target="_blank">WebsiteCSSTemplates</a></p>
<div style="clear:both;"></div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category