lostinforest
<!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>Lost in Forest</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<style type='text/css'>
/******************************************************
L O S T I N F O R R E S T
by Empire Elements
www.empire-elements.co.uk
******************************************************/
body {
background-color: #000000;
}
/******************************************************
Containers
******************************************************/
#Container {
width: 780px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #666666;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-image: url(main-bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #000000;
overflow: auto;
}
#MenuHold {
float: right;
overflow: auto;
width: 220px;
}
#Top {
margin: 0px;
overflow: auto;
padding: 0px;
width: auto;
clear: both;
}
#Top h1{
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 42px;
color: #FFFFFF;
font-weight: bold;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
margin: 0px;
}
#Top h1 sup{
font-size: 18px;
font-weight: bold;
color: #595959;
}
#Top h2{
color: #595959;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
#Top p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757575;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
}
#Top a{
border: 1px solid #686868;
width: 200px;
display: block;
background-color: #252525;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #ee9700;
text-decoration: none;
font-size: 20px;
text-align: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 3px;
float: left;
}
#Top a:hover{
color: #CCCCCC;
background-color: #111111;
width: 200px;
display: block;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 20px;
text-align: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 3px;
border: 1px solid #ee9700;
}
/******************************************************
Main Text
******************************************************/
#MainText {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: auto;
vertical-align: bottom;
position: relative;
clear: both;
height: 1%;
}
#MainText a{
color: #E8930B;
text-decoration: underline;
}
#MainText a:hover{
color: #FFFFFF;
text-decoration: none;
}
#Left {
width: 360px;
position: absolute;
left: 0;
bottom: 0;
margin: 0px;
padding: 0px;
}
#LeftBG {
background-color: #151515;
border: 1px solid #6b6b6b;
margin: 0px;
padding: 0px;
}
#Left p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #999999;
padding: 10px;
margin: 0px;
}
#Left h3{
margin: 0px;
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 26px;
font-weight: bold;
color: #CCCCCC;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
#Left em{
color: #CC6600;
font-size: 14px;
padding: 0px;
margin: 0px;
}
#Right {
float: right;
width: 405px;
background-color: #141414;
border: 1px solid #6b6b6b;
overflow: auto;
background-image: url(Untitled-3.gif);
background-repeat: no-repeat;
background-position: left top;
}
#Right p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #999999;
margin: 0px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
#Right h3{
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #FEFEFE;
font-size: 16px;
font-weight: bold;
background-color: #151515;
margin-top: 100px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#Right img{
margin: 0px;
padding: 30px;
}
/*********** ONE FILELD ****************/
#OneField {
background-color: #000000;
clear: both;
border: 1px solid #6b6b6b;
overflow: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#OneField p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #565656;
padding: 10px;
margin: 0px;
}
#OneField .img{
float: left;
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
}
/***************************************
Photo gallery - one slope
****************************************/
#Gallery {
padding: 0px;
border: 1px dashed #666666;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
overflow: auto;
height: auto;
width: auto;
}
#Gallery h2{
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #BA441E;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
margin: 0px;
}
#Gallery ul {
overflow: hidden;
margin-left: 10px;
clear: both;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
#Gallery ul li {
float: left;
text-align: center;
margin-left: 20px;
display: inline;
}
#Gallery ul li a img {
border: 3px solid #666666;
}
#Gallery ul li a img:hover {
}
#Gallery ul li h2 {
margin-top: 10px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #666666;
padding: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-transform: uppercase;
}
/***************************************
Footer now
****************************************/
#Footer {
clear: both;
overflow: auto;
padding: 5px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 1px solid #666666;
}
#Footer p{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin: 0px;
padding: 0px;
font-size: 10px;
}
#Footer a{
color: #CCCCCC;
text-decoration: underline;
}
#Footer a:hover{
color: #E8930B;
text-decoration: none;
}
</style>
</head>
<body>
<div id="Container">
<div id="Top">
<div id="MenuHold"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">My blog</a> <a href="http://www.free-css.com/">My gallery</a> <a href="http://www.free-css.com/">My projects</a> <a href="http://www.free-css.com/">My friends</a></div>
<h1>Lost in Forest<sup>1.0</sup></h1>
<h2>and alone</h2>
<p>www.empire-elements.co.uk</p>
</div>
<div id="MainText">
<div id="Left">
<h3>Lorem ipsum dolor sit amet</h3>
<div id="LeftBG">
<p><em>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Etiam sem sapien, posuere vel, </em></p>
<p>mollis id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla <a href="http://www.free-css.com/">eu libero at</a> libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor pharetra nibh, a bibendum erat odio in justo.</p>
<p>Donec ut velit. Ut ac mauris id neque ultrices varius. Donec eget lacus tempor <a href="http://www.free-css.com/">lorem lobortis vehicula</a>. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
<p>Lorem <a href="http://www.free-css.com/">ipsum dolor</a> sit amet, consectetuer <br />
adipiscing elit. Etiam sem sapien, posuere vel,</p>
</div>
</div>
<div id="Right">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sem sapien, posuere vel, mollis id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla eu libero at libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor <a href="http://www.free-css.com/">pharetra nibh</a>, a bibendum erat <a href="http://www.free-css.com/">odio in justo</a>. Donec ut velit. Ut ac mauris id neque ultrices varius. Donec eget lacus tempor lorem lobortis vehicula. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sem sapien, <a href="http://www.free-css.com/">posuere vel, mollis</a> id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla eu libero at libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor pharetra nibh, a bibendum erat odio in justo. Donec ut velit. Ut ac <a href="http://www.free-css.com/">mauris id</a> neque ultrices varius. Donec eget lacus tempor lorem lobortis vehicula. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sem sapien, posuere vel, mollis id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla eu libero at libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor pharetra nibh, a bibendum erat odio in justo. Donec ut velit. Ut ac mauris id neque ultrices varius. Donec eget lacus tempor lorem lobortis vehicula. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
</div>
</div>
<div id="OneField"><img src="tree2.jpg" alt="" width="256" height="132" class="img"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sem sapien, posuere vel, mollis id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla eu libero at libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor pharetra nibh, a bibendum erat odio in justo. Donec ut velit. Ut ac mauris id neque ultrices varius. Donec eget lacus tempor lorem lobortis vehicula. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sem sapien, posuere vel, mollis id, porta ut, ipsum. Suspendisse facilisis euismod odio. Nulla eu libero at libero ornare molestie. Aenean quis pede. Fusce nonummy, metus nec sodales tempus, sem tortor pharetra nibh, a bibendum erat odio in justo. Donec ut velit. Ut ac mauris id neque ultrices varius. Donec eget lacus tempor lorem lobortis vehicula. Vivamus vel velit. Maecenas ut turpis. Quisque tempus consectetuer neque.</p>
</div>
<div id="Gallery">
<ul>
<li>
<h2>Moon Image</h2>
<a href="http://www.free-css.com/" title="Moon Image"><img src="moon.jpg" alt="Moon Image" /></a></li>
<li>
<h2>Moon Image</h2>
<a href="http://www.free-css.com/" title="Moon Image"><img src="moon.jpg" alt="Moon Image" /></a></li>
<li>
<h2>Moon Image</h2>
<a href="http://www.free-css.com/" title="Moon Image"><img src="moon.jpg" alt="Moon Image" /></a></li>
<li>
<h2>Moon Image</h2>
<a href="http://www.free-css.com/" title="Moon Image"><img src="moon.jpg" alt="Moon Image" /></a></li>
</ul>
</div>
<div id="Footer">
<p>Design by <a href="http://www.empire-elements.co.uk/" title="Design by Empire Elements">Empire Elements</a><br />
This design is contributed to www.openwebdesign.org and its' growing comunity. Feel free to modify this design any way you wish. If you like our design please link back to us. If you need any help, just drop us email lostinForest@empire-elements.co.uk<br />
<a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">My Gallery</a> | <a href="http://www.free-css.com/">My Projects</a> | <a href="http://www.free-css.com/">My Friends</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category