tornpaperdocom
<!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>Torn Paper Dot Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
#wrapper {
height: 1000px;
width: 700px;
background-image: url(tornpaperdocom-images/top.jpg);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
body {
background-image: url(tornpaperdocom-images/back.jpg);
background-position: left 57px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family: "Century Gothic", Arial, sans-serif;
}
#header-{
height: 200px;
width: 700px;
}
#topnav {
width: 600px;
height: 58px;
float: left;
clear: both;
}
#welcome {
width: 650px;
height: 100px;
clear: both;
padding-top: 20px;
padding-right: 25px;
padding-left: 25px;
}
#welcome h2 {
margin: 0px;
padding: 0px;
color: #006633;
}
#dot {
color: #FFFFFF;
}
#topnav ul {
list-style-type: none;
padding: 0px;
width: 600px;
float: left;
margin-top: 23px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}
#topnav ul li {
list-style-type: none;
width: 95px;
float: left;
}
#topnav ul li a {
display: block;
height: 28px;
width: 95px;
float: left;
color: #006633;
text-decoration: none;
font-family: "Century Gothic", Arial, sans-serif;
font-weight: bold;
text-align: center;
padding-top: 7px;
margin-right: 5px;
}
#topnav a:hover {
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: url(tornpaperdocom-images/tab.gif);
}
#content {
height: 700px;
width: 698px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d6d6d6;
border-left-color: #d6d6d6;
border-right-width: 1px;
}
#topnav .active {
color: #006600;
}
#maincontent {
width: 480px;
float: right;
margin-top: 20px;
height: auto;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #006633;
margin-right: 5px;
}
#maincontent h2 {
margin: 0px;
padding: 0px;
color: #006633;
}
#menu h2 {
color: #006633;
margin: 0px;
padding: 0px;
}
#footer a {
text-decoration: none;
color: #006633;
}
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #006633;
margin-top: 3px;
}
#menu ul li a:hover {
background-color: #EBEBEB;
}
#menu ul li {
height: 20px;
}
#welcome a {
text-decoration: none;
color: #006633;
}
#menu {
width: 180px;
float: left;
margin-top: 20px;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #006633;
margin-left: 5px;
}
#footer {
background-image: url(tornpaperdocom-images/footer.jpg);
background-repeat: no-repeat;
height: 33px;
width: 700px;
text-align: center;
padding-top: 20px;
}
#creativecommons {
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="topnav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a class="active" href="http://www.free-css.com/">Active</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
<li></li>
</ul>
</div>
<div id="welcome">
<h2> <a href="http://www.free-css.com/">Welcome To TornPaper<span id="dot">Dot</span>Com</a></h2>
</div>
</div>
<div id="content">
<div id="menu">
<h2>Go To... </h2>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Active</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<div id="maincontent">
<h2>Lorem Ipsum</h2>
<p><img src="tornpaperdocom-images/imageplace.jpg" alt="" width="162" height="152" vspace="5" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida. Nullam iaculis nulla sed nunc. Proin id ante. Nunc ligula diam, pellentesque non, interdum ac, accumsan mattis, nisl. Aliquam non ante. Maecenas congue volutpat enim. Sed dui risus, aliquet sit amet, posuere id, interdum eu, tellus. Cras augue dui, condimentum nec, nonummy et, venenatis nec, odio. Suspendisse nec erat. Nulla auctor. Sed viverra nulla. Nullam dapibus nibh vitae urna. </p>
<p>Vestibulum vestibulum, justo non sagittis ultricies, lorem quam auctor purus, eget fermentum velit nunc quis odio. Vivamus eget nulla nec neque euismod auctor. Vivamus erat orci, euismod commodo, sollicitudin vel, imperdiet non, urna. Donec cursus pharetra nisl. Donec in lorem sed enim faucibus posuere. Ut accumsan sem et orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc feugiat sollicitudin dui. Nulla facilisi. Aenean turpis pede, fringilla non, interdum ut, tincidunt ut, quam. In ultrices. Integer venenatis. Duis tristique varius eros. Aenean egestas nisi in ante. Sed justo orci, eleifend vitae, ultrices non, rutrum at, purus. Curabitur ut odio. Suspendisse potenti. Nullam risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<div id="creativecommons"><a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nd/3.0/88x31.png" /></a> <br />
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/">Creative Commons Attribution-No Derivative Works 3.0 License</a>.</div>
</div>
</div>
<div id="footer">Design By Connor Mckelvey of <a href="http://connorm.gknu.com">Con(A)rtist Designs</a> © 2007 </div>
</div>
</body>
</html>
Related examples in the same category