ftdlagoon : Design 5 « Templates « HTML / CSS






ftdlagoon

    

<!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>FlashTemplatesDesign.com Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by FlashTemplatesDesign.com
http://www.flashtemplatesdesign.com/
Released for free under a Creative Commons Attribution 2.5 License
*/


*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}

a {text-decoration: underline;}

#left a {
  color:#32A5E7;
}

#right a{
  color: #32A5E7;
}

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

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #000000;
  background: url(ftdlagoon-images/bg.jpg) top repeat-x ;
  margin: 4px 0px 0px 0px;
  line-height: 20px;
}

#main {
  width: 1016px;
  margin-left: 0px;
  background: url(ftdlagoon-images/main.jpg) left top no-repeat;
  margin: 0px auto;
}


#header { 
width:1016px;
padding: 0px 0px 0px 0px;
height: 420px;
background: url(ftdlagoon-images/big.jpg) left top no-repeat;
}

#logo {  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:18px;
    font-style:italic;
    padding: 15px 0px 0px 135px;
    background:url(ftdlagoon-images/logo.jpg) left top no-repeat;
    height: 340px;
}

#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
  font-size: 18px;
  color: #FFFFFF;
}


#logo H2 a{
  font-size: 14px;
  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
  text-transform: none;
  font-weight:100;
}

#buttons{
  width: 1006px;
  background: url(ftdlagoon-images/but.png) left top no-repeat;
  text-align:center;
  margin-left: 0px;
  padding-left:10px;
  padding-top: 0px;
  height: 62px;
}

#buttons a {
  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: block;
  float: left;
  height: 40px;
  text-decoration: none;
  color: #FFFFFF;
  padding-top: 18px;
  text-align: center;
  width: 199px;
}

#buttons a:hover {
  text-decoration: underline;
  background: url(ftdlagoon-images/but_ov.jpg) 0px 2px repeat-x;
}

#content{
  width: 1016px;
  padding: 0px 0px 0px 0px;
  background: url(ftdlagoon-images/cont_mid.gif) repeat-y;
  margin: 0px 0px 0px 0px;
}

#right{
  width: 285px;
  margin: 0px 0px 0px 0px;
  float: right;
  color:#000000;
}

.right_b {  background: url(ftdlagoon-images/fish.png)  10px 17px no-repeat;
    padding-left: 32px;
    padding-top: 15px;
    width: 240px;}

.text{
  padding: 10px 0px 0px 5px;
}

.img {  float:left;
    margin: 5px 16px 5px 0px;
}

#right span {  color:#276FC0;
    font-weight:bold;
}

#left span {  color:#276FC0;
    font-weight:bold;
}
    
.col_b {color:#276FC0;}

#right H1{
  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #ffffff;
  text-align:center;
  background: url(ftdlagoon-images/tit_r.jpg) left top no-repeat;
  height: 32px;
  padding-top: 12px;
}

#left H2{
  font-family: Arial Narrow, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #3890E5;
  padding-top: 12px;
  padding-left: 0px;
  text-align: left;
  background: url(ftdlagoon-images/tit.gif) bottom repeat-x;
  padding: 18px 0px 4px 0px;
}

.read{
  text-align:right;
  padding-right:10px;
  padding-top: 5px;
  font-weight:bold;
  text-decoration:none;
}

#left{
float: left;
width: 695px;
background: url(ftdlagoon-images/bg_left.jpg) left 25px repeat-x;
margin-left: 0px;
padding: 0px 0px 0px 0px;
}

.tit_bot { background: url(ftdlagoon-images/right_tit_bot.jpg) left top no-repeat;
padding: 5px 0px 0px 0px;}

.top { background: url(ftdlagoon-images/cont_top.gif) top no-repeat;
        width: 996px;
        padding: 5px 5px 0px 15px;
        }

.bot {  background: url(ftdlagoon-images/cont_bot.gif) left bottom no-repeat;
        width: 1016px;
        height: 10px
        }

#footer{
  height: 53px;
  width: 100%;
  font-size: 12px;
  color: #002140;
  text-align: center;
  clear:both;
  padding: 12px 0px 0px 0px;
  background: url(ftdlagoon-images/but.png) 0px 3px no-repeat;
}

#footer a{
  color: #002140;
  font-size: 12px;
  text-decoration: none;
}

#footer a:hover{
  color: #002140;
  font-size: 12px;
  text-decoration: underline;
}

</style>


</head>
<body>

<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
          <div ><a href="#" class="but"  title="">Home</a></div>
          <div ><a href="#" class="but" title="">Blog</a></div>
          <div><a href="#"  class="but" title="">Gallery</a></div>
          <div><a href="#"  class="but" title="">About us</a></div>
          <div ><a href="#" class="but" title="">Contact us</a></div>
    </div>
    <div id="logo"><a href="#">ftdlagoon</a>
        <h2><a href="#">Small Company Slogan Goes Here</a></h2>
    </div>
</div>
<!-- header ends -->
    <!-- content begins -->
      <div id="content">
        <div class="top">
          <div id="right">
              <h1>Company News</h1>
                <div class="tit_bot">
                  <div class="right_b"><span class="col_b">Maecenas sed lorem neque. Mauris dictum varius orci, sagittis auctor sapien sagittis vitae. </span><br />
                    Suspendisse placerat ante non lectus gravida imperdiet. Fusce vitae vulputate tellus. Morbi pulvinar consequat felis ut consequat. Nunc pellentesque imperdiet...</div>
                  <div class="read"><a href="#"><img src="ftdlagoon-images/b_read.gif" alt="" /></a></div>
                  <div class="right_b"><span class="col_b">Maecenas sed lorem neque. Mauris dictum varius orci, sagittis auctor sapien sagittis vitae. </span><br />
                    Suspendisse placerat ante non lectus gravida imperdiet. Fusce vitae vulputate tellus. Morbi pulvinar consequat felis ut consequat. Nunc pellentesque imperdiet...</div>
                  <div class="read"><a href="#"><img src="ftdlagoon-images/b_read.gif" alt="" /></a></div>
                 </div><br />
             </div>  
            <div id="left">
                    <h2>Maecenas sed lorem neque</h2>
                    <div class="text"><img src="ftdlagoon-images/img1.jpg" width="202" height="150" class="img" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus condimentum pharetra. Nunc et augue sed ligula dictum ultricies. </span><br />
                        In hendrerit blandit nisi ullamcorper pretium. Pellentesque tristique, diam sollicitudin condimentum dignissim, lorem urna cursus mi, quis iaculis est dolor ac purus. Nunc facilisis dictum neque eu sollicitudin. Nulla luctus, erat sed hendrerit facilisis, erat enim viverra nulla, eu blandit nisi lacus vel velit. Vestibulum eros tortor, aliquet ac elementum vel, aliquet eget purus. Morbi nisi leo, tristique vitae iaculis a, vehicula ut nulla. Pellentesque sit amet leo dolor, ac varius mi. Aenean nulla metus, laoreet nec tincidunt quis, ultrices quis leo. Vivamus viverra magna sit amet turpis hendrerit vitae blandit ligula. tempus. Maecenas imperdiet, nisl sed congue eleifend, orci quam. <br />
                      <div class="read"><a href="#"><img src="ftdlagoon-images/b_read.gif" alt="" /></a></div>
                    </div>
                    <h2>Free Website Templates</h2>
           <div class="text"><img src="ftdlagoon-images/img2.jpg" width="152" height="102" class="img" alt="" /><span>Aliquam sed elit orci, vitae iaculis velit. Donec viverra consectetur suscipit. Maecenas lacinia augue eu magna interdum at tincidunt risus tincidunt. </span><br />
                        Etiam condimentum, ligula id pretium commodo, eros nunc convallis augue, vel consequat sapien orci id massa. Aliquam porta rutrum ante, sit amet lobortis orci cursus at. Suspendisse sollicitudin velit in magna rutrum suscipit. Nunc malesuada risus et ante pulvinar tincidunt. Sed ac imperdiet elit. Integer bibendum fermentum ligula, quis sollicitudin turpis convallis ac. Duis<br />
             purus. Morbi nisi leo, tristique vitae iaculis a, vehicula ut nulla. Pellentesque sit amet leo dolor, ac varius mi. Aenean nulla metus, laoreet nec tincidunt quis, ultrices quis leo. Vivamus viverra magna sit amet turpis hendrerit vitae blandit ligula. tempus. Maecenas imperdiet, nisl sed congue eleifend, orci quam. <br />
                      <div class="read"><a href="#"><img src="ftdlagoon-images/b_read.gif" alt="" /></a></div><br />

               </div>
          </div>
            <br />
            <div style="clear: both"><img src="ftdlagoon-images/spaser.gif" alt="" width="1" height="1" /></div>
        </div>
        <div class="bot"></div>
        </div>
    <!-- content ends -->
    <!-- footer begins -->
    <div id="footer">
  Copyright  2011. Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a><br />
    <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></div>
<!-- footer ends -->
</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_greentextile
69.freecss_modern
70.freecss_monolit
71.freecss_redleaves
72.freecss_set
73.freeport
74.freeradicals
75.freestyle
76.frozenage
77.ftd-redblack
78.ftdbusiness
79.ftdcinema
80.ftddrops
81.ftdExplosionBlue
82.ftditight
83.ftdkiwi
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