wcsst-24
<!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 24</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin:0;
padding:0;
outline:0;
}
body {
font:12px/18px Arial, sans-serif;
color:#cbb2b2;
text-align:left;
background:#fff repeat-x 0 0;
}
a {
color:#02a3e7;
text-decoration:underline;
cursor:pointer;
}
a:hover {
text-decoration:none;
}
a img {
border:0;
}
.ar {
display:block;
text-align:right;
}
.ac {
display:block;
text-align:center;
}
.al {
display:block;
text-align:left;
}
.cl {
clear:both;
height:0;
font-size:0;
line-height:0;
text-indent:-4000px;
}
.fr {
float:right;
display:inline;
}
.fl {
float:left;
display:inline;
}
.hidden {
display:none;
}
.notext {
font-size:0;
line-height:0;
text-indent:-4000px;
}
.shell {
margin:0 auto;
width:962px;
}
#header {
height:67px;
background:url(images/header.jpg) repeat-x;
}
h1#logo a {
height:34px;
width:269px;
background:url(images/logo.gif) no-repeat 0 0;
float:left;
margin-top:23px;
text-decoration:none;
}
h1#logo a:hover {
text-decoration:none;
}
h1#logo span {
font-size:10px;
text-align:right;
line-height:13px;
color:#fff;
letter-spacing:1px;
word-spacing:4px;
display:block;
padding:20px 0 0 44px;
color:#909090;
}
#nav {
height:67px;
float:right;
display:inline;
width:690px;
}
#nav ul {
list-style-type:none;
height:67px;
background:url(images/divider.gif) repeat-y 0 0;
float:right;
margin-left:0;
padding-left:1px;
}
#nav li {
float:left;
height:67px;
background:url(images/divider.gif) repeat-y right 0;
width:111px;
text-align:center;
}
#nav li a {
float:left;
width:109px;
margin-right:2px;
font-size:16px;
color:#fff;
font-weight:bold;
height:47px;
padding-top:20px;
text-decoration:none;
}
#nav li a:hover, #nav li a.active {
text-decoration:none;
background:#2b2b2b;
}
#nav li a strong {
font-size:16px;
color:#fff;
text-align:center;
}
#nav li a span {
font-size:10px;
color:#959595;
display:block;
line-height:11px;
}
.slide-area {
height:394px;
background:#e8e8e8;
padding-top:10px;
border-bottom:solid 2px #fff;
}
.slider {
width:962px;
height:385px;
background:url(images/slide.jpg) no-repeat 0 34px;
}
.slider ul {
list-style-type:none;
float:left;
display:inline;
}
.slider .image {
float:left;
width:330px;
text-align:center;
}
.slider .image img {
}
.slider .info {
float:left;
width:500px;
padding-top:70px;
height:315px;
position:relative;
z-index:1;
}
.slider .info h2 {
font-size:22px;
color:#fff;
line-height:23px;
text-transform:uppercase;
padding-bottom:14px;
}
.slider .info p {
color:#fff;
padding-bottom:14px;
}
.slider .info a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
.slider .info a.download {
width:230px;
height:63px;
display:block;
position:absolute;
bottom:11px;
left:260px;
z-index:10;
background:url(images/download.gif);
font-size:0;
line-height:0;
text-indent:-4000px;
text-decoration:underline;
}
#content {
background:#202020 url(images/cnt-bg.jpg) repeat-x 0 0;
padding-top:37px;
}
.triple {
}
.triple ul {
list-style-type:none;
}
.triple li {
float:left;
display:inline;
width:300px;
min-height:285px;
margin-right:31px;
}
.triple li.last {
margin-right:0;
}
.triple li li {
min-height:2px;
background:url(images/tri.gif) no-repeat 0 11px;
line-height:26px;
padding-left:10px;
width:280px;
margin-right:0;
}
.triple li h3 {
font-size:16px;
color:#fff;
line-height:18px;
background:url(images/dbl-h.gif) repeat-x 0 bottom;
padding-bottom:10px;
margin-bottom:14px;
}
.triple li img {
float:left;
padding-right:12px;
}
.triple li p {
padding-bottom:5px;
}
.triple li a.more {
float:right;
display:inline;
background:url(images/more.gif);
width:70px;
height:32px;
padding-left:21px;
line-height:32px;
font-size:11px;
font-weight:bold;
}
.triple li .screens {
padding-left:3px;
}
.triple li .screens a {
float:left;
margin:0 10px 11px 0;
}
.triple li .screens img {
float:left;
border:solid 2px #2b2b2b;
padding:0;
}
.triple li .post {
border-bottom:dashed 1px #2b2b2b;
margin-bottom:12px;
}
.triple li .post small {
color:#02a3e7;
display:block;
}
.triple li .post p {
padding-bottom:18px;
}
.bot {
border:0 !important;
}
.bot p {
padding-bottom:0 !important;
}
.footer {
font-size:10px;
line-height:12px;
padding:24px 0 18px 0;
background:url(images/ftr.gif) repeat-x;
}
.footer, .footer a {
color:#828282;
text-decoration:none;
}
.footer p {
margin:0;
padding:0;
line-height:normal;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
</style>
<link rel="stylesheet" href="wcsst-24-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="stylesheet" href="wcsst-24-css/skin.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-24-css/images/favicon.ico" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jcarousel.js" type="text/javascript" charset="utf-8"></script>
<script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fn.js" type="text/javascript" charset="utf-8"></script>
<!--[if IE 6]><link rel="stylesheet" href="wcsst-24-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="header">
<div class="shell">
<h1 id="logo"><a href="#"><span>WCSST 24</span></a></h1>
<div id="nav">
<ul>
<li><a href="#" class="active"><strong>Home<span>site home</span></strong></a></li>
<li><a href="#"><strong>About<span>who we are</span></strong></a></li>
<li><a href="#"><strong>Services<span>what we do</span></strong></a></li>
<li><a href="#"><strong>Solutions<span>work samples</span></strong></a></li>
<li><a href="#"><strong>Contacts<span>get in touch</span></strong></a></li>
</ul>
</div>
</div>
</div>
<div class="slide-area">
<div class="shell">
<div class="slider">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<div class="image"> <img src="wcsst-24-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>slide 1</h2>
<p><a href="#">Lorem ipsum dolor sit amet</a>, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<p>Lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-24-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>slide 2</h2>
<p><a href="#">Lorem ipsum dolor sit amet</a>, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<p>Lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-24-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>slide 3</h2>
<p><a href="#">Lorem ipsum dolor sit amet</a>, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<p>Lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-24-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>slide 4</h2>
<p><a href="#">Lorem ipsum dolor sit amet</a>, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<p>Lorem ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum ipsum dolor sit amet, tconsectetur adipiscing elit. Website css templates Nunc ornare consequat tortor dolor ispum. </p>
<a href="#" class="download">Download Now</a> </div>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="shell">
<div class="triple">
<ul>
<li>
<h3>The Company</h3>
<img src="wcsst-24-css/images/img1.gif" alt="" />
<p>Lorem ipsum dolor sit amet , consectetur adipiscing elit. Lorem ipsum ornare consequat tortor quis. Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor. </p>
<a href="#" class="more">Read More</a> </li>
<li>
<h3>Some Links</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit ame</a></li>
<li><a href="#">Phasellus ac elit non eros suscipit</a></li>
<li><a href="#">Integer consequat sem in purus vestibulum aliquet</a></li>
<li><a href="#">Phasellus tristique posuere est, a tincidunt diam</a></li>
<li><a href="#">Mauris feugiat mauris vel massa commodo auctor</a></li>
<li><a href="#">Sed fermentum leo leo, in cursus dolor</a></li>
</ul>
</li>
<li class="last">
<h3>Screenshots</h3>
<div class="screens"> <a href="#"><img src="wcsst-24-css/images/thumb1.jpg" alt="" /></a> <a href="#"><img src="wcsst-24-css/images/thumb2.jpg" alt="" /></a> <a href="#"><img src="wcsst-24-css/images/thumb3.jpg" alt="" /></a> <a href="#"><img src="wcsst-24-css/images/thumb4.jpg" alt="" /></a> <a href="#"><img src="wcsst-24-css/images/thumb5.jpg" alt="" /></a> <a href="#"><img src="wcsst-24-css/images/thumb6.jpg" alt="" /></a> </div>
</li>
<li>
<h3>Services</h3>
<img src="wcsst-24-css/images/img2.gif" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ispum ornare consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit adispicing. Dolor sit amet Nunc ornare consequat tortor quis consectetur adipiscing elit <a href="#">dolor</a> conceset ornare adip.</p>
<a href="#" class="more">Read More</a> </li>
<li>
<h3>Our Blog</h3>
<div class="post"> <small>August 29th, 2010</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor conceset ornare adip. </p>
</div>
<div class="post bot" > <small>August 29th, 2010</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor conceset ornare adip.</p>
</div>
<a href="#" class="more">Read More</a> </li>
<li class="last">
<h3>Providing Top Solutions</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum ornare consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#"> Website CSS Templates</a> Nunc ornare consequat tortor quisLorem ipsum dolor sit amet, comet.</p>
<a href="#" class="more">Read More</a> </li>
</ul>
<div class="cl"> </div>
</div>
</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