gathering14
<!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" lang="en">
<head>
<title>Gathering14</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
background: #2E2E2E;
font-family: georgia, arial, verdana, tahoma, times new roman;
}
sup
{
color: #FFC671;
}
a
{
text-decoration: none;
color: #F90;
}
a:hover
{
text-decoration: none;
color: #FFC671;
}
#outercontainer
{
margin: 0 auto;
width: 800px;
background: #2E2E2E url('gathering14-images/oc-background.jpg') repeat-y;
}
#container
{
margin: 0 auto;
width: 760px;
background: #FFF;
}
#header
{
width: auto;
height: 100px;
background: #FFF url('gathering14-images/header-background.jpg') repeat-x;
}
#header h1
{
margin: 0;
padding: 20px 0 0 25px;
font-size: 220%;
letter-spacing: -2px;
font-weight: normal;
color: #F90;
font-family: georgia;
}
#menu
{
width: auto;
height: 75px;
background: #444 url('gathering14-images/menu-background.jpg') repeat-x;
}
#maincontent
{
width: auto;
background: #FFF url('gathering14-images/maincontent-background.jpg') repeat-x;
padding: 25px;
font-size: 90%;
margin-right: 200px;
line-height: 150%;
}
#maincontent span
{
float: right;
}
#maincontent p
{
margin: 0;
padding: 0 0 10px 0;
}
#maincontentright
{
float: right;
width: 150px;
padding: 25px;
background: #FFF url('gathering14-images/maincontent-background.jpg') repeat-x;
line-height: 150%;
color: #666;
}
#maincontentright p
{
margin: 0;
padding: 0 0 10px 0;
}
#maincontent h1, #maincontent h2, #maincontent h3, #maincontent h4
{
margin: 0 0 15px 0;
padding: 0;
font-weight: normal;
letter-spacing: -2px;
font-size: 175%;
color: #888;
}
#footer
{
clear: both;
width: auto;
font-size: 80%;
background: #111 url('gathering14-images/footer-background.jpg') repeat-x;
color: #888;
font-family: arial;
letter-spacing: -1px;
}
#footer h1
{
margin: 0;
padding: 25px 25px 10px 25px;
font-weight: normal;
letter-spacing: -1px;
font-size: 140%;
color: #999;
}
#footer p
{
margin: 0;
padding: 0 25px 10px 25px;
}
#footerleft
{
float: left;
width: 380px;
}
#footerright
{
float: right;
width: 380px;
}
#bottom
{
clear: both;
width: auto;
text-align: right;
padding: 15px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="outercontainer">
<div id="container">
<div id="header">
<h1>gathering.template<sup>14</sup></h1>
</div>
<div id="menu">
<div id="menumain">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">link two</a></li>
<li><a href="http://www.free-css.com/">link three</a></li>
<li><a href="http://www.free-css.com/">link four</a></li>
<li><a href="http://www.free-css.com/">link five</a></li>
</ul>
</div>
</div>
<div id="maincontentright">
<div id="sidemenu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">link two</a></li>
<li><a href="http://www.free-css.com/">link three</a></li>
<li><a href="http://www.free-css.com/">link four</a></li>
<li><a href="http://www.free-css.com/">link five</a></li>
</ul>
</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam ut diam. Maecenas feugiat. Etiam
consequat sodales ante. Ut sit amet nisi non ipsum fermentum egestas.
Phasellus lacinia enim eu tortor. Integer vulputate dictum justo.
Vivamus hendrerit lectus vel nisi. Integer sit amet diam id pede
sagittis mollis.</p>
</div>
<div id="maincontent">
<h1>Lorem ipsum dolor sit amet...</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In
pulvinar. Cras nisl. Ut at arcu. Cras lectus justo, aliquet nec,
commodo sit amet, iaculis quis, nisl. Integer vitae sem ac ligula
fermentum egestas. Proin a magna ac ante malesuada cursus. Fusce
justo massa, eleifend ut, molestie vel, rutrum et, enim. Nulla
dignissim sem in urna. In viverra eros at nisi. Suspendisse id mi.
Aliquam erat volutpat. Sed egestas bibendum elit. Nulla vel leo sit
amet sem varius pellentesque. Nam ut nisi vel risus posuere egestas.</p>
<p><span><a href="http://www.free-css.com/">read more ...</a></span></p>
<h2>In vitae pede non ligula...</h2>
<p>In vitae pede non ligula scelerisque pellentesque. Pellentesque id
arcu. Nulla convallis est quis orci. Vestibulum massa. Phasellus sit
amet libero ut dui varius eleifend. Proin ut dui non lacus feugiat
auctor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Morbi eu enim. Praesent aliquam.
Aenean elementum metus a mi sagittis eleifend. Phasellus aliquam,
dolor eu accumsan accumsan, magna libero cursus velit, non
adipiscing nibh nisi vel leo. Aliquam libero. Nullam lobortis nibh
sed purus. Suspendisse dolor enim, ultricies sed, euismod et,
ullamcorper a, lacus. Nam egestas dolor nec nulla. Aenean
consectetuer ullamcorper eros. Quisque pulvinar cursus tellus.
Maecenas adipiscing congue lectus. Pellentesque molestie lacus ac
felis. Donec eu lacus.</p>
<p><span><a href="http://www.free-css.com/">read more ...</a></span></p>
<h3>Cum sociis natoque penatibus...</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam ut diam. Maecenas feugiat. Etiam
consequat sodales ante. Ut sit amet nisi non ipsum fermentum egestas.
Phasellus lacinia enim eu tortor. Integer vulputate dictum justo.
Vivamus hendrerit lectus vel nisi. Integer sit amet diam id pede
sagittis mollis. Quisque porta tellus sed nisl. Aenean eget dolor.
Donec mattis augue. Sed in orci ac mi fringilla tincidunt.</p>
<p><span><a href="http://www.free-css.com/">read more ...</a></span></p>
</div>
<div id="footer">
<div id="footerleft">
<h1>In vitae pede non ligula...</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam ut diam. Maecenas feugiat. Etiam
consequat sodales ante. Ut sit amet nisi non ipsum fermentum egestas.
Phasellus lacinia enim eu tortor. Integer vulputate dictum justo.
Vivamus hendrerit lectus vel nisi. Integer sit amet diam id pede
sagittis mollis. Quisque porta tellus sed nisl. Aenean eget dolor.
Donec mattis augue. Sed in orci ac mi fringilla tincidunt.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>
</div>
<div id="footerright">
<h1>In vitae pede non ligula...</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam ut diam. Maecenas feugiat. Etiam
consequat sodales ante. Ut sit amet nisi non ipsum fermentum egestas.
Phasellus lacinia enim eu tortor. Integer vulputate dictum justo.
Vivamus hendrerit lectus vel nisi. Integer sit amet diam id pede
sagittis mollis. Quisque porta tellus sed nisl. Aenean eget dolor.
Donec mattis augue. Sed in orci ac mi fringilla tincidunt.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>
</div>
<div id="bottom">
<p>design by <a href="http://www.tristarwebdesign.co.uk">tristar web design</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category