invention
<!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">
<head>
<title>Invention</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body {
margin: 0px;
padding:0px;
background-image:url(invention-images/bg.gif);
}
h1, h2, h3, h4, h5, h6, p, form {
margin: 0px;
padding:0px;
}
#wrapper {
width:800px;
margin:0px auto;
background-color:#FFF;
}
#content {
width:778px;
margin:0px auto;
background-image:url(invention-images/bg_header_top.gif);
background-repeat:repeat-x;
background-position:top;
}
#header {
height:96px;
}
#logo {
width:258px;
float:left;
}
#logo h1{
font-family:"Trebuchet MS";
font-size:26px;
color:#F76B0C;
font-weight:normal;
text-decoration:none;
padding-left:40px;
padding-top:30px;
}
#logo h4 {
font-family:"Trebuchet MS";
font-size:11px;
color:#808080;
font-weight:normal;
text-decoration:none;
padding-left:75px;
}
#links ul {
margin:0px;
padding-top:67px;
}
#links li{
float:left;
list-style-type:none;
width:129px;
height:25px;
text-align:center;
background-color:#F4A80A;
border-left:1px solid #FFF;
padding-top:4px;
}
#links a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
}
#links a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
}
#mainimg {
background-image:url(invention-images/main_img.jpg);
background-repeat:no-repeat;
height:132px;
text-align:right;
}
#mainimg h3 {
font-family:"Trebuchet MS";
font-size:48px;
color:#fff;
font-weight:normal;
text-decoration:none;
padding:20px 40px 0px 0px;
}
#mainimg h4 {
font-family:"Trebuchet MS";
font-size:18px;
color:#fff;
font-weight:normal;
text-decoration:none;
padding:0px 40px 0px 0px;
}
#contentarea {
clear:both;
padding:25px 0px;
}
#leftbar {
float:left;
width:539px;
border-right:1px solid #BCBDBC;
}
#leftbar h2{
font-family:"Trebuchet MS";
font-size:26px;
color:#EE8907;
font-weight:normal;
text-decoration:none;
padding-left:40px;
padding-bottom:5px;
}
#leftbar p{
font-family:"Trebuchet MS";
font-size:11px;
color:#797B7A;
font-weight:normal;
text-decoration:none;
padding:0px 40px;
}
#leftbar a {
font-family:"Trebuchet MS";
font-size:11px;
color:#EE8907;
font-weight:bold;
text-decoration:none;
padding:0px 40px;
}
#leftbar a:hover {
font-family:"Trebuchet MS";
font-size:11px;
color:#000;
font-weight:bold;
text-decoration:none;
padding:0px 40px;
}
#rightbar {
float:left;
width:237px;
}
#rightbar h2{
font-family:"Trebuchet MS";
font-size:26px;
color:#797B7A;
font-weight:normal;
text-decoration:none;
padding-left:25px;
padding-bottom:5px;
}
#rightbar p{
font-family:"Trebuchet MS";
font-size:11px;
color:#797B7A;
font-weight:normal;
text-decoration:none;
padding:0px 25px;
}
.orangetext {
font-family:"Trebuchet MS";
font-size:11px;
color:#EE8907;
font-weight:bold;
text-decoration:none;
}
#bottom {
clear:both;
height:32px;
padding-top:25px;
}
#email {
float:left;
width:500px;
background-color:#9BBE00;
height:27px;
padding-top:5px;
}
#email a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
padding:0px 40px;
}
#email a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
padding:0px 40px;
}
#validtext {
float:left;
width:278px;
background-color:#9BBE00;
height:27px;
padding-top:5px;
}
#validtext p{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
text-align:right;
padding-right:35px;
}
#validtext a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
}
#validtext a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="header">
<div id="logo">
<h1>logo here</h1>
<h4>have your punchline here</h4>
</div>
<div id="links">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Technology</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
</ul>
</div>
</div>
<div id="mainimg">
<h3>inventions</h3>
<h4>for a wireless world</h4>
</div>
<div id="contentarea">
<div id="leftbar">
<h2>hello!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id nisl nec leo congue fringilla. Suspendisse potenti. Phasellus sed velit eget sapien interdum ultrices. Nullam nec magna. Maecenas cursus. Etiam sapien neque, auctor eu, volutpat at, condimentum et, odio. Morbi id lorem. Nam urna ante, venenatis sed, molestie eu, dictum sit amet, tellus. Phasellus pellentesque magna vitae elit. In dignissim eleifend odio. Curabitur at libero. Donec est justo, pellentesque eu, vulputate feugiat, ultrices quis, nunc. Sed neque. Nulla egestas, risus id consectetuer ultrices, ante turpis posuere ligula, ac pulvinar tortor dui ac odio. Curabitur auctor urna sed purus. In varius.</p>
<br />
<p>Nulla sit amet magna non enim posuere porttitor. Vestibulum ante. Nam et nulla vestibulum libero facilisis aliquet. Vivamus ante velit, facilisis eu, pulvinar nec, ultricies vel, sem. Morbi ac velit. Sed est. Proin vehicula. Maecenas ac pede. Fusce rhoncus. Maecenas at quam. Aenean nunc felis, elementum vel, faucibus vitae, nonummy et, tellus. Nulla auctor venenatis urna. Donec accumsan urna sed libero. Fusce at mi eu leo sollicitudin adipiscing. Ut metus purus, gravida nec, scelerisque quis, venenatis non, ante. Aliquam a leo vel libero tempus scelerisque. Morbi iaculis. Ut libero. </p>
<br />
<a href="http://www.free-css.com/">more ></a><br />
<br />
</div>
<div id="rightbar">
<h2>latest news</h2>
<p><span class="orangetext">12/08/2006</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Utid anisl nec leo congue fringilla. <br />
<br />
<span class="orangetext">10/08/2006</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Utid anisl nec leo congue fringilla. <br />
<br />
<span class="orangetext">28/07/2006</span><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Utid anisl nec leo congue fringilla. </p>
</div>
</div>
<div id="bottom">
<div id="email"><a href="http://www.free-css.com/">info@yourcompany.com</a></div>
<div id="validtext">
<p>Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category