freecss_greentextile : Design 5 « Templates « HTML / CSS






freecss_greentextile

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>MyFreeCssTemplates.com free CSS template</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*{
    margin: 0px;
    padding: 0px;
}

img{
    padding: 0px;
    border: none;
}

a{
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #515151;
}

body {  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
    background: url(freecss_greentextile-images/bg.jpg);
  width: 800px;
  margin: 0 auto;
}

h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #000000;
  text-align: center;
  font-weight: normal;
  line-height: 60px;
}

h3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #000000;
  font-weight: normal;
  line-height: 24px;
}

h4{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #ffffff;
  font-weight: normal;
  line-height: 60px;
  text-align: center;
}

.clear{
  clear: both;  
}

/*header*/

#header{
  padding: 0px 0px 30px 0px;
}

/*logo*/

#logo{
  height: 55px;
  padding-top: 18px;
}

#logo a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

#logo h1 a{
  font-size: 14px;
}

/* navigation */


#menu{
  height: 49px;
}

#menu ul{
    list-style: none;
  padding: 0px;
}

#menu ul li{
  display: inline;
}

#menu ul li a{
  font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
  width: 132px;
    height: 49px;
  text-align: center;
  line-height: 49px;
  margin: 0px 10px 0px 0px;
  background: url(freecss_greentextile-images/menu_bg.jpg) 0px 0px;
}

#menu ul li a:hover{
  background: url(freecss_greentextile-images/menu_bg.jpg) 0px 49px;
  color: #000000;
}

#menu ul li .select{
  background: url(freecss_greentextile-images/menu_bg.jpg) 0px 49px;
  color: #000000;
}


/*Content*/

#content_top{
  background: url(freecss_greentextile-images/content_top.png);
  height: 10px;  
}

#content{
  background: url(freecss_greentextile-images/content_bg.png);
}

#content_bot{
  background: url(freecss_greentextile-images/content_bot.png);
  height: 9px;  
}

/*prew box*/

#prew_box{
  padding: 0px 10px 10px 10px;
}

#prew_top{
  background: url(freecss_greentextile-images/prew_top.png) no-repeat top left;
  height: 10px;
}

#prew_bg{
  background: url(freecss_greentextile-images/prew_bg.png);
  width: 760px;
  padding: 0px 10px 0px 10px;
  text-align: center;
}

.mini_pic_box{
  padding: 10px 0px 0px 0px;
}

#prew_box ul{
  list-style: none;
  padding: 0px;
}

#prew_box ul li{
  display: inline-block;
  padding: 0px;
  margin: 0px 8px 0px 0px;
  border: 1px solid #000000;
  width: 100px;
  height: 41px;
}

#prew_box ul li a{
  float: left;
  display: block;
  width: 100px;
  height: 41px;
  background: url(freecss_greentextile-images/mini_pic_select.png);
}

#prew_box ul li a:hover{
  background: none;
}

#prew_box ul li .select{
  background: none;
}

#prew_bot{
  background: url(freecss_greentextile-images/prew_bot.png) no-repeat top left;
  height: 10px;
}

/*White box*/

.white_box{
  padding: 0px 10px 0px 10px;
}

.white_box_top{
  background: url(freecss_greentextile-images/white_box_top.png) no-repeat top left;
  height: 10px;
}

.white_box_bg{
  background: #ffffff;
  width: 740px;
  padding: 20px;
}

.white_box_bot{
  background: url(freecss_greentextile-images/white_box_bot.png) no-repeat top left;
  height: 10px;
}

/*3 column box*/

.col1, .col2, .col3{
  float: left;
  width: 235px;
}

.col2{
  margin: 0px 17px 0px 17px;
}

.img_box{
  background: url(freecss_greentextile-images/img_shadow.jpg) no-repeat bottom;
  padding: 0px 0px 7px 0px;
}

.bor_bot{
  border-bottom: 1px solid #828282;
  padding-bottom: 30px;
}

.list{
  background: url(freecss_greentextile-images/icon1.jpg) no-repeat center left;
  height: 32px;
  line-height: 32px;
  padding: 0px 0px 0px 40px;
  margin: 0px 0px 10px 0px;
}

.clip{
  background: url(freecss_greentextile-images/icon2.jpg) no-repeat center left;
  height: 32px;
  line-height: 32px;
  padding: 0px 0px 0px 40px;
  margin: 0px 0px 10px 0px;
}

.user{
  background: url(freecss_greentextile-images/icon3.jpg) no-repeat center left;
  height: 32px;
  line-height: 32px;
  padding: 0px 0px 0px 40px;
  margin: 0px 0px 10px 0px;
}



/*footer*/

#footer{
  position: absolute;
  left: 0;
  width: 100%;
  background: url(freecss_greentextile-images/footer.png);
  text-align: center;
  padding: 20px 0px 20px 0px;
}

#footer p, #footer a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  color: #ffffff;
}

.foot_col1, .foot_col2, .foot_col3, .foot_col4{
    float: left;
  padding-right: 20px;
}

#foot_column4{
  padding: 0px 20px 30px 20px;
}

#foot_column4 a{
  font-weight: normal;
}

#foot_column4 a:hover, #foot_column4 .ls li a:hover{
  color: #ffffff;
}

.foot_col1{
    width: 152px;
}

.foot_col2{
    width: 117px;
}

.foot_col2 p{
  padding-bottom: 4px;
}

.foot_col3{
    width: 202px;
}

.foot_col3 p{
  text-decoration: underline;
}

.foot_col4{
    width: 197px;
}

.foot_col4 p{
  padding-bottom: 6px;
}

.ls{
    list-style: none;
    padding-left: 0px;
}

.ls li{
    margin-bottom: 4px;
}

#foot_column4 .ls li a{
    background: url(freecss_greentextile-images/ls.gif) no-repeat 0px 6px;
    display: block;
    padding-left: 15px;
    padding-bottom: 4px;
    color: #000000;
    font-weight: normal;
}

.link1{
    background: url(freecss_greentextile-images/link1.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link2{
    background: url(freecss_greentextile-images/link2.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link3{
    background: url(freecss_greentextile-images/link3.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link4{
    background: url(freecss_greentextile-images/link4.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}


/*=*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*==*/


#slider-wrapper {
    background:url(freecss_greentextile-images/top.jpg) no-repeat;
    width: 760px;
    height: 265px;
    margin:0 auto;
}

#slider {
  position:relative;
    width: 760px;
    height: 265px;
  background:url(freecss_greentextile-images/loading.gif) no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
  display: none;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(freecss_greentextile-images/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(freecss_greentextile-images/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

</style>


<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="header">
      <div id="logo">
        <h1><a href="#">freecss_greentextile</a></h1>
              <a href="#"><small>Small Company Slogan Goes Here</small></a>
      </div>
      <div id="menu">
        <ul>
          <li><a href="#" class="select">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <div id="content_top"></div>
    <div id="content">
      <div id="prew_box">
        <div id="prew_top"></div>
        <div id="prew_bg">
          
                     <div id="wrapper">
                <div id="slider-wrapper">        
                  <div id="slider" class="nivoSlider">
                    <img src="freecss_greentextile-images/prew_img1.jpg" alt="" />
                    <img src="freecss_greentextile-images/prew_img2.jpg" alt=""/>
                    <img src="freecss_greentextile-images/prew_img3.jpg" alt="" />
                    <img src="freecss_greentextile-images/prew_img4.jpg" alt="" />
                    <img src="freecss_greentextile-images/prew_img5.jpg" alt="" />
                    <img src="freecss_greentextile-images/prew_img6.jpg" alt="" />
                  </div>        
                </div>
            </div>
      
      <script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
          $('#slider').nivoSlider();
        });
        </script>
            
            <div class="clear"></div>
        </div>
        <div id="prew_bot"></div>
      </div>
      <div class="white_box">
        <div class="white_box_top"></div>
        <div class="white_box_bg">
          
          
          <div class="3column bor_bot">
            <div class="col1">
              <h3 class="list">Vivamus tempor mauris</h3>
              <p><a href="#">Vestibulum tempor ligula est.</a><br />
              Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. Cras aliquam quam eget odio accumsan eu lobortis. <a href="#">&raquo;</a></p>
            </div>
            <div class="col2">
              <h3 class="clip">Ut tellus erat</h3>
              <p><a href="#">Quisque malesuada pretium magna.</a><br />
              Sed posuere tellus vulputate eu. In ut varius leo. Ut ante nisl, faucibus ut mollis at, suscipit et augue. <a href="#">&raquo;</a></p>
            </div>
            <div class="col3">
              <h3 class="user">Sed suscipit lobortis</h3>
              <p><a href="#">Donec ornare, dui nec faucibus mattis.</a><br />
              Velit felis eleifend nisi, eu luctus purus enim eget leo. Ut luctus volutpat libero in auctor. Praesent tincidunt placerat.<a href="#">&raquo;</a></p>
            </div>
            <div class="clear"></div>
          </div>
          
          <h2>Sed laoreet enim ut sem bibendum at lobortis erat tempus.</h2>
          <div class="3column">
            <div class="col1">
              <div class="img_box">
                <img src="freecss_greentextile-images/img1.jpg" alt="" title="" />
              </div>
              <h3>Nunc eget mi id risus.</h3>
              <p>Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. Cras aliquam quam eget odio accumsan eu lobortis. <a href="#">&raquo;</a></p>
            </div>
            <div class="col2">
              <div class="img_box">
                <img src="freecss_greentextile-images/img2.jpg" alt="" title="" />
              </div>
              <h3>Aliquam congue nisi quis.</h3>
              <p>Nam eget metus dui, eu consectetur urna. Donec sed mauris quis nisl iaculis ullamcorper. Phasellus hendrerit.<a href="#">&raquo;</a></p>
            </div>
            <div class="col3">
              <div class="img_box">
                <img src="freecss_greentextile-images/img3.jpg" alt="" title="" />
              </div>
              <h3>Ut tellus erat.</h3>
              <p>Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum.<a href="#">&raquo;</a></p>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="white_box_bot"></div>
      </div>
    </div>
    <div id="content_bot"></div>
    
      <div id="foot_column4">
              <div class="foot_col1">
                <h4>Follow Us</h4>
          <div class="link1"><a href="#">Subscribe to Blog</a></div>
                  <div class="link2"><a href="#">Be a fan on Facebook</a></div>
                  <div class="link3"><a href="#">RSS Feed</a></div>
                  <div class="link4"><a href="#">Follow us on Twitter</a></div>
        </div>
                <div class="foot_col2">
                  <h4>Services</h4>
          <ul class="ls">
                    <li><a href="#">Service Number 1</a></li>
                    <li><a href="#">Service Number 2</a></li>
                    <li><a href="#">Service Number 3</a></li>
                    <li><a href="#">Service Number 4</a></li>
                    <li><a href="#">Service Number 5</a></li>
                    <li><a href="#">Service Number 6</a></li>
                  </ul>
                </div>
                <div class="foot_col3">
                <h4>About Us</h4>
              <img src="freecss_greentextile-images/img4.jpg" alt="" title="" style="float: left; padding: 3px 10px 0px 0px;" />
          <p><a href="#">&quot;Integer malesuada porttitor elit, at cursus massa malesuada a.&quot;</a></p>
              <br />
          <img src="freecss_greentextile-images/img5.jpg" alt="" title="" style="float: left; padding: 3px 10px 0px 0px;" />
          <p><a href="#">&quot;Donec vel nulla a enim iaculis tempus.&quot;</a></p>
        </div>
                <div class="foot_col4">
                <h4>Contact Information</h4>
              <p>1234 SomeStreet</p>
          <p>Brooklyn, NY 11201</p>
          <p>Phone:  1(234) 567 8910</p>
          <p>Fax: 1(234) 567 8910</p>
          <p>E-mail:companyname@yahoo.com</p>
                </div>
                <div style="clear: both"></div>
            </div>  
    <div id="footer">
      <p>Copyright  2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS Templates</a><!-- end --></p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
    </div>
    
    </body>
</html>

   
    
    
    
  








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.euphonics
46.europe
47.everydayseries
48.evolution
49.exalted
50.excess
51.excursus
52.Executive Template
53.executive
54.Exotic_Blue
55.Exotic_Red
56.fotografix
57.fotolandia
58.foundation
59.foxy
60.fractalbroccoli
61.fragrance
62.frankincense
63.freches-fruechtchen
64.free-css-lunch
65.freecsstemplate 55
66.freecsstemplateno57
67.freecsswebsitetemplate39
68.freecss_modern
69.freecss_monolit
70.freecss_redleaves
71.freecss_set
72.freeport
73.freeradicals
74.freestyle
75.frozenage
76.ftd-redblack
77.ftdbusiness
78.ftdcinema
79.ftddrops
80.ftdExplosionBlue
81.ftditight
82.ftdkiwi
83.ftdlagoon
84.ftdLight
85.ftdLightBlue
86.ftdluminescent
87.ftdMoonLight
88.ftdprime
89.ftdspace
90.ftdvivid
91.ftdworld
92.funkytimes
93.funride
94.futuremag-aio
95.fword_three
96.galaxy
97.gallerize
98.gamberetto
99.gameportal
100.Ganesh01
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies