nationalpark
<!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" xml:lang="en" lang="en">
<head>
<title>National Park</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body{
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
background: #444 url("nationalpark-images/body.gif") left top;
}
#wrap
{
width: 750px;
height: 800px;
background-color: #ffffff;
}
#header {
position: absolute;
background:#000;
text-align: left;
width:750px;
height: 80px;
}
#logo {
position: absolute;
font-family: "Agency FB", verdana;
font-size: 18pt;
left:19px;
top:38px;
width:171px;
height:23px;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #DEDEDE;
text-decoration: none;
}
.topmenu {
position: absolute;
font-family: "tahoma", verdana;
font-size: 8pt;
left: 480px;
top: 12px;
width: 315px;
height:23px;
color: #fff;
padding: 12px 21px 0 0;
}
.topmenu li {
display: inline;
}
.topmenu li a {
padding: 0 3px;
}
#left-sidebar {
position:absolute;
background-color: #ffffff;
left:0px;
top:81px;
width:180px;
height:686px;
line-height: 0.6em;
font-family: "tahoma", verdana;
font-size: 8pt;
}
h4 {
margin-top: 0px;
font-family: "tahoma", verdana;
color: #ffffff;
background: #202215;
font-size: 8pt;
padding: 6px 6px;
}
h5 {
margin-top: 0px;
font-family: "tahoma", verdana;
color: #fff;
background: #899B74;
font-size: 8pt;
padding: 6px 6px;
}
#left-sidebar a {
padding: 0px 19px;
color: #6F7C5D;
}
#left-sidebar a:hover {
color: #4B4D22;
text-decoration: underline;
}
#sidebar-pic {
position:absolute;
background-color: E3E3E3;
left:0px;
top: 514px;
width:180px;
height: 172px;
background: #E7EFD6 url('nationalpark-images/triple.jpg') no-repeat;
}
#info-box {
position:absolute;
background-color: #899B74;
top: 81px;
left:181px;
width:237px;
height:180px;
background: #E7EFD6 url('nationalpark-images/snake.jpg') no-repeat;
}
#pic {
position:absolute;
top: 81px;
left: 419px;
width:331px;
height:180px;
background: #E7EFD6 url('nationalpark-images/pic.jpg') no-repeat;
}
#main-logo {
position:absolute;
left:181px;
top:262px;
width:569px;
height:18px;
}
h3 {
margin-top: 0px;
font-family: "tahoma", verdana;
color: #ffffff;
background: #668032;
font-size: 8pt;
padding: 4px 6px;
}
h2 {
margin-top: 0px;
font-family: "tahoma", verdana;
color: #ffffff;
background: #868E58;
font-size: 8pt;
padding: 4px 6px;
}
#main {
position:absolute;
margin-top:6px;
left:181px;
top:278px;
width:569px;
height: 355px;
}
#main p {
font-family: "tahoma", verdana;
font-size: 8pt;
text-align:justify;
padding: 12px 12px 0px 12px;
color: #52584B;
}
#map {
position:absolute;
margin-top:6px;
left:181px;
top:278px;
width:569px;
height: 355px;
background: url("nationalpark-images/find.jpg") top left no-repeat;
}
#left-info {
position:absolute;
margin-top: 1px;
left:181px;
top:636px;
width: 216px
height: 130px;
font-family: "tahoma", verdana;
font-size: 8pt;
color: #000000;
padding: 15px 15px 15px 15px;
}
#left-info p {
margin-left: 12px;
margin-right: 12px;
color: #6F7C5D;
}
#right-info {
position:absolute;
margin-top: 1px;
left: 400px;
top: 631px;
width: 350px;
height: 134px;
font-family: "tahoma", verdana;
font-size: 8pt;
color: #000000;
line-height: 18px;
}
#right-info p {
margin-left: 12px;
margin-right: 12px;
color: #6F7C5D;
}
#footer {
position:absolute;
margin-top: 1px;
align: left;
background-color: #000000;
top: 767px;
width:750px;
height:32px;
text-align: center;
}
#footer-menu {
color: #fff;
margin-top: 9px;
font-family: "tahoma", verdana;
font-size: 8pt;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"> </div>
<div id="logo"> national park</div>
<ul class="topmenu">
<li><a href="http://www.free-css.com/">Home</a> |</li>
<li><a href="http://www.free-css.com/">Donate</a> |</li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
<div id="left-sidebar">
<h4>Main Menu</h4>
<p><a href="mission.html">Mission Statement</a></p>
<p> <a href="http://www.free-css.com/">Donate</a></p>
<p> <a href="http://www.free-css.com/">Management</a></p>
<p> <a href="http://www.free-css.com/">Contact Us</a></p>
<h4>Resources</h4>
<p> <a href="http://www.free-css.com/">Plan Your Trip</a></p>
<p> <a href="http://www.free-css.com/">Nature & Science</a></p>
<p> <a href="http://www.free-css.com/">Maps & Trials</a></p>
<p> <a href="http://www.free-css.com/">Things To Do</a></p>
<h4>Other</h4>
<p> <a href="http://www.free-css.com/">Volunteer</a></p>
<p> <a href="http://www.free-css.com/">Research</a></p>
<p> <a href="http://www.free-css.com/">Park Ranger Info</a></p>
<p> <a href="http://www.free-css.com/">Site Map</a></p>
<h4>Site Support</h4>
<p> <a href="http://www.free-css.com/">FAQ's</a></p>
<p> <a href="http://www.free-css.com/">Email Support</a></p>
<div id="sidebar-pic"> </div>
</div>
<div id="info-box"> </div>
<div id="pic"> </div>
<div id="main-logo" style="position: absolute; left: 181px; top: 262px; height: 23px">
<h3>Find A National Park</h3>
</div>
<div id="map"> </div>
<div id="left-info"> Find a National Park by State: <br/>
<form action="#" method="get">
<fieldset style="width: 136px; height: 7px; border: none;">
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</fieldset>
</form>
</div>
<div id="right-info" >
<h3>Featured National Park</h3>
<p><b>Rock Mountain National Park</b><br/>
<b>Location:</b> Colorado, USA<br/>
<b>Nearest City:</b> Estes Park, Colorado<br/>
<b>Coordinates:</b> 4024′0″N, 10535′0″W</p>
</div>
<div id="footer">
<div id="footer-menu"> 2006 Your Organization Inc. All Rights Reserved</div>
</div>
</div>
</body>
</html>
Related examples in the same category