giftig-gruen : Design 5 « Templates « HTML / CSS

giftig-gruen

    

<!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" dir="ltr" lang="de-DE">
<head>
<title>Giftig Gr&uuml;n</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/* --------------- Einstellung fr alle Elemente ---------------*/
html * { 
      margin: 0; 
      padding:0; 
    }

body {
  background-color:#363b42;
  text-align: center;
  font-size: 82.50%;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color: #ccc;
}


/* --------------- Header ---------------*/
#cheader {
  width:100%;
  height: 254px;
  background: url(giftig-gruen-images/bg_page.jpg) left bottom repeat-x;
  text-align: center;
}
#header {
  width: 797px;
  height: 254px;
  margin: 0px auto 0px auto;
  background: url(giftig-gruen-images/bg_header.jpg) left bottom no-repeat;
  text-align: left;
  overflow: hidden;
}
#header #logo{
  float: left;
  margin: 19px 0px 0px 0px;
  width: 215px;
  height: 84px;
}

#header #hm{
  float: left;
  width: 540px;
  margin: 0px 0px 0px 40px;
  height: 108px;
}
#header #hm ul{
  list-style-type: none;
}
#header #hm ul li{
  list-style-type: none;
  float: left;
  color: #fff;
}
#header #hm ul li a{
  display: block;
  float: left;
  width: 108px;
  height: 93px;
  padding: 15px 0px 0px 0px;
  background: url(giftig-gruen-images/bg_hm.gif) left top no-repeat;
  font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#header #hm ul li a:hover,
#header #hm ul li a:hover.active,
#header #hm ul li a.active{
  height: 30px;
  padding: 78px 0px 0px 0px;
  background: url(giftig-gruen-images/bg_hm_active.gif) left top no-repeat;
}

/* --------------- Page ---------------*/
#page {
  width:100%;
  text-align: center;
}
#ccontent {
  width: 797px;
  margin: 0px auto 0px auto;
  text-align: left;
  overflow: hidden;
}
#cleftmenue {
  clear: left;
  float: left;
  width: 213px;
  background: url(giftig-gruen-images/bg_submenue.jpg) left top repeat-x;
}
/* --------------- leftmenue ---------------*/
#leftmenue {
  clear: left;
  float: left;
  width: 173px;
  margin: 30px 0px 0px 20px;
  font-size: 82.50%;
}
#leftmenue h2{
  margin: 0px 0px 5px 0px;
  font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
  font-size: 137.50%;
  font-weight: bold;
  color: #80d900;
  text-transform: uppercase;
}
#leftmenue a{
  color: #ccc;
}
#leftmenue ul{
  margin: 0px 0px 30px 0px;
  list-style-type: none;
}
#leftmenue ul li{
  margin: 6px 0px 6px 0px;
  padding: 0px 0px 0px 20px;
  list-style-type: none;
  background: url(giftig-gruen-images/pointer01.gif) left 3px no-repeat;
}
#leftmenue ul li a{
  text-decoration: none;
}
#leftmenue ul li a:hover.active,
#leftmenue ul li a.active{
  color: #80d900;
}
#leftmenue div.news{
  margin: 0px 0px 30px 0px;
  line-height: 1.5em;
}

/* --------------- content ---------------*/
#content {
  float: left;
  width: 510px;
  margin: 30px 0px 20px 53px;
  line-height: 1.7em;
}
#content h1{
  margin: 0px 0px 1em 0px;
  font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
  font-size: 182.50%;
  font-weight: normal;
  color: #fff;
}
#content h2{
  margin: 0px 0px 1em 0px;
  font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
  font-size: 150.00%;
  font-weight: normal;
  color: #fff;
}
#content p{
  margin: 0px 0px 2em 0px;
}
#content a{
  color: #80d900;
}


/* --------------- footer ---------------*/
#cfooter {
  width:100%;
  height: 50px;
  background-color: #282e34;
  border-top: 1px solid #5f5f5f;
  text-align: center;
}
#footer {
  width: 797px;
  margin: 0px auto 0px auto;
  text-align: left;
  overflow: hidden;
}
#hpv24 {
  float: right;
  margin: 16px 0px 0px 0px;
  font-size: 75.00%;
  color: #999;
}
#hpv24 a{
  color: #999;
}

/* --------------- Formulare ---------------*/
#content form {
  clear: left;
  line-height: normal;
  width: 360px;
}
#content label {
  clear: left;
  float: left;
  margin: 10px 0px 0px 0px;
}
#content label.plabel {
  font-weight: bold;
}
#content input,
#content select,
#content textarea {
  clear: left;
  float: left;
  width: 360px;
}
#content input.submit {
  width: auto;
  float: right;
  margin: 10px 0px 0px 0px;
}
#content input.reset {
  width: auto;
  margin: 10px 0px 0px 0px;
}

</style>


</head>
<body>
<div id="cheader">
  <div id="header">
    <div id="top">
      <div id="logo"> <a href="http://www.free-css.com/"><img src="giftig-gruen-images/orange_logo.gif" border="0" alt="" /></a> </div>
      <div id="hm">
        <ul>
          <li><a href="http://www.free-css.com/" class="active">Home</a></li>
          <li><a href="uebermich.html">&Uuml;ber mich</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="links.html">Links</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
      </div>
    </div>
    <div id="searchform"> </div>
  </div>
</div>
<div id="page">
  <div id="ccontent">
    <div id="cleftmenue">
      <div id="leftmenue">
        <h2>Submenue</h2>
        <ul class="submenue">
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor</a></li>
          <li><a href="http://www.free-css.com/" class="active">Duis autem vel enum</a></li>
          <li><a href="http://www.free-css.com/">At vero eos at</a></li>
          <li><a href="http://www.free-css.com/">Ipsum dolor</a></li>
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor</a></li>
        </ul>
        <h2>News</h2>
        <div class="news"> Lorem ipsum dolor sit amet, consetetur sadipscing elitra, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
        <h2>n&uuml;tzliche Links</h2>
        <ul class="links">
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor</a></li>
          <li><a href="http://www.free-css.com/">Duis autem vel enum</a></li>
          <li><a href="http://www.free-css.com/">At vero eos at</a></li>
          <li><a href="http://www.free-css.com/">Ipsum dolor</a></li>
          <li><a href="http://www.free-css.com/">Lorem ipsum dolor</a></li>
        </ul>
      </div>
    </div>
    <div id="content">
      <h1>Herzlich willkommen!</h1>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitra, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <a href="http://www.free-css.com/">sed diam voluptua</a>. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <div class="galerie">
        <h2>Bildergalerie</h2>
        <img src="giftig-gruen-images/pic01.jpg" width="92" height="59" border="0" alt="Bild 1" title="Bild 1" /> <img src="giftig-gruen-images/pic02.jpg" width="92" height="59" border="0" alt="Bild 2" title="Bild 2" /> <img src="giftig-gruen-images/pic03.jpg" width="92" height="59" border="0" alt="Bild 3" title="Bild 3" /> <img src="giftig-gruen-images/pic04.jpg" width="92" height="59" border="0" alt="Bild 4" title="Bild 4" /> <img src="giftig-gruen-images/pic05.jpg" width="92" height="59" border="0" alt="Bild 5" title="Bild 5" /> </div>
    </div>
  </div>
</div>
<div id="cfooter">
  <div id="footer">
    <div id="hpv24"> Design 2008 by <a href="http://www.hpvorlagen24.de">www.hpvorlagen24.de</a> </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.	evolution
49.	exalted
50.	excess
51.	excursus
52.	Executive Template
53.	executive
54.	Exotic_Blue
55.	Exotic_Red
56.	fotografix
57.	fotolandia
58.	foundation
59.	foxy
60.	fractalbroccoli
61.	fragrance
62.	frankincense
63.	freches-fruechtchen
64.	free-css-lunch
65.	freecsstemplate 55
66.	freecsstemplateno57
67.	freecsswebsitetemplate39
68.	freecss_greentextile
69.	freecss_modern
70.	freecss_monolit
71.	freecss_redleaves
72.	freecss_set
73.	freeport
74.	freeradicals
75.	freestyle
76.	frozenage
77.	ftd-redblack
78.	ftdbusiness
79.	ftdcinema
80.	ftddrops
81.	ftdExplosionBlue
82.	ftditight
83.	ftdkiwi
84.	ftdlagoon
85.	ftdLight
86.	ftdLightBlue
87.	ftdluminescent
88.	ftdMoonLight
89.	ftdprime
90.	ftdspace
91.	ftdvivid
92.	ftdworld
93.	funkytimes
94.	funride
95.	futuremag-aio
96.	fword_three
97.	galaxy
98.	gallerize
99.	gamberetto
100.	gameportal
101.	Ganesh01
102.	gastropoda
103.	gathering14
104.	gazebo
105.	gconsultant
106.	general
107.	genesis
108.	genghiskahn
109.	genius_web
110.	gentle_wiki
111.	geoforce
112.	gestured
113.	gift-gallery
114.	gila
115.	glazed
116.	godetia
117.	godofgates
118.	GoFlexible
119.	goinggrey
120.	gradientis
121.	grandenally
122.	grandhost
123.	GraniteGlass
124.	greefies