ftddrops
<!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 {
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #000000;
}
body {
background: url(ftddrops-images/bg_all.jpg);
background-repeat:repeat-x;
background-position:top;
background-color: #ffffff;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
}
#bg1{
background: url(ftddrops-images/bg1.png);
background-repeat:repeat-y;
background-position:center;
}
#content{
margin: 0 auto;
width: 987px;
text-align: left;
background: url(ftddrops-images/contentbg.jpg);
background-repeat:repeat-y;
background-position:left;
}
#main{
width: 969px;
margin-left: 8px;
clear:both;
background: url(ftddrops-images/left_bg.jpg);
background-repeat:repeat-y;
background-position:left;
}
#header {
height: 242px;
padding-top: 20px;
background: url(ftddrops-images/header.jpg);
background-repeat:no-repeat;
background-position:top;
padding-bottom: 3px;
}
/* Search */
#search {
float:right;
padding-right: 50px;
padding-top:5px;
}
#search form {
margin: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 11px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 230px;
height: 19px;
padding-top: 4px;
padding-left: 10px;
padding-right: 12px;
border: none;
background: url(ftddrops-images/search.png);
background-repeat:no-repeat;
background-position:left top;
color: #000000;
}
#search-submit {
width: 40px;
height: 23px;
background: url(ftddrops-images/search2.png);
background-repeat:no-repeat;
background-position:left top;
border: none;
}
#logo {
text-align: left;
padding-left: 480px;
padding-top: 90px;
}
#logo h1 a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #0f3d85;
}
#logo H2 a{
font-size: 12px;
color: #0f3d85;
text-decoration:none;
}
#menu{
width: 640px;
height: 52px;
}
#menu ul {
list-style: none;
padding-left: 0px;
}
#menu li {
display: inline;
}
#menu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
color: #008ae8;
float: left;
width: 85px;
height: 30px;
display: block;
text-align: left;
text-decoration: none;
padding-top: 5px;
padding-left:40px;
background: url(ftddrops-images/menu_bg.png);
background-repeat:no-repeat;
background-position:10px 5px;
}
#menu a:hover{
width: 85px;
height: 35px;
color: #093285;
text-decoration: none;
background: url(ftddrops-images/menu_hov.png);
background-repeat:no-repeat;
background-position:10px 5px;
}
#left{
width: 269px;
}
#log{
line-height: 20px;
width: 296px;
}
#log fieldset {
border: none;
padding-left: 5px;
padding-right: 5px;
}
#log label {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #0e3c85;
text-align:left;
padding-left: 10px;
}
#log input {
margin-bottom: 5px;
}
#login-submit{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
color: #ffffff;
width: 60px;
height: 21px;
background: url(ftddrops-images/subbg.jpg);
background-repeat:no-repeat;
background-position:left top;
border: none;
float:right;
}
#text1, #text2 {
width: 269px;
height: 22px;
padding-top: 4px;
padding-left: 8px;
padding-right: 8px;
border: none;
background: url(ftddrops-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: #0f3d85;
border-bottom: 1px dashed #0f3d85;
}
#left #log a:hover{
color: #000000;
}
#left H3{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
color: #ffffff;
text-align:center;
background: url(ftddrops-images/title_log.jpg);
background-repeat:no-repeat;
background-position:top;
width:296px;
height:36px;
padding-top:10px;
}
#left H4{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
color: #ffffff;
text-align:center;
background: url(ftddrops-images/title_left.jpg);
background-repeat:no-repeat;
background-position:top;
width:296px;
height:36px;
padding-top:10px;
margin-top: 10px;
margin-bottom: 10px;
}
#left ul {
border: 0px;
list-style: none;
margin-left: 10px;
margin-bottom: 5px;
padding-top: 5px;
}
#left li {
background: url(ftddrops-images/ls.jpg);
background-repeat:no-repeat;
background-position: 0px 5px;
padding-left: 20px;
padding-bottom: 10px;
}
#left a {
color: #0f3d85;
text-decoration:none;
font-weight: bold;
line-height: 20px;
}
#left p{
color: #000000;
padding-top:3px;
line-height: 20px;
}
#left ul li .readl, #right .readl{
text-align:right;
height: 18px;
padding-right: 14px;
padding-top: 3px;
background: url(ftddrops-images/more.png);
background-repeat:no-repeat;
background-position:right top;
}
#left ul li .readl a, #right .readl a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #ffffff;
text-decoration:none;
line-height:0px;
}
#left ul li .readl a:hover, #right .readl a:hover{
color: #e7fcff;
text-decoration:none;
}
#right{
float: right;
width: 664px;
}
#right H5{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #0f3d85;
margin-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #0f3d85;
}
#right H6{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #0f3d85;
padding-bottom: 10px;
padding-left: 10px;
}
#right a{
color: #0f3d85;
font-weight:bold;
text-decoration: none;
}
#right a:hover{
color: #84c8f5;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#gal{
padding-left: 5px;
background: url(ftddrops-images/gal_bg.jpg);
background-repeat:repeat-y;
background-position:left;
}
#gal_top{
background: url(ftddrops-images/gal_top.jpg);
background-repeat:no-repeat;
background-position:left;
height: 12px;
margin-top: 10px;
}
#gal_bot{
background: url(ftddrops-images/gal_bot.jpg);
background-repeat:no-repeat;
background-position:left;
height: 12px;
}
#leftcol, #cencol1, #cencol2, #rightcol{
width: 152px;
float:left;
margin-left: 6px;
margin-right: 5px;
text-align:center;
}
#main_bot{
background: url(ftddrops-images/main_bot.jpg);
background-repeat:no-repeat;
background-position:left bottom;
}
#footer {
padding-top: 10px;
padding-bottom: 10px;
clear: both;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #0e3c85;
}
#footer a {
color: #0e3c85;
}
</style>
</head>
<body>
<div id="bg1">
<div id="content">
<!-- header begins -->
<div id="header">
<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 -->
<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="logo">
<h1><a href="#">ftddrops</a></h1>
<h2><a href="#">Samll Company Slogan Goes Here</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="main">
<div id="main_bot">
<div id="right">
<h5>Nullam consequat, quam vel consequat auctor</h5><img src="ftddrops-images/img1.jpg" alt="" title="" style="float: left; padding-right: 10px;" />
<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.</p>
<p> 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. 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"><a href="#">more</a></div>
<h5>Company Text Goes Here</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><div class="readl"><a href="#">more</a></div>
<div id="gal_top"></div>
<div id="gal">
<h6>Lorem Ipsum Dolor</h6>
<div id="leftcol"><img src="ftddrops-images/img2.jpg" title="" alt=""/><a href="#">Pellentesque sollicitudin</a></div>
<div id="cencol1"><img src="ftddrops-images/img3.jpg" title="" alt=""/><a href="#">Sed eget ultrices turpis.</a></div>
<div id="cencol2"><img src="ftddrops-images/img4.jpg" title="" alt=""/><a href="#">Sed eget ultrices turpis.</a></div>
<div id="rightcol"><img src="ftddrops-images/img5.jpg" title="" alt=""/><a href="#">Suspendisse potenti.</a></div>
<div style="clear:both;"></div>
<div class="readl" style="margin-right:10px; margin-top:10px;"><a href="#">more</a></div>
</div>
<div id="gal_bot"></div>
</div>
<div id="left">
<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="" />
</fieldset>
</form>
<img src="ftddrops-images/logls.jpg" title="" alt="" style="padding-right: 5px; padding-left:10px;"/><a href="#">Create new account</a><br />
<img src="ftddrops-images/logls.jpg" title="" alt="" style="padding-right: 5px; padding-left:10px;"/><a href="#">Request new password</a>
</div>
<h4>Company News</h4>
<ul>
<li><a href="#">Maecenas vel mauris metus. Sed fermentum metus non erat mattis nec tempor neque ullamcorper. </a>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus metus augue, ornare vel euismod quis, euismod non felis. Proin ut justo in nisi porta vulputate. Aenean non lacus </p>
<div class="readl"><a href="#">more</a></div></li>
<li><a href="#">Sed quis tristique sapien. Sed adipiscing ante eget nisl pretium condimentum.</a>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus metus augue, ornare vel euismod quis, euismod non felis. Proin ut justo in nisi porta vulputate. Aenean non lacus</p>
<div class="readl"><a href="#">more</a></div></li>
</ul>
</div><div style="clear:both;"></div>
<!--content ends -->
<!--footer begins -->
</div>
</div>
<div id="footer">
<div id="left_con_bot">
<p>Copyright 2011. <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></div>
</div>
</div>
<!-- footer ends-->
</body>
</html>
Related examples in the same category