wcsst-16
<!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 16</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:#3d3d3d;
background:#fff;
}
a {
color:#0252aa;
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:980px;
margin:0 auto;
}
#header {
height:119px;
border-bottom:1px solid #c8c8c8;
position:relative;
}
#logo a {
width:194px;
height:119px;
position:absolute;
top:0;
left:0;
font-family:Georgia, Arial, serif;
font-size:33px;
line-height:33px;
color:#3d3d3d;
font-weight:normal;
font-style:italic;
padding:17px 0 0 0;
}
#logo a:hover {
text-decoration:none;
}
#logo a .min {
font-size:31px;
line-height:31px;
position:relative;
top:-9px;
}
#logo a .red {
color:#ed1c24;
}
#navigation {
height:74px;
padding:0 0 0 266px;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
display:inline;
float:left;
font-size:15px;
line-height:18px;
text-transform:uppercase;
padding:0 45px 0 0;
}
#navigation ul li.last {
padding:0;
}
#navigation ul li a {
float:left;
color:#969696;
padding:55px 31px 1px 4px;
}
#navigation ul li a:hover, #navigation ul li a.active {
background:#ed1c24;
color:#fff;
text-decoration:none;
}
#navigation ul li a.active {
font-weight:bold;
}
.slider-holder {
width:980px;
height:311px;
position:relative;
border-bottom:1px solid #c8c8c8;
margin:0 0 24px 0;
}
.slider-holder .prev, .slider-holder .next {
background:url(images/prev-next.gif) no-repeat 0 0;
width:18px;
height:27px;
position:absolute;
top:141px;
z-index:100;
}
.slider-holder .prev {
left:24px;
}
.slider-holder .next {
background-position:0 -27px;
right:17px;
}
.slider {
}
#main {
padding:0 0 48px 0;
}
#content {
width:670px;
padding:0 0 0 3px;
}
#content h2 {
font-size:18px;
line-height:21px;
color:#ed1c24;
text-transform:uppercase;
}
#content h3 {
font-size:12px;
}
#content p {
}
#content .head {
padding:0 0 44px 0;
}
#content .head h2 {
padding:0 0 17px 0;
}
#content .head h3 {
padding:0 0 8px 0;
}
#content .head p {
}
#content .col {
width:296px;
}
#content .col h2 {
}
#content .col h3 {
}
#content .col p {
}
#sidebar {
width:255px;
}
#sidebar h2 {
font-size:18px;
line-height:21px;
color:#000;
font-weight:normal;
padding:0 0 15px 0;
}
#sidebar h3 {
font-size:12px;
}
#sidebar p {
}
#sidebar .item {
padding:0 0 17px 4px;
}
#sidebar .date {
font-size:10px;
color:#fd3801;
}
.footer {
border-top:1px solid #c8c8c8;
padding:12px 0;
font-size:9px;
text-transform:uppercase;
}
.footer, .footer a {
color:#685d5d;
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-16-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-16-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-16-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<br />
<span class="min"><span class="red">16</span></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="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li class="last"><a href="#">Contacts</a></li>
</ul>
<div class="cl"> </div>
</div>
</div>
<div class="slider-holder"> <a href="#" class="prev notext">prev</a> <a href="#" class="next notext">next</a>
<div class="slider">
<ul>
<li><img src="wcsst-16-css/images/slide01.jpg" alt="" /></li>
<li><img src="wcsst-16-css/images/slide01.jpg" alt="" /></li>
<li><img src="wcsst-16-css/images/slide01.jpg" alt="" /></li>
</ul>
</div>
</div>
<div id="main">
<div id="content" class="left">
<div class="head">
<h2>Welcome</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor</p>
</div>
<div class="col left">
<h2>Who We Are?</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi</h3>
<p>scing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor.iscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor.</p>
</div>
<div class="col right">
<h2>What We Do?</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipi</h3>
<p>scing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor.iscing elit. Integer lorem lorem lorem lorem lor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lor.</p>
</div>
<div class="cl"> </div>
</div>
<div id="sidebar" class="right">
<h2>Latest News</h2>
<div class="item"> <span class="date">May 22 2010</span>
<h3>Lorem ipsum dolor</h3>
<p>sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit.</p>
</div>
<div class="item"> <span class="date">May 22 2010</span>
<h3>Lorem ipsum dolor</h3>
<p>sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit.</p>
</div>
<div class="item"> <span class="date">May 22 2010</span>
<h3>Lorem ipsum dolor</h3>
<p>sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit.</p>
</div>
</div>
<div class="cl"> </div>
</div>
<div class="footer">
<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