animals-and-pets : Animal « Templates « HTML / CSS

animals-and-pets
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animals and Pets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
  background: url(animals-and-pets-images/templatemo_html_bg.jpg) repeat;
}
body {
  margin: 0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
  color: #fff;
  background: url(animals-and-pets-images/templatemo_page_bg.jpg) repeat-x  center top;
  width: 100%;
  display: table;
}

a:link, a:visited { color: #008800; text-decoration: none; } 
a:active, a:hover { color: #CC0000; text-decoration: none }

h1 {
  font-size: 18px;
  font-weight: bold;
  color: #86c111;
  background: url(animals-and-pets-images/templatemo_h1.jpg) no-repeat;
  background-position: left;
  height: 48px;
  padding-left: 38px;
  padding-top: 20px;
  
}
h2 {
  margin-top: 20px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  height: 26px;
  background: url(animals-and-pets-images/templatemo_h2.jpg) repeat-x;
}

#templatemo_container {
  width: 900px;
  margin: auto;
}
#templatemo_topsection {
  float: left;
  width: 900px;
  height: 108px;

}
#templatemo_topsection_title {
  float: left;
  width: 300px;
  font-size: 22px;
  font-weight: bold;
  margin-top: 20px;
  height: 34px;
  padding-top: 10px;
  padding-left: 55px;
  background: url(animals-and-pets-images/templatemo_logo.png) no-repeat;
}
#templatemo_topsection_title img {
  float: left;
}
.templatemo_topmenu{
  float: right;
  margin-top: 30px;
}

.templatemo_topmenu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.templatemo_topmenu li{
  display: inline;
}

.templatemo_topmenu li a{
  float: left;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #fff;
  width: 80px;
  height: 24px;
  margin-left: 10px;
  padding-top: 3px;
  background: url(animals-and-pets-images/templatemo_top_button.png) no-repeat;
}

/*    CSS Credit: w w w . t e m p l a t e m o . c o m    */

.templatemo_topmenu li a:hover, .templatemo_topmenu li .current{
  color: #fff;
  background: url(animals-and-pets-images/templatemo_top_current.png) no-repeat;
}

#templatemo_left_column {
  float: left;
  width: 323px;
}
#templatemo_left_top {
  float: left;
  width: 323px;
  height: 219px;
  background: url(animals-and-pets-images/templatemo_left_header.jpg) no-repeat;
}
.templatemo_leftmenu {
  float: left;
  width: 260px;
  margin-top: 0px;
}
.templatemo_leftmenu ul {
  list-style-type: none;
  padding-left: 70px;
  margin:10px;
}
.templatemo_leftmenu li a {
  display: block;
  height: 20px;
  font-size: 11px;
  color: #3c4826;
  background: url(animals-and-pets-images/templatemo_menu_button.gif);
}
.templatemo_leftmenu li a:hover, .templatemo_leftmenu li .current {
  color: #000;
}
#templatemo_right_column {
  float: right;
  width: 577px;
  background: url(animals-and-pets-images/templatemo_right_bg.png) repeat-y;

}
#templatemo_right_top {
  float: left;
  margin: auto;
  width: 577px;
  height: 107px;
  background: url(animals-and-pets-images/templatemo_right_header.jpg) no-repeat;
}
#templatemo_right_mid {
  float: left;
  width: 446px;
  margin: 0px auto;
  background: #fff;
  color: #666666;
  padding: 0px 45px 0px 45px;
  text-align: justify;
}
#templatemo_right_mid img {
  float: right;
  padding-left: 10px;
}
#templatemo_right_mid strong {
  float: right;
  padding-right: 60px;
  background: url(animals-and-pets-images/templatemo_star.jpg) no-repeat;
  background-position: right;
  color: #eec400;
}
#templatemo_right_bot {
  float: left;
  margin-top: 0px;
  padding-top: 50px;
  width: 561px;
  height: 25px;
  color: #333333;
  text-align: center;
  font-weight: bold;
  background: url(animals-and-pets-images/templatemo_right_footer.jpg) no-repeat;
}

.button {
  font-family: Tahoma, "Arial Black";
  float: left;
  width: 165px;
  padding: 10px 0px 0px 50px;
  margin: 20px 0px 0px 50px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  height: 30px;
  background: url(animals-and-pets-images/templatemo_h3.png) no-repeat;
}
.check {
  float: left;
  width: 323px;
  text-align: center;
}

</style>


</head>
<body>
<div id="templatemo_container">
  <div id="templatemo_topsection">
    <div id="templatemo_topsection_title">ANIMALS &amp; PETS</div>
    <div class="templatemo_topmenu">
      <ul>
        <li><a href="http://www.free-css.com/" class="current">HOME</a></li>
        <li><a href="http://www.free-css.com/">BLOG</a></li>
        <li><a href="http://www.free-css.com/">GALLERY</a></li>
        <li><a href="http://www.free-css.com/">FORUM</a></li>
        <li><a href="http://www.free-css.com/">CONTACT</a></li>
      </ul>
    </div>
  </div>
  <div id="templatemo_left_column">
    <div id="templatemo_left_top"></div>
    <div class="button">CATEGORIES</div>
    <div class="templatemo_leftmenu">
      <ul>
        <li><a href="http://www.free-css.com/">&raquo; Vestibulum dapibus tortor</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Cum sociis natoque penatibus</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Lorem ipsum dolor sit amet </a></li>
        <li><a href="http://www.free-css.com/">&raquo; Cras urna metus, feugiat non </a></li>
        <li><a href="http://www.free-css.com/">&raquo; Free CSS Layouts </a></li>
      </ul>
    </div>
    <div class="button">ARCHIVES</div>
    <div class="templatemo_leftmenu">
      <ul>
        <li><a href="http://www.free-css.com/">&raquo; Duis pulvinar scelerisque ante</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Maecenas aliquam</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Vestibulum quis pede </a></li>
        <li><a href="http://www.free-css.com/">&raquo; Suspendisse potenti</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Aliquam tristique lacus</a></li>
      </ul>
    </div>
    <div class="button">QUICK LINKS</div>
    <div class="templatemo_leftmenu">
      <ul>
        <li><a href="http://www.free-css.com/">&raquo; Web Design &amp; Development</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Free Stock Photos</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Multimedia and 3D</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Flash Templates</a></li>
        <li><a href="http://www.free-css.com/">&raquo; Free CSS Websites</a></li>
      </ul>
    </div>
    <div class="check"><a href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS!" src="http://jigsaw.w3.org/css-validator/animals-and-pets-images/vcss-blue" vspace="8" border="0" /></a></div>
  </div>
  <div id="templatemo_right_column">
    <div id="templatemo_right_top"></div>
    <div id="templatemo_right_mid">
      <h1>WELCOME TO OUR  WEBSITE</h1>
      <p><img src="animals-and-pets-images/templatemo_photo1.jpg" alt="" width="139" height="137" />This  free CSS template is provided by TemplateMo. You may use this layout for your websites.</p>
      <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. </p>
      <h2>Aliquam tristique lacus in sapien </h2>
      <p>Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
      <p><strong>READ COMMENT - 3</strong></p>
      <p>&nbsp;</p>
      <h2>Vivamus a massa</h2>
      <p><img src="animals-and-pets-images/templatemo_photo2.jpg" alt="" width="139" height="137" />Donec iaculis felis id neque. Morbi nunc. Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Nulla et augue. Sed eu nunc quis pede tristique suscipit. Nam sit amet justo vel libero tincidunt dignissim. Cras magna velit, pellentesque mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. Fusce ac orci sit amet velit ultrices condimentum. Integer imperdiet odio ac eros. Ut id massa. Nullam nunc. Vivamus sagittis varius lorem.</p>
      <p><strong>READ COMMENT - 5</strong></p>
    </div>
    <div id="templatemo_right_bot">Copyright  Your Company Name | Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
  </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.	celestial
12.	cellulose
13.	metamorph_cell
14.	animal-planet
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