wcsst-25
<!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 25</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:#34616d;
background:#fff;
}
html, body {
height:100%;
}
a {
color:#1c2e63;
text-decoration:underline;
cursor:pointer;
}
a:hover {
text-decoration:none;
}
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:900px;
margin:0 auto;
}
#header {
height:76px;
}
#logo {
font-size:22px;
line-height:22px;
padding:19px 0 0 0;
}
#logo a {
color:#346ca7;
text-decoration:none;
}
#logo a span {
font-size:12px;
line-height:12px;
color:#5ca9c0;
font-weight:normal;
display:block;
padding:4px 0 0 0;
}
#logo a:hover {
text-decoration:none;
}
.socials {
padding:26px 1px 0 0;
}
.socials ul {
list-style:none;
}
.socials ul li {
display:inline;
padding:0 5px 0 0;
}
.socials ul li.last {
padding:0;
}
.socials ul li img {
}
.socials ul li a {
}
.nav-holder {
background:url(images/nav-bg.gif) repeat-x 0 0;
height:56px;
}
#navigation {
border-left:1px solid #4474a5;
}
#navigation ul {
list-style:none;
}
#navigation ul li {
display:inline;
height:54px;
float:left;
font-size:13px;
line-height:54px;
font-weight:bold;
text-transform:uppercase;
border-right:1px solid #4474a5;
}
#navigation ul li a {
float:left;
height:54px;
color:#fff;
text-decoration:none;
padding:0 15px;
}
#navigation ul li a:hover, #navigation ul li a.active {
background:url(images/nav-h.gif) repeat-x 0 0;
text-decoration:none;
}
.search {
background:url(images/search-bg.gif) no-repeat 0 0;
width:202px;
height:30px;
margin:12px 0 0 0;
}
.search input {
background:transparent;
border:0;
}
.search .field {
width:129px;
height:14px;
font-size:11px;
line-height:14px;
color:#7a9cc0;
padding:8px 18px;
}
.search .button {
width:37px;
height:30px;
}
#head {
background:url(images/head-bg.gif) repeat-x 0 0;
height:301px;
margin:0 0 35px 0;
}
.slider-holder {
}
.slider-holder .shell {
height:250px;
position:relative;
padding:21px 0 30px 0;
}
.slider-holder .nav {
width:97px;
height:19px;
position:absolute;
right:10px;
bottom:10px;
z-index:100;
}
.slider-holder .nav ul {
list-style:none;
}
.slider-holder .nav ul li {
display:inline;
float:left;
padding:0 7px 0 0;
}
.slider-holder .nav ul li.last {
padding:0;
}
.slider-holder .nav ul li a {
background:url(images/dot.gif) no-repeat 0 0;
width:19px;
height:19px;
float:left;
text-decoration:none;
}
.slider-holder .nav ul li a:hover {
text-decoration:none;
}
.slider-holder .nav ul li a.active {
background-position:0 -19px;
}
.slider {
}
.slider .item {
width:888px;
height:251px;
}
.slider .item .image {
width:507px;
border:5px solid #6ca4c4;
}
.slider .item .info {
width:343px;
height:200px;
position:relative;
padding:0 0 45px 0;
}
.slider .item h2 {
font-size:28px;
line-height:28px;
color:#356aa0;
padding:3px 0 8px 0;
}
.slider .item p {
color:#fff;
padding:0 0 18px 1px;
}
.slider .item p a {
color:#fff;
}
.slider .item .btn-more {
background:url(images/btn-more.gif) no-repeat 0 0;
width:125px;
height:40px;
font-size:13px;
line-height:40px;
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
display:block;
position:absolute;
left:0;
bottom:0;
}
.slider .item .btn-more:hover {
text-decoration:none;
}
#main {
padding:0 0 30px 0;
}
.boxes {
width:921px;
height:281px;
position:relative;
margin:0 0 22px -10px;
}
.boxes .box-blue {
margin:0 13px 0 0;
}
.boxes .box-blue-last {
margin:0;
}
.box-blue {
background:url(images/box-bg.gif) no-repeat 0 0;
width:298px;
height:281px;
}
.box-blue h2 {
font-size:16px;
line-height:47px;
color:#f8f8f8;
height:45px;
padding:2px 0 0 24px;
}
.box-blue .box-c {
height:169px;
padding:15px 25px 50px 25px;
position:relative;
}
.box-blue p {
font-family:Tahoma, Arial, sans-serif;
line-height:19px;
color:#34616d;
padding:0 0 19px 0;
}
.box-blue ul {
list-style:none;
position:relative;
margin:-5px 0 0 0;
}
.box-blue ul li {
background:url(images/bullet.gif) no-repeat 1px 11px;
border-bottom:1px dotted #6a5353;
line-height:30px;
padding:0 0 0 14px;
}
.box-blue ul li.last {
border:0;
}
.box-blue ul li a {
color:#1c2e63;
text-decoration:none;
}
.box-blue ul li a:hover {
text-decoration:underline;
}
.box-blue .item {
border-bottom:1px dotted #6a5353;
margin:0 0 10px 0;
}
.box-blue .item span {
font-size:10px;
line-height:13px;
color:#4372a5;
display:block;
}
.box-blue .item p {
}
.box-blue .item-last {
border:0;
margin:0;
}
.box-blue .more {
position:absolute;
left:25px;
bottom:30px;
}
#content {
width:590px;
}
#content h2, .box-quote h2 {
font-size:15px;
line-height:19px;
color:#29507a;
border-bottom:1px dotted #6a5353;
padding:0 0 10px 0;
margin:0 0 10px 0;
}
#content img {
margin:0 15px 0 0;
}
#content p {
text-align:justify;
}
#content .more {
display:block;
margin:15px 0 0 0;
}
.more {
background:url(images/bullet2.gif) no-repeat right 5px;
font-size:12px;
line-height:15px;
color:#1c2e63;
text-decoration:none;
padding:0 10px 0 0;
}
.more:hover {
text-decoration:underline;
}
#sidebar {
width:285px;
}
#sidebar .by {
line-height:12px;
text-align:right;
padding:1px 9px 0 0;
}
#sidebar .by span {
font-size:11px;
display:block;
padding:3px 0 0 0;
}
.box-quote {
}
.box-quote h2 {
}
.box-quote .box-c {
background:url(images/quote-bg.gif) no-repeat 0 0;
width:200px;
height:147px;
padding:21px 25px 25px 60px;
}
.box-quote p {
line-height:25px;
}
.box-quote p a {
color:#34616d;
}
#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -55px;
}
.footer, #footer-push {
height:55px;
}
.footer {
background:url(images/footer-bg.gif) repeat-x 0 0;
font-size:10px;
line-height:10px;
text-transform:uppercase;
height:55px;
}
.footer, .footer a {
color:#9ab5d0;
text-decoration:none;
}
.footer p {
margin:0;
padding:15px 0 0 0;
line-height:normal;
}
.footer .lf {
float:left;
}
.footer .rf {
float:right;
}
</style>
<link rel="stylesheet" href="wcsst-25-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-25-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-25-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="wrapper">
<div id="header">
<div class="shell">
<h1 id="logo" class="left"><a href="#">WCSST 25<span>free website template</span></a></h1>
<div class="socials right">
<ul>
<li><a href="#"><img src="wcsst-25-css/images/soc-twit.gif" alt="" /></a></li>
<li><a href="#"><img src="wcsst-25-css/images/soc-in.gif" alt="" /></a></li>
<li><a href="#"><img src="wcsst-25-css/images/soc-fb.gif" alt="" /></a></li>
<li class="last"><a href="#"><img src="wcsst-25-css/images/soc-fr.gif" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<div class="nav-holder">
<div class="shell">
<div id="navigation" class="left">
<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><a href="#">Blog</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<div class="search right">
<form action="#" method="post">
<input type="text" class="field blink left" value="Search here ..." />
<input type="submit" class="button notext left" value="Submit" />
</form>
</div>
<div class="cl"> </div>
</div>
</div>
<div id="head">
<div class="slider-holder">
<div class="shell">
<div class="nav">
<ul>
<li><a href="#" rel="1"> </a></li>
<li><a href="#" rel="2"> </a></li>
<li><a href="#" rel="3"> </a></li>
<li class="last"><a href="#" rel="4"> </a></li>
</ul>
<div class="cl"> </div>
</div>
<div class="slider">
<ul>
<li>
<div class="item">
<div class="image left"> <img src="wcsst-25-css/images/slide-img.jpg" alt="" /> </div>
<div class="info right">
<h2>Business Revolution</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur <a href="#">adipiscing</a> elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<p>sit amet, <strong>consectetur</strong> adipiscing elit. Consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<a href="#" class="btn-more">Read More</a> </div>
<div class="cl"> </div>
</div>
</li>
<li>
<div class="item">
<div class="image left"> <img src="wcsst-25-css/images/slide-img.jpg" alt="" /> </div>
<div class="info right">
<h2>Business Revolution</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur <a href="#">adipiscing</a> elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<p>sit amet, <strong>consectetur</strong> adipiscing elit. Consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<a href="#" class="btn-more">Read More</a> </div>
<div class="cl"> </div>
</div>
</li>
<li>
<div class="item">
<div class="image left"> <img src="wcsst-25-css/images/slide-img.jpg" alt="" /> </div>
<div class="info right">
<h2>Business Revolution</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur <a href="#">adipiscing</a> elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<p>sit amet, <strong>consectetur</strong> adipiscing elit. Consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<a href="#" class="btn-more">Read More</a> </div>
<div class="cl"> </div>
</div>
</li>
<li>
<div class="item">
<div class="image left"> <img src="wcsst-25-css/images/slide-img.jpg" alt="" /> </div>
<div class="info right">
<h2>Business Revolution</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur <a href="#">adipiscing</a> elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<p>sit amet, <strong>consectetur</strong> adipiscing elit. Consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis</p>
<a href="#" class="btn-more">Read More</a> </div>
<div class="cl"> </div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main">
<div class="shell">
<div class="boxes">
<div class="box-blue left">
<h2>Company Profile</h2>
<div class="box-c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. <a href="#">Lorema</a> ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">ornare</a> consequat tortor quis. dorem lectus.</p>
<a href="#" class="more">Learn more</a> </div>
</div>
<div class="box-blue left">
<h2>Some Links</h2>
<div class="box-c">
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Sed in mi in mauris fermentum scele ela</a></li>
<li><a href="#">Donec sit amet tellus massa, nonctus</a></li>
<li><a href="#">Curabitur vestibulum tortor sed</a></li>
<li><a href="#">Praesent mollis nisi a mies</a></li>
<li class="last"><a href="#">Donec sit amet tellus massa, mortus</a></li>
</ul>
</div>
</div>
<div class="box-blue box-blue-last left">
<h2>Our Blog</h2>
<div class="box-c">
<div class="item"> <span>September 3rd, 2010</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor conceset ornare adip.</p>
</div>
<div class="item item-last"> <span>September 3rd, 2010</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor conceset ornare adip.</p>
</div>
<a href="#" class="more">Learn more</a> </div>
</div>
<div class="cl"> </div>
</div>
<div id="content" class="left">
<h2>Providing Top Solutions</h2>
<img src="wcsst-25-css/images/image01.jpg" alt="" class="left" />
<p>Sed <strong>vestibulum</strong> fringilla tellus, sit amet lobortis erat porttitor a. Phasellus euismod vulputate sapien, et dapibus eros mollis ut. Etiam varius <a href="#">adipiscing</a> dolor, nec vestibulum lorem <a href="#">euismod</a> eget. Nulla ut sapien lorem. Aenean nec sem risus. Aenean facilisis nisl pharetra elit semper eleifend. Praesent quis ligula et sapien varius imperdiet rhoncus ac erat. Morbi consectetur.</p>
<p>Lectus eget pulvinar imperdiet, justo ipsum eleifend dolor, a eleifend nisi ipsum et lectus. Aenean tincidunt nulla et tortor auctor dapibus. <strong>Nunc</strong> ac ipsum mi. Integer vitae turpis mauris, et pharetra mauris. Cras dictum, metus vitae cursus fringilla, est metus dignissim purus, vitae molestie <strong>quam</strong> lacus eu tellus.</p>
<a href="#" class="more right">Learn More</a>
<div class="cl"> </div>
</div>
<div id="sidebar" class="right">
<div class="box-quote">
<h2>Testimonials</h2>
<div class="box-c">
<p><em><strong>Lorem</strong> ipsum dolor sit amet, consectetur adtipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.</em></p>
</div>
<p class="by"><strong>John Doe</strong><span><em>Engineer</em></span></p>
</div>
</div>
<div class="cl"> </div>
</div>
<div id="footer-push"> </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