wcsst-22
<!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 22</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:#222;
background:#f9f4f4 url(images/body.gif) repeat-x 0 64px;
}
a {
color:#2e6c91;
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:974px;
margin:0 auto;
}
.header {
height:64px;
background:url(images/header.gif) repeat-x 0 0;
padding-bottom:12px;
}
.header .shell {
height:64px;
background:url(images/header.gif) repeat-x 0 0;
}
h1#logo {
padding:20px 0 0 4px;
font-size:18px;
text-shadow:-1px 1px 1px #000;
float:left;
display:inline;
}
h1#logo a {
color:#fff;
}
h1#logo span {
display:block;
font-size:10px;
font-weight:normal;
text-shadow:0 0 0 transparent;
text-align:right;
}
h1#logo a span {
color:#95afc0;
}
h1#logo a:hover, h1#logo a:hover span {
text-decoration:none;
color:#dff3fe;
}
#navigation {
float:right;
width:574px;
font-size:14px;
font-weight:bold;
font-family:tahoma, arial, sans-serif;
text-shadow:-1px 1px 1px #000;
height:63px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
height:63px;
float:left;
display:inline;
background:url(images/navigation-li.gif) no-repeat left 0;
padding-left:1px;
}
#navigation ul li a {
color:#fff;
height:39px;
float:left;
display:inline;
padding:24px 24px 0 24px;
}
#navigation ul li a.active, #navigation ul li a:hover {
background:url(images/navigation-hover.gif) repeat-x 0 0;
text-decoration:none;
}
.slider {
height:293px;
width:960px;
display:block;
background:url(images/slider-bg.gif) no-repeat 0 0;
padding:7px 7px 84px 7px;
position:relative;
}
.slider-holder, .jcarousel-clip {
height:291px;
width:958px;
position:relative;
overflow:hidden;
border:1px solid #e3d0d0;
}
.slider-holder ul {
height:293px;
position:relative;
overflow:hidden;
list-style:none;
}
.slider-holder ul li {
height:293px;
width:960px;
float:left;
}
.slider-navigation {
position:absolute;
top:222px;
left:521px;
width:454px;
}
.slide-link {
position:relative;
float:left;
width:129px;
margin-right:25px;
height:155px;
}
.slider-navigation .last {
margin-right:0;
}
.slide-link .img {
height:116px;
width:115px;
background:url(images/slide-link.gif) no-repeat 0 0;
padding:7px;
position:relative;
margin-top:14px;
}
.active .img {
margin-top:0;
}
.shadow {
height:19px;
width:147px;
background:url(images/slide-link-shadow.png) no-repeat 0 0;
bottom:0;
left:-8px;
position:absolute;
}
.head {
height:100%;
position:relative;
}
.info-box {
height:246px;
width:288px;
background:url(images/info-box.gif) no-repeat 0 0;
position:absolute;
top:72px;
left:17px;
padding:33px 23px 0 25px;
}
.info-box h2 {
font-size:19px;
line-height:22px;
border-bottom:1px dotted #908492;
padding-bottom:16px;
margin-bottom:15px;
}
.info-box-cnt {
height:119px;
line-height:17px;
}
.info-box-cnt a {
text-decoration:underline;
}
.info-shadow {
height:23px;
width:414px;
background:url(images/info-box-shadow.png) no-repeat 0 0;
position:absolute;
top:352px;
left:-20px;
}
a.button {
height:24px;
float:left;
background:url(images/button.gif) repeat-x 0 0;
padding:7px 20px 0 15px;
font-size:17px;
color:#fff;
font-weight:bold;
}
a.button:hover {
background:url(images/button-hover.gif) repeat-x 0 0;
text-decoration:none;
}
a.button span {
height:6px;
width:4px;
background:url(images/button-span.gif) no-repeat 0 0;
float:left;
margin:6px 6px 0 0;
}
.container {
padding:0 26px 0 25px;
}
h1.shadowed {
background:url(images/entry-shadow.png) no-repeat 0 bottom;
height:44px;
padding:14px 0 0 8px;
font-size:20px;
text-transform:uppercase;
line-height:20px;
margin-bottom:20px;
}
.entry {
background:url(images/entry-shadow.png) no-repeat 0 bottom;
padding:0 0 22px 7px;
}
.products {
padding-left:10px;
}
.product {
width:265px;
float:left;
margin-right:58px;
}
.last-product {
margin-right:0;
}
.product .img {
height:122px;
width:257px;
background:url(images/product-img.gif) no-repeat 0 0;
padding:4px;
margin-bottom:18px;
}
.product .img a img {
border:1px solid #cfcfcf;
}
.product .img a:hover img {
border:1px solid #000;
}
.product h3 {
font-size:15px;
}
.product h3 a {
color:#222;
}
.left-content, .right-content {
padding:26px 0 35px;
position:relative;
}
.left-content p a, .right-content p a {
color:#000;
text-decoration:underline;
}
.left-content p a:hover, .right-content p a:hover {
text-decoration:none;
}
.left-content p, .right-content p {
padding-bottom:15px;
}
.left-content a.button, .right-content a.button {
font-size:13px;
padding-left:12px;
padding-right:16px;
}
.left-content {
width:385px;
float:left;
display:inline;
}
.right-content {
width:390px;
float:right;
display:inline;
margin-right:53px;
}
.entry h2 {
font-size:20px;
padding-bottom:10px;
}
.abs-ico {
position:absolute;
}
.left-content .abs-ico {
height:57px;
width:37px;
background:url(images/left-abs-ico.gif) no-repeat 0 0;
top:60px;
right:-36px;
}
.right-content .abs-ico {
height:52px;
width:62px;
background:url(images/right-abs-ico.gif) no-repeat 0 0;
top:59px;
right:-58px;
}
.boxes-holder {
padding:20px 0 21px 6px;
}
.box {
width:259px;
float:left;
display:inline;
margin-right:25px;
background:#fef8f8;
border:1px solid #dbdfe3;
padding:24px 12px 32px 14px;
}
.last-box {
margin-right:0;
}
.box h2 {
font-size:15px;
padding-bottom:2px;
}
.box p.meta {
font-style:italic;
padding-bottom:24px;
}
.box .img {
height:91px;
width:110px;
float:left;
display:inline;
position:relative;
margin-left:-5px;
margin-right:6px;
}
.box p {
padding-bottom:3px;
}
.box p a {
color:#000;
text-decoration:underline;
}
.box p a:hover {
text-decoration:none;
}
.footer-cols {
height:172px;
background:url(images/footer-cols.gif) repeat-x 0 0;
padding-top:2px;
min-width:974px;
}
.footer-cols .shell {
height:174px;
background:url(images/cols-border.png) repeat-y 0 0;
padding-left:10px;
width:964px;
}
.footer-cols .col {
width:260px;
float:left;
display:inline;
padding:22px 38px 0 48px;
}
.footer-cols .first-col {
padding-left:0;
}
.footer-cols .last-col {
padding-right:0;
}
.footer-cols .col h2 {
font-size:17px;
color:#fff;
text-shadow:1px 1px 1px #000;
padding-bottom:14px;
}
.form {
padding-top:4px;
}
.form span.field {
height:32px;
width:185px;
float:left;
display:inline;
background:url(images/field.gif) no-repeat 0 0;
}
.form span.field input {
width:165px;
padding:10px 10px;
font-size:10px;
color:#1b455e;
border:0;
background:transparent;
}
.form input.form-submit {
height:32px;
width:60px;
background:url(images/submit.gif) no-repeat 0 0;
cursor:pointer;
border:0;
font-size:13px;
color:#fff;
font-weight:bold;
}
.col ul {
list-style:none;
font-size:14px;
font-weight:bold;
}
.col ul li {
background:url(images/col-li.gif) no-repeat left 4px;
padding:0 0 3px 16px;
}
.col ul li a {
color:#f9f4f4;
}
.footer {
font-size:10px;
border-bottom:1px solid #fff;
padding:7px 0;
}
.footer, .footer a {
color:#fff;
background:#204c67;
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-22-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/functions.js" type="text/javascript" charset="utf-8"></script>
<!--[if IE 6]>
<link rel="stylesheet" href="wcsst-22-css/ie6.css" type="text/css" media="all" />
<script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="header">
<div class="shell">
<h1 id="logo"><a href="#">WCSST 22<span>FREE WEBSITE TEMPLATE</span></a></h1>
<div id="navigation">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Labs</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="shell">
<div class="head">
<div class="slider" id="mycarousel">
<div class="slider-holder">
<ul>
<li><img src="wcsst-22-css/images/slide1.jpg" alt="" /></li>
<li><img src="wcsst-22-css/images/slide1.jpg" alt="" /></li>
<li><img src="wcsst-22-css/images/slide1.jpg" alt="" /></li>
</ul>
</div>
<div class="slider-navigation">
<div class="slide-link">
<div class="img"><a href="#" rel="1"><img src="wcsst-22-css/images/slide-nav1.gif" alt="" /></a></div>
<div class="shadow"> </div>
</div>
<div class="slide-link">
<div class="img"><a href="#" rel="2"><img src="wcsst-22-css/images/slide-nav2.gif" alt="" /></a></div>
<div class="shadow"> </div>
</div>
<div class="slide-link last">
<div class="img"><a href="#" rel="3"><img src="wcsst-22-css/images/slide-nav3.gif" alt="" /></a></div>
<div class="shadow"> </div>
</div>
</div>
</div>
<div class="info-box">
<h2><a href="#">Ideas, design, development. For the Web. </a></h2>
<div class="info-box-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare <strong>consequat</strong> tortor quis porttitor. Aliquam sed fringilla arcu. Aliquam sed fringilla arcu. Maecenas sit <a href="#">amet</a> cursus augue. </p>
</div>
<a href="#" class="button"><span></span>Next</a> </div>
<div class="info-shadow"></div>
</div>
<div class="container">
<h1 class="shadowed"><a href="#">Our Projects</a></h1>
<div class="entry products">
<div class="product">
<div class="img"><a href="#"><img src="wcsst-22-css/images/green-site.gif" alt="" /></a></div>
<h3><a href="#">Website CSS Template</a></h3>
</div>
<div class="product">
<div class="img"><a href="#"><img src="wcsst-22-css/images/notebook-site.gif" alt="" /></a></div>
<h3><a href="#">Website CSS Template</a></h3>
</div>
<div class="product last-product">
<div class="img"><a href="#"><img src="wcsst-22-css/images/blue-site.gif" alt="" /></a></div>
<h3><a href="#">Website CSS Template</a></h3>
</div>
<div class="cl"> </div>
</div>
<div class="entry">
<div class="left-content">
<div class="abs-ico"></div>
<h2><a href="#">What can we do for you?</a></h2>
<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 <strong>cursus</strong> augue. Donec felis eros, luctus at blandit ac. Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit.</p>
<a href="#" class="button"><span></span>Read More</a> </div>
<div class="right-content">
<div class="abs-ico"></div>
<h2><a href="#">We speak your language</a></h2>
<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 <strong>cursus</strong> augue. Donec felis eros, luctus at blandit ac. Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit.</p>
<a href="#" class="button"><span></span>Read More</a> </div>
<div class="cl"> </div>
</div>
<div class="boxes-holder">
<div class="box">
<h2><a href="#">Newsletter: What a year!</a></h2>
<p class="meta"> Tuesday, 24th August 2010</p>
<div class="img"><a href="#"><img src="wcsst-22-css/images/qwerty-phone.gif" alt="" /></a></div>
<p>Lorem ipsum dolor sit aler consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis porttitor augue. adipiscing.</p>
<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 <strong>cursus</strong> augue. </p>
</div>
<div class="box">
<h2><a href="#">Welcome to our new site</a></h2>
<p class="meta"> Sunday, 11th July 2010</p>
<div class="img"><a href="#"><img src="wcsst-22-css/images/tools.gif" alt="" /></a></div>
<p>Lorem ipsum dolor sit aler consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis porttitor augue. adipiscing.</p>
<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 <strong>cursus</strong> augue. </p>
</div>
<div class="box last-box">
<h2><a href="#">Lorem ipsum dolor sit aler.</a></h2>
<p class="meta"> Friday, 13th August 2010</p>
<div class="img"><a href="#"><img src="wcsst-22-css/images/touch-phone.gif" alt="" /></a></div>
<p>Lorem ipsum dolor sit aler consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis porttitor augue. adipiscing.</p>
<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 <strong>cursus</strong> augue. </p>
</div>
<div class="cl"> </div>
</div>
</div>
</div>
<div class="footer-cols">
<div class="shell">
<div class="col first-col">
<h2>Looking for something?</h2>
<div class="form">
<form action="#" method="post">
<span class="field">
<input type="text" class="blink" value="Search here ..." />
</span>
<input type="submit" class="form-submit" value="Search" />
<div class="cl"> </div>
</form>
</div>
</div>
<div class="col">
<h2>Subscribe our newsletter</h2>
<div class="form">
<form action="#" method="post">
<span class="field">
<input type="text" class="blink" value="Your e-mail" />
</span>
<input type="submit" class="form-submit" value="Sign Up" />
<div class="cl"> </div>
</form>
</div>
</div>
<div class="col last-col">
<h2>Lets Connect</h2>
<ul>
<li><a href="#">Visit us on Facebook</a></li>
<li><a href="#">Follow us on Twitter</a></li>
<li><a href="#">Keep an eye on our Flickr photos</a></li>
<li><a href="#">Get support on Get Satisfaction</a></li>
</ul>
</div>
<div class="cl"> </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