ftdseashore : Water « Templates « HTML / CSS






ftdseashore

    

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


* {
  margin: 0;
  padding: 0;
}

body {
  background: #a7c3cf url(ftdseashore-images/img01.gif) repeat-x;
  text-align: justify;
}

body, input, textarea, select {
  font: normal small Verdana, Verdana, Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3 {
  margin-bottom: 1em;
  font-weight: normal;
  color: #333333;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1.3em;
}


ul {
  list-style-type: square;
}

a {
  color: #3366FF;
}

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



/* Wrapper */

#wrapper {
  width: 750px;
  margin: 0 auto;
  background: url(ftdseashore-images/img02.gif) no-repeat;
}

/* Header */

.top_text
{
  width: 740px;
  height: 90px;
  padding: 5px;
}

.top_text h1, .top_text h2 {
  margin: 0;
  text-transform: lowercase;
  font-weight: bold;
}

.top_text h1, .top_text h2 {
  margin: 0;
  text-transform: lowercase;
  font-weight: bold;
}

.top_text h1 {
  padding: 20px 0 0 20px;
  font-size: 22px;
}

.top_text h2 {
  margin-top: 5px;
  padding: 0 0 0 22px;
  font-size: 14px;
}

.top_text a {
  text-decoration: none;
  color: #FFFFFF;
}

#header {
  width: 740px;
  height: 190px;
  padding: 5px;
  background: url(ftdseashore-images/header.jpg) no-repeat 50% 5px;
}



/* Content */

#content {
  background: #FFFFFF url(ftdseashore-images/img04.gif) repeat-y;
}

/* Blog */

#blog {
  float: left;
  width: 520px;
  margin-top: -5px;
  padding-left: 5px;
}

/* Post */

.post {
}

.post .title {
  height: 40px;
  margin: 0;
  padding: 7px 0 0 15px;
  background: url(ftdseashore-images/img06.gif) repeat-x;
}

.post .title a {
  text-decoration: none;
  color: #FFFFFF;
}

.post .title a:hover {
  text-decoration: underline;
}

.post .date {
  margin-top: -30px;
  padding-right: 15px;
  text-align: right;
  font: bold x-small Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

.post .entry {
  padding: 20px 15px 10px 15px;
  background: url(ftdseashore-images/img07.gif) repeat-x;
}

.post .entry ul{
padding-left: 30px
}

.post .meta {
  margin-bottom: 2em;
  padding: 0 15px;
  text-align: right;
  font-size: x-small;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 220px;
  margin-top: -15px;
}

#sidebar ul {
  margin: 0;
  list-style: none;
}

#sidebar li {
}

#sidebar li ul {
  margin: 0 5px;
  padding: 15px 15px 15px 30px;
  background: url(ftdseashore-images/img07.gif) repeat-x;
  list-style-type: square;
}

#sidebar li li {
}

#sidebar h2 {
  height: 29px;
  margin: 0;
  padding: 24px 5px 0 20px;
  background: url(ftdseashore-images/img08.gif) no-repeat;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
}

#sidebar a {
  text-decoration: none;
}


/* Footer */

#footer {
  background: url(ftdseashore-images/img05.gif) no-repeat;
  height: 40px;
  padding-top: 10px;
}

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

#footer a {
  color: #000000;
  font-size: 10px;
}

/* 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(ftdseashore-images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(ftdseashore-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(ftdseashore-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="wrapper">
   <div class="top_text"><h1><a href="#">ftdseashore</a></h1>
      <h2><a href="#">Small Company Slogan Goes Here</a></h2></div>
  <div id="header">
       <div id="slider_bg">
            <div class="waveshow">
              <img src="ftdseashore-images/header.jpg" alt="" title="Some Text 1 Goes Here" />
              <img src="ftdseashore-images/header2.jpg" alt="" title="Some Text 2 Goes Here" />
              <img src="ftdseashore-images/header3.jpg" alt="" title="Some Text 3 Goes Here" />
              <img src="ftdseashore-images/header4.jpg" alt="" title="Some Text 4 Goes Here" />
              <img src="ftdseashore-images/header5.jpg" alt="" title="Some Text 5 Goes Here" />
            </div> <!-- waveshow -->
          </div> <!-- slider_bg -->      
  </div>
  <div id="content">
    <div id="blog">
      <div id="post-1" class="post">
        <h2 class="title"><a href="#">Welcome to Our Website!</a></h2>
        <h3 class="date">Posted on January 24th, 2011</h3>
        <div class="entry">
          <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><br />
          <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>
        <p class="meta">Posted in <a href="#">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>
        <div class="hr">
          <hr />
        </div>
      </div>
      <!-- end #post-1 -->
      <div id="post-2" class="post">
        <h2 class="title"><a href="#">Sample Tags</a></h2>
        <h3 class="date">January 31, 2010</h3>
        <div class="entry">
        <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p> <br />
        <ul>
          <li><a href="#">Consectetuer adipiscing elit</a></li>
          <li><a href="#">Metus aliquam pellentesque</a></li>
          <li><a href="#">Urnanet non molestie semper</a></li>
          <li><a href="#">Proin gravida orci porttitor</a></li>
        </ul><br />
        <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p><br />
                    <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>
        <p class="meta">Posted in <a href="#">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>
        <div class="hr">
          <hr />
        </div>
      </div>
      <!-- end #post-2 -->
    </div>
    <!-- end #blog -->
    <div id="sidebar">
      <ul>        
        <li id="archives">
          <h2>Menu</h2>
          <ul>
            <li><a href="#" title="">Home</a></li>
            <li><a href="#" title="">Articles</a></li>
            <li><a href="#" title="">Blogs</a></li>
            <li><a href="#" title="">About Us</a></li>
            <li><a href="#" title="">Contacts</a></li>
            <li><a href="#" title="">RSS</a></li>
          </ul>
        </li>
        <!-- end #archives -->
        <li id="categories">
          <h2>Categories</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer elit</a></li>
            <li><a href="#">Metus pellentesque</a></li>
            <li><a href="#">Suspendisse mauris</a></li>
            <li><a href="#">Urnanet molestie semper</a></li>
            <li><a href="#">Proin orci porttitor</a></li>
          </ul>
        </li>
        <!-- end #categories -->
        <li id="blogroll">
          <h2>Blogroll</h2>
          <ul>
            <li><a href="#">Aliquam libero</a></li>
            <li><a href="#">Consectetuer elit</a></li>
            <li><a href="#">Metus pellentesque</a></li>
            <li><a href="#">Suspendisse mauris</a></li>
            <li><a href="#">Urnanet molestie semper</a></li>
            <li><a href="#">Proin orci porttitor</a></li>
            <li><a href="#">Metus pellentesque</a></li>
            <li><a href="#">Suspendisse mauris</a></li>
            <li><a href="#">Urnanet molestie semper</a></li>
          </ul>
        </li>
        <!-- end #blogroll -->
        
      </ul>
    </div>
    <!-- end #sidebar -->
    <div style="clear: both; height: 1px;"></div>
  </div>
  <!-- end #content -->
  <div id="footer">
    <p>Copyright &copy; 2011. Design 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>
</div>
<!-- end #wrapper -->
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.metamorph_waterdrop
2.metamorph_waterfall
3.metamorph_watersplash
4.metamorph_watersun
5.metamorph_aquaearth_lt
6.aquaria
7.aquatic
8.aqueous
9.metamorph_watteriff
10.coolwater
11.metamorph_surf
12.metamorph_fallbridge
13.White 2
14.a_bit_liquid
15.underthebridge
16.underwater