axian : Design 4 « Templates « HTML / CSS

axian

     

<!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>Axian</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: 0;
  padding: 0;
  background: #449EC7 url(axian-images/img1.gif) repeat-y center top;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #52A6CB;
}

h1, h2, h3, h4, h5, h6, form {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
  margin-top: 0;
}

a {
  border-bottom: 1px dotted #52A6CB;
  text-decoration: none;
  color: #307DA0;
}

a:hover {
  border: none;
}

img {
  border: none;
}

/* Header */

#header {
  width: 720px;
  height: 70px;
  margin: 0 auto;
  padding: 20px;
}

/* Logo */

#logo {
  float: left;
  width: 410px;
  padding: 0 0 0 60px;
  background: url(axian-images/img2.gif) no-repeat left center;
}

#logo h1 {
  font-size: 2.5em;
}

#logo h2 {
  font-size: 1em;
}

#logo a {
  border: none;
}

/* Search */

#search {
  float: right;
  width: 200px;
  padding-top: 13px;
}

/* Content */

#content {
  width: 720px;
  margin: 0 auto;
}

/* Column One */

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

/* Column Two */

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

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

#colTwo li ul {
  padding: 1em 0;
}

#colTwo li a {
  padding-left: 15px;
  background: url(axian-images/img5.gif) no-repeat left center;
  border: none;
}

/* Latest Post */

#latest-post {
  padding: 25px 0 0 0;
  background: url(axian-images/img3.gif) no-repeat center top;
}

#latest-post .title {
  padding: 0 0 0 30px;
  background: url(axian-images/img4.gif) no-repeat left center;
  font-size: 1.5em;
}

#latest-post .title a {
  background: none;
}

#latest-post .posted {
  padding: 0 0 2em 30px; 
  font-size: x-small;
}

#latest-post .posted a {
  background: none;
}

#latest-post .image {
  float: left;
  margin: .3em 1em 1em 0;
}

/* Recent Posts */

#recent-posts {
  padding: 50px 0 0 0;
  background: url(axian-images/img3.gif) no-repeat center top;
}

#recent-posts .title {
  padding: 0 0 0 30px;
  background: url(axian-images/img4.gif) no-repeat left center;
  font-size: 1.5em;
}

#recent-posts ul {
  margin: 0;
  padding: 20px 0 0 30px;
  list-style: none;
}

#recent-posts li {
  padding: 5px 0 10px 0;
  background: url(axian-images/img2.jpg) repeat-x left bottom;
}

#recent-posts a {
  background: none;
}

/* Footer */

#footer {
  clear: both;
  width: 720px;
  margin: 0 auto;
  padding: 5em 0;
  font-size: xx-small;
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Axian</a></h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
  </div>
  <div id="search">
    <h2>Search</h2>
    <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="content">
  <div id="colOne">
    <div id="latest-post">
      <h2 class="title"><a href="http://www.free-css.com/">Welcome to Axian!</a></h2>
      <h3 class="posted">Posted on February 1st, 2007 by <a href="http://www.free-css.com/">Author</a></h3>
      <div class="story">
        <p><em><strong>Axian</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>
        <p>Etiam eu nibh. Quisque condimentum varius velit. Proin interdum erat  quis sem. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Vivamus in odio.</p>
      </div>
    </div>
    <div id="recent-posts">
      <h3 class="title">Recent Posts</h3>
      <ul>
        <li><strong><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></strong><br />
          <small>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></small></li>
        <li><strong><a href="http://www.free-css.com/">Cras sagittis est laoreet odio</a></strong><br />
          <small>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></small></li>
        <li><strong><a href="http://www.free-css.com/">Sed pulvinar ornare urna</a></strong><br />
          <small>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></small></li>
        <li><strong><a href="http://www.free-css.com/">Quisque in dolor non erat</a></strong><br />
          <small>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></small></li>
        <li><strong><a href="http://www.free-css.com/">Fusce lobortis dui molestie eros</a></strong><br />
          <small>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></small></li>
        <li><strong><a href="http://www.free-css.com/">Maecenas vel leo nec dui pulvinar</a></strong><br />
          <small>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></small></li>
      </ul>
    </div>
    <div style="clear: both; height: 1px;"></div>
  </div>
  <div id="colTwo">
    <ul>
      <li>
        <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>
      </li>
      <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>
        </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>
      <li>
        <h2>Blogroll</h2>
        <ul>
          <li><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>
      </li>
    </ul>
    <div style="clear: both;">&nbsp;</div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Axian. 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.	azulmedia2-1
17.	azure
18.	bagatelle
19.	balanced
20.	bananaleaf
21.	barricade
22.	begrimed
23.	belowthehorizon
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