wcsst-23 : Design « Templates « HTML / CSS

HTML / CSS » Templates » Design 
wcsst-23
    

<!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 23</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:#eaebe0;
  background:#222 url(images/body-bg.jpgno-repeat 0 0;
}
html, body {
  height:100%;
}
{
  color:#ffc600;
  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:982px;
  margin:auto;
}
#header {
  height:85px;
}
#logo {
  font-size:29px;
  line-height:29px;
  font-weight:normal;
  padding:15px 0 0 0;
}
#logo a {
  color:#fbfbfb;
}
#logo a span {
  font-size:15px;
  line-height:15px;
  color:#ffc600;
  display:block;
  padding:0;
}
#logo a:hover {
  text-decoration:none;
}
#navigation {
  background:url(images/nav-bg.gifrepeat-x 0 0;
  height:45px;
  position:relative;
  margin:0 22px 0 0;
}
#navigation .edge {
  width:24px;
  height:45px;
  position:absolute;
  top:0;
}
#navigation .l {
  background:url(images/nav-l.pngno-repeat 0 0;
  left:-24px;
}
#navigation .r {
  background:url(images/nav-r.pngno-repeat 0 0;
  right:-24px;
}
#navigation ul {
  list-style:none;
}
#navigation ul li {
  display:inline;
  float:left;
  background:url(images/nav-li-bg.gifno-repeat right 0;
  height:45px;
  font-family:"Myriad Pro", Arial, sans-serif;
  font-size:18px;
  line-height:38px;
  font-weight:normal;
  padding:0 35px 0 0;
}
#navigation ul li.last {
  background:none;
  padding:0;
}
#navigation ul li a {
  float:left;
  height:38px;
  color:#fff;
  padding:0 10px;
}
#navigation ul li a:hover {
  text-decoration:none;
  color:#000;
}
#navigation ul li a.active {
  background:url(images/nav-a-c.gifrepeat-x 0 0;
  height:45px;
  position:relative;
}
#navigation ul li a.active .btn-active {
  width:34px;
  height:45px;
  position:absolute;
  top:0;
}
#navigation ul li a.active .active-l {
  background:url(images/nav-a-l.pngno-repeat 0 0;
  left:-34px;
}
#navigation ul li a.active .active-r {
  background:url(images/nav-a-r.pngno-repeat 0 0;
  right:-34px;
}
#navigation ul li a.active:hover {
  color:#fff;
}
#head {
}
.slider-bg {
  background:url(images/slider-bg.pngno-repeat 0 0;
  width:838px;
  height:266px;
  padding:20px 97px 16px 47px;
}
.slider-holder {
  height:302px;
  position:relative;
  margin:0 0 39px 0;
}
.slider-holder a {
  position:relative;
}
.slider-holder .slide-btn {
  width:46px;
  height:175px;
  position:absolute;
  top:64px;
}
.slider-holder .prev {
  background:url(images/btn-prev.gifno-repeat 0 0;
  left:1px;
}
.slider-holder .next {
  background:url(images/btn-next.gifno-repeat 0 0;
  right:1px;
}
.slider {
}
.slider h2 {
  font-size:28px;
  line-height:28px;
  font-weight:normal;
  padding:0 0 2px 0;
}
.slider p {
}
.slider .item {
  width:888px;
  height:269px;
}
.slider .more {
  background:url(images/slide-more.gifno-repeat 0 0;
  width:144px;
  height:53px;
  display:block;
  position:absolute;
  left:16px;
  bottom:6px;
}
.slider .info {
  width:430px;
  height:156px;
  position:relative;
  padding:50px 0 63px 22px;
}
.slider .price {
  background:url(images/order-bg.gifno-repeat 0 0;
  width:153px;
  height:269px;
  margin:0 50px 0 0;
  position:relative;
}
.slider .price h3 {
  font-family:"Myriad Pro", Arial, sans-serif;
  font-size:66px;
  line-height:66px;
  color:#fff;
  letter-spacing:-5px;
  padding:118px 0 34px 8px;
}
.slider .price h3 span {
  font-size:24px;
  letter-spacing:0;
  padding:0 0 0 4px;
}
.slider .price .add {
  background:url(images/btn-add.gifno-repeat 0 0;
  width:109px;
  height:19px;
  display:block;
  margin:auto;
  position:absolute;
  left:20px;
  bottom:13px;
}
#main {
  padding:0 0 30px 0;
}
#main .head {
  padding:0 0 30px 0;
}
#main .head .box-widget {
  min-height:192px;
  height:auto !important;
  height:192px;
  padding:0 0 55px 0;
}
#main .head .box-widget .more {
  margin:13px 0 0 -10px;
  position:absolute;
  bottom:0;
}
#main .box-widget {
  margin:0 25px 0 0;
}
#main .box-widget .more {
  margin:30px -10px auto;
}
#main .box-widget-last {
  margin-right:0;
}
#main .box-widget-wide {
  margin-right:0;
}
#main .box-widget-wide .more {
  margin:30px -10px auto;
}
#main .box-widget-wide {
  width:654px;
}
#main .box-soltions {
}
#main .box-soltions .more {
  left:0;
}
#main .box-services {
}
#main .box-services .more {
  right:-10px;
}
#main .box-links {
}
#main .box-links .more {
  right:-10px;
}
#main .box-quality {
}
#main .box-quality .more {
}
.box-widget {
  width:310px;
  position:relative;
}
.box-widget h2 {
  font-size:23px;
  line-height:23px;
  padding:0 0 2px 0;
}
.box-widget h3 {
  font-size:15px;
  line-height:15px;
  color:#ffc600;
  border-bottom:1px solid #414141;
  padding:0 0 20px 0;
  margin:0 0 13px 0;
}
.box-widget ul {
  list-style:none;
}
.box-widget ul li {
  background:url(images/bullet.gifno-repeat 0 10px;
  font-size:13px;
  line-height:25px;
  padding:0 0 0 20px;
}
.box-widget ul li a {
  color:#fff;
  text-decoration:underline;
}
.box-widget ul li a:hover {
  text-decoration:none;
}
.box-widget .info {
}
.box-widget .info img {
  margin:0 10px 0 0;
}
.box-widget .info p {
}
.box-widget .info a {
}
.box-widget .more {
  background:url(images/widget-more.pngno-repeat 0 0;
  width:113px;
  height:46px;
  display:block;
}
.box-widget .quote {
}
#wrapper {
  min-height:100%;
  height:auto !important;
  height:100%;
  margin:auto -41px;
}
.footer, #footer-push {
  height:41px;
}
.footer {
  background:url(images/footer-bg.gifrepeat-x 0 0;
  font-size:10px;
  line-height:41px;
  text-transform:uppercase;
}
.footer, .footer a {
  color:#9b9b9b;
  text-decoration:none;
}
.footer p {
  margin:0;
  padding:12px 0 0 0;
  line-height:normal;
}
.footer .lf {
  float:left;
}
.footer .rf {
  float:right;
}


</style>


<link rel="stylesheet" href="wcsst-23-css/jquery.jcarousel.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="wcsst-23-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-23-css/ie6.css" type="text/css" media="all" /><![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="shell" id="wrapper">
  <div id="header">
    <h1 id="logo" class="left"><a href="#">WCSST 23<span>free website template</span></a></h1>
    <div id="navigation" class="right"> <span class="edge l">&nbsp;</span> <span class="edge r">&nbsp;</span>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="active"><span class="btn-active active-l">&nbsp;</span>About Us<span class="btn-active active-r">&nbsp;</span></a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Solutions</a></li>
        <li class="last"><a href="#">Contacts</a></li>
      </ul>
    </div>
    <div class="cl">&nbsp;</div>
  </div>
  <div id="head">
    <div class="slider-holder">
      <div class="slider-bg"> <a href="#" class="slide-btn prev notext">prev</a> <a href="#" class="slide-btn next notext">next</a>
        <div class="slider">
          <ul>
            <li>
              <div class="item">
                <div class="info left">
                  <h2>Lorem ipsum dolor sit amet</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
                  <a href="#" class="more notext">Read More</a> </div>
                <div class="price right">
                  <h3>$99.<span>99</span></h3>
                  <a href="#" class="add notext">Add to Cart</a> </div>
                <div class="cl">&nbsp;</div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="info left">
                  <h2>Lorem ipsum dolor sit amet</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
                  <a href="#" class="more notext">Read More</a> </div>
                <div class="price right">
                  <h3>$99.<span>99</span></h3>
                  <a href="#" class="add notext">Add to Cart</a> </div>
                <div class="cl">&nbsp;</div>
              </div>
            </li>
            <li>
              <div class="item">
                <div class="info left">
                  <h2>Lorem ipsum dolor sit amet</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis. Ipsum lorem dolor sit amet, consectetur adipiscing elit. Nunc <strong>ornare</strong> consequat tortor quis.</p>
                  <a href="#" class="more notext">Read More</a> </div>
                <div class="price right">
                  <h3>$99.<span>99</span></h3>
                  <a href="#" class="add notext">Add to Cart</a> </div>
                <div class="cl">&nbsp;</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="main">
    <div class="head">
      <div class="box-widget box-solutions left">
        <h2>Solutions</h2>
        <h3>Plenty of great ideas</h3>
        <div class="info"> <img src="wcsst-23-css/images/widg01.gif" alt="" class="left" />
          <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
          <div class="cl">&nbsp;</div>
        </div>
        <a href="#" class="more notext">Read More</a> </div>
      <div class="box-widget box-services left">
        <h2>Services</h2>
        <h3>Great variety</h3>
        <div class="info"> <img src="wcsst-23-css/images/widg02.gif" alt="" class="left" />
          <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
          <div class="cl">&nbsp;</div>
        </div>
        <a href="#" class="more notext">Read More</a> </div>
      <div class="box-widget box-widget-last box-links left">
        <h2>Quick Links</h2>
        <h3>Suggested urls</h3>
        <div class="info">
          <ul>
            <li><a href="#">Lorem ipsum dolor sit amet, consectetur el amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet, consectetur</a></li>
            <li><a href="#">Lorem ipsum dolor sit</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet ispum dolor</a></li>
          </ul>
        </div>
        <a href="#" class="more notext">Read More</a> </div>
      <div class="cl">&nbsp;</div>
    </div>
    <div class="box-widget box-widget-wide left">
      <h2>A bit about the company</h2>
      <h3>What we do</h3>
      <div class="info">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu</p>
        <p class="quote">"Start blockquote here. nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh."</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu uote aney nibh in augue.</p>
      </div>
      <a href="#" class="more notext">Read More</a> </div>
    <div class="box-widget box-quality box-widget-last right">
      <h2>Top Quality</h2>
      <h3>Outstanding products</h3>
      <div class="info"> <img src="wcsst-23-css/images/widg03.gif" alt="" class="left" />
        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> <a href="#">adipiscing</a> elit. Nunc <strong>ornare</strong> consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet <strong>cursus</strong> augue Lorem ipsum dolor sit <strong>amet</strong>, consectetur adipiscing elit. Nunc <a href="#">ornare</a> consequat tortor quis.</p>
        <div class="cl">&nbsp;</div>
      </div>
      <a href="#" class="more notext">Read More</a> </div>
    <div class="cl">&nbsp;</div>
  </div>
  <div id="footer-push">&nbsp;</div>
</div>
<div class="footer">
  <div class="shell">
    <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-2
10.wcsst-20
11.wcsst-21
12.wcsst-22
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.