nature
?<!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>Nature</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* Nature - an open source xhtml/css website layout by Studio-plume.org kty
(Jan 04, 2007)
*/
body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #211d1e url(nature-images/body_deg.gif) repeat-x
}
#wrap {
background: #000000;
color: #ffffff;
border: none;
margin: 0 auto;
width: 790px;
}
#header {
clear: both;
margin: 0px 0em 0px 0em;
padding: 0;
height: 75px;
background-color: #000000;}
#header h3 {
width: 350px;
margin: 0px 0px 0px 15px;
float: left;
}
#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0px 0px 0px 0px;
font-size: 0.8em;
line-height: 1.2em;
height: 35px;}
#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}
#avmenu li {
margin-bottom: 4px;
}
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #fffff1;
display: block;
padding: 6px 0 0 10px;
background: #67522c;
border-left: 1px #846837 solid;
}
#avmenu li a:hover {
background: #67522c;
color: #fffff1;
border-left: 4px #47381e solid;
}
.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #a8a8a8;
background-color: #000000;
line-height: 1.3em;
}
#extras {
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content {
margin: 0em 160px 20px 160px;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
#content img {
padding: 0px;
display:inline;
}
h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}
a {
text-decoration: none;
color: #b6952a;
}
a:hover {
text-decoration: underline;
color: #b6952a;
}
#footer {
clear: both;
margin: 0 auto;
padding: 0px 0em 0px 0em;
width: 790px;
text-align: center;
color: #808080;
font-size: 0.9em;
height: 244px;
background: #211d1e url(nature-images/pom_bas.jpg) no-repeat right;
border: none;}
#footer a {
color: #808080;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.left {
margin: 0px 7px 0px 5px;
float: left;
}
.right {
margin: 0px 7px 0px 5px;
float: right;
}
.textright {
text-align: right;
}
.center {
text-align: center;
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><br />
<h3>www.your site.com</h3>
<p><strong>"your slogan can be here "</strong><br />
(or anything else )</p>
</div>
<img src="nature-images/header.jpg" width="790" height="228" alt="" />
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Events</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">gallery</a></li>
<li><a href="http://www.free-css.com/">Photos</a></li>
<li><a href="http://www.free-css.com/">Contacts</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
<div class="announce">
<h3>Whats new ?</h3>
<p><strong>4 Janvier , 2007:</strong><br />
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>
<p class="textright"> <a href="http://www.free-css.com/">More Info...</a></p>
</div>
</div>
<div id="extras">
<h3> <br />
More Info:</h3>
<p> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<h3>Links:</h3>
<p><img src="nature-images/arrow.gif" alt="arrow" width="7" height="7" /> <a href="http://www.free-css.com/">Home</a><br />
<img src="nature-images/arrow.gif" alt="arrow" width="7" height="7" /> <a href="http://www.free-css.com/">Link 2</a><br />
<img src="nature-images/arrow.gif" alt="arrow" width="7" height="7" /> <a href="http://www.free-css.com/">Link 3</a><br />
</p>
<p class="small">Dezign<br />
(4 Janv, 2007)<br />
<a href="http://validator.w3.org/check/referer">Validate XHTML 1.0 Strict</a><br />
and Css </p>
</div>
<div id="content">
<h2><img src="nature-images/ill_title.jpg" alt="ill title" width="63" height="20" />Welcome ! </h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
<p><img src="nature-images/ill1.jpg" height="100" width="125" class="left" alt="ill_1" />"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>
<p> </p>
<h3><img src="nature-images/ill_title.jpg" alt="ill title" width="63" height="20" />Presentation</h3>
<p>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <img src="nature-images/ill2.jpg" class="right" height="100" width="125" alt="ill_2" /></p>
<p> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationvelit es <a href="http://www.free-css.com/">studio-plume.org</a>, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation velit es</p>
<p> </p>
</div>
<div id="footer"> Copyright © 2007 (your name). Design by kty <a href="http://www.studio-plume.org">studio-plume.org</a>.</div>
</div>
</body>
</html>
Related examples in the same category