efflorescence : Design 5 « Templates « HTML / CSS

HTML / CSS » Templates » Design 5 
efflorescence
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>efflorescence</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Design by TheWebhub.com
http://www.thewebhub.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/


/** Common Styles */
{
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: #393939;
  line-height: 25px;
  text-align: justify;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
}

h1, h2, h3 {
  margin-top: 1.5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1em;
}

p, ul, ol {
  margin-top: 1.5em;
}

ul, ol {
  margin-left: 3em;
}

blockquote {
  margin-left: 3em;
  margin-right: 3em;
}

{
  color: #CB347E;
}

/** Header Style Starts Here */

#header {
  width: 800px;
  height: 100px;
  margin: auto;
  padding: 0;
}

#header h1 {
  margin: 0;
  padding: 40px 0 10px 55px;
  background: url(efflorescence-images/image08.gifno-repeat left 90%;
  text-transform: lowercase;
  font-size: 36px;
  font-weight: normal;
  color: #FFFFFF;
}

/** Menu Style Starts Here */


#menu {
  width: 760px;
  height: 43px;
  margin: auto;
  padding: 0 20px;
  background: url(efflorescence-images/image01.jpgno-repeat left top;
}

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

#menu li {
  display: inline;
}

#menu a {
  padding: 0 20px;
  background: url(efflorescence-images/image06.gifno-repeat right 50%;
  text-decoration: none;
  color: #FFFFFF;
}

#menu a:hover {
}

#menu .first a  {
  padding-left: 0;
}

/** Page Style Starts Here */

#page {
  width: 800px;
  margin: auto;
  padding: 0;
  background: url(efflorescence-images/image05.jpgrepeat-y;
}

#page-top {
  background: url(efflorescence-images/image03.jpgno-repeat left top;
}

#page-bottom {
  background: url(efflorescence-images/image04.jpgno-repeat left bottom;
}

#content {
  float: right;
  width: 420px;
  padding: 40px 50px 30px 60px;
}

#content h2 {
  margin: 0;
  padding: 20px 0 10px 0;
  border-bottom: 1px dotted #CFCFCF;
  text-transform: lowercase;
  font-size: 24px;
  font-weight: normal;
}

#sidebar {
  float: left;
  width: 250px;
  padding: 20px 0 0 20px;
}

#sidebar h2 {
  margin: 0;
  padding: 20px 0 10px 0;
  border-bottom: 1px dotted #CFCFCF;
  text-transform: lowercase;
  font-size: 24px;
  font-weight: normal;
}

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

#sidebar li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dotted #CFCFCF;
}
/** Footer Style Starts Here */

#footer {
  width: 800px;
  height: 43px;
  margin: auto;
  padding: 0 0 20px 0;
  background: url(efflorescence-images/image02.jpgno-repeat left top;
}

#footer p {
  margin: 0;
  padding: 8px 0 0 0;
  text-align: center;
  font-size: 11px;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}



</style>


</head>
<body>
<div id="header">
  <h1>efflorescence</h1>
</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/">Products</a></li>
    <li><a href="http://www.free-css.com/">Services</a></li>
    <li><a href="http://www.free-css.com/">About Us</a></li>
    <li><a href="http://www.free-css.com/">Contact Us</a></li>
  </ul>
</div>
<div id="page">
  <div id="page-top">
    <div id="page-bottom">
      <div>
        <div id="sidebar">
          <h2>News and Updates</h2>
          <ul>
            <li>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl.</li>
            <li>Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.</li>
          </ul>
        </div>
        <div id="content">
          <h2>Welcome To My Website</h2>
          <p>This template was coded using valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Transitional</a> and <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.1</a> markups, which is distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines</a>. In a nutshell, you are free to:</p>
          <ul>
            <li><strong>to Share</strong> - to copy, distribute and transmit the work</li>
            <li><strong>to Remix</strong> - to adapt the work</li>
          </ul>
          <p>Under the following conditions:</p>
          <ul>
            <li><strong>Attribution</strong> - you must link back to <strong>my site</strong> (the footer has already my link and that's fine.)</li>
            <li><strong>Share Alike</strong> - if you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.</li>
          </ul>
          <p>TheWebHub.com would like to thank alicja_sto for the photo use in this template. </p>
          <h2>Consectetuer adipiscing</h2>
          <p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. </p>
        </div>
      </div>
      <div style="clear: both;">&nbsp;</div>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright Â© 2006 Sitename.com. Template Designed by <a href="http://www.thewebhub.com">TheWebHub.com</a>.</p>
</div>
</body>
</html>

   
    
    
    
  
Related examples in the same category
1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.elements
21.elitecircle1-0
22.emblazoned
23.embouteillage
24.emerald
25.emergence
26.emperor
27.empireserver
28.emporium
29.enclosed
30.endless
31.energybox
32.enlight
33.enlighten1-0
34.enormous
35.enter
36.enthusiastica
37.entomology
38.envision1-0
39.epod
40.equivalency
41.ergophobia
42.established
43.etags
44.euphonics
45.europe
46.everydayseries
47.evolution
48.exalted
49.excess
50.excursus
51.Executive Template
52.executive
53.Exotic_Blue
54.Exotic_Red
55.fotografix
56.fotolandia
57.foundation
58.foxy
59.fractalbroccoli
60.fragrance
61.frankincense
62.freches-fruechtchen
63.free-css-lunch
64.freecsstemplate 55
65.freecsstemplateno57
66.freecsswebsitetemplate39
67.freecss_greentextile
68.freecss_modern
69.freecss_monolit
70.freecss_redleaves
71.freecss_set
72.freeport
73.freeradicals
74.freestyle
75.frozenage
76.ftd-redblack
77.ftdbusiness
78.ftdcinema
79.ftddrops
80.ftdExplosionBlue
81.ftditight
82.ftdkiwi
83.ftdlagoon
84.ftdLight
85.ftdLightBlue
86.ftdluminescent
87.ftdMoonLight
88.ftdprime
89.ftdspace
90.ftdvivid
91.ftdworld
92.funkytimes
93.funride
94.futuremag-aio
95.fword_three
96.galaxy
97.gallerize
98.gamberetto
99.gameportal
100.Ganesh01
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.