somewhere-peaceful
<!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" xml:lang="en" lang="en">
<head>
<title>Somewhere Peaceful</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type='text/css'>
@charset "UTF-8";
/*
!!DO NOT DELETE THIS COMMENT!!
"Somewhere Peaceful v1.0" (11th December 2007) (C) Gordon Mackay.
- Website: http://gordonmac.com/
- Contact me: http://gordonmac.com/contact/
- Free stuff: http://gordonmac.com/downloads/
----------------------------------------------------*/
/*
@Basic styles
----------------------------------------------------*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
background: #8D927C url(somewhere-peaceful-images/bg_body.jpg) repeat-x;
margin: 0;
padding: 0;
min-width: 800px;
text-align: center;
}
h2, h3, h4
{
font-size: 1.2em;
font-weight: normal;
margin: 10px 0 0 0;
}
#wrapper-3 p
{
margin: 8px 0;
padding: 0;
line-height: 1.3em;
}
#wrapper-3 ul
{
list-style-type: none;
margin: 8px 0;
padding: 0;
}
/*
@Generic anchor (link) styles
----------------------------------------------------*/
a:link, a:visited
{
color: #4f4f3f;
}
a:hover, a:active
{
color: #000000;
}
/*
@Inline image styles
----------------------------------------------------*/
img.float-left
{
float: left;
margin: 0 6px 6px 0;
}
img.float-right
{
float: right;
margin: 0 0 6px 6px;
}
img.border
{
background: #FFF;
padding: 2px;
border: 1px solid #999;
}
/*
@Tab navbar styles
----------------------------------------------------*/
#hornav ul
{
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0;
text-align: center;
margin-bottom: 3px;
font-size: .8em;
text-transform: uppercase;
}
#hornav ul li
{
display: inline;
margin: 0 2px 0 0;
padding: 3px 0 3px 10px;
background: url(somewhere-peaceful-images/bg_hornav-l.jpg) no-repeat top left;
}
#hornav ul li a
{
text-decoration: none;
padding: 3px 10px 3px 0;
margin: 0;
background: url(somewhere-peaceful-images/bg_hornav-r.jpg) no-repeat top right;
}
#hornav ul li a:link, #hornav ul li a:visited
{
color: #3e3f2f;
}
#hornav ul li a:hover, #hornav ul li a:active
{
color: #000000;
}
/*
@Secondary navigation styles
----------------------------------------------------*/
#navcontainer
{
background: transparent url(somewhere-peaceful-images/bg_navlist-top.jpg) no-repeat top center;
margin: 0;
padding: 12px 0 0 0;
}
#navcontainer ul
{
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0 0 12px 0;
border-top: 1px solid #FFF;
background: transparent url(somewhere-peaceful-images/bg_navlist-bottom.jpg) no-repeat bottom center;
}
#navcontainer a
{
display: block;
padding: 3px 6px;
width: 168px;
margin: 0 10px;
background-color: #c4bfac;
border-bottom: 1px solid #FFF;
}
#navcontainer a:link, #navlist a:visited
{
color: #FFF;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #90937e;
color: #FFF;
}
/*
@Masthead text styles
----------------------------------------------------*/
#branding
{
margin: 0;
padding: 0;
}
#branding h1
{
color: #3e3f2f;
margin: 0;
padding: 20px 0 20px 0;
border-top: 4px solid #656e5d;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
font: normal 1.4em/normal Georgia, "Times New Roman", Times, serif;
}
/*
@Layout styles
----------------------------------------------------*/
#wrapper-body
{
background: transparent url(somewhere-peaceful-images/bg_wrapper-body.jpg) no-repeat top right;
width: auto;
margin: 0;
padding: 0;
}
#wrapper-1
{
width: auto;
background: transparent url(somewhere-peaceful-images/bg_wrapper-1.jpg) no-repeat;
margin: 0;
padding: 0;
}
#wrapper-2
{
width: 780px;
margin: 0 auto;
text-align: center;
}
#wrapper-3
{
background: url(somewhere-peaceful-images/bg_wrapper-3.jpg) repeat-y;
color: #333;
text-align: left;
}
#content-top
{
margin: 0;
height: 15px;
background: url(somewhere-peaceful-images/bg_content-top.png) no-repeat;
font-size: 0;
line-height: 0;
}
#content-1
{
float: left;
width: 200px;
font-size: .75em;
margin: 0;
padding: 0;
}
#content-2
{
float: left;
width: 350px;
margin: 0 15px;
padding: 0;
font-size: .75em;
}
#content-3
{
float: left;
width: 200px;
font-size: .75em;
margin: 0;
padding: 0;
}
#content-bottom
{
clear: both;
height: 15px;
background: url(somewhere-peaceful-images/bg_content-bottom.jpg) no-repeat;
font-size: 0;
line-height: 0;
}
.content-wrap
{
padding: 0 10px 5px 10px;
margin: 0;
}
#footer p
{
font-size: .75em;
margin: 12px 0;
}
/*
@Blog post styles
----------------------------------------------------*/
.date
{
float: left;
height: 52px;
width: 52px;
background: url(somewhere-peaceful-images/date.png) no-repeat;
margin-right: 10px;
padding-top: 0px;
line-height: normal;
}
.date .month
{
display: block;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 4px;
text-transform: uppercase;
}
.date .day
{
display: block;
text-align: center;
padding-top: 5px;
color: #222;
font-size: 18px;
font-weight: bold;
}
.meta
{
display: block;
font-size: 11px;
color: #666;
clear: right;
}
.blog-entry
{
clear: both;
padding-top: 2px;
}
#searchform
{
margin: 8px 0;
padding: 0;
}
/*
@Search form styles
----------------------------------------------------*/
#searchform fieldset
{
margin: 0;
padding: 0;
border: 0;
}
#searchform label
{
color: #999;
display: none;
}
#searchform input
{
width: 160px;
color: #222;
}
#searchform #submitquery
{
display: none;
}
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
<div id="branding">
<h1>{ Somewhere Peaceful }</h1>
</div>
<div id="hornav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">About Moi</a></li>
<li><a href="http://www.free-css.com/">Contact Info</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div id="wrapper-2">
<div id="content-top" class="png"> </div>
<div id="wrapper-3">
<div id="content-1">
<div class="content-wrap">
<h2>Welcome</h2>
<p><img src="somewhere-peaceful-images/placeholder2.jpg" class="float-right border" width="80" height="72" alt="#" /> Lorem ipsum dolor <a href="http://www.free-css.com/">sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Browser Compatibility</h2>
<ul>
<li>Safari</li>
<li>Camino</li>
<li>Firefox (Windows & OS X)</li>
<li>Opera (Windows & OS X)</li>
<li>Internet Explorer 7</li>
<li>Internet Explorer 6+</li>
<li>Internet Explorer 5.5</li>
</ul>
<h2>Made in Scotland</h2>
<p>This page was lovingly crafted using <a target="_blank" href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a>, errorless CSS and orginal graphics drawn by Gordon Mackay in Adobe Fireworks CS3 instead of 2<sup>nd</sup> rate, free stock images.</p>
</div>
</div>
<div id="content-2">
<div class="content-wrap">
<p><img src="somewhere-peaceful-images/placeholder.jpg" width="330" height="330" alt="" /></p>
<h2> <span class="date png"> <span class="month"> Dec </span> <span class="day"> 25 </span> </span> Works with Japanese text <span class="meta">Posted in <a href="http://www.free-css.com/">Japanese</a> by Gordon Mackay.</span></h2>
<div class="blog-entry">
<p lang="ja" xml:lang="ja" dir="ltr">??? ?? ????? ?????, ??? ???? ??????? ??, ?? ??? ???? ????? ??????? ?????? ????????? ?? ???, ??? ?? ?????? ??????, ??? ????? ?????? ?? ????? ?????? ?? ???, ??? ???? ????? ????????? ??, ??? ?????? ?????? ?? ??? ???? ???? ????????? ??, ?????? ??????? ?? ??? ????? ?????? ?? ??? ??? ?? ???? ?????, ??? ?? ???? ???? ?????, ????? ??????? ??? ???</p>
</div>
<h2> <span class="date png"> <span class="month"> Dec </span> <span class="day"> 24 </span> </span> Homemade images <span class="meta">Posted in <a href="http://www.free-css.com/">Adobe Fireworks CS3</a> by Gordon Mackay.</span></h2>
<div class="blog-entry">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h2> <span class="date png"> <span class="month"> Dec </span> <span class="day"> 23 </span> </span> Valid XTML & CSS <span class="meta">Posted in <a href="http://www.free-css.com/">HTML</a> by Gordon Mackay.</span></h2>
<div class="blog-entry">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h3>More Content …</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="content-3">
<div class="content-wrap">
<h2>Search this site</h2>
<p>If you cant find what you're looking for try using the site's search system:</p>
<form id="searchform" accept-charset="UTF-8" action="index.htm" method="get">
<fieldset>
<label for="searchthis">Search</label>
<input type="text" name="searchthis" id="searchthis" value="" />
<input type="submit" name="submitquery" id="submitquery" value="Go" />
</fieldset>
</form>
<h2>Secondary Menu</h2>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www.free-css.com/">Link 1</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<div class="content-wrap" id="post-nav">
<h2>About me</h2>
<p><img src="somewhere-peaceful-images/author.jpg" class="float-left border" width="80" height="72" alt="" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="content-bottom"> </div>
</div>
<div id="footer">
<p>©2007 Gordon Mackay. All rights reserved.</p>
<script type="text/javascript">
<!--
applesearch.init();
//-->
</script>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category