ftdcinema : Design 5 « Templates « HTML / CSS






ftdcinema

    

<!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="" />
<!-- Begin JavaScript -->

    <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="lib/jquery.tools.js"></script>
      <script type="text/javascript" src="lib/jquery.custom.js"></script>

<style type='text/css'>
/*
Design by FlashTemplatesDesign.com
http://www.flashtemplatesdesign.com/
Released for free under a Creative Commons Attribution 3.0 License
*/

*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #ffffff;
  background: url(ftdcinema-images/bg.jpg) top right no-repeat #000000;
  line-height: 16px;
}
  
#main {
  width: 1000px;
  margin: 0px auto;
  background:url(ftdcinema-images/main.jpg) right top no-repeat;}

#header { 
  height: 186px;
}

#logo {  
    height:  110px;
    padding: 55px 0px 0px 0px;
}


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

#buttons{
  text-align: right;
  height: 50px;
  margin-left: 0px;
  background: url(ftdcinema-images/buttons.png) center top no-repeat;
  padding-left: 14px;
  
}

#buttons a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 100;
  display: block;
  float: right;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  padding-top: 17px;
  height: 33px;
  width: 139px;
}

.but {
  
  
}

#buttons .but:hover {
  text-decoration: none;
  background:url(ftdcinema-images/but.png);
  padding-top: 17px;
  height: 33px;
  color: #E80000;}
  
.but_razd { width: 1px;
  height: 50px;
  float: right;
  background: #FFFFFF;}  

#content{
  background: #000000;
  width: 1000px;
  padding: 0px 0px 0px 0px;
  border: 1px solid #ffffff;
}

#content_razd {
  background: url(ftdcinema-images/content_razd.gif) 593px repeat-y ;
  padding: 0px 20px 0px 20px;
  }

.top_img {
height: 330px;
background:url(ftdcinema-images/top.jpg) left top no-repeat;}


.float_left {float:left;}

.razd_h { background:url(ftdcinema-images/razd_h.gif) 0px repeat-x; 
      height: 30px;
      clear: both;}

#left{
  width: 540px;
  float: left;
  margin-left: 0px;
  padding: 0px 0px 0px 0px;
}

#right{
  width: 355px;
  float: right;
  margin-left: 0px;
  padding: 0px 0px 0px 0px;
}

.img_l {  float:left;
    margin: 0px 15px 5px 0px;
}

.img_r {  float: right;
    margin: 0px 0px 0px 15px;
}


h1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  color: #ffffff;
  text-align: left;
  padding: 0px 0px 0px 0px;
  line-height: 20px;
  font-weight:100;
}

H2{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  padding: 0px 0px 0px 0px;
  line-height: 20px;
}

.read{
  display:block;
  float:right;
  height: 22px;
  width: 70px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  text-decoration: underline;
  font-size:12px;
  color: #E80000;
  font-weight: bold;
  background: url(ftdcinema-images/read.png) left top no-repeat;
  margin-top: 5px;
  font-weight: bold;
}



.read:hover {
  font-size:12px;
  text-decoration: none;
}

.span_dat {
  color: #002380;
  text-decoration: underline;}
  
  
#bottom {
  width: 100%;
  background: url(ftdcinema-images/bottom_razd.gif) 199px repeat-y;
  color:#FFFFFF;
  padding: 0px 0px 0px 0px;
}

.bottom_h {
  width: 100%;
  background: url(ftdcinema-images/bottom_h.gif) top repeat-x;
  color:#FFFFFF;
  padding: 0px 0px 0px 0px;
}


#bottom h2{
  font-family: Arial, Helvetica, sans-serif;
  padding: 13px 0px 15px 0px;
  font-size: 18px;
  text-align: left;
  color: #000000;
  font-weight: 100;
  line-height: 20px;
}

.b_col1 {
  width: 136px;
  height: 204px;
  float: left;
  margin-left: 57px;
  background:url(ftdcinema-images/razd_bot.gif) bottom repeat-x;
}
.b_col2 {
  width: 220px;
  height: 204px;
  float: left;
  margin-left: 30px;
  line-height: 25px;
  background:url(ftdcinema-images/razd_bot.gif) bottom repeat-x;
}

.b_col3 {
  width: 238px;
  height: 204px;
  float: left;
  margin-left: 48px;
  text-align: left;
}

.b_col4 {
  width: 153px;
  height: 204px;
  float: left;
  margin-left: 60px;
  text-align: left;
}

.b_col4 ul {
  list-style:none;
  padding: 0px 0px 0px 0px;}

.b_col4 li {
  padding: 8px 0px 2px 0px;
  background: none;
  }
  
.b_col4 li a {
  color:#FFFFFF;
  text-decoration: none;
  font-weight:100;
  
}
.b_col4 li a:hover {
  text-decoration: underline;
}

.fu_i {
  padding: 0px 14px 0px 0px;
  vertical-align: middle ;
}



.b_col1 ul {
  list-style:none;
  padding: 0px 0px 0px 0px;}

.b_col1 li {
  padding: 8px 0px 0px 16px;
  background: url(ftdcinema-images/fish2.gif) 0px 13px no-repeat;
  }
.b_col1 ul a:hover {
  text-decoration:underline;
  }
  
.b_col1 ul a {
  color:#ffffff;
  text-decoration:none;
  font-weight: 100;}

#footer{
  height: 60px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  padding: 18px 0px 0px 0px;
  background: url(ftdcinema-images/footer.jpg) 0px 15px no-repeat;
}

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

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

/* Header Scroll */

.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption {  position:absolute; left:0px; bottom:0px;  color:#000; width:100%; z-index:89; padding-left: 10px; font-weight: bold}
.nivo-caption p { padding:10px 5px; margin:0; text-indent:-9999%;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:45%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:20px; background:url(ftdcinema-images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(ftdcinema-images/top_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99;  cursor:pointer; text-indent:-9999%; background:url(ftdcinema-images/scroll_small.png) no-repeat scroll right top;}
.nivo-controlNav a.active {  background-position:left top; margin-top:-1px;}

</style>


</head>
<body>

<div id="main">
<!-- header begins -->
<div id="header">
  <div id="buttons"><div class="but_razd"></div>
      <a href="contact_us.html" class="but" title="">Contact us</a><div class="but_razd"></div>
      <a href="about_us.html"  class="but" title="">About us</a><div class="but_razd"></div>
        <a href="gallery.html"  class="but" title="">Gallery</a><div class="but_razd"></div>
        <a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
        <a href="index.html" class="but"  title="">Home</a><div class="but_razd"></div>
    </div>
  <div id="logo">
      <a href="#">ftdcinema</a>
        <h3><a href="#">Small Company Slogan Goes Here</a></h3>
    </div>
   
</div>
<!-- header ends -->
<!-- content begins -->       
<div id="content">
  <div class="top_img">
   <div id="slider_bg">
            <div class="waveshow">
              <img src="ftdcinema-images/top.jpg" alt="" title="Some Text 1 Goes Here" />
              <img src="ftdcinema-images/top2.jpg" alt="" title="Some Text 2 Goes Here" />
              <img src="ftdcinema-images/top3.jpg" alt="" title="Some Text 3 Goes Here" />
            </div> <!-- waveshow -->
          </div> <!-- slider_bg -->  
  </div>
    <div style="height:15px"></div>
    <div id="content_razd">
      <div id="right">
        <img src="ftdcinema-images/img13.jpg" alt="" />
            <div style="height:15px"></div>
            <h1>In in risus tellus.</h1><br />
      <b>Suspendisse vitae laoreet magna.</b><br />
            Integer malesuada porttitor elit, at cursus massa malesuada a. Donec vel nulla a enim iaculis tempus. Nullam quis dolor. <br /><br />
      <b>Nulla pellentesque ultrices sit amet pellentesque ligula.</b><br />
      In id purus sed ligula luctus egestas. Sed augue dui, egestas ut viverra eu, scelerisque sed magna.Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus.
            <div style="height:27px">
                <a href="#" class="read">read more</a>
            </div>
      </div>
        <div id="left">
        <img src="ftdcinema-images/img11.jpg" class="img_l" alt="" />
            <h1>Praesent ipsum neque.</h1><br />
            <b>Volutpat vel tincidunt quis, auctor vitae leo.</b><br />
      Pellentesque vitae risus ac odio pharetra varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            <div style="height:27px">
                <a href="#" class="read">read more</a>
            </div>
            <b>Nam nisl sapien, gravida non rhoncus sed, sodales nec leo.</b><br />
      Vestibulum bibendum ante sit amet libero scelerisque elementum. Mauris at magna odio, vitae sagittis dui. Pellentesque vehicula, ante ac egestas elementum.
            <div style="height:27px">
                <a href="#" class="read">read more</a>
            </div>
            <div style="clear: both;"></div>
            <div class="razd_h"></div>
            <h1>Pellentesque vitae risus ac odio pharetra varius.</h1>
            <div style="height:5px"></div>
            <img src="ftdcinema-images/img12.jpg" class="img_r" alt="" />
            <b>Fusce venenatis lobortis nunc.</b><br />
      Vitae laoreet mi ultricies at. Mauris in dui eget lacus lobortis ultrices. Proin tellus risus, suscipit quis euismod in. <br /><br />
      <b>In lobortis tristique elit.</b><br />
      Non fringilla leo adipiscing a. Aenean fringilla sapien ante. Mauris lacus tortor, interdum vel vulputate et, feugiat sed arcu.Vivamus tempor mauris at mi.
            <div style="height:27px">
                <a href="#" class="read">read more</a>
            </div>
      </div>
        <div style="clear: both;"></div>   
    </div>
    <div style="height: 20px;"></div>  
 <!-- bottom begin -->    
    <div id="bottom">
    <div class="bottom_h">
      <div class="b_col1">
          <h2>Services</h2>
          <div style="height:5px"></div>
            <ul>
                <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="b_col2">
            <h2>Contact Information</h2>
            <div style="height:10px"></div>
            1234 SomeStreet<br />
            Brooklyn, NY 11201<br />
            Phone:  1(234) 567 8910<br />
            Fax: 1(234) 567 8910<br />
            E-mail: companyname@yahoo.com
        </div>
        <div class="b_col3">
            <h2>Recent Posts</h2>
            <div style="height:10px"></div>
            <b>Vestibulum vel lacus eget nisl.</b><br />
      Nulla mollis, magna quis feugiat faucibus, risus lorem lacinia justo, et adipiscing tortor lacus in nunc. <br /><br />
            <b>Duis in tellus vel ipsum bibendum.</b> Nunc eget mi id risus tempor rhoncus. Integer lectus sapien, pulvinar non ornare quis, vulputate vel eros. 
        </div>
        <div class="b_col4">
          <h2>Follow Us</h2>
            <div style="height:5px"></div>
            <ul>
                <li><img src="ftdcinema-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
                <li><img src="ftdcinema-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook</a></li>
                <li><img src="ftdcinema-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
                <li><img src="ftdcinema-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
            </ul>
        </div>
      <div style="clear: both;"></div>     
    </div>
    </div>   
<!-- bottom end --> 
     <div style="clear: both; height: 23px;"></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.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