Turnesol
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Turnesol</title>
<style type='text/css'>
body{
margin:0;
padding:0;
font: normal small Georgia, "Times New Roman", Times, serif;
}
h3{
padding:0;
margin:3px 25px;
font-size:normal;
color:#378cff;
font-family: Georgia, "Times New Roman", Times, serif;
}
h4{
margin:0 ;
color:#00c600;
}
a{
text-decoration:none;
color:#828282;
}
a:hover{
text-decoration:underline;
}
#top{
width:100%;
height:200px;
background:#000 url(Turnesol-images/bg_top.png) ;
border-bottom:2px solid #c1c1c1;
}
#wrapper{
margin:0 auto;
width:760px;
}
/* Menu */
#menu {
height: 70px;
text-align:center;
}
#menu ul {
padding: 0;
list-style: none;
margin:0 10px
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width:140px;
height: 70px;
padding-top: 10px;
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: -2px;
font-size: 30px;
color: #c1c1c1;
background:url(Turnesol-images/patt_button_orange_001.png) repeat-x;
}
#menu a:hover {
color: #000;
}
#menu .left{
display:block;
float: left;
width:14px;
height:70px;
background:url(Turnesol-images/left_button_orange_001.png);
}
#menu .right{
display:block;
float: left;
width:14px;
height:70px;
background:url(Turnesol-images/right_button_orange_001.png);
}
/*sidebar*/
#sidebar{
width:200px;
float:left;
}
#sidebar .top{
width:200px;
height:25px;
background:url(Turnesol-images/top_sidebar_orange.png);
}
#sidebar ul{
margin:0 25px;
padding:0;
list-style:none;
}
/*content*/
#content{
float:right;
width:550px;
padding:5px;
}
#content .post{
border-bottom:1px solid #ffce37;
}
/*footer*/
#footer{
height:100px;
background:#000 url(Turnesol-images/bg_footer.png) ;
border-top:2px solid #c1c1c1;
margin:0;
padding:0;
}
#menu_footer{
margin:0 auto;
width:760px;
text-align:center;
}
#menu_footer ul {
padding: 0;
list-style: none;
margin:0 10px
}
#menu_footer li {
display: inline;
}
</style>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="top">
</div>
<div id="wrapper">
<div id="menu">
<ul>
<li><span class="left"></span></li>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><span class="right"></span></li>
</ul>
</div>
<div id="content">
<div class="post">
<h1>Mauris semper ullamcorper metus</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in nunc ac odio auctor varius. Aliquam non nulla. Proin mollis, erat nec ultrices porttitor, massa nisi aliquet pede, at condimentum pede nunc et nulla. Suspendisse interdum lacinia nulla. Proin dapibus porttitor lectus. Etiam non eros. Vestibulum consequat mattis nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean turpis. Vestibulum leo nisl, pharetra sed, ullamcorper a, lacinia et, orci. Aliquam vel turpis a lacus laoreet iaculis. Praesent diam metus, mollis at, dapibus ac, laoreet eget, lacus. Vivamus mollis porttitor ligula.</p>
</div>
</div>
<!-- fine content -->
<div id="sidebar">
<div class="top"></div>
<h3>Other Links</h3>
<ul>
<li><a href="#">Semper vestibulum</a></li>
<li><a href="#">Vestibulum luctus</a></li>
<li><a href="#">Integer rutrum</a></li>
<li><a href="#">Etiam malesuada</a></li>
<li><a href="#">Elementum facilisis</a></li>
<li><a href="#">Ut tincidunt</a></li>
<li><a href="#">Odio sagittis</a></li>
</ul>
<div class="top"></div>
<h3>News & Updates</h3>
<ul>
<li>
<h4>25th May</h4>
<p><a href="#">Pellentesque quis elit non lectus gravida blandit…</a></p>
</li>
<li>
<h4>23rd May</h4>
<p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing…</a></p>
</li>
<li>
<h4>21st May</h4>
<p><a href="#">Phasellus nec erat sit amet nibh pellentesque congue…</a></p>
</li>
<li>
<h4>17th May</h4>
<p><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend…</a></p>
</li>
</ul>
</div>
<!-- fine sidebar -->
</div>
<!--fine wrapper -->
<div style="clear:both;"></div>
<div id="footer">
<div id="menu_footer">
<ul>
<li><span class="left"></span></li>
<li><a href="#">Home|</a></li>
<li><a href="#">Blog|</a></li>
<li><a href="#">Photos|</a></li>
<li><a href="#">Contact|</a></li>
<li><a href="#">Sitemap</a></li>
<li><span class="right"></span></li>
</ul>
<!-- Please don't touch this link -->
Graphics and design by <a href="http://www.ischiahotel.info" title="hotel ischia">hotel ischia</a>|<a href="http://www.ischiaexplorer.it" title="alberghi ischia">alberghi ischia</a>
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/Turnesol-images/vcss-blue"
alt="CSS Valido!" /></a>
<a href="http://validator.w3.org/check?uri=referer"><img
style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</div>
</div>
</body>
</html>
Related examples in the same category