ohgreenworld
<!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">
<head>
<title>greenworld</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/************* GENERAL CSS ************/
body {
margin: 0px;
padding: 0px;
text-align: justify;
font : normal 12px "Trebuchet MS", sans-serif;
color: #7b7b7b;
}
p.comment_nb a:link, p.comment_nb a:visited{
color:#FF6600;
}
p.post-info, p.post-info, p.post-info a:link, p.post-info a:visited, p.comment_nb a:link, p.comment_nb a:visited{
display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
p.comment_nb, p.comment_nb a:link{
font-size:10px;
}
p.post-info, p.post-info, p.post-info a:link, p.post-info a:visited{
color:#CCC;
}
h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", sans-serif;
color: #D1D63A;
}
#ogreen h1 {
font-family: "Trebuchet MS", sans-serif;
color: #565656;
font-size:36px;
}
#ogreen p {
font-family: "Trebuchet MS", sans-serif;
color: #d7d7d7;
font-size:10px;
font-style:italic;
text-align:justify;
margin-top:-40px;
margin-left:-5px;
}
#ogreen a:link, #ogreen a:visited, #ogreen a:hover, #ogreen a:active{
color: #D1D63A;
}
ul, li {
list-style-type : none;
}
img {
opacity : 1.0;
border : none;
margin-top:10px;
}
a, a:hover {
text-decoration: none;
color: #ff6600;
}
/************* HEADER STUFF ************/
#header {
height: 5px;
margin: 0px auto;
background : #D1D63A;
}
#header img {
margin: 19px 60px;
}
#backgroundslim {
border-bottom: 1px dashed #E5E5E5;
}
#backgroundslim, #right {
height: 220px;
background : #FBFBFB;
margin-top: 10px;
}
#backgroundslim p{
text-align:center;
}
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #FAFAFA;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
border-left: 4px solid #ff6600;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #ff6600;
color: #565656;
font: 1.2em/1.5em Georgia, 'Bookman Old Style', Serif;
}
/************* MENU ************/
#menu {
background : #3c3c3c;
padding: 6px 0px 5px 0px;
width:400px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#menu li{
display: inline;
border-left: 1px solid #3c3c3c;
}
#menu li:hover{
display: inline;
margin: 0px;
padding: 6px 0px 0px 0px;
}
#menu li.selected{
background-color:#D1D63A;
padding: 10px 0px;
border-top:1px solid #D1D63A;
border-bottom: 1px solid #EAEAEA;
border-left: none;
}
#menu a, #menu a:hover {
padding: 5px 14px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
/************* CONTENT ************/
#content, #smallr, #mounu, #ogreen{
width: 770px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
#ajaxcontentarea , #right {
margin-top:30px;
border : 1px solid #EAEAEA;
}
#content h2, #content h3, #content h4, #content h5, #content h6 {
font-weight: normal;
}
#ajaxcontentarea {
float: left;
width: 500px;
}
#right {
float: right;
width: 260px;
}
#ogreen {
padding-top:60px;
}
/************* FOOTER ************/
#footr {
clear: both;
background : #FBFBFB;
border-top: 1px dashed #d7d7d7;
text-align:center;
}
#footr a:link, a:hover, a:active, a:visited{
color:#7b7b7b;
text-decoration:none;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="mounu">
<div id="menu">
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="http://www.free-css.com/" rel="ajaxcontentarea">Home</a></li>
<li><a rel="ajaxcontentarea" href="http://www.free-css.com/">Tab#1</a></li>
<li><a rel="ajaxcontentarea" href="http://www.free-css.com/">Tab#2</a></li>
<li><a rel="ajaxcontentarea" href="http://www.free-css.com/">Tab#3</a></li>
<li><a rel="ajaxcontentarea" href="http://www.free-css.com/">Tab#4</a></li>
</ul>
</div>
</div>
<div id="backgroundslim">
<div id="ogreen">
<h1>OH, <a href="http://www.free-css.com/">GREEN</a> WORLD </h1>
<p>( your slogan there ) </p>
</div>
</div>
<div id="content">
<div id="ajaxcontentarea">
<h2>Hello world! ~ widge connect ~ #3 </h2>
<p class="post-info"> <img src="http://undergroundconsole.ifrance.com/postr.png" alt="postr" /> dinamoo, le 0/00/00 0:00 </p>
<p>i'm<em> "oh green world "</em>, the new <strong> flexible, standart compliant and fun</strong> project of dinamoo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id est tincidunt nisl pellentesque tincidunt. <strong>Donec in mauris.</strong> Mauris neque magna, consectetuer id, malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia. Suspendisse potenti.<strong> Proin justo lorem, rutrum ac,</strong> facilisis in, malesuada sed, ligula. </p>
<h4>Some exemples of utilisation </h4>
<p><code>font-style: italic;
} </code> </p>
<h4>Blockote</h4>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p>
</blockquote>
<p class="comment_nb"> <span class="post-info"><img src="http://undergroundconsole.ifrance.com/icon.gif" alt="icon" /> Post dans Hello <img src="http://undergroundconsole.ifrance.com/co.png" alt="info" /></span> 23 commentaires</p>
</div>
<div id="right">
<h2>Right </h2>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit.</strong> Curabitur id est tincidunt nisl pellentesque tincidunt. Donec in mauris. Mauris neque magna.</p>
<h4>How to make content?</h4>
<ul>
<li>--> Open your favorite website editor</li>
<li>--> Browse nd open " index.html"</li>
<li>--> Make text, add photos, be free!</li>
</ul>
<div id="footr">
<p>Copyright © 2006 YOUR SITE NAME.by <a href="http://dinamoo.com/">dinamoo</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category