wcsst-2 : Design « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Design 




wcsst-2
    

<!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 2</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, sans-serif;
  color:#383838;
  background:#0f1010 url(images/body.gifrepeat-x 0 0;
}
{
  color:#ff0000;
  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;
  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:1010px;
  margin:auto;
}
.header {
  height:110px;
  background:url(images/header.gifno-repeat 0 0;
  padding:0 15px;
}
h1#logo a {
  height:95px;
  width:271px;
  float:left;
  display:inline;
  background:url(images/logo.gifno-repeat 0 0;
  text-decoration:none;
}
h1#logo a:hover {
  text-decoration:none;
}
h1#logo span {
  font-size:10px;
  line-height:13px;
  color:#ff0000;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:4px;
  display:block;
  padding:49px 0 0 60px;
}
#navigation {
  width:650px;
  float:right;
  font-family:verdana, arial, sans-serif;
  font-size:11px;
  padding-top:27px;
  line-height:32px;
}
#navigation ul {
  list-style:none;
}
#navigation ul li {
  float:left;
  margin-right:5px;
}
#navigation ul li a {
  color:#000;
  text-decoration:none;
}
#navigation ul li a, #navigation ul li a span {
  float:left;
  display:inline;
  height:34px;
  padding:0 0 0 20px;
}
#navigation ul li a span {
  padding:0 20px 0 0;
}
#navigation ul li a:hover {
  color:#fff;
}
#navigation ul li a:hover, #navigation ul li a:hover span {
  background:url(images/nav-hover.gifno-repeat left 0;
}
#navigation ul li a:hover span {
  background-position:right 0;
}
#navigation ul li a.active {
  color:#fff;
}
#navigation ul li a.active, #navigation ul li a.active span {
  background:url(images/nav-hover.gifno-repeat left 0;
}
#navigation ul li a.active span {
  background-position:right 0;
}
.container {
  width:980px;
  margin-left:10px;
  background:#fff;
  padding:0 5px 35px 5px;
}
.slider {
  position:relative;
  height:296px;
  width:976px;
  border:2px solid #d3d4d4;
  margin-bottom:40px;
}
.slider-holder {
  position:relative;
  height:296px;
  width:976px;
  overflow:hidden;
}
.slider-holder ul {
  position:relative;
  list-style:none outside none;
  overflow:hidden;
}
.slider-holder ul li, .jcarousel-container, .jcarousel-clip {
  position:relative;
  height:296px;
  width:976px;
}
.slider-prev, .slider-next {
  position:absolute;
  top:136px;
  display:block;
  width:18px;
  height:27px;
}
.slider-prev {
  left:28px;
  background:url(images/prev.pngno-repeat 0 0;
}
.slider-next {
  right:28px;
  background:url(images/next.pngno-repeat 0 0;
}
.slider-nav {
  position:absolute;
  bottom:10px;
  right:26px;
  display:block;
}
.slider-nav ul {
  list-style:none;
}
.slider-nav ul li {
  float:left;
  display:inline;
  width:33px;
  height:32px;
  margin-right:2px;
}
.slider-nav ul li a {
  display:block;
  height:32px;
  background-color:#252626;
  font-size:18px;
  text-align:center;
  line-height:31px;
  color:#fff;
  text-decoration:none;
}
.slider-nav ul li a:hover, .slider-nav ul li a.active {
  background-color:#ffcb05;
  color:#000;
}
.main {
  padding:0 24px 0 28px;
}
.cols {
  padding-bottom:39px;
}
.cols .col {
  width:294px;
  float:left;
  margin-right:22px;
}
.cols .last-col {
  margin-right:0;
}
.post h2 {
  font-size:22px;
  background:url(images/post-h2.gifrepeat-x bottom;
  padding-bottom:15px;
  line-height:22px;
  font-weight:normal;
  margin-bottom:10px;
}
.post h2 a {
  color:#383838;
  text-decoration:none;
}
.post h2 a:hover {
  text-decoration:underline;
}
.content {
  width:612px;
  float:left;
}
.sidebar {
  width:294px;
  float:right;
}
.footer {
  font-size:9px;
  font-family:verdana, arial, sans-serif;
  color:#6a6a6a;
  padding:15px 10px;
}
.footer, .footer a {
  color:#6a6a6a;
  text-decoration:none;
}
.footer p {
  margin:0;
  padding:0;
  line-height:normal;
}
.footer .lf {
  float:left;
}
.footer .rf {
  float:right;
}


</style>


<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jcarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/functions.js" type="text/javascript" charset="utf-8"></script>
<link rel="shortcut icon" type="image/x-icon" href="wcsst-2-css/images/favicon.ico" />
<!--[if IE 6]><link rel="stylesheet" href="wcsst-2-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="shell">
  <div class="header">
    <h1 id="logo"><a href="#"><span>free css website templates</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 class="cl">&nbsp;</div>
  </div>
  <div class="container">
    <div class="slider">
      <div class="slider-holder">
        <ul>
          <li><img src="wcsst-2-css/images/slide.gif" alt="" /></li>
          <li><img src="wcsst-2-css/images/slide.gif" alt="" /></li>
          <li><img src="wcsst-2-css/images/slide.gif" alt="" /></li>
          <li><img src="wcsst-2-css/images/slide.gif" alt="" /></li>
        </ul>
      </div>
      <a href="#" class="slider-prev notext">prev</a> <a href="#" class="slider-next notext">next</a>
      <div class="slider-nav">
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#" class="active">3</a></li>
          <li><a href="#">4</a></li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="cols">
        <div class="col">
          <div class="post">
            <h2><a href="#">Who Are We?</a></h2>
            <p><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry</strong>. 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 book. It has survived not only five centuries, but also the leap into electronic typesetting, <a href="#">free css website templates</a> unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
        <div class="col">
          <div class="post">
            <h2><a href="#">What We Do ?</a></h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <strong>Lorem Ipsum has been the industry's standard dummy</strong> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#">free css website templates</a> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing </p>
          </div>
        </div>
        <div class="col last-col">
          <div class="post">
            <h2><a href="#">Latest Project</a></h2>
            <p><strong>Lorem Ipsum is simply dummy text of the printing and typesetting industry</strong>. 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 book. It has survived not only five centuries, but also the leap into electronic typesetting, <a href="#">free css website templates</a> unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
        <div class="cl">&nbsp;</div>
      </div>
      <div class="content">
        <div class="post">
          <h2><a href="#">Some Title</a></h2>
          <p><strong>Free website css templates</strong>. 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 book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="#">free css website templates</a>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
      <div class="sidebar">
        <div class="post">
          <h2><a href="#">Some Title</a></h2>
          <p><strong>Free website css templates</strong>. 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 book. It has survived not only five centuries, <a href="#">free css website templates</a>typesetting, remaining essentially unchan</p>
        </div>
      </div>
      <div class="cl">&nbsp;</div>
    </div>
  </div>
  <div class="footer">
    <p class="lf">Copyright &copy; 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
1.wcsst-10
2.wcsst-11
3.wcsst-12
4.wcsst-15
5.wcsst-16
6.wcsst-17
7.wcsst-18
8.wcsst-19
9.wcsst-20
10.wcsst-21
11.wcsst-22
12.wcsst-23
13.wcsst-24
14.wcsst-25
15.wcsst-26
16.wcsst-3
17.wcsst-4
18.wcsst-5
19.wcsst-6
20.beez-design
21.metamorph_camomile
22.metamorph_champagne
23.metamorph_clover
24.metamorph_dao
25.metamorph_dna
26.metamorph_lilac
27.metamorph_lilium
28.metamorph_lime
29.metamorph_limemint_lt
30.metamorph_lionpride
31.metamorph_swallowtail-indexl
32.metamorph_synchronized_lt
33.metamorph_temple
34.metamorph_vectorart
35.metamorph_wow
36.wcsst-7
37.wcsst-9
38.bouquet
39.baseline
40.beautifulday
41.bedazzled
42.Beehives
43.beez
44.begeodan
45.cleo-studio
46.cloverleaf
47.CMS Style
48.dragonfly
49.nautica
50.Nautica022
51.Nautica02Liquid
52.Nautica03
53.Nautica04
54.nautica05
55.nautica05dark
56.nautica08
57.nauticax
58.soothing
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.