wcsst-25 : 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-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%;
}
{
  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: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.gifrepeat-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.gifrepeat-x 0 0;
  text-decoration:none;
}
.search {
  background:url(images/search-bg.gifno-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.gifrepeat-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.gifno-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:-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.gifno-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.gifno-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.gifno-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.gifno-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.gifno-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:auto -55px;
}
.footer, #footer-push {
  height:55px;
}
.footer {
  background:url(images/footer-bg.gifrepeat-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">&nbsp;</div>
    </div>
  </div>
  <div id="head">
    <div class="slider-holder">
      <div class="shell">
        <div class="nav">
          <ul>
            <li><a href="#" rel="1">&nbsp;</a></li>
            <li><a href="#" rel="2">&nbsp;</a></li>
            <li><a href="#" rel="3">&nbsp;</a></li>
            <li class="last"><a href="#" rel="4">&nbsp;</a></li>
          </ul>
          <div class="cl">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
    </div>
    <div id="footer-push">&nbsp;</div>
  </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-23
14.wcsst-24
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.