somewhere-peaceful : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
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.jpgrepeat-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-p
{
  margin: 8px 0;
  padding: 0;
  line-height: 1.3em;
}

#wrapper-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.jpgno-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.jpgno-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.jpgno-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.jpgno-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.jpgno-repeat top right;
  width: auto;
  margin: 0;
  padding: 0;
}

#wrapper-1
{
  width: auto;
  background: transparent url(somewhere-peaceful-images/bg_wrapper-1.jpgno-repeat;
  margin: 0;
  padding: 0;
}

#wrapper-2
{
  width: 780px;
  margin: auto;
  text-align: center;
}

#wrapper-3
{
  background: url(somewhere-peaceful-images/bg_wrapper-3.jpgrepeat-y;
  color: #333;
  text-align: left;
}

#content-top
{
  margin: 0;
  height: 15px;
  background: url(somewhere-peaceful-images/bg_content-top.pngno-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.jpgno-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.pngno-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-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">&nbsp;</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 &amp; OS X)</li>
              <li>Opera (Windows &amp; 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 &amp; 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 &hellip;</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">&nbsp;</div>
      </div>
      <div id="footer">
        <p>&copy;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
1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.sindromk
96.singapore
97.sinorcaish
98.six-oh-six
99.sixpence
100.sixties_style
101.skipopia
102.skitemplate
103.sky
104.sliced
105.slight_amnesia
106.socialnet
107.softenedcells
108.solemnity
109.solitude
110.soloss
111.solutions
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.