celestial : Animal « Templates « HTML / CSS

celestial
    

<!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>Celestial</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */

body {
font:13px/26px Georgia;
color:#A3989E;
background:url(celestial-images/body.png) top repeat-x #312D2E;
}

* {
margin:0;
padding:0;
outline:none;
}

.clear {
clear:both;
}

#header {
height:237px;
width:860px;
margin:0 auto;
background:url(celestial-images/header.png) top no-repeat;
position:relative;
}

p.credit {
float:right;
}

p.credit a {
color:#fff;
}

#header .tree {
position:absolute;
bottom:0;
right:0;
width:236px;
height:136px;
background:url(celestial-images/tree.jpg) #fff;
}

ul.nav li {
list-style:none;
float:left;
}

ul#top-nav {
float:right;
}

ul#top-nav a {
color:#95CBFF;
font:11px Verdana;
text-decoration:none;
margin:0 0 0 10px;
}

ul#top-nav a:hover {
color:#fff;
}

#header h1 {
color:#fff;
font-style:italic;
font-size:200%;
font-weight:normal;
padding:90px 0 5px 0;
}

#header h1 span {
font-size:11px;
}

#header h1 a {
color:#fff;
text-decoration:none;
}

#main-nav a {
color:#95CBFF;
text-decoration:none;
padding:2px 10px;
border-left:1px solid #fff;
}

#main-nav a:hover {
color:#fff;
background:url(celestial-images/main-nav_a.gif);
}

#main-nav a.first {
border:none;
}

#container {
width:860px;
margin:35px auto;
padding-bottom:35px;
}

#sidebar {
margin:0 615px 0 0;
height:1%;
}

#sidebar h3 {
font-size:15px;
font-weight:normal;
color:#D6C8D2;
margin:0 0 10px 0;
}

#sidebar p {
padding:20px;
font-size:11px;
line-height:20px;
}

ul.links li {
list-style:none;
}

ul.links li a {
background:url(celestial-images/links_a.gif) bottom no-repeat;
color:#fff;
text-decoration:none;
display:block;
padding:4px 10px;
margin:0 0 1px 0;
}

ul.links li a:hover {
background-position:top;
}

p a {
color:#B43982;
text-decoration:none;
font-weight:bold;
}

p a:hover {
color:#fff;
}

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

#content h3 {
color:#D6C8D2;
font-size:16px;
padding:10px 0;
font-weight:normal;
background:url(celestial-images/h3.jpg) bottom left no-repeat;
margin:0 0 10px 0;
}

#content h4 {
padding:7px 0;
font-size:12px;
font-weight:normal;
text-transform:uppercase;
letter-spacing:2px;
color:#D6C8D2;
}

#content p {
padding:10px 0;
}

#content ul {
color:#000;
margin:10px 10px 10px 20px;
}

#content ul span {
color:#A3989E;
}

#content table {
width:100%;
text-align:center;
border:1px solid #4D484A;
}

#content th {
color:#D6C8D2;
border-bottom:1px solid #4D484A;
background:#252223;
}

#content tr.alt td {
background:#3F3B3C;
border-top:1px solid #4D484A;
border-bottom:1px solid #4D484A;
}

blockquote {
padding:10px 10px 10px 30px;
font-style:italic;
}


div#intro{
background: #353132;
margin:0 0 35px 0;
}

div#intro a {
color:#fff;
text-decoration:none;
}

div#intro h2 {
color:#C9C7C8;
font-style:italic;
font-weight:normal;
font-size:20px;
line-height:32px;
}

div#intro div {
padding:10px 20px;
}

b.rtop, b.rbottom{display:block;background: #312D2E}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #353132}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

#footer {
background:url(celestial-images/footer.gif) top repeat-x #242121;
clear:both;
margin:50px 0 0 0;
padding:40px 0 20px 0;
}

#footer-content {
width:860px;
margin:0 auto;
background:#242121;
}

#footer-content a.at {
display:block;
float:right;
text-align:left;
text-indent:-9999px;
height:30px;
width:30px;
background:url(celestial-images/atlogo.gif) no-repeat;
}


</style>


<!--[if IE 7]><link href="css/ie7-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
<!--[if lt IE 7]><link href="css/ie6-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
</head>
<body>
<div id="header">
  <div class="top">
    <ul class="nav" id="top-nav">
      <li><a href="http://www.free-css.com/">Sitemap</a></li>
      <li><a href="http://www.free-css.com/">Search</a></li>
      <li><a href="http://www.free-css.com/">Terms</a></li>
    </ul>
  </div>
  <h1><a href="http://www.free-css.com/">Celestial <span>A free template from Jigowatt</span></a></h1>
  <ul class="nav" id="main-nav">
    <li><a href="http://www.free-css.com/" class="first">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
  </ul>
  <div class="tree"></div>
</div>
<div id="container">
  <div id="content">
    <div id="intro"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      <div>
        <h2>Howdy, welcome to Celestial, a free template created by the people at Jigowatt Premium Templates. This template is designed to be easy to use and easy on the eyes whilst still being generic enough to be used for a multitude of web site possibilities.</h2>
      </div>
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
    <h3>Time for some examples!</h3>
    <h4>Sample Text</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis <a href="http://www.free-css.com/">pellentesque</a>. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
    <p>Phasellus non lectus. Duis pede. Nullam arcu. Ut vel odio. Praesent dictum egestas urna. Sed semper tellus at nunc. Aenean metus augue, mollis ac, euismod luctus, viverra vel, diam. Etiam elementum dui. Donec aliquam purus sed pede. Nulla facilisi.</p>
    <p>Curabitur porttitor cursus quam. <a href="http://www.free-css.com/">Curabitur</a> lacinia, tortor at consequat aliquet, libero eros bibendum orci, sit amet mattis pede purus vitae mi. Praesent eu enim ac dui faucibus consequat. Suspendisse neque nunc, porta et, aliquam a, vestibulum nec, velit. Phasellus ornare dui volutpat dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam urna. Sed tristique egestas augue. Proin in dolor id purus sollicitudin hendrerit. Phasellus <a href="http://www.free-css.com/">gravida</a> tortor a felis.</p>
    <h4>Blockquote Example</h4>
    <blockquote>
      <p>Phasellus non lectus. Duis pede. Nullam arcu. Ut vel odio. Praesent dictum egestas urna. Sed semper tellus at nunc. Aenean metus augue, mollis ac, euismod luctus, viverra vel, diam. Etiam elementum dui. Donec aliquam purus sed pede. Nulla facilisi.</p>
    </blockquote>
    <h4>List Example</h4>
    <ul>
      <li><span>Phasellus non lectus. Duis pede.</span></li>
      <li><span>Phasellus non lectus. Duis pede.</span></li>
      <li><span>Phasellus non lectus. Duis pede.</span></li>
      <li><span>Phasellus non lectus. Duis pede.</span></li>
    </ul>
    <h4>Table Example</h4>
    <table cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
        </tr>
        <tr>
          <td>2</td>
          <td>23</td>
          <td>76</td>
        </tr>
        <tr class="alt">
          <td>54</td>
          <td>233</td>
          <td>1233</td>
        </tr>
        <tr>
          <td>2</td>
          <td>23</td>
          <td>76</td>
        </tr>
        <tr class="alt">
          <td>54</td>
          <td>233</td>
          <td>1233</td>
        </tr>
        <tr>
          <td>2</td>
          <td>23</td>
          <td>76</td>
        </tr>
        <tr class="alt">
          <td>54</td>
          <td>233</td>
          <td>1233</td>
        </tr>
        <tr>
          <td>2</td>
          <td>23</td>
          <td>76</td>
        </tr>
        <tr class="alt">
          <td>54</td>
          <td>233</td>
          <td>1233</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="sidebar">
    <h3>Links</h3>
    <ul class="links">
      <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      <li><a href="http://www.free-css.com/">Google</a></li>
      <li><a href="http://www.free-css.com/">Yahoo</a></li>
      <li><a href="http://www.free-css.com/">Ebay</a></li>
    </ul>
    <p>Phasellus non lectus. Duis pede. Nullam arcu. Ut vel odio. Praesent dictum egestas urna. Sed semper tellus at nunc. Aenean metus augue, mollis ac, euismod luctus, viverra vel, diam. Etiam elementum dui. Donec aliquam purus sed pede. Nulla facilisi.</p>
  </div>
</div>
<div id="footer">
  <div id="footer-content">
    <p class="credit">Celestial template designed by: <a href="http://www.jigowattpremiumtemplates.co.uk">Jigowatt Premium Templates</a></p>
    <p>Footer content goes here</p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_swan
2.	metamorph_tiger
3.	metamorph_cats
4.	metamorph_catsworld
5.	metamorph_dolphins
6.	metamorph_eagle
7.	metamorph_feather
8.	butterfly-garden
9.	butterfly
10.	birdwatch
11.	cellulose
12.	metamorph_cell
13.	animal-planet
14.	animals-and-pets
15.	exotic-birds
16.	metamorph_bugs
17.	bugslife
18.	dogcare
19.	dogspalace
20.	metamorph_snail
21.	metamorph_killerwhale
22.	bestfriends
23.	petswebsite
24.	petcharms
25.	petpaws
26.	pets