Skip to content

Instantly share code, notes, and snippets.

@tdouce
Created February 26, 2010 15:20
Show Gist options
  • Save tdouce/315793 to your computer and use it in GitHub Desktop.
Save tdouce/315793 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CoastScapes - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type"text/css" href="file:///C|/CoastScape%20Website_Travis_work/print_body.css" media="print">
<link rel="shortcut icon" href="/favicon.ico"> <!-- flavicon...little image that appears in in browser -->
<style type="text/css">
body {
background-color:#EBEAE0;
color:#000000;
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
.oneColLiqCtrHdr #container {
width: 100%; /* this will create a container 80% of the browser width */
background: #DCDCB8;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #00512F;
text-align: left; /* this overrides the text-align: center on the body element. */
max-width:1024px;
min-width:997px;
}
h2 {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}
/***************Banner****************/
#banner_container {
position:relative;
margin:auto;
margin-bottom:3%;
border-bottom:4px solid #360;
height:260px; /* moves dividing bar */
}
#banner {
position:relative;
background: url(file:///C|/CoastScape%20Website_Travis_work/Banner_1033_by_159.jpg) no-repeat;
background-color:#FFFFFF;
border-top:0px;
height:260px; /* adjust banner width */
margin:auto;
padding:0px;
max-width:65em;
min-width:500px;
}
#CoastScape_text {
position:absolute;
bottom:20px;
left:0px;
margin-left:0%;
font-size:6em;
color:#00512F;
font-family:"Adobe Garamond Pro";
}
#tagline {
position:absolute;
left:400px;
top:215px;
font-family:Arial, Helvetica, sans-serif;
font-size:1.4em;
font-weight:bold;
color:#00512F;
letter-spacing:.06em;
}
#base ul {
margin-top:10.3em;
margin-left: 0;
padding-left: 0;
display: inline;
float:right;
}
#base li {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:600;
color:#00512F;
margin-left: 0;
padding: 3px 8px;
list-style: none;
display: inline;
}
a.one:link {
color:#999999; text-decoration:none; /* unvisited link */
}
a.one:visited {
color:#999999; text-decoration:none; /* visited link */
}
a.one:hover {
color:#006600; text-decoration:none; /* mouse over link */
}
/*************************Banner End******************/
/*********** Begin Drop Down ******************/
#menu {
width: 90%;
background-color:#DCDCB8;
float: left;
margin-left:7.5%;
margin-bottom:15px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 10.75em; /* width of drop down menu */
float: left;
}
#menu a, #menu h2 {
font: bold 13px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
font: bold 15px/15px arial, helvetica, sans-serif;
display: block;
margin-top: 15px;
padding: 2px 3px;
color: #360;
background-color:#DCDCB8;
text-transform: uppercase;
text-align:center;
}
#menu a {
color: #FFF; /* text of dropdown menu */
background: #390; /* background color of dropdown menu */
text-decoration: none;
border-width: .01em;
border-style: solid;
border-color: #00512F;
}
#menu a:hover {
color: #FFF; /* text color */
background: #6C0; /* background color */
border-width: .01em;
border-style: solid;
border-color: #6C0;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
display: none;
}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
display: block;
}
.center { /* centers text */
text-align:center;
}
#menu ul ul ul.left { /* fly out to the left */
left:-172px; top:-1px;
}
/*********** End Drop Down ******************/
/***********Begin Col 1******************/
#col1
{
float: left;
width: 54%;
margin-top: 20px;
margin-left: 0%;
padding-right:30px;
display: inline;
background:#DCDCB8;
text-align:center;
z-index:-1;
}
/***********End Col 1******************/
/********** Begin Column 2 ***************/
#coltwo
{
float: left;
width: 40%;
height:290px;
margin-left: 3%;
padding-top: 90px;
}
#coltwo ul {
list-style: none;
margin-left: -50px;
padding-left: 1em;
text-indent: -20px;
}
.lineone {
font-family:Arial, Helvetica, sans-serif;
font-size:38px;
font-weight:bold;
color: #00512F;
text-indent: 0px;
}
.linetwo {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#8EA477;
text-indent: 35px;
}
.linethree {
font-family:"Times New Roman", Times, serif;
font-size:25px;
font-weight:bold;
color:#00512F;
text-indent: -15px;
line-height: 40px;
}
.linefour {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:#666666;
text-indent: 210px;
line-height: 40px;
}
/****** End colum 2 ********/
/* Begin Positioning Not in use but can be used if need be */
.right {
margin: 0.5em 0pt 0.5em 0.8em;
float:right;
}
.left {
margin: 0.5em 0.5em 0.5em 0;
float:left;
}
.textposition {
text-align:center;
}
/* Begin Positioning Not in use but can be used if need be */
/** Begin Footer **/
#footer {
clear: both;
background-color:#DCDCB8;
border-top:2px solid #00512F;
}
#footer_container_all, footer_container {
position:relative;
height:70px;
margin:auto;
width:400px;
}
#footer_container li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#footer_container li, #footer_container a {
height:50px;
display:block;
}
#seven {
left: -10px; /*position on webpage*/
width: 144px; /*width of frame*/
background: url(navlist_3.jpg) -13px -5px; /*Sprite position within frame*/
}
#eight {
left:142px; /*position on webpage*/
width:153px; /*width of frame*/
background: url(navlist_3.jpg) -170px -5px; /*Sprite position within frame*/
}
#nine {
left:305px; /*position on webpage*/
width:127px; /*width of frame*/
background: url(navlist_3.jpg) -340px -5px;/*Sprite position within frame*/
}
/** End Footer **/
/** Begin searchbar **/
.oneColLiqCtrHdr #searchbar {
width: 100%; /* this will create a container 80% of the browser width */
background: #EBEAE0;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: right; /* this overrides the text-align: center on the body element. */
max-width:1024px;
min-width:997px;
height:30px;
margin-top:3px;
padding-right:10px;
}
/** End searchbar **/
/* Begin Spacer */
.spacer { /* space between page header and page content */
margin-bottom: 30px;
padding:0px;
margin-top: 0px;
}
/* End Spacer */
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<!-- start menu HTML -->
<body class="oneColLiqCtrHdr">
<div id="searchbar">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="014766402603649912409:wwxtgp6xrx4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search CoastScapes Website" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
<div id="container">
<div id="banner_container">
<div id="banner">
<div id="CoastScape_text">CoastScapes</div>
<div id="base">
<ul>
<li><a class="one" href="http://www.coastscapes.org">Home</a></li>
<li><a class="one" href="http://www.coastscapes.org">Mission</a></li>
<li><a class="one" href="http://www.coastscapes.org">Contact</a></li>
<li><a class="one" href="http://www.coastscapes.org">Location</a></li>
</ul>
</div>
<div id="tagline">Earth friendly native plant landscaping</div>
</div>
</div>
<div id="menu_container">
<div id="menu">
<ul>
<li>
<div class="center"><img src="menu images/What is CoastScapes.jpg" alt="CoastScapes Icon"/>
</div>
<h2 class="center">CoastScapes</h2>
<div class="center">
<ul>
<li><a href="#" title="Why CoastScapes?">Why CoastScapes?</a></li>
<li><a href="#" title="8 Essential Elements of Conservation Landscaping">8 Essential Elements of Conservation Landscaping</a></li>
<li><a href="#" title="Related Links">Related Links</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<div class="center">
<img src="file:///C|/CoastScape%20Website_Travis_work/menu%20images/native_plants.jpg" alt="CoastScapes Icon"/>
</div>
<h2 class="center">Native Plants</h2>
<div class="center">
<ul>
<li><a href="#" title="Why Native Plants">Why Native Plants?</a></li>
<li><a href="#" title="How to Obtain Coastal GA Native Plants">How to Obtain Coastal GA Native Plants</a></li>
<li><a href="#" title="GA Native Plant List Downloads">Native Plant List Downloads</a>
<ul>
<li><a href="#" title="Trees, Shrubs & Woody Vines">Trees, Shrubs & Woody Vines</a></li>
<li><a href="#" title="Ferns">Ferns</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<div class="center">
<img src="file:///C|/CoastScape%20Website_Travis_work/menu%20images/wildlife.jpg" alt="Landscaping for Wildlfe Icon"/>
</div>
<h2 class="center">Landscaping for Wildlife</h2>
<div class="center">
<ul>
<li><a href="#" title="Why Landscape for Wildlife?">Why Landscape for Wildlife?</a></li>
<li><a href="#">Birds</a>
<ul>
<li><a href="#" title="Song Birds">Song Birds</a></li>
<li><a href="#" title="Humming Birds">Humming Birds</a></li>
</ul>
</li>
<li><a href="#" title="Butterflies">Butterflies</a></li>
<li><a href="#" title="Beneficial Insects">Beneficial Insects</a></li>
<li><a href="#" title="Other Wildlife">Other Wildlife</a></li>
<li><a href="#" title="Related Links">Related Links</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<div class="center">
<img src="file:///C|/CoastScape%20Website_Travis_work/menu%20images/invasives.jpg" alt="Invasives Icon"/>
</div>
<h2 class="center">Invasives</h2>
<div class="center">
<ul>
<li><a href="#" title="What are Invasives?">What are Invasives?</a></li>
<li><a href="#">GA Non-Native Invasive Plant List</a></li>
<li><a href="#">Related Links</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<div class="center">
<img src="file:///C|/CoastScape%20Website_Travis_work/menu%20images/waterqualityandconservation.jpg" alt="Water Quality and Conservation Icon"/>
</div>
<h2 class="center">Water Quality & Conservation</h2>
<div class="center">
<ul>
<li><a href="#" title="Why Conservation & Quality">Why Conservation & Quality</a></li>
<li><a href="#" title="Green Infrastructure Stormwater">Green Infrastructure Stormwater</a>
<ul class="left center">
<li><a href="#" title="Low Impact Development">Low Impact Development</a></li>
<li><a href="#" title="Bioretention">Bioretention</a></li>
<li><a href="#" title="Raingardens">Raingardens</a></li>
<li><a href="#" title="Rainwater Harvesting">Rainwater Harvesting</a></li>
</ul>
</li>
<li><a href="#" title="Coastal Stormwater Factsheets">Coastal Stormwater Factsheets</a></li>
<li><a href="#" title="Coastal Stormwater Supplement Download">Coastal Stormwater Supplement Download</a></li>
<li><a href="#" title="Related Links">Related Links</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="col1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="342">
<param name="flash_component" value="ImageViewer.swc">
<param name="movie" value="revolving%20images/home_slideshow_2.swf">
<param name="quality" value="high">
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:false,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:true,imageURLs:['../CoastScape Website_Travis/revolving images/honey_bee_2.jpg','../CoastScape Website_Travis/revolving images/praying_mantis_2.jpg','../CoastScape Website_Travis/revolving images/native_landscaping_2.jpg','../CoastScape Website_Travis/revolving images/trumpet_vine_2.jpg','../CoastScape Website_Travis/revolving images/rain_gardens_2.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#DCDCB8,imageCaptions:[]}">
<param name="wmode" value="transparent">
<embed src="revolving%20images/home_slideshow_2.swf" width="500" height="342" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:false,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Fade',titleColor:#333333,slideAutoPlay:true,imageURLs:['../CoastScape Website_Travis/revolving images/honey_bee_2.jpg','../CoastScape Website_Travis/revolving images/praying_mantis_2.jpg','../CoastScape Website_Travis/revolving images/native_landscaping_2.jpg','../CoastScape Website_Travis/revolving images/trumpet_vine_2.jpg','../CoastScape Website_Travis/revolving images/rain_gardens_2.jpg'],slideLoop:true,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#DCDCB8,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" flash_component="ImageViewer.swc" wmode="transparent"></embed>
</object>
</div>
<div id="coltwo">
<ul>
<li class="lineone">Treat the Earth well.</li>
<li class="linetwo">It was not given to you by your parents.</li>
<li class="linethree">It was loaned to you by your children.</li>
<li class="linefour">- African Proverb</li>
</ul>
</div>
<div id="footer">
<div id="footer_container_all">
<ul id="footer_container">
<li id="seven"><a href="http://www.coastscapes.org"></a></li>
<li id="eight"><a href="http://www.coastscapes.org"></a></li>
<li id="nine"><a href="http://www.coastscapes.org"></a></li>
</ul>
</div>
</div>
</div> <!-- centering div -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment