soft_green
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Soft Green Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type='text/css'>
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#182801;
}
.conteneur {
margin-top: 10px;
position: absolute;
width: 740px;
left: 50%;
margin-left: -370px;
border:0px solid #182801;
color: #182801;
background-color:#7A9431;
}
.header {
background-image: url("soft_green-images/header.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:50px;
padding-top:40px;
max-width:490px;
border-bottom:1px solid #182801;
color: #F5F8EF;
}
.menu {
float:right;
margin: 0px;
padding:0px;
margin-left:20px;
border-left:1px solid #182801;
}
* html .menu {
margin-left: -3px;
}
.centre {
padding:20px;
padding-left:40px;
}
.pied {
height: 25px;
text-align:right;
padding-right:10px;
}
.menu-list {
list-style-type: none;
margin:0px 0px 0px 0px;
padding:0px;
}
* html .menu li{
margin-bottom:-3px;
}
.menu li {
margin:0px;
border-bottom:1px solid #182801;
color: #D9CEB8;
font-size: 1.1em;
text-decoration: none;
background-color:#748F02;
padding:0px;
width:199px;
}
.menu li a {
margin:0px;
display: block;
color: #F5F8EF;
font-size: 1.1em;
text-decoration: none;
border-left:5px solid #F5F8EF;
padding:5px;
}
.menu li a:hover {
text-decoration: none;
background-color:#90A000;
}
.p{
}
h2{
margin-left:-20px;
margin-top:15px;
padding-left:5px;
font-size: 1.3em;
color: #F5F8EF;
font-weight:normal;
}
h1{
margin-left:-30px;
margin-top:5px;
padding-left:5px;
font-size: 1.6em;
color: #F5F8EF;
font-weight:normal;
}
.header-title {
font-size:2.3em;
border-top:2px solid #F5F8EF;
}
.header-title-two {
font-size:1.1em;
padding-bottom:3px;
border-bottom:1px solid #F5F8EF;
}
a{
color:#F5F8EF;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
blockquote{
background-color:rgb(142, 168, 69);
padding : 3px;
border-left:2px solid #F5F8EF;
}
</style>
</head>
<body>
<div class="conteneur">
<div class="menu">
<ul class="menu-list">
<li><a href="">Web design</a></li>
<li><a href="">Standard solution</a></li>
<li><a href="">W3C validation</a></li>
<li><a href="">OSWD design</a></li>
<li><a href="">CSS and XHTML</a></li>
<li><a href="">Blue</a></li>
<li><a href="">Beautiful</a></li>
<li><a href="">A link</a></li>
<li><a href="">An other link</a></li>
</ul>
</div>
<div class="header">
<span class="header-title">My soft green design</span><br />
<span class="header-title-two">A beautiful design</span>
</div>
<div class="centre">
<h1>Welcome on my soft green design</h1>
<h2>Respect the standards</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus libero, suscipit at, tincidunt eget, aliquam vitae, arcu. Nunc quam dolor, facilisis hendrerit, <a href="">ultricies</a> id, <a href="">imperdiet</a> id, libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Cras sit amet felis eu leo placerat scelerisque. Cras orci pede, eleifend nec, iaculis blandit, ullamcorper congue, odio. Quisque laoreet urna nec urna. Nunc sit amet purus sit amet felis rutrum hendrerit. Aliquam fermentum molestie eros. Cras nec elit varius augue eleifend sagittis.</p>
<p>In sodales ultrices enim. Mauris nisl. Fusce vel urna nec magna hendrerit auctor. Nulla euismod. Nulla bibendum. In mattis, sem nec eleifend pellentesque, mi massa ornare tortor, ac fringilla augue augue nec mi. Quisque viverra quam consectetuer leo. Ut leo augue, aliquam non, vestibulum non, dignissim nec, sapien. Proin sodales. Quisque in orci. Sed erat est, lacinia ut, varius sit amet, ullamcorper vitae, dui. Nullam malesuada risus ac <a href="">lacus</a>. Suspendisse hendrerit. Integer placerat interdum nulla. Pellentesque vel tellus eget turpis scelerisque venenatis. Nullam adipiscing risus at massa.</p>
<h2>Free design</h2>
<p>Nunc bibendum sapien. Ut ligula sapien, dignissim vitae, sollicitudin quis, egestas scelerisque, risus. Vestibulum aliquam pretium ante. Nunc sem mi, gravida in, sagittis quis, ullamcorper accumsan, ligula. Aliquam convallis, nibh at tristique tempor, velit orci sollicitudin tellus, in hendrerit purus nibh eu eros. Nam luctus turpis ac tortor. <a href="">Proin</a> et <a href="">elit</a>. Etiam varius eleifend velit. Morbi convallis semper orci.</p>
<blockquote>Suspendisse leo mi, convallis ac, euismod ut, malesuada in, nisl. Vivamus eu arcu in diam sodales pretium.</blockquote>
<p> Curabitur cursus consectetuer felis.</p>
</div>
<div class="pied">
Design by <a href="http://nicolas.freezee.org" target="_BLANK">Nicolas Fafchamps</a>
</div>
</div>
</body>
</html>
Related examples in the same category