wcsst-18
<!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 18</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding:0;
margin:0;
outline:0;
}
body {
font-size:12px;
line-height:1.3;
font-family:Arial, Helvetica, sans-serif;
color:#3d3d3d;
background:#fff;
text-align:left;
}
a img {
border:0;
}
a {
color:#33dcfb;
text-decoration:none;
cursor:pointer;
}
a:hover {
text-decoration:underline;
}
textarea {
font-family:Arial, Helvetica, sans-serif;
}
h1 {
font-size:30px;
}
h2 {
font-size:28px;
}
h3 {
font-size:22px;
}
h4 {
font-size:18px;
}
.cl, .clear {
display:block;
height:0;
font-size:0;
line-height:0;
text-indent:-4000px;
clear:both;
}
.notext {
font-size:0;
line-height:0;
text-indent:-9000px;
}
.left {
float:left;
display:inline;
}
.right {
float:right;
display:inline;
}
.shell {
width:970px;
margin:0 auto;
min-width:970px;
}
.last {
margin-right:0 !important;
}
#header {
border-top:5px solid #e5e5e5;
height:100px;
}
#header .shell {
height:100px;
}
h1#logo {
padding:23px 0 0 3px;
font-weight:normal;
}
h1#logo a {
color:#000;
text-decoration:none;
}
h1#logo a span {
color:#33dcfb;
}
.slogan {
text-align:right;
color:#33dcfb;
}
#navigation {
float:right;
display:inline;
padding:40px 2px 0 0;
}
#navigation ul {
list-style:none;
}
#navigation li {
float:left;
display:inline;
margin-right:70px;
}
#navigation li.last {
margin-right:0;
}
#navigation a {
color:#000;
font:normal normal bold 11px/1.3 Verdana, Arial, sans-serif;
text-transform:uppercase;
}
#navigation a:hover, #navigation a.active {
color:#33dcfb;
text-decoration:underline;
}
#banner {
height:336px;
background:url(images/banner-bg.gif) repeat-x 0 0;
}
#banner .shell {
height:336px;
background:url(images/banner-inner.gif) no-repeat center 0;
}
#main {
padding:20px 0 35px;
height:100%;
}
#main h2.title {
font:italic normal normal 28px/34px 'Georgia', serif;
padding-bottom:45px;
letter-spacing:-1px;
}
#main h3 {
color:#33dcfb;
padding-bottom:10px;
}
#main h4 {
font-weight:normal;
padding-bottom:20px;
}
#main p {
line-height:18px;
padding-bottom:10px;
}
#content {
width:670px;
float:left;
display:inline;
}
#sidebar {
width:240px;
float:right;
display:inline;
}
.cols {
padding-top:23px;
}
.col-left {
width:315px;
float:left;
display:inline;
}
.col-right {
width:295px;
float:right;
display:inline;
}
.cols h3 {
padding-bottom:0 !important;
}
.item {
padding-bottom:10px;
}
.meta {
color:#33dcfb;
font-size:10px;
}
.item .title {
font-weight:bold;
}
.footer {
background:url(images/border.gif) repeat-x 0 0;
padding:15px 0;
height:100%;
font-size:10px;
}
.footer, .footer a {
color:#999999;
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-18-css/images/favicon.ico" />
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="header">
<div class="shell">
<div class="left">
<h1 id="logo"><a href="#">W<span>CSS</span>T 18</a></h1>
<p class="slogan">free website templates</p>
</div>
<div id="navigation">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services </a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Clients</a></li>
<li class="last"><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
<div id="banner">
<div class="shell"> </div>
</div>
<div id="main">
<div class="shell">
<h2 class="title">Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen</h2>
<div id="content">
<h3>Welcome</h3>
<p><strong>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 </strong></p>
<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 class="cols">
<div class="col-left">
<h3>Who We Are?</h3>
<p> <strong>Lorem ipsum dolor sit amet, consectetur adipiscing </strong><br />
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">
<h3>What We Do?</h3>
<p> <strong>Lorem ipsum dolor sit amet, consectetur adipisc</strong><br />
ing 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>
<div id="sidebar">
<h4>Latest News</h4>
<div class="item">
<div class="meta"> <a href="#">May 22 2010</a> </div>
<div class="title"> Lorem ipsum dolor </div>
<p> sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit. </p>
</div>
<div class="item">
<div class="meta"> <a href="#">May 22 2010</a> </div>
<div class="title"> Lorem ipsum dolor </div>
<p> sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit. </p>
</div>
<div class="item">
<div class="meta"> <a href="#">May 22 2010</a> </div>
<div class="title"> Lorem ipsum dolor </div>
<p> sit amet, consectetur adipiscing elit. Integer lorem lorem lorem lorem lorsectetur adipiscing elit. </p>
</div>
</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