belowthehorizon : Design 4 « Templates « HTML / CSS






belowthehorizon

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Below the Horizon by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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: 0;
  padding: 0;
  background: #0D0D0D url(belowthehorizon-images/img1.gif) repeat-y center top;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #707070;
}

h1, h2, h3 {
  text-transform: lowercase;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-style: italic;
  color: #FF941D;
}

h2 { font-size: 24px; }
h3 { font-size: 18px; }

p, ol, ul, blockquote {
  line-height: 22px;
}

a {
  border-bottom: 1px dotted #707070;
  text-decoration: none;
  color: #BFBFBF;
}

a:hover {
  border: none;
}

strong {
  color: #8D8C8C;
}

/* Posts */

.post {
  margin-bottom: 9px;
  padding: 20px 40px 20px 60px;
  background: #131313;
  border-top: 1px solid #1F1F1F;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #1F1F1F;
  background: url(belowthehorizon-images/img1.gif) repeat-y -150px 0px;
}

.post h2, .post h3 {
  margin-left: -40px;
}

/* Header */

#header {
  width: 600px;
  height: 280px;
  margin: 0 auto;
  background: url(belowthehorizon-images/img2.jpg);
}

#header h1 {
  margin: 0;
  padding: 40px 0 0 40px;
  font-size: 36px;
}

#header h2 {
  margin: 0;
  padding: 0 0 0 192px;
  font-size: 16px;
}

#header a {
  border: none;
  letter-spacing: -1px;
  color: #FFFF52;
}

/* Content */

#content {
  width: 580px;
  margin: 0 auto;
  padding: 10px;
}

#colOne {
  float: left;
  width: 180px;
}

#colOne ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

#colTwo {
  float: right;
  width: 390px;
}

/* Footer */

#footer {
  clear: both;
  width: 580px;
  margin: 0 auto;
  padding-top: 20px;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 9px;
}

#footer * {
  color: #333333;
}

</style>


</head>
<body>
<div id="header">
  <h1><a href="#">Below the Horizon</a></h1>
  <h2><a href="http://freecsstemplates.org/">by Free Css Templates </a></h2>
</div>
<div id="content">
  <div id="colOne">
    <div id="menu">
      <ul>
        <li><a href="#" accesskey="1" title="">Homepage</a></li>
        <li><a href="#" accesskey="2" title="">My Journal </a></li>
        <li><a href="#" accesskey="3" title="">My Photos </a></li>
        <li><a href="#" accesskey="4" title="">My Favorites </a></li>
        <li><a href="#" accesskey="5" title="">Contact Me</a></li>
      </ul>
      <h3>Lorem Ipsum Dolore </h3>
      <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis.</p>
      <h3>Suspendisse Potenti</h3>
      <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
      <ul>
        <li><a href="#">Suspendisse quis gravida</a><a href="#">&#8230;</a></li>
        <li><a href="#">Vivamus sagittis bibendum</a><a href="#">&#8230;</a></li>
        <li><a href="#">Nullam et orci in erat&#8230;</a></li>
      </ul>
    </div>
  </div>
  <div id="colTwo">
    <div class="post">
      <h2>Welcome to Below the Horizon!</h2>
      <p><strong>Below the Horizon</strong> is a free template from <a href="http://freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo  is from <a href="http://pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
    </div>
    <div class="post">
      <h3>Suspendisse Potenti</h3>
      <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
      <ul>
        <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
        <li><a href="#">Vivamus sagittis bibendum erat.</a></li>
        <li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
        <li><a href="#">Suspendisse quis gravida massa felis.</a></li>
        <li><a href="#">Curabitur malesuada turpis nec ante.</a></li>
      </ul>
    </div>
    </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Below the Horizon. Designed by <a href="http://freecsstemplates.org"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.bennevis
25.bermuda01
26.besmart
27.bestwebdesign
28.beta
29.beyond
30.bigdeal
31.BigSpaceLove
32.bioessence
33.Biru_Manteb
34.bittersweet
35.Black
36.chamberlandsrestaurant
37.chara
38.characterized
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year