azure : Design 4 « Templates « HTML / CSS

azure

     

<!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>Azure</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* Free standard-compliant open source XHTML/CSS template provided by Eatlon.com */


body {
  background-image: url(azure-imgs/bg.gif);
  background-repeat: repeat-x;
  background-color: #fff;
  font-family: arial, sans-serif;
  font-size: .7em;
  color: #808080;
  padding: 0;
  margin: 0;
}

img { border: 0; }

a { text-decoration: none; color: #d58c00; padding: 0; margin: 0; }
a:hover { text-decoration: none; color: #808080; outline: 0; padding: 0; margin: 0; }

a.discrete { text-decoration: none; color: #808080; padding: 0; margin: 0; }
a.discrete:hover { text-decoration: underline; color: #808080; border-bottom: 0; outline: 0; padding: 0; margin: 0; }

a.title { text-decoration: none; color: #a99570; padding: 0; margin: 0; }
a.title:hover { text-decoration: none; color: #a99570; outline: 0; padding: 0; margin: 0; }

h1 {
  font-family: georgia, serif;
  font-size: 7em;
  font-weight: 100;
  line-height: 65px;
  text-transform: uppercase;
  padding: 0;
  margin: 0; }

  dfn {
    font-size: .7em;
    font-style: normal;
    line-height: 50px; }

h2 {
  font-family: georgia, serif;
  font-size: 1.8em;
  font-weight: 100;
  padding: 0 0 10px 0;
  margin: 0; }

h3 {
  font-family: georgia, serif;
  font-size: 1.7em;
  font-weight: 100;
  line-height: 1em;
  padding: 0;
  margin: 0 0 5px 0; }



#wrap {
  width: 951px;
  min-height: 500px;
  height: auto !important;
  height: 500px;
  margin: 0 auto; }


  #header {
    height: 315px;
    background-image: url(azure-imgs/head.jpg);
    background-position: top center;
    background-repeat: no-repeat; }

    .title { padding: 140px 0 0 180px; }

    .tagline {
      font-family: garamond, serif;
      font-size: 1.4em;
      font-style: italic;
      text-indent: 25px;
      line-height: 20px;
      padding: 0;
      margin: 0; }


  #content {
    min-height: 250px;
    height: auto !important;
    height: 250px;
    background-image: url(azure-imgs/content.gif);
    background-position: top center;
    background-repeat: no-repeat;
    padding: 40px 45px 0 45px;
    margin: 0; }

    #menu {
      float: left;
      width: 16%;
      padding: 0;
      margin: 0; }

      #menu p { margin: 0 0 3px 0; }

      .feed_mig {
        float: left;  
        padding: 0;
        margin: 1px 5px 0 0; }

      #menu ul {
        list-style-type: none;
        font-family: georgia, serif;
        font-size: 1.1em;
        padding: 0;
        margin: 0 0 25px 0; }


        #menu li {
          width: 140px;
          line-height: 2.3em;
          text-indent: 8px;
          border-bottom: 1px dashed #d8d8d8; }


        #menu li a {
          padding: 0 0 0 15px;
          background-image: url(azure-imgs/dot_off.gif);
          background-repeat: no-repeat;
          background-position: top left; }


        #menu li a:hover {
          padding: 0 0 0 15px;
          background-image: url(azure-imgs/dot.gif);
          background-repeat: no-repeat;
          background-position: top left; }


    #main {
      float: right;
      width: 80%;
      padding: 0;
      margin: 0 0 20px 0; }


      .left {
        float: left;
        width: 61%;
        text-align: justify;
        padding: 0;
        margin: 0; }


        .main_content p {
          text-align: justify;
          margin: 0 0 10px 0; }


      .right {
        float: right;
        width: 34%;
        padding: 0;
        margin: 0; }

        .right p { margin: 0 0 10px 0; }


    .three_columns {
      clear: both;
      text-align: justify;
      padding: 10px 0 0 0;
      margin: -40px 0 0 0; }


      .three_columns p {
        padding: 0 5px 0 5px;
        margin: 0; }


      .h3_foot {
        background-image: url(azure-imgs/h3_bg.gif);
        background-repeat: repeat-x;
        background-position: top center;
        line-height: 1.5em;
        text-align: center;
        border-top: 1px solid #dbdbdb; }


      .two_left {
        float: left;
        width: 556px; }


        .foot_left {
          float: left;
          width: 250px; }


        .foot_mid {
          float: right;
          width: 250px; }


      .one_right {
        float: right;
        width: 29%; }


        .foot_right { width: 250px; }


  #footer {
    clear: both;
    min-height: 75px;
    height: auto !important;
    height: 75px;
    background-image: url(azure-imgs/footer.gif);
    background-position: top center;
    background-repeat: no-repeat;
    padding: 15px 45px 0 45px;
    margin: 0; }


    .bottom {
      text-align: center;
      padding: 13px 0 0 0;
      margin: 0; }


#ffscrollbarfix {
  border: 0;
  position: absolute;
  top: 0;
  bottom: -0.1px;
  width: 1em;
  z-index: -1;
}


</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <div class="title">
      <h1><a href="http://www.free-css.com/" class="title">A<dfn>zure</dfn></a></h1>
      <div class="tagline">- Your most thought-out slogan ever</div>
    </div>
  </div>
  <div id="content">
    <div id="menu">
      <h2>Navigate</h2>
      <ul>
        <li style="border-top: 1px dashed #d8d8d8;"><a href="http://www.free-css.com/">Start</a></li>
        <li><a href="second.html">2-column</a></li>
        <li><a href="http://www.free-css.com/">Services</a></li>
        <li><a href="http://www.free-css.com/">About</a></li>
        <li><a href="http://www.free-css.com/">Contact</a></li>
        <li><a href="http://www.free-css.com/">Sitemap</a></li>
      </ul>
      <h2>Subscribe</h2>
      <p><a href="http://www.free-css.com/"><img src="azure-imgs/feed.png" alt="" class="feed_mig" />RSS subscription</a></p>
      <p><a href="http://www.free-css.com/"><img src="azure-imgs/feed.png" alt="" class="feed_mig" />E-mail subscription</a></p>
      <p>You are very welcome to subscribe to our news feed or e-mail subscription.</p>
    </div>
    <div id="main">
      <div class="left">
        <div class="main_content">
          <h2>Lorem ipsum dolor sit amet</h2>
          <p><img src="azure-imgs/blue.jpg" alt="" style="float: left; margin: 0 8px 0 0;" /> Azure is a standards-compliant XHTML/CSS template from Eatlon.com. The template is free of charge and user may use it and modify it in any way. However, the credit link in the footer shall remain visible.</p>
          <p>Consectetuer adipiscing elit. In eget nisl id dolor elementum mattis. Praesent vestibulum fermentum nisl. Maecenas vel nunc. Fusce non odio. Quisque ultrices iaculis nulla. Aliquam sapien nulla, pharetra sit amet, cursus quis, fringilla non, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi lorem. Pellentesque at mi. Phasellus malesuada elit id lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam in est quis libero interdum tristique. Pellentesque ac mi. Suspendisse dictum. Praesent nec dolor. Sed tempor. Maecenas et metus. Morbi sed libero et arcu egestas consectetuer.</p>
          <p>In felis massa, pulvinar nec, pretium sed, venenatis vitae, pede. Donec mattis. Quisque eget nibh. Vestibulum tempus volutpat nulla. Aenean nonummy. Fusce vestibulum ultrices magna. In quis tortor ut massa imperdiet volutpat. Mauris eu ligula ut risus hendrerit dapibus. Sed viverra, purus vitae posuere convallis, metus lorem elementum magna, ac malesuada felis leo sed quam. Aliquam erat volutpat. Proin nisi leo, volutpat ac, sagittis ut, eleifend consequat, enim. Aliquam adipiscing venenatis urna. Vivamus leo. Fusce in risus.</p>
        </div>
      </div>
      <div class="right">
        <h2>News</h2>
        <p><strong>2007-12-13</strong><br />
          New template "Azure" released by Eatlon.com</p>
        <p><strong>2007-11-05</strong><br />
          Mauris erat pede, laoreet at, condimentum vulputate, vulputate sed, augue.</p>
        <p><strong>2007-10-28</strong><br />
          Vivamus est sem, tincidunt ac, dignissim sed, commodo vel, turpis.</p>
        <br />
        <h2>We recommend</h2>
        <p><a href="http://www.free-css.com/"><strong>Eatlon.com</strong></a><br />
          Free XHTML/CSS templates, tutorials and webdesign resources.</p>
        <p><a href="http://www.free-css.com/"><strong>Babel Fish</strong></a><br />
          Great translation tool provided by Alta Vista.</p>
        <p><a href="http://www.free-css.com/"><strong>PayPal</strong></a><br />
          PayPal is the safer, easier way to pay and get paid online.</p>
      </div>
    </div>
    <div class="three_columns">
      <div class="two_left">
        <div class="foot_left">
          <h3 class="h3_foot">About</h3>
          <p>Praesent facilisis. Quisque malesuada pretium leo. Suspendisse eu libero. Aenean dui. Aliquam erat volutpat.</p>
        </div>
        <div class="foot_mid">
          <h3 class="h3_foot">Newsletter</h3>
          <p>Do you want our updates delivered directly to your doorstep? Sign up for our <a href="http://www.free-css.com/">newsletter</a>!</p>
        </div>
      </div>
      <div class="one_right">
        <div class="foot_right">
          <h3 class="h3_foot">Legal</h3>
          <p>Please leave the credit link in the footer visible. Other than that - use and modify this template as you wish.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <div class="bottom"> 2008 &copy; Your name | Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer" class="discrete">XHTML</a> and <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="discrete">CSS</a> | Design by <a href="http://eatlon.com" class="discrete">Eatlon.com</a> </div>
  </div>
</div>
<div id="ffscrollbarfix"></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.	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