aquaria : Water « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Water

aquaria

     

<!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>
<title>Aquaria</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF url(aquaria-images/img01.jpg) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #7F7772;
}

h1, h2, h3 {
  margin-bottom: 15px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  color: #333333;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 152%;
}

h3 {
  font-size: 100%;
  font-weight: bold;
}

p, ul, ol {
  margin-bottom: 15px;
  line-height: 1.6em;
}

ul, ol {
  margin-left: 2em;
}

blockquote {
  margin-left: 1em;
  padding-left: 1em;
  background: url(aquaria-images/img09.gif) repeat-y;
  font-style: italic;
}

a:link {
  color: #0AAAFD;
}

a:hover, a:active {
  text-decoration: none;
  color: #FF6700;
}

a:visited {
  color: #7F7772;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 20px;
}

/* Menu */

#menu {
  width: 770px;
  height: 105px;
  margin: 0 auto;
}

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

#menu li {
  display: block;
  float: left;
  width: 122px;
  height: 65px;
  padding: 40px 0 0 0;
}

#menu a {
  display: block;
  width: 122px;
  height: 32px;
  padding: 13px 0 0 0;
  background: url(aquaria-images/img02.jpg) no-repeat;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover {
  background-image: url(aquaria-images/img03.jpg);
}

#menu .active {
  padding-top: 35px;
}

#menu .active a {
  height: 37px;
  padding-top: 16px;
  background-image: url(aquaria-images/img04.jpg);
  color: #327EBE;
}

#menu .active a:hover {
  background-image: url(aquaria-images/img04.jpg);
}

/* Header */

#header {
  width: 770px;
  height: 160px;
  margin: 0 auto;
}

/* Logo */

#logo {
  float: left;
  width: 250px;
  height: 160px;
  background: url(aquaria-images/img05.jpg) no-repeat;
}

#logo h1, #logo h2 {
  text-align: center;
}

#logo h1 {
  padding-top: 90px;
  background: url(aquaria-images/img07.jpg) no-repeat center center;
  letter-spacing: 8px;
  font-size: 197%;
}

#logo h2 {
  letter-spacing: 2px;
  font-size: 85%;
}

#logo a {
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

/* Banner */

#banner {
  float: right;
  width: 520px;
  height: 160px;
  background: url(aquaria-images/img06.jpg) no-repeat;
}

#banner a {
  float: right;
  padding: 120px 20px 0 0;
  text-decoration: none;
  text-align: right;
  font-size: 136%;
  font-style: italic;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

/* Content */

#content {
  float: right;
  width: 510px;
}

.post {
  margin-bottom: 20px;
}

.post .title {
  padding: 0 20px;
}

.post .story {
  padding: 0 20px;
}

.post .meta {
  padding: 5px 20px;
  background: url(aquaria-images/img09.gif) repeat-x;
}

.post .meta p {
  margin: 0;
  font-size: 77%;
}

.boxed .title {
  height: 32px;
  margin: 0;
  padding: 8px 0 0 20px;
  background: url(aquaria-images/img08.jpg) no-repeat;
  letter-spacing: -1px;
  color: #FF3300;
}

.boxed .story {
  padding: 20px;
  border: 1px solid #FF8D17;
}

.boxed .meta {
  padding: 5px 10px;
  background: #FF8D17;
  color: #FFFFFF;
}

.boxed .meta a {
  color: #FFFFFF;
}

/* Sidebar */

#sidebar {
  float: left;
  width: 240px;
}

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

#sidebar li {
  margin-bottom: 15px;
}

#sidebar li ul {
  padding: 10px;
  border: 1px solid #0AAAFD;
  border-top: none;
}

#sidebar li li {
  margin: 0;
  padding: 3px 0;
  background: url(aquaria-images/img09.gif) repeat-x;
}

#sidebar li li.first {
  background: none;
}

#sidebar li h2 {
  height: 30px;
  margin: 0;
  padding: 10px 0 0 15px;
  background: url(aquaria-images/img10.jpg) no-repeat;
  letter-spacing: -1px;
  color: #327EBE;
}

#sidebar a:link {
  text-decoration: none;
}

#sidebar a:hover {
  text-decoration: underline;
}

#sidebar li a {
  padding-left: 10px;
  background: url(aquaria-images/img11.gif) no-repeat left center;
}

/* Footer */

#footer {
  clear: both;
  height: 100px;
  padding: 15px 0;
  background: #D1D1D1;
  border-top: 5px solid #999999;
  text-align: center;
}

#footer p {
  margin: 0;
  color: #999999;
}

#footer a {
  color: #999999;
}

#footer a:hover {
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="menu">
  <ul>
    <li class="active"><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
    <li><a href="http://www.free-css.com/" accesskey="2">Blogs</a></li>
    <li><a href="http://www.free-css.com/" accesskey="3">Photos</a></li>
    <li><a href="http://www.free-css.com/" accesskey="4">Links</a></li>
    <li><a href="http://www.free-css.com/" accesskey="5">About</a></li>
    <li><a href="http://www.free-css.com/" accesskey="6">Contact</a></li>
  </ul>
</div>
<!-- end #menu -->
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Aquaria</a></h1>
    <h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
  </div>
  <div id="banner"><a href="http://www.free-css.com/">Lorem ipsum dolor amet veroeros!</a></div>
</div>
<!-- end #header -->
<div id="page">
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome to Aquaria!</h1>
      <div class="story">
        <p><strong>Aquaria</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  photo is from <a href="http://www.free-css.com/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
      </div>
      <div class="meta">
        <p class="date">Posted on February 22, 2007 by Admin</p>
        <p class="file">Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">28 Comments</a></p>
      </div>
    </div>
    <div class="post boxed">
      <h2 class="title">A Few Examples of Common Tags</h2>
      <div class="story">
        <p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p>
        <blockquote>
          <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p>
        </blockquote>
        <h3>Heading Level Three</h3>
        <p>An unordered list example:</p>
        <ul>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three </li>
        </ul>
        <p>An ordered list example:</p>
        <ol>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number three</li>
        </ol>
      </div>
      <div class="meta">
        <p class="date">Posted on February 22, 2007 by Admin</p>
        <p class="file">Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Edit</a> | <a href="http://www.free-css.com/">28 Comments</a></p>
      </div>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <ul>
      <li>
        <h2>Archives</h2>
        <ul>
          <li class="first"><a href="http://www.free-css.com/">June 2007</a> <i>(2)</i></li>
          <li><a href="http://www.free-css.com/">May 2007</a> <i>(31)</i></li>
          <li><a href="http://www.free-css.com/">April 2007</a> <i>(30)</i></li>
          <li><a href="http://www.free-css.com/">March 2007</a> <i>(31)</i></li>
          <li><a href="http://www.free-css.com/">February 2007</a> <i>(28)</i></li>
          <li><a href="http://www.free-css.com/">January 2007</a> <i>(31)</i></li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li class="first"><a href="http://www.free-css.com/">Donec Dictum Metus</a></li>
          <li><a href="http://www.free-css.com/">Etiam Rhoncus Volutpat</a></li>
          <li><a href="http://www.free-css.com/">Integer Gravida Nibh</a></li>
          <li><a href="http://www.free-css.com/">Maecenas Luctus Lectus</a></li>
          <li><a href="http://www.free-css.com/">Mauris Vulputate Dolor Nibh</a></li>
          <li><a href="http://www.free-css.com/">Nulla Luctus Eleifend</a></li>
          <li><a href="http://www.free-css.com/">Posuere Augue Sit Nisl</a></li>
        </ul>
      </li>
      <li>
        <h2>Blog Roll</h2>
        <ul>
          <li class="first"><a href="http://www.free-css.com/">Donec Dictum Metus</a></li>
          <li><a href="http://www.free-css.com/">Etiam Rhoncus Volutpat</a></li>
          <li><a href="http://www.free-css.com/">Integer Gravida Nibh</a></li>
          <li><a href="http://www.free-css.com/">Maecenas Luctus Lectus</a></li>
          <li><a href="http://www.free-css.com/">Mauris Vulputate Dolor Nibh</a></li>
          <li><a href="http://www.free-css.com/">Nulla Luctus Eleifend</a></li>
          <li><a href="http://www.free-css.com/">Posuere Augue Sit Nisl</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Aquaria. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  <p id="links"> <a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a> | <a href="http://validator.w3.org/check/referer"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
<!-- end #footer -->
</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.aquatic
7.aqueous
8.metamorph_watteriff
9.coolwater
10.metamorph_surf
11.metamorph_fallbridge
12.ftdseashore
13.White 2
14.a_bit_liquid
15.underthebridge
16.underwater