wcsst-26
<!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 26</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:#685d5d;
text-align:left;
background:#ececec url(images/repp.gif) repeat-y center 0;
}
html, body {
height:100%;
}
a {
color:#685d5d;
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:960px;
border-left:solid 1px #dfdfdf;
border-right:solid 1px #dfdfdf;
background:#fff;
}
#header {
height:121px;
background:#ececec;
}
#header .shell {
border-bottom:solid 1px #dfdfdf;
height:120px;
}
#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -58px;
}
h1#logo a {
height:30px;
width:309px;
background:url(images/logo.gif) no-repeat 0 0;
float:left;
margin:42px 0 0 25px;
text-decoration:none;
}
h1#logo a:hover {
text-decoration:none;
}
h1#logo span {
font-size:10px;
text-align:right;
line-height:13px;
text-transform:uppercase;
color:#215fab;
letter-spacing:1px;
word-spacing:4px;
display:block;
padding:20px 0 0 44px;
}
#header .social {
float:right;
display:inline;
padding-top:13px;
padding-right:37px;
width:112px;
}
#header .social a {
margin-left:7px;
float:left;
}
#nav {
float:right;
display:inline;
width:690px;
padding-right:31px;
}
#nav ul {
list-style-type:none;
background:repeat-y 0 0;
float:right;
margin-left:0;
padding-left:1px;
}
#nav li {
float:right;
text-transform:uppercase;
padding-left:43px;
}
#nav li a {
float:left;
font-size:14px;
color:#787474;
font-weight:bold;
text-decoration:none;
}
#nav li a:hover {
text-decoration:underline;
}
.slide-area {
height:324px;
background:#e3e3e3;
}
.slider {
width:960px;
height:324px;
background:url(images/slider.jpg) no-repeat;
}
.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:140px;
height:315px;
position:relative;
z-index:1;
}
.slider .info h2 {
font-size:22px;
color:#fff;
line-height:23px;
text-transform:uppercase;
}
.slider .info p {
color:#fff;
padding-bottom:14px;
}
.slider .info a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
.slider .info a.download {
width:231px;
height:62px;
display:block;
background:url(images/download.png);
font-size:0;
line-height:0;
text-indent:-4000px;
text-decoration:underline;
margin:68px 0 0 72px;
}
#content {
background:#ececec;
border-top:solid 1px #dee4dd;
}
.triple {
padding:37px 0 20px 40px;
}
.triple ul {
list-style-type:none;
}
.triple li {
float:left;
display:inline;
width:270px;
min-height:300px;
margin-right:38px;
}
.triple li.last {
margin-right:0;
}
.triple li li {
min-height:2px;
background:no-repeat 0 11px;
line-height:26px;
padding-left:10px;
width:280px;
margin-right:0;
}
.triple li h3 {
font-size:18px;
color:#000;
line-height:20px;
font-weight:normal;
padding-bottom:10px;
margin-bottom:6px;
border-bottom:solid 1px #e5e5e5;
}
.triple li img {
display:block;
}
.triple li p {
padding-top:8px;
}
.triple li a.more {
float:right;
display:inline;
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-push {
height:58px;
}
.footer {
font-size:11px;
line-height:12px;
background:#ececec;
border-top:solid 1px #e5e5e5;
}
.footer .shell {
margin:0 auto;
width:930px;
border-left:solid 1px #dfdfdf;
border-right:solid 1px #dfdfdf;
background:#fff;
padding:15px;
}
.footer, .footer a {
color:#7f7f7f;
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-26-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="stylesheet" href="wcsst-26-css/skin.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-26-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-26-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="wrapper">
<div id="header">
<div class="shell">
<div class="cl"> </div>
<h1 id="logo"><a href="#"><span>WCSST 26</span></a></h1>
<div class="social">
<div class="cl"> </div>
<a href="#"><img src="wcsst-26-css/images/soc1.gif" alt="" /></a> <a href="#"><img src="wcsst-26-css/images/soc2.gif" alt="" /></a> <a href="#"><img src="wcsst-26-css/images/soc3.gif" alt="" /></a> <a href="#"><img src="wcsst-26-css/images/soc4.gif" alt="" /></a>
<div class="cl"> </div>
</div>
<div id="nav">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="cl"> </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-26-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>some nice slogan goes here</h2>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-26-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>some nice slogan goes here</h2>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-26-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>some nice slogan goes here</h2>
<a href="#" class="download">Download Now</a> </div>
</li>
<li>
<div class="image"> <img src="wcsst-26-css/images/iphone.png" alt="" /> </div>
<div class="info">
<h2>some nice slogan goes here</h2>
<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>Who we are?</h3>
<img src="wcsst-26-css/images/img1.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. <strong>Maecenas</strong> sit amet cursus augue. Donec felis eros, luctus at blandit ac. Nunc ornare <a href="#">consequat</a> tortor quis porttitor.</p>
</li>
<li>
<h3>What we do?</h3>
<img src="wcsst-26-css/images/img2.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. <strong>Maecenas</strong> sit amet cursus augue. Donec felis eros, luctus at blandit ac. Nunc ornare <a href="#">consequat</a> tortor quis porttitor.</p>
</li>
<li class="last">
<h3>Get in touch?</h3>
<img src="wcsst-26-css/images/img3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. <strong>Maecenas</strong> sit amet cursus augue. Donec felis eros, luctus at blandit ac. Nunc ornare <a href="#">consequat</a> tortor quis porttitor.</p>
</li>
</ul>
<div class="cl"> </div>
</div>
</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