zionnarrows : Effect 2 « Templates « HTML / CSS

zionnarrows
   

<!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">
<head>
<title>Zion Narrows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px 0;
  padding: 0;
  background: #FFFFFF;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

a {
  color: #5D0E0E;
}

a:hover {
  text-decoration: none;
  color: #FF0000;
}

.image {
  float: left;
  margin: 0 15px 10px 0;
}

/* Header */

#header {
  width: 760px;
  height: 120px;
  margin: 0 auto;
  background: #000000 url(zionnarrows-images/img1.jpg);
}

#header h1, #header h2 {
  float: left;
  padding: 94px 0 0 7px;
  font-size: 18px;
}

#header a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Pages */

#pages {
  clear: both;
  width: 760px;
  height: 43px;
  margin: 0 auto;
  background: #000000 url(zionnarrows-images/img2.gif);
}

#pages h2 {
  display: none;
}

#pages ul {
  float: right;
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
}

#pages li {
  display: inline;
}

#pages a {
  display: block;
  float: left;
  height: 25px;
  margin: 0 2px 0 0;
  padding: 7px 15px 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -1px;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
}

#pages a:hover, #pages .active a {
  padding-left: 14px;
  padding-right: 14px;
  background: #580505 url(zionnarrows-images/img3.gif);
  border: 1px solid #000000;
  border-bottom: none;
}

/* Boxed */

.boxed {
  float: right;
  width: 180px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.boxed .heading {
  height: 26px;
  padding: 6px 0 0 10px;
  background: #5F1010 url(zionnarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: 1em;
  color: #FFFFFF;
}

.boxed .content {
  background: #F2F2F2 url(zionnarrows-images/img5.gif) repeat-x left bottom;
}

.boxed .content ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

.boxed .content li {
  padding: 3px 0;
  border-top: 1px dotted #5D0E0E;
}

.boxed .content li.first {
  border: none;
}

.boxed .content a {
  padding-left: 10px;
  background: transparent url(zionnarrows-images/img8.gif) no-repeat left center;
  text-decoration: none;
  color: #5D0E0E;
}

.boxed .content a:hover {
  color: #FF0000;
}

/* Posts */

.post {
  background: #F2F2F2 url(zionnarrows-images/img5.gif) repeat-x left bottom;
}

.post .title {
  padding: 0 0 0 13px;
  background: #FFFFFF url(zionnarrows-images/img9.gif) no-repeat left center;
  color: #000000;
}

.post .posted {
  padding: 2px 10px 4px 10px;
  background: #5F1010 url(zionnarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: .7em;
  font-weight: normal;
  color: #FFFFFF;
}

.post .story {
  padding: 10px 20px;
}

.post .meta {
  padding: 1px 10px;
}

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Posts */

#posts {
  float: left;
  width: 370px;
}

/* Archives */

#archives {
}

/* Search */

#search form {
  margin: 0;
  padding: 20px 10px;
}

#textfield1 {
  width: 110px;
  padding: 2px 5px;
  background: #894F4F url(zionnarrows-images/img6.gif) repeat-x;
  border: 1px solid #000000;
  font: bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

#submit1 {
  width: 30px;
  background: #5F1010 url(zionnarrows-images/img7.gif) repeat-x;
  border: 1px solid #000000;
  text-transform: uppercase;
  font: bold 9px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Footer */

#footer {
  clear: both;
  width: 760px;
  margin: 0 auto;
  background: #FFFFFF url(zionnarrows-images/img5.gif) repeat-x;
}

#footer p {
  padding: 10px;
  font-size: .8em;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="http://www.free-css.com/">Zion Narrows</a></h1>
  <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="http://www.free-css.com/">Home</a></li>
    <li><a id="page2" href="http://www.free-css.com/">My Photos</a></li>
    <li><a id="page3" href="http://www.free-css.com/">My Favorites</a></li>
    <li><a id="page4" href="http://www.free-css.com/">About Me</a></li>
    <li><a id="page5" href="http://www.free-css.com/">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to Zion Narrows!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Zion Narrows</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  header photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
      </div>
      <div class="meta">
        <p>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Sample Tags</h2>
      <h3 class="posted">Posted on January 1st, 2007 by Author</h3>
      <div class="story">
        <p>An ordered list:</p>
        <ol>
          <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
          <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li>
        </ol>
        <p>A blockquote:</p>
        <blockquote>
          <p>&#8220;Et pulvinar pede ligula a  sapien. Donec fermentum condimentum nisi. Proin iaculis mauris id lorem  viverra molestie. Duis vel orci. Nam consequat. Morbi nec lacus.&#8221;</p>
        </blockquote>
      </div>
      <div class="meta">
        <p>Filed under <a href="http://www.free-css.com/" class="category">Uncategorized</a> | <a href="http://www.free-css.com/" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
  </div>
  <div id="archives" class="boxed">
    <h2 class="heading">Archives</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="http://www.free-css.com/">February</a> (7)</li>
        <li><a href="http://www.free-css.com/">January 2007</a> (31)</li>
        <li><a href="http://www.free-css.com/">December 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">November 2006</a> (30)</li>
        <li><a href="http://www.free-css.com/">October 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">September 2006</a> (30)</li>
        <li><a href="http://www.free-css.com/">August 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">July 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">June 2006</a> (30)</li>
        <li><a href="http://www.free-css.com/">May 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">April 2006</a> (30)</li>
        <li><a href="http://www.free-css.com/">March 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">February 2006</a> (28)</li>
        <li><a href="http://www.free-css.com/">January 2006</a> (31)</li>
        <li><a href="http://www.free-css.com/">December 2005</a> (31)</li>
        <li><a href="http://www.free-css.com/">November 2005</a> (30)</li>
        <li><a href="http://www.free-css.com/">October 2005</a> (31)</li>
        <li><a href="http://www.free-css.com/">September 2005</a> (30)</li>
        <li><a href="http://www.free-css.com/">August 2005</a> (31)</li>
        <li><a href="http://www.free-css.com/">July 2005</a> (31)</li>
        <li><a href="http://www.free-css.com/">June 2005</a> (30)</li>
        <li><a href="http://www.free-css.com/">May 2005</a> (31)</li>
        <li><a href="http://www.free-css.com/">April 2005</a> (30)</li>
        <li><a href="http://www.free-css.com/">March 2005</a> (31)</li>
      </ul>
    </div>
  </div>
  <div id="search" class="boxed">
    <h2 class="heading">Search</h2>
    <div class="content">
      <form method="get" action="http://www.free-css.com/">
        <div>
          <input type="text" id="textfield1" name="textfield1" value="" size="18" />
          <input type="submit" id="submit1" name="submit1" value="Go" />
        </div>
      </form>
    </div>
  </div>
  <div id="categories" class="boxed">
    <h2 class="heading">Categories</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="http://www.free-css.com/">Quisque vestibulum</a></li>
        <li><a href="http://www.free-css.com/">Sed a nisl a lacus</a></li>
        <li><a href="http://www.free-css.com/">Quisque sagittis</a></li>
        <li><a href="http://www.free-css.com/">Etiam volutpat</a></li>
        <li><a href="http://www.free-css.com/">In aliquet hendrerit</a></li>
        <li><a href="http://www.free-css.com/">Suspendisse iaculis</a></li>
        <li><a href="http://www.free-css.com/">Nam vel risus at</a></li>
        <li><a href="http://www.free-css.com/">Praesent sit amet</a></li>
        <li><a href="http://www.free-css.com/">Quisque vestibulum</a></li>
        <li><a href="http://www.free-css.com/">In aliquet hendrerit</a></li>
        <li><a href="http://www.free-css.com/">Suspendisse iaculis</a></li>
        <li><a href="http://www.free-css.com/">Nam vel risus at</a></li>
        <li><a href="http://www.free-css.com/">Praesent sit amet</a></li>
        <li><a href="http://www.free-css.com/">Quisque vestibulum</a></li>
      </ul>
    </div>
  </div>
  <div id="blogroll" class="boxed">
    <h2 class="heading">Blogroll</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="http://www.free-css.com/">AnotherFriendlySite.net</a></li>
        <li><a href="http://www.free-css.com/">CoolSite.com</a></li>
        <li><a href="http://www.free-css.com/">MyBestFriend.com</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Zion Narrows. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>
Related examples in the same category

1.	bigpixels
2.	binary-news
3.	mosaic
4.	perfection
5.	plain1
6.	plain2
7.	plastic-surgery
8.	plastics
9.	overdose
10.	outlined
11.	optimism
12.	optimistic
13.	Modern_Theme
14.	MultiStrangeColor
15.	modern
16.	minimalistic
17.	primitive
18.	sparkle
19.	sparkling
20.	spotlight
21.	simplyfluid
22.	slider
23.	pragmatic
24.	popular
25.	primitif
26.	pure-web-2.0
27.	pure
28.	reflection
29.	reflections
30.	royal-cyan
31.	royal_policy
32.	smalltown
33.	smallwindow
34.	smartdesign
35.	smarttouch
36.	splendid
37.	workfire
38.	webtile
39.	Wide_Side
40.	zionnarrow
41.	xtreme
42.	ZEN
43.	zenlike
44.	wondrous
45.	stonewalled
46.	tattoopatt
47.	tattoopattern
48.	tastelessly
49.	tasty
50.	thebarn
51.	tinfoil_helmet
52.	tomato
53.	metal-feel
54.	metal
55.	historical
56.	historicpaper
57.	historyofwar
58.	lonelyness