wcsst-12
<!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 12</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:16px;
font-family:Arial, sans-serif;
color:#685d5d;
background:#fff url(images/body-bg.gif) repeat-x 0 0;
}
a {
color:#0252aa;
text-decoration:none;
cursor:pointer;
}
a:hover {
color:#000;
}
a img {
border:0;
}
input, textarea, select {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:0;
}
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:976px;
margin:0 auto;
background:url(images/header-bg.gif) no-repeat 538px 0;
}
#header {
position:relative;
height:85px;
}
h1#logo a {
font-size:22px;
color:#374f5f;
line-height:22px;
text-transform:uppercase;
letter-spacing:0.4px;
text-decoration:none;
float:left;
padding:26px 0 0 2px;
}
h1#logo a span {
color:#685d5d;
font-size:10px;
letter-spacing:0px;
display:block;
position:relative;
top:-6px;
}
#navigation {
float:right;
display:inline;
margin-top:25px;
}
#navigation ul {
list-style:none outside none;
}
#navigation ul li {
float:left;
display:inline;
padding-right:15px;
}
#navigation ul li a, #navigation ul li a span {
float:left;
display:inline;
height:37px;
font-family:Verdana, sans-serif;
font-weight:bold;
color:#3d708b;
padding-left:15px;
line-height:35px;
}
#navigation ul li a span {
position:relative;
padding:0 15px 0 0;
margin-right:-10px;
}
#navigation ul li a:hover, #navigation ul li a.active, #navigation ul li a:hover span, #navigation ul li a.active span {
background:url(images/nav-hover.gif) no-repeat 0 0;
}
#navigation ul li a:hover span, #navigation ul li a.active span {
background-position:right 0;
}
#slider {
position:relative;
width:976px;
height:296px;
background:url(images/slider-bg.gif) no-repeat 0 0;
}
#next, #prev {
position:absolute;
top:115px;
display:block;
width: 64px;
height:64px;
z-index:10;
}
#next {
right:20px;
background:url(images/next.png) no-repeat 0 0;
}
#prev {
left:20px;
background:url(images/prev.png) no-repeat 0 0;
}
#slider-content {
position:relative;
width:976px;
height:296px;
overflow:hidden;
}
#slider-content ul {
position:relative;
list-style:none outside none;
overflow:hidden;
}
#slider-content ul li, .jcarousel-clip {
position:relative;
width:976px;
height:296px;
}
#slider-content ul li .left-side, #slider-content ul li .right-side {
float:left;
display:inline;
}
#slider-content ul li .left-side {
width:381px;
padding:54px 0 0 77px;
z-index:2;
}
#slider-content ul li .right-side {
float:left;
display:inline;
position:relative;
width:400px;
line-height:18px;
padding:74px 0 0 0;
left:-9px;
z-index:5;
}
#slider-content ul li .right-side h2 {
font-size:30px;
color:#374f5f;
text-transform:uppercase;
line-height:30px;
padding-bottom:14px;
}
#slider-content ul li .right-side a {
color:#685d5d;
text-decoration:underline;
}
#slider-content ul li .right-side a:hover {
color:#ff0000;
text-decoration:none;
}
#slider-content .get-started {
display:block;
width:180px;
height:87px;
background:url(images/get-started.gif) no-repeat 0 0;
margin:35px 0 0 112px;
}
#slider-content .get-started:hover {
background-position:0 -87px;
}
#main {
padding:0 0 73px 20px;
}
.cols {
padding:45px 0 70px 0;
}
.col {
float:left;
display:inline;
width:295px;
margin-right:25px;
}
.col-last {
margin-right:0;
}
.post {
}
.post h3 {
font-size:20px;
color:#374f5f;
border-bottom:1px solid #c3cacf;
padding-bottom:10px;
margin-bottom:10px;
}
.post p {
line-height:18px;
}
.post .underline {
text-decoration:underline;
}
.post img {
margin:6px 0;
}
.post a {
color:#00aeef;
text-decoration:underline;
}
.post a:hover {
color:#685d5d;
}
.post a.learn-more {
display:block;
color:#2184ac;
font-weight:bold;
padding-top:8px;
}
.post a.learn-more:hover {
color:#00aeef;
}
#content {
}
#content .col {
width:455px;
}
#content .col h3 {
padding-bottom:16px;
}
#content .col-last p {
padding-bottom:13px;
}
#content .col-last .learn-more {
padding:0;
}
.footer {
min-height:48px;
background:url(images/footer-bg.gif) repeat-x 0 0;
font-size:10px;
}
.footer .shell {
width:941px;
background:none;
padding:14px 19px 0 20px;
}
.footer, .footer a {
color:#727373;
text-decoration:none;
}
.footer p {
margin:0;
padding:0;
line-height:normal;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="wcsst-12-css/images/favicon.ico" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.js" type="text/javascript"></script>
<script src="js/jquery.pngFix.js" type="text/javascript"></script>
<script src="js/js-fnc.js" type="text/javascript"></script>
<!--[if IE 6]><link rel="stylesheet" href="wcsst-12-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="shell">
<div id="header">
<h1 id="logo"><a href="#">WCSST 12<span>FREE WEBSITE TEMPLATE</span></a></h1>
<div id="navigation">
<ul>
<li><a href="#" class="active"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Solutions</span></a></li>
<li><a href="#"><span>Support</span></a></li>
<li><a href="#"><span>Partners</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="slider"> <a href="#" id="prev" class="notext">prev</a> <a href="#" id="next" class="notext">next</a>
<div id="slider-content">
<ul>
<li>
<div class="left-side"> <img src="wcsst-12-css/images/mac-image.png" alt="" /> </div>
<div class="right-side">
<h2>free simple template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <strong>Aliquam</strong> sed fringilla arcu.<a href="#">Maecenas</a> sit amet cursus augue. <a href="#">Donec</a> felis eros, luctus at blandit ac.</p>
<a href="#" class="get-started notext">get started - lets talk about your project</a> </div>
<div class="cl"> </div>
</li>
<li>
<div class="left-side"> <img src="wcsst-12-css/images/mac-image.png" alt="" /> </div>
<div class="right-side">
<h2>free simple template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <strong>Aliquam</strong> sed fringilla arcu.<a href="#">Maecenas</a> sit amet cursus augue. <a href="#">Donec</a> felis eros, luctus at blandit ac.</p>
<a href="#" class="get-started notext">get started - lets talk about your project</a> </div>
<div class="cl"> </div>
</li>
<li>
<div class="left-side"> <img src="wcsst-12-css/images/mac-image.png" alt="" /> </div>
<div class="right-side">
<h2>free simple template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <strong>Aliquam</strong> sed fringilla arcu.<a href="#">Maecenas</a> sit amet cursus augue. <a href="#">Donec</a> felis eros, luctus at blandit ac.</p>
<a href="#" class="get-started notext">get started - lets talk about your project</a> </div>
<div class="cl"> </div>
</li>
</ul>
</div>
</div>
<div id="main">
<div class="cols">
<div class="col">
<div class="post">
<h3>What is Mondays?</h3>
<img src="wcsst-12-css/images/monitor.gif" alt="" class="right" />
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <strong>Aliquam</strong> sed frin gilla arcu. Maecenas sit amet cursus augue. Donec felis eros, <a href="#">luctus</a> at blandit ac.</p>
<div class="cl"> </div>
<a href="#" class="learn-more" >Learn more</a> </div>
</div>
<div class="col">
<div class="post">
<h3>Monday Services</h3>
<img src="wcsst-12-css/images/gears.gif" alt="" class="right" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <strong>Aliquam</strong> sed frin gilla arcu. Maecenas sit amet cursus augue. Donec felis eros, <a href="#">luctus at blandit</a> ac.</p>
<div class="cl"> </div>
<a href="#" class="learn-more">Learn more</a> </div>
</div>
<div class="col col-last">
<div class="post">
<h3>Monday Support</h3>
<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 <span class="underline">consequat</span> tortor quis porttitor.</p>
<a href="#" class="learn-more">Learn more</a> </div>
</div>
<div class="cl"> </div>
</div>
<div id="content">
<div class="col">
<div class="post">
<h3>Why Mondays?</h3>
<img src="wcsst-12-css/images/mac.gif" alt="" class="right"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a>ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue. Donec felis eros, luctus at blandit ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. <span class="underline">Aliquam</span> sed fringilla arcu. </p>
<a href="#" class="learn-more">Learn more</a> </div>
</div>
<div class="col col-last">
<div class="post">
<h3>This Solution and That Solution...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. <span class="underline">Donec</span> felis eros, luctus at blandit ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed <strong>fringilla</strong> arcu. </p>
<a href="#" class="learn-more">Learn more</a> </div>
</div>
<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