petswebsite
<!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>Pets Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*** Global Settings ****/
body {font : normal 12px/1.6em Arial, Helvetica, sans-serif;color : #2a3845;margin : 0;padding : 0;background:#FFFFFF;}
p { margin : 0;padding : 0;}
a:visited, a:link {color : #a43b55;text-decoration : underline;background:none;}
a:hover {color : #a43b55;text-decoration : none;background:none;}
h1 { color : #7a2e40;margin: 0px 0px 10px 0px;padding-bottom : 10px;font : normal 17px Georgia, serif;border-bottom : 1px solid #efece7;}
h2 {color : #7a2e40;margin : 20px 0 10px;padding-bottom : 10px;font : normal 17px Georgia, serif;border-bottom : 1px solid #efece7;}
h3 {color : #7a2e40;margin : 10px 0;padding-bottom : 10px;font : bold 14px Arial, Helvetica, sans-serif;border-bottom : 1px solid #efece7;}
ul {padding:0;margin:0 0 0 17px;list-style: square url(petswebsite-images/bullet.gif);}
.box {background : #f7f7f7;border : 1px solid #f0e9eb;padding : 15px;}
/*** Layout ****/
#wrapper {margin : 0 auto;width : 776px;border-left : 1px solid #f0e9eb;border-right : 1px solid #f0e9eb;}
#header-{margin : 0 1px;}
#bg {height : 36px;background : url(petswebsite-images/bg.gif) repeat-x;}
#nav {background : #7a2e40;padding : 10px 20px;text-align : right;color : #f6dde3;}
#nav a:visited, #nav a:link {text-decoration : none;color : #f6dde3;}
#nav a:hover {text-decoration : underline;color : #f6dde3;}
#main-content {margin : 0 auto;}
#logo {margin-bottom : 45px;}
.logotxt1 {font : normal 18px Georgia, serif;color : #fa7393;margin : 10px 0 0 15px;}
.logotxt2 {font : normal 18px Georgia, serif;color : #7a2e40; }
#left-column {width : 440px;padding : 0 30px 30px;float : left;}
#right-column {width : 270px;float : right;}
.crd a:visited, .crd a:link, .crd a:hover{text-decoration : none;color : #2a3845;cursor: text;}
#footer {background : #f7f7f7;border-top : 1px solid #f0e9eb;padding : 10px 15px;clear : both;}
/*** SideBAR ***/
#main-image {text-align : center;}
.sidebar {width : 218px;margin : 0 auto;padding : 10px 25px;background : url(petswebsite-images/shadow.jpg) no-repeat top;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Pets Community</a> | <a href="http://www.free-css.com/">About us</a> | <a href="http://www.free-css.com/">Pet Gallery</a> | <a href="http://www.free-css.com/">Latest News</a> | <a href="http://www.free-css.com/">Contact us</a></div>
<div id="bg"></div>
</div>
<div id="main-content">
<div id="left-column">
<div id="logo"><img src="petswebsite-images/big-paw.gif" alt="" width="42" height="45" align="left" /><span class="logotxt1">Pet Lovers</span> <span class="logotxt2">Template</span><br />
<span style="margin-left:15px;">Your Slogan goes here</span></div>
<div class="box">
<h1>Open Source Free Pet Template</h1>
<p>This Pet Lovers template is an open source template and is released and distributing under Creative Commons 2.5 licence. You are free to use this template in any way you like. All I ask for is that you leave the web site Design credit links in the footer of this template intact. Here is how a list looks like: </p>
<ul style="margin-top:10px;">
<li>Lorem ipsum dolor sit amet, consetetur sadipscing.</li>
<li>Tempor invidunt ut labore et dolore.</li>
<li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li>Stet clita kasd gubergren, no sea takimata sanctus.</li>
<li>Stet clita kasd gubergren</li>
</ul>
</div>
<h2>Some text heading in H2 Tag</h2>
<p><img src="petswebsite-images/dog.jpg" alt="" width="92" height="129" align="left" style="margin-right:10px;margin-bottom:10px;" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor .</p>
<p><br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum nonumy eirmod tempor . invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
</div>
<div id="right-column">
<div id="main-image"><img src="petswebsite-images/lady.jpg" alt="" width="153" height="222" /></div>
<div class="sidebar">
<h3>About this Site</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In egestas nisl sit amet odio. Duis iaculis metus eu nulla. Donec venenatis sapien sed urna. Donec et felis ut elit elementum pellentesque. Praesent bibendum turpis semper lacus.</p>
<h3>Related Links</h3>
<div class="box">
<ul>
<li><a href="http://www.free-css.com/">Pet Medicine</a></li>
<li><a href="http://www.free-css.com/">Yahoo Pets & Animals</a></li>
<li><a href="http://www.free-css.com/">Web site Designers</a></li>
<li><a href="http://www.free-css.com/">Professional Web Design</a></li>
<li><a href="http://www.free-css.com/">Free Flash Games</a></li>
<li><a href="http://www.free-css.com/">Open Source Web Design</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">Copyright © 2006 Your Company Name, All rights reserved.<br />
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2">CSS</a> - Web site Design by : <a href="http://www.web-Designers-directory.org/">WDD</a></div>
</div>
</body>
</html>
Related examples in the same category