ftdprime : Design 5 « Templates « HTML / CSS






ftdprime

    

<!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
*/


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

a:link {
  color: #EC5D3B;
}

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

a:visited {
  color: #EC5D3B;
}

body {
  background: url(ftdprime-images/bg_all.jpg);
  background-repeat:repeat-x;
  background-position:top;
  background-color: #f2f6f9;
  font: 12px Arial, Helvetica, sans-serif;
  color: #383838;
}

#content{
  margin: 0 auto;
  background-color: #ffffff;
  width: 1014px;
  text-align: left;
}

#main{
  width: 1014px;
  margin: 0 auto;
  clear:both;
}

#header {
  height: 255px;
  background: url(ftdprime-images/header.jpg);
  background-repeat:no-repeat;
  background-position:left top;
}

/* Search */

#search {
  float: right;
}

#search form {
  float: right;
  margin: 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search input {
  float: left;
  font: 12px Georgia, "Times New Roman", Times, serif;
}

#search-text {
  width: 230px;
  height: 20px;
  padding-top: 6px;
  padding-left: 10px;
  padding-right: 13px;
  border: none;
  background: url(ftdprime-images/seach.png);
  background-repeat:no-repeat;
  background-position:left top;
  color: #000000;
}

#search-submit {
  width: 36px;
  height: 26px;
  background: url(ftdprime-images/seach2.png);
  background-repeat:no-repeat;
  background-position:left top;
  border: none;
}

#logo {
  margin: 0 auto;
  text-align: left;
  width: 814px;
  padding-left: 200px;
  padding-top: 30px;
}


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

#logo H2 a{
  font-size: 12px;
}


#menu{
  width: 1014px;
  height: 76px;
  margin: 0 auto;
}

#menu ul {
  list-style: none;
}

#menu li {
  display: inline;
  
}

#menu a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight:normal;
  color: #ffffff;
  float: left;
  width: 202px;
  height: 49px;
  display: block;
  text-align: center;
  text-decoration: none;
  padding-top: 30px;
}

#menu a:hover{
  width: 202px;
  height: 49px;
  text-decoration: none;
  background: url(ftdprime-images/hov.jpg);
  background-repeat:repeat-x;
  background-position:top left;
}

#left{
  width: 295px;
  margin-left: 5px;
}

#log{
  line-height: 20px;
  background-color: #d6e5f8;
  padding-left: 15px;
  padding-right: 20px;
}

#log fieldset {
  border: none;
}

#log label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #004fac;
  text-align:left;
  padding-left: 10px;
}

#log input {
  margin-bottom: 5px;
}

#login-submit{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  width: 54px;
  height: 22px;
  background: url(ftdprime-images/subbg.jpg);
  background-repeat:no-repeat;
  background-position:left top;
  border: none;
  float:right;
}

#text1, #text2 {
  width: 238px;
  height: 21px;
  padding-top: 4px;
  padding-left: 10px;
  padding-right: 13px;
  border: none;
  background: url(ftdprime-images/logpole.jpg);
  background-repeat:no-repeat;
  background-position:left top;
  color: #000000;
  padding-bottom: 5px;
}

#left #log a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  color: #004fac;
}

#left #log a:hover{
  color: #000000;
}

#left_top{
  background: url(ftdprime-images/left_top.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  height: 10px;
}

#left_bot{
  background: url(ftdprime-images/left_bot.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  height: 10px;
}

#left H3{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight:bold;
  color: #004fac;
  text-align:center;
}

#left H4{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight:normal;
  color: #3387e9;
  text-align:left;
  margin-left: 15px;
  margin-right: 20px;
  margin-top: 20px;
  border-bottom: 1px solid #3387e9;
}

#left ul {
  border: 0px;
  list-style: none;
  margin-left: 15px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-right: 20px;
}

#left li {
  background: url(ftdprime-images/ls.jpg);
  background-repeat:no-repeat;
  background-position: top left;
  padding-left: 15px;
  padding-bottom: 10px;
}

#left a {
  color: #3387e9;
  text-decoration:none;
}

#left p{
  color: #000000;
}

#left ul li .readl, #right .readl{
  text-align:right;
}

#left ul li .readl a, #right .readl a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:bold;
  color: #001a39;
  border-bottom: 1px dotted #001a39;
}

#left ul li .readl a:hover, #right .readl a:hover{
  color: #3387e9;
}

#right{
  float: right;
  width: 701px;
  padding-top: 10px;
  padding-right: 4px;

}

#right H5{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: normal;
  color: #3387e9;
  border-bottom: 1px solid #3387e9;
  margin-bottom: 10px;
}

#right H6{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: normal;
  color: #3387e9;
  height: 27px;
  padding-left: 10px;
  padding-top: 10px;
  background: url(ftdprime-images/title_right.jpg);
  background-repeat:no-repeat;
  background-position:top left;
}

#right a{
  color: #3387e9;
  text-decoration: none;
}

#right a:hover{
  color: #000000;
}

#right p {
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

#right_bg_bot{
  background: url(ftdprime-images/right_bg_bot.jpg);
  background-repeat:repeat-y;
  background-position:left;
}

#right_title_bot{
  background: url(ftdprime-images/right_title_bot.jpg);
  background-repeat:no-repeat;
  background-position: top left;
  height: 11px;
  padding-bottom: 10px;
}

#gal{
  padding-top: 10px;
}

#leftcol, #cencol, #rightcol{
  width: 202px;
  float:left;
  margin-left: 15px;
  margin-right: 15px;
  text-align:center;
}

#leftcol a, #cencol a, #rightcol a{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:bold;
  color: #3387e9;
  border-bottom: 1px dashed #3387e9;
}

#footer {
  height: 36px;
  clear: both;
  padding-top: 10px;
  background: url(ftdprime-images/footer.jpg);
  background-repeat:repeat-x;
  background-position:top;
}

#footer p {
  margin: 0;
  font-size: 10px;
  text-align: center;
  color: #ffffff;
}

#footer a {
  color: #ffffff;
}

</style>


</head>
<body>

<!-- header begins -->
<div id="header">
<div id="logo">
  <div id="search">
    <form method="get" action="">
      <fieldset>
        <input type="text" name="s" id="search-text" size="15" />
        <input type="submit" id="search-submit" value="" />
      </fieldset>
    </form>
  </div>
<!-- end #search -->
  
    <h1><a href="#">ftdprime</a></h1>
    <h2><a href="#">Small Company Slogan Goes Here</a></h2>
  </div>
</div>
  <div id="menu">
    <ul>
      <li id="button1"><a href="#" title="">Home</a></li>
      <li id="button2"><a href="#" title="">Blog</a></li>
      <li id="button3"><a href="#" title="">Gallery</a></li>
      <li id="button4"><a href="#" title="">About</a></li>
      <li id="button5"><a href="#" title="">Contact</a></li>
    </ul>
  </div>
<div id="content">
<!-- header ends -->
<!-- content begins -->
<div id="main">
  <div id="right">
        <h5>Duis autemr in hendrerit in</h5>
  <img src="ftdprime-images/img01.jpg" title="" alt="" style="padding-right: 10px; padding-bottom: 10px; float:left;"/>
      <p>Aliquam consequat faucibus ornare. Curabitur convallis dolor nec dui laoreet a tempus mi bibendum. Curabitur auctor, felis eget tempor laoreet, tellus metus ornare lacus, suscipit tempus arcu nibh vitae risus. Ut ac vulputate felis. Sed condimentum pulvinar lectus, id convallis lacus vestibulum a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <p> Aliquam sit amet nulla est, at pellentesque mi. Mauris id lectus nibh, vitae laoreet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed faucibus placerat odio sit amet ultrices. Aenean vitae elit lorem, vitae aliquet velit. Cras eros quam, elementum non fermentum vitae, rhoncus sed justo. Fusce fringilla risus in eros ullamcorper semper at non nisi.</p><div class="readl" style="padding-right: 20px;"><a href="#">read more</a></div>
                <h5>FREE WEBSITE TEMPLATES</h5>
      <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
      <p>Sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autemr in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...</p>
    <h6>Lorem Ipsum Dolor</h6>
    <div id="right_bg_bot">
      <div id="gal">
        <div id="leftcol"><img src="ftdprime-images/img02.jpg" title="" alt=""/><a href="#">Pellentesque sollicitudin</a></div>
        <div id="cencol"><img src="ftdprime-images/img03.jpg" title="" alt=""/><a href="#">Sed eget ultrices turpis.</a></div>
        <div id="rightcol"><img src="ftdprime-images/img04.jpg" title="" alt=""/><a href="#">Suspendisse potenti.</a></div><div style="clear:both;"></div>
      </div>
    </div>
    <div id="right_title_bot"></div>

  </div>
  <div id="left">
      <div id="left_top"></div>
      <div id="log">
      <h3>User Login</h3>
        <form id="form1" method="post" action="#">
        <fieldset>
          <label for="text1">Username</label><br />
          <input id="text1" type="text" name="text1" value="" /><br />
          <label for="text2">Password</label><br />
          <input id="text2" type="password" name="text2" value="" /><br />
          <input type="submit" id="login-submit" value="Login" />
          
        </fieldset>
        </form>
      <img src="ftdprime-images/logls.jpg" title="" alt="" style="padding-right: 5px; padding-bottom: 2px;"/><a href="#">Create new account</a><br />
      <img src="ftdprime-images/logls.jpg" title="" alt="" style="padding-right: 5px; padding-bottom: 2px;"/><a href="#">Request new password</a>
      </div>
      <div id="left_bot"></div>
    
      <h4>Company News</h4>
      <ul>
        <li><a href="#">Sed quis tristique sapien. Sed adipiscing ante eget nisl pretium condimentum.</a>
        <p>Quisque ut magna sit amet sapien feugiat rutrum ut ac libero. Suspendisse nibh urna, laoreet nec volutpat in, laoreet ut nulla...</p>
        <div class="readl"><a href="#">read more</a></div></li>
        <li><a href="#">Sed quis tristique sapien. Sed adipiscing ante eget nisl pretium condimentum.</a>
        <p>Quisque ut magna sit amet sapien feugiat rutrum ut ac libero. Suspendisse nibh urna, laoreet nec volutpat in, laoreet ut nulla...</p>
        <div class="readl"><a href="#">read more</a></div></li>
        
      </ul>
  </div>
<!--content ends -->
<!--footer begins -->
  </div><div style="clear:both;"></div>
</div>
<div id="footer">
<p>Copyright  2010. <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> 
  <p>Design by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a>
    </p>
  </div>

<!-- footer ends-->
</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.ftdlagoon
85.ftdLight
86.ftdLightBlue
87.ftdluminescent
88.ftdMoonLight
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