evolution : Design 5 « Templates « HTML / CSS






evolution

    

<!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" lang="en">
<head>
<title>Evolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
  margin: 0;
  padding: 0;
  background: #FFF;
  font-family: arial, verdana, tahoma, times new roman;
}

a, a:link
{
  text-decoration: none;
  color: #36C;
}

a:hover
{
  text-decoration: none;
  color: #000;
}

#contheader
{
  width: auto;
  height: 50px;
  background: #2E2E2E url('evolution-images/background-contheader.jpg') repeat-x;
}

#header
{
  margin: 0 auto;
  width: 780px;
  height: 50px;
}

#header ul
{
  margin: 0;
  padding: 15px 0 0 0;
  list-style-type: none;
  text-align: right;
  font-weight: bold;
  font-size: 80%;
  letter-spacing: -1px;
}

#header li 
{
  display: inline;
  margin-left: 15px;
}

#header li a
{
  text-decoration: none;
  color: #FFF;
}

#header li a:hover
{
  text-decoration: none;
  color: #97B0E6;
}

#headerleft
{
  float: left;
  width: 200px;
  height: 50px;
}

#headerleft ul
{
  text-align: left;
}

#headerleft li 
{
  display: inline;
  margin: 0 15px 0 0;
}

#headerright
{
  float: left;
  width: 580px;
  height: 50px;
}

#contmain
{
  width: auto;
  height: 150px;
  background: #3366CC url('evolution-images/background-cont.jpg') repeat-x;
}

#main
{
  margin: 0 auto;
  width: 780px;
  height: 150px;
}

#mainleft
{
  float: left;
  width: 450px;
  height: 150px;
}

#mainleft h1
{
  margin: 0;
  padding: 50px 0 0 0;
  font-size: 250%;
  color: #FFF;
  font-weight: normal;
  letter-spacing: -3px;
}

#mainright
{
  float: left;
  width: 330px;
  height: 150px;
}

#mainright h2
{
  margin: 0;
  padding: 30px 0 0 0;
  font-size: 110%;
  color: #DBE3F7;
  letter-spacing: -1px;
  font-weight: normal;
  text-align: center;
  font-family: georgia, arial, verdana, tahoma, times new roman;
}

#conttext
{
  width: auto;
  background: #FFF url('evolution-images/background-text.jpg') repeat-x;
  font-size: 90%;
}

#text
{
  margin: 0 auto;
  width: 780px;
}

#textleft
{
  float: left;
  width: 580px;
}

#textright
{
  float: right;
  margin: 50px 0 0 0;
  padding: 0 10px;
  width: 180px;
}

#textright h4
{
  padding: 0 10px 0 5px;
  text-align: right;
  font-weight: bold;
  letter-spacing: -1px;
  color: #BBB;
}

#textright ul
{
  width: 180px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: right;
  font-weight: bold;
  letter-spacing: -1px;
}

#textright a
{
  display: block;
  width: 165px;
  background: #FFF url('evolution-images/menu-normal.gif') no-repeat;
  padding: 10px 10px 10px 5px;
}

#textright a:link
{
  color: #36C;
  text-decoration: none;
}

#textright a:hover
{
  background: #FFF url('evolution-images/menu-hover.gif') no-repeat;
  color: #000;
}

#text p
{
  margin: 0 0 15px 0;
  padding: 0;
}

#text h3
{
  margin: 0 0 15px 0;
  padding: 0 0 5px 0;
  font-size: 150%;
  letter-spacing: -2px;
  font-family: verdana, arial, georgia, tahoma, times new roman;
  font-weight: normal;
  border-bottom: 1px solid #C8D5EE;
}

blockquote
{
  margin: 0 0 15px 0;
  padding: 10px 30px;
  width: 500px;
  border-left: 2px solid #36C;
  background: #E8ECF9;
  font-family: georgia, arial, verdana, tahoma, times new roman;
}

#textbanner
{
  width: 100%;
  height: 50px;
}

#textbanner ul
{
  margin: 0;
  padding: 17px 0 0 0;
  font-size: 100%;
  font-weight: bold;
  letter-spacing: -1px;
}

#textbanner li
{
  display: inline;
  margin: 0 10px 0 0;
}

#contfooter
{
  clear: both;
  top: 20px;
  width: 100%;
  background: #2E2E2E url('evolution-images/background-footer.jpg') repeat-x;
  font-size: 90%
}

#footer
{
  margin: 0 auto;
  padding: 10px 0;
  color: #888;
  width: 780px;
}

#footer p
{
  margin: 10px 0;
  padding: 0;
}

#footer h4
{
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 120%;
  font-weight: bold;
  letter-spacing: -1px;
  color: #999;
}

#footerleft, #footerright
{
  float: left;
  width: 50%;
}

#footerbottom
{
  width: 100%;
  text-align: center;
  letter-spacing: -1px;
}

#footerbottom a
{
  color: #CCC;
}

#footerbottom a:hover
{
  color: #FFF;
}


</style>


</head>
<body>
<div id="contheader">
  <div id="header">
    <div id="headerleft">
      <ul>
        <li><a title="skip to content" href="#conttext">skip to content</a></li>
      </ul>
    </div>
    <div id="headerright">
      <ul>
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">link two</a></li>
        <li><a href="http://www.free-css.com/">link three</a></li>
        <li><a href="http://www.free-css.com/">link four</a></li>
        <li><a href="http://www.free-css.com/">link five</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="contmain">
  <div id="main">
    <div id="mainleft">
      <h1>website.name.here</h1>
    </div>
    <div id="mainright">
      <h2><span></span>Aliquam erat volutpat. Sed egestas bibendum elit. Nulla vel leo sit amet sem varius pellentesque. Nam ut nisi vel risus posuere egestas.<span></span></h2>
    </div>
  </div>
</div>
<div id="conttext">
  <div id="text">
    <div id="textright">
      <div>
        <h4>first side menu</h4>
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">link two</a></li>
          <li><a href="http://www.free-css.com/">link three</a></li>
          <li><a href="http://www.free-css.com/">link four</a></li>
          <li><a href="http://www.free-css.com/">link five</a></li>
        </ul>
        <h4>second side menu</h4>
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">link two</a></li>
          <li><a href="http://www.free-css.com/">link three</a></li>
          <li><a href="http://www.free-css.com/">link four</a></li>
          <li><a href="http://www.free-css.com/">link five</a></li>
        </ul>
      </div>
    </div>
    <div id="textleft">
      <div id="textbanner">
        <ul>
          <li><a href="http://www.free-css.com/">home page</a></li>
          <li>&gt;</li>
          <li><a href="http://www.free-css.com/">Home</a></li>
        </ul>
      </div>
      <h3>welcome.</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nisi felis, 
        ultricies ut, tempor a, aliquet sed, leo. Proin posuere hendrerit dui. Ut 
        porta placerat felis. Donec sagittis tempus elit. Sed vestibulum mauris in 
        sapien. In ornare. Ut consectetuer facilisis mauris. Suspendisse vitae justo 
        vitae nisl pretium pulvinar. Praesent vitae nibh nec odio viverra bibendum. 
        Morbi laoreet, dolor ac commodo viverra, mauris mi gravida sapien, vel 
        cursus ante ligula aliquam nulla.</p>
      <blockquote>Proin erat lorem, pretium vitae, sodales 
        sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie, 
        sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius 
        magna lectus sed neque. Phasellus auctor lorem id libero. - tristar</blockquote>
      <p>Etiam lacus. Praesent blandit, turpis et fermentum ornare, lorem nunc 
        volutpat ligula, et porta dui turpis eget ante. Vestibulum ac nunc. Integer 
        in mauris nec dolor facilisis congue. Proin eleifend lectus rhoncus odio. 
        Nam eros ante, adipiscing in, luctus eu, suscipit at, nisl. In in neque. Nam 
        neque. Nulla fermentum vehicula est. Cras nec nulla sed mauris ultricies 
        tempor. Proin et lorem. Vestibulum eu tortor ut turpis feugiat pharetra. 
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
        inceptos hymenaeos. Aliquam fringilla eleifend elit. Nullam sit amet risus. 
        In mollis, nisi eget lobortis posuere, ipsum mauris condimentum erat, vel 
        imperdiet nunc risus a odio. Nunc sed libero. Nulla facilisi.</p>
      <p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales 
        sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie, 
        sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius 
        magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros. 
        Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna 
        varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus, 
        commodo vel, orci.</p>
    </div>
  </div>
</div>
<div id="contfooter">
  <div id="footer">
    <div id="footerleft">
      <h4>header.one.</h4>
      <p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales 
        sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie, 
        sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius 
        magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros. 
        Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna 
        varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus, 
        commodo vel, orci.</p>
    </div>
    <div id="footerright">
      <h4>header.two.</h4>
      <p>Etiam suscipit turpis vitae quam. Proin erat lorem, pretium vitae, sodales 
        sit amet, aliquet at, arcu. Phasellus semper imperdiet velit. Fusce molestie, 
        sem congue malesuada rutrum, dui est scelerisque magna, sit amet varius 
        magna lectus sed neque. Phasellus auctor lorem id libero. In dui. Fusce eros. 
        Duis luctus bibendum justo. Nullam molestie. Phasellus ut lectus nec urna 
        varius venenatis. Integer urna. Sed diam turpis, molestie et, luctus tempus, 
        commodo vel, orci.</p>
    </div>
    <div id="footerbottom">
      <p>web design by <a href="http://www.tristarwebdesign.co.uk">tristar web design</a></p>
    </div>
  </div>
</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.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.euphonics
46.europe
47.everydayseries
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