my_dog_spot
<!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" lang="en" xml:lang="en">
<head>
<title>My Dog Spot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Homefront Studios" />
<meta name="description" content="oswd, open source template" />
<style type='text/css'>
body,html {
background:#DFEECC url(my_dog_spot-images/bg.gif);
margin:0;
padding:0;
}
body {
min-width:800px;
max-width:1200px;
font:0.8em/1.4em Tahoma, Geneva, sans-serif;
}
a:link {
color:#4298BC;
}
a:visited {
color:#C96;
}
a:hover,a:active {
color:#9F9;
}
#wrap {
background:#1c3f4f url(my_dog_spot-images/pawprint.gif) no-repeat bottom right;
width:80%;
border:3px solid #00364F;
margin:0 auto;
padding:0;
}
#header {
background:#1c3f4f url(my_dog_spot-images/photo.gif) no-repeat center right;
height:220px;
margin:0 2em;
padding:0;
}
#header h1 {
color:#55BA55;
font:bold 500% "Courier New", Courier, monospace;
margin:0;
padding:0;
}
#divider {
background:#1c3f4f url(my_dog_spot-images/collar_bg.gif) repeat-x;
text-align:right;
}
#main {
background:#1c3f4f;
float:left;
width:64%;
border-right:1px dashed #496572;
margin:1em 0;
padding:0;
}
#main h2,#main h3,#main p {
padding:0 20px;
}
#main p {
color:#D2E7B7;
}
#main h2 {
color:#55BA55;
font:bold 200% "Courier New", Courier, monospace;
margin-bottom:0;
}
#main h3 {
color:#55BA55;
font:bold 150% "Courier New", Courier, monospace;
margin-bottom:0;
}
#sidebar {
float:right;
width:34%;
margin:1em 0;
}
#sidebar h3,#sidebar p {
padding:0 10px 0 0;
}
#sidebar p {
color:#D2E7B7;
}
#sidebar h3 {
color:#55BA55;
font:bold 150% "Courier New", Courier, monospace;
margin-bottom:0;
}
.linklist {
list-style-type:none;
margin:1em 0 0;
padding:0;
}
.linklist li {
padding-left:20px;
margin-bottom:10px;
background:url(my_dog_spot-images/bullet.gif) no-repeat center left;
}
.linklist li a {
text-decoration:none;
}
#footer {
color:#9F9;
border-top:1px dashed #496572;
clear:both;
font-size:0.8em;
text-align:center;
}
#footer p {
margin:0;
padding:5px;
}
#footer a:link {
color:#9cf;
}
#footer a:visited {
color:#C96;
}
#footer a:active,#footer a:hover {
color:#cfc;
}
sup,sub {
color:#9F9;
margin:0;
padding:0;
}
blockquote {
background:#1c3f4f url(my_dog_spot-images/blockquote_bg.gif) no-repeat top left;
font:1em/1.3em "Courier New", Courier, monospace;
color:#dfeecc;
letter-spacing:.05em;
margin-top:15px;
margin-bottom:15px;
padding:6px;
}
/* The prop/clear hack */
/* This hack takes care of IE's disregard for the min-height property and validates as proper CSS */
/* Used to prop the footer up so the dog paw background image displays in its entirety in the footer area */
/* The .clear div must follow the content after the .prop div for older browsers to handle the .prop div properly */
/* See http://www.greywyvern.com/code/min-height-hack.html for complete discussion of this hack */
.prop {
height:102px;
width:1px;
float:right;
}
.clear {
clear:both;
height:1px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>My<br />Dog<br />Spot</h1></div><!-- header -->
<div id="divider"><img src="my_dog_spot-images/collar_right.gif" width="514" height="80" alt="" /></div><!-- divider -->
<div id="main">
<h2>Welcome to My Dog Spot</h2>
<p>Fun and frisky, just like your best friend! Take this template for a walk. Woof!</p>
<p>Use this template for a blog, or for a website where you'll have your navigation in the right sidebar.
The fluid layout has a minimum width of 800px and a maximum width of 1200px, which will keep the line
lengths at a reasonable size.</p>
<p>This template validates as proper XHTML/CSS, with none of those pesky tables or proprietary tags to mess things up.</p>
<p>Thanks for looking!</p>
<blockquote>
<b>Blockquote</b>
<br />
Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.
</blockquote>
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
</div><!-- main -->
<div id="sidebar">
<h3>Design Origins</h3>
<p>Made on Earth by humans in the web design shop of Homefront Studios.
<br />
...With feeling!<sup>*</sup></p>
<p><sup>* And a good amount of pixie dust</sup></p>
<h3>Link Roll</h3>
<ul class="linklist">
<li><a href="http://www.homefrontstudios.com">Homefront Studios</a></li>
<li><a href="http://www.homefrontstudios.com/eme.asp">Contact me</a></li>
<li><a href="http://www.oswd.org/">OSWD</a></li>
<li><a href="http://validator.w3.org/check/referer">Valid XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></li>
</ul>
<h3>Using this Design</h3>
<p>This template is released as an open source web design, which means that you are free to use it
and edit it any way you wish for personal or commercial purposes.</p>
<p>All of the images used are made by Homefront Studios. There are no usage restrictions on any image.</p>
<p>We would feel the love if you'd leave the Homefront Studios link in the footer, or somewhere on your site,
though it's not required. If you use this template, we'd love to see it grow, so please, <a
href="http://www.homefrontstudios.com/eme.asp">drop us a line</a> and tell us where we can sneak a peek
at our little guy.</p>
</div><!-- sidebar -->
<div id="footer">
<div class="prop"></div><!-- see stylesheet for notes on the prop/clear hack -->
<p>Designed by <a href="http://www.homefrontstudios.com"
title="Open Source Template Designed by Homefront Studios">Homefront Studios Web Design</a></p>
<div class="clear"></div><!-- see stylesheet for notes on the prop/clear hack -->
</div><!-- footer -->
</div><!-- wrap -->
</body>
</html>
Related examples in the same category