ftditight
<!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 3.0 License
*/
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
a{
color: #395878;
text-decoration:none;
}
a:hover{
text-decoration: underline;
color: #137BBB;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(ftditight-images/bg.gif);
margin-top: 48px;
}
#bg{
background:url(ftditight-images/bg_img.jpg) center top no-repeat;
}
#maintop{
background: url(ftditight-images/top.gif) 0px 0px no-repeat;
width:600px;
height: 24px;
}
#mainbot{
background: url(ftditight-images/bottom.gif) 0px 0px no-repeat;
width:600px;
height: 17px;
}
#main{
width: 600px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
#header{
width: 600px;
height: 196px;
margin: 0px auto;
background:#FFFFFF;
}
#logo{
text-align: right;
padding-top: 108px;
padding-right: 30px;
height: 52px;
background: url(ftditight-images/img_b.jpg) 4px 4px no-repeat;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
#logo H2 a{
font-size: 10px;
}
#buttons{
width: 592px;
height: 34px;
margin-left: 4px ;
background: url(ftditight-images/bg_but.gif) repeat-x;
text-align:left;
}
ul { margin:0;
padding:0;
}
#buttons ul {
padding-left: 36px;
margin: 0px;
}
#buttons li {
display: inline;
text-align:left;
}
#buttons a {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
display: block;
float: left;
width: 80px;
height: 26px;
text-decoration: none;
color: #FFFFFF;
padding-top: 8px;
padding-left: 20px;
margin-right: 5px;
text-align: left;
}
#buttons a:hover {
text-decoration: underline;
background: url(ftditight-images/fish_but.gif) 5px 15px no-repeat;
}
#content{
background: url(ftditight-images/bg_content.gif) repeat-y;
width: 600px;
}
#left{
width: 398px;
padding: 0px 0px 0px 4px;
margin: 0px;
}
H1{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color: #FFFFFF;
background:url(ftditight-images/fish_tit.gif) 8px 7px no-repeat;
height: 23px;
padding-left: 24px;
padding-top: 4px;
}
.tit { background:url(ftditight-images/tit_bg.jpg) top repeat-x; }
.read{
text-align:right;
padding-right:20px;
}
#right{
float:right;
width: 190px;
background: url(ftditight-images/right_bg.gif) left repeat-y;
margin-right: 4px
}
#right ul
{
margin: 0px 2px 20px 17px;
padding-top: 10px;
}
#right li {
border-bottom: 1px solid #A2C1E1;
height: 20px;
padding: 5px 0px 0px 6px;
background:url(ftditight-images/fish_right.gif) 150px 9px no-repeat;
list-style:none;
}
#right a {
color:#395878;
font-weight:bold;
}
#right a:hover {
color:#137BBB;
text-decoration:none;
}
#calendar {
margin: 20px 5px 20px 5px;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}
.lo { padding: 15px 5px 15px 5px;
}
#right H4
{
margin: 0;
padding: 0px 5px 0px 5px;
font-size: 12px;
color: #137BBB;
}
#right p {
margin: 0;
padding: 10px 20px 0px 20px;
padding-bottom: 10px;
}
#left p
{
padding: 9px;
}
#archives {
}
#footer{
height: 37px;
width: 801px;
font-size: 10px;
color: #FFFFFF;
padding-top: 8px;
text-align: center;
clear:both;
margin: 0px auto;
padding-bottom: 15px;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover {text-decoration:underline;}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<div id="maintop"></div>
<!-- header begins -->
<div id="header">
<div id="buttons">
<ul>
<li class="first"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
<div id="logo"><a href="#">ftdtight</a>
<h2><a href="#">Small Company Slogan Goes Here</a></h2>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<div class="tit"><h1>Nunc pellentesque</h1></div>
<ul>
<li><a href="#">Vivamus id arcu</a></li>
<li><a href="#">Duis congue ultricies</a></li>
<li><a href="#">Purus in mollis purus</a></li>
<li><a href="#">Orci nonummy fringilla</a></li>
</ul>
<div class="tit"><h1>Calendar</h1></div>
<div id="calendar">
<table id="calendar2" summary="Calendar">
<caption>
January 2011
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="Des" colspan="3" id="prev"><a href="#">« Des</a></td>
<td class="pad"> </td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td id="now">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
<div class="tit"><h1>Company News</h1></div>
<div class="lo">
<h4>June 2, 2011</h4>
<p><a href="#"> Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta. …</a></p>
<h4>June 12, 2011</h4>
<p><a href="#">Tmpuse Duis tempor posuere diam. Suspendisse quis nunc malesuada porta. …</a></p>
</div>
</div>
<div id="left">
<div class="tit"><h1>Welcome to Our Website!</h1></div>
<div class="bg_text"><p> <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.<br /><br />
<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.</p>
<div class="read"><a href="#">read more</a></div><br />
</div>
<div class="tit"><h1>Lorem ipsum dolor sit amet</h1></div>
<div class="bg_text"><p>Ipsum dolor sit amet, consectetuer adipiscing elit. In nec risus non turpis interm rutrum. Vestibulum et metus. Nulla id magna sed dolor sollicitudin laoreet. tempus in, lacus. Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta. Dolor sit amet, consectetuer adipiscing elit. In nec risus non turpis interdum rutrum. Vestibulum et metus.Nulla id magna sed dolor sollicitudin laoreet. tempus in, lacus. Duis tempor posuere diam. Suspendisse vel tellus quis nunc malesuada porta.<br /><br />
<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.</p>
<div class="read"><a href="#">read more</a></div>
<br />
</div>
</div>
<div style="clear: both"></div>
</div>
<!-- content ends -->
<div id="mainbot"><img src="ftditight-images/spaser.gif" alt="" /></div>
</div>
<!-- footer begins -->
<div id="footer">
<p>Copyright 2011. Designed by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></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>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category