neonix : Design 4 « Templates « HTML / CSS

neonix

   

<!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>Neonix</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: 40px 0 0 0;
  padding: 0;
  background: #B2D22A url(neonix-images/img1.gif) repeat-x;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #688000;
}

form {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  color: #617703;
}

a {
  color: #688000;
}

a:hover {
  text-decoration: none;
}

p, ul, ol, blockquote {
  text-align: justify;
}

/* Header */

#header {
  width: 480px;
  height: 130px;
  margin: 0 auto;
  background: url(neonix-images/img2.gif);
}

#logo {
  float: left;
  padding: 25px 0 0 30px;
}

#logo h1 {
  letter-spacing: -4px;
  font-size: 4em;
}

#logo h2 {
  margin-top: -10px;
  text-align: center;
  font-size: 1em;
}

#logo a {
  text-decoration: none;
  color: #86A406;
}

#menu {
  float: right;
  padding: 20px 70px 0 0;
}

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

#menu li {
  display: inline;
}

#menu a {
  display: block;
  width: 125px;
  height: 20px;
  padding-left: 10px;
  background: url(neonix-images/img4.gif) no-repeat left center;
  border-top: 1px dotted #86A406;
  text-transform: lowercase;
  text-decoration: none;
  color: #86A406;
}

#menu .first a {
  border: none;
}

/* Content */

#content {
  width: 480px;
  margin: 0 auto;
  background: url(neonix-images/img3.gif) repeat-y;
}

/* Column One */

#colOne {
  margin: 0 15px;
  background: url(neonix-images/img5.gif) repeat-x;
}

#colOne .post {
  padding: 20px 30px 10px 30px;
  border-bottom: 1px dotted #A8C54B;
}

#colOne .title {
  letter-spacing: -2px;
  font-size: 2em;
}

#colOne .posted {
  font-size: x-small;
}

/* Column Two */

#colTwo {
  margin: 0 15px;
  background: #E5FAA0 url(neonix-images/img6.gif) repeat-x;
}

#colTwo ul {
  margin: 0;
  padding: 30px 30px 0 30px;
  list-style: none;
}

#colTwo li {
  display: block;
  float: left;
  width: 180px;
}

#colTwo li ul {
  padding: 0;
  background-image: url(neonix-images/spacer.gif);
}

#colTwo li li {
  display: list-item;
  float: none;
  padding-left: 10px;
  background: url(neonix-images/img4.gif) no-repeat left center;
}

#colTwo h2 {
  font-size: 1.6em;
}

/* Footer */

#footer {
  width: 480px;
  margin: 0 auto;
  background: url(neonix-images/img8.gif) no-repeat;
}

#footer p {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  font-size: x-small;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Neonix</a></h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="first"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">My Photos</a></li>
      <li><a href="http://www.free-css.com/">My Favorites</a></li>
      <li><a href="http://www.free-css.com/">About Me</a></li>
      <li><a href="http://www.free-css.com/">Contact Me</a></li>
    </ul>
  </div>
</div>
<div id="content">
  <div id="colOne">
    <div class="post">
      <h2 class="title">Welcome to Neonix!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Neonix</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  photos are 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 unordered list:</p>
        <ul>
          <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li>
          <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li>
        </ul>
        <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;Sed eu diam. Vivamus nonummy elit et odio. Fusce risus quam,  scelerisque sed, pharetra ut, pharetra id, ante. Etiam posuere, elit a  blandit varius, velit sem tincidunt elit, 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. Fusce  egestas sagittis enim.&#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="colTwo">
    <ul>
      <li>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">January 2007</a></li>
          <li><a href="http://www.free-css.com/">December 2006</a></li>
          <li><a href="http://www.free-css.com/">November 2006</a></li>
          <li><a href="http://www.free-css.com/">October 2006</a></li>
          <li><a href="http://www.free-css.com/">September 2006</a></li>
          <li><a href="http://www.free-css.com/">August 2006</a></li>
          <li><a href="http://www.free-css.com/">July 2006</a></li>
          <li><a href="http://www.free-css.com/">June 2006</a></li>
          <li><a href="http://www.free-css.com/">May 2006</a></li>
          <li><a href="http://www.free-css.com/">April 2006</a></li>
          <li><a href="http://www.free-css.com/">March 2006</a></li>
          <li><a href="http://www.free-css.com/">February 2006</a></li>
          <li><a href="http://www.free-css.com/">January 2006</a></li>
        </ul>
      </li>
      <li>
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Quisque vestibulum</a> (23)</li>
          <li><a href="http://www.free-css.com/">Sed a nisl a lacus</a> (78)</li>
          <li><a href="http://www.free-css.com/">Quisque sagittis</a> (11)</li>
          <li><a href="http://www.free-css.com/">Etiam volutpat</a> (34)</li>
          <li><a href="http://www.free-css.com/">In aliquet hendrerit</a> (65)</li>
          <li><a href="http://www.free-css.com/">Suspendisse iaculis</a> (35)</li>
          <li><a href="http://www.free-css.com/">Nam vel risus at</a> (22)</li>
          <li><a href="http://www.free-css.com/">Praesent sit amet</a> (54)</li>
        </ul>
      </li>
    </ul>
    <div style="clear: both;">&nbsp;</div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Neonix. 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.	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.	belowthehorizon
25.	bennevis
26.	bermuda01
27.	besmart
28.	bestwebdesign
29.	beta
30.	beyond
31.	bigdeal
32.	BigSpaceLove
33.	bioessence
34.	Biru_Manteb
35.	bittersweet
36.	Black
37.	chamberlandsrestaurant
38.	chara
39.	characterized
40.	charcoal
41.	charitable-organization
42.	chary
43.	chasmogamous
44.	chesspiece
45.	chic
46.	chicanery
47.	chromz
48.	churchsitev.2
49.	citrus-island1-1
50.	clementine
51.	clicker
52.	modernclassic
53.	modernmagic
54.	modernworld
55.	A_Simple_Theme
56.	minimalistica
57.	miniseries
58.	mint-idea
59.	minty
60.	mirax
61.	miscellaneous
62.	mistybud
63.	mlpdesign02
64.	mlpdesign03
65.	mlpdesign04
66.	mlpdesign08
67.	model-4-me
68.	model-portfolio
69.	modelagency
70.	modelportfolio
71.	model_2
72.	moderna
73.	Modified
74.	modulation
75.	module-mag
76.	mokofactory
77.	monster
78.	mork-horisont
79.	mountainbreeze
80.	mouse
81.	mrtechie
82.	multiflex2
83.	multiple
84.	multiplex
85.	music
86.	muzzle
87.	MyCode
88.	mydiary
89.	myfamily
90.	myhedspacefree08
91.	mykindathing
92.	myportfolio
93.	mystic-garden
94.	Mythology
95.	myvalentine
96.	naeve
97.	natheless
98.	nationalpark
99.	neapolitan
100.	neatness
101.	nebuladog
102.	nedweb
103.	NelVoize
104.	neoneon
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