GreenSpan
<!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=windows-1252" />
<title>GreenSpan Web Portal</title>
<style type='text/css'>
/* This is the main layout */
body {font: normal 83% sans-serif;}
a {color: #0000ff;}
h3 {margin: 0; margin-bottom: 8px;}
#outside {margin: auto; width: 760px; border: solid 1px #cccccc;}
#permlink {margin: 0; padding: 2px; text-align: right; border: solid 1px #ffffff;}
#permlink a {margin-left: 5px; margin-right: 5px;}
#header {margin: 0; padding: 0; border: solid 1px #ffffff;}
#header h1 {margin: 0; padding: 5px;}
#topnav {margin: 0; margin-bottom: 10px; padding: 5px; border: solid 1px #ffffff;}
#topnav a {padding: 3px;}
#left {float: left; width: 160px; border: solid 1px #ffffff;}
#middle {margin-left: 162px; margin-right: 186px; border: solid 1px #ffffff;}
#right {float: right; width: 184px; border: solid 1px #ffffff;}
#footer {clear: both; margin: 0; text-align: left; border: solid 1px #ffffff;}
#footer h5 {margin: 0;}
.box {width: 92%; margin: auto; margin-bottom: 10px; padding: 5px; border: solid 1px #666666;}
/* These are used to colorize the page */
body {background-color: #d1d1d1;}
h3 {color: #5a6156; padding-bottom: 3px; border-bottom: solid 2px #cccccc;}
h5 {padding-left: 5px; color: #5a6156;}
#outside{background-color: #d5ddcd; border: solid 1px #aaaaaa;}
#permlink{border: solid 1px #30392c; background-color: #30392c;}
#permlink a {text-decoration: none; color: #d5ddcd;}
#permlink a:hover {text-decoration: underline;}
#header{border: solid 1px #781000; background-color: #781000;}
#header h1 {color: #d5ddcd;}
#topnav {border: solid 1px #5a6156; background-color: #5a6156;}
#topnav a {border: solid 1px #5a6156; text-decoration: none; background-color: #5a6156; color: #d5ddcd;}
#topnav a:hover {border: solid 1px #d5ddcd; background-color: #d5ddcd; color: #781000;}
#left {border: solid 1px #d5ddcd;}
#middle {border: solid 1px #d5ddcd;}
#right {border: solid 1px #d5ddcd;}
#footer {border: solid 1px #d5ddcd;}
.box {background-color: #ffffff; border: solid 1px #cccccc;}
.box a {text-decoration: none; color: #781000;}
.box a:hover {text-decoration: underline;}
.box ul {margin: 0; padding-left: 15px; list-style: circle;}
</style>
</head>
<body>
<div id="outside">
<div id="permlink">
<a href="#">Portal Home</a>
<a href="#">Documentation</a>
<a href="#">Documentation</a>
</div><!-- end of permlink -->
<div id="header">
<h1>GreenSpan Web Portal</h1>
</div><!-- end of header -->
<div id="topnav">
<a href="#">Portal Home</a>
<a href="#">Employee Tools</a>
<a href="#">Information</a>
<a href="#">Discussion</a>
<a href="#">About the Portal</a>
</div><!-- end of top nav -->
<div id="left">
<div class="box">
<h3>Account Login</h3>
<form action="#" method="post">
<p>Username <br />
<input type="text" /><br />
Password<br />
<input type="password" /></p>
<p><input type="checkbox" id="chk1" name="rememberme" /><label for="chk1">Remember Me</label></p>
<ul>
<li>
<a href="#" title="Sign in to the system.">Sign In</a></li>
<li><a href="#" title="New user redistration.">Register</a></li>
</ul>
</form>
</div><!-- end of box -->
<div class="box">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Expense Reporting</a></li>
<li><a href="#">Client Mangement</a></li>
<li><a href="#">Ticket Booking</a></li>
</ul>
</div><!-- end of box -->
</div><!-- end of left -->
<div id="right">
<div class="box">
<h3>HTML/Text Module</h3>
<p>This is GreenSpan Web Portal, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
<p> This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
</div><!-- end of box -->
<div class="box">
<h3>XML Module</h3>
<p>This is just a place holder for now. Something important could and will go in this spot in the very near future. But for now you will just have to wait for that very important information. Now back to your sponser.</p>
</div><!-- end of box -->
</div><!-- end of right -->
<div id="middle">
<div class="box">
<h3>HTML/Text Module</h3>
<p>This is GreenSpan Web Portal, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.</p>
<p> This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
</div><!-- end of box -->
<div class="box">
<h3>Announcements Module</h3>
<p>This is just a place holder for now. Something important could and will go in this spot in the very near future. But for now you will just have to wait for that very important information. Now back to your sponser.</p>
</div><!-- end of box -->
<div class="box">
<h3>Events Module</h3>
<p>This is just a place holder for now. Something important could and will go in this spot in the very near future. But for now you will just have to wait for that very important information. Now back to your sponser.</p>
</div><!-- end of box -->
</div><!-- end of middle -->
<div id="footer">
<h5>Public Domain<br />
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></h5>
</div><!-- end of footer -->
</div><!-- end of outside -->
</body>
</html>
Related examples in the same category