MArketing

by Gretchen Ward

HTML

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7">
<!--[if IE 7]   ><html lang="en" class="no-js lt-ie9 lt-ie8">
<!--[if IE 8]   ><html lang="en" class="no-js lt-ie9">
<!--[if gt IE 8]><!-->
<html class='no-js' lang='en'>
  <!--<![endif]-->
<head>
<meta charset='utf-8'>
<title>ASLA Marketing Opportunities</title>
<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="teststyle.css" />
</head>
<script src="scripts/jquery.js" type="text/javascript"></script>


<script>
function slideSwitch() {
    var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 10000 );
});

</script>

<script>
$(function(){
	   

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");
	

});
</script>

<body>

<div id="site-container">

<!--HEADER_____________________________________________________________________________________________-->
<div id="header">
	<h1><a href="marketingindextest.html"><img src="images/Untitled-2-01.png"/></a></h1>
   <a href="http://www.asla.org"><img src="images/header_ASLA_logo.png"  style="margin-left:75px;"/></a>
  ...

CSS

@charset "UTF-8";
/* CSS Document */

a:active {
  outline: none;
}


body {
	font-family:"Helvetica", "Ariel", sans-serif;
	font-size: .745em;
	color:#636466;
}
a:link, a:visited {
text-decoration:none;
color:#F60;	
}

a:hover {
text-decoration:underline;
font-weight:normal;
}

#site-container {
max-width: 100%;
margin:auto;
}

#header {
width: 100%;
background:#004065;
height:auto;
}

#header img {
	float:left;
	margin:65px 0px 10px 0px;
	border:none;
}

#header h1 img {
	margin: 60px 0px 0px 80px;
	max-width: 100%;
	height: auto;
}
/*NAVIGATION-----------------------------------------------------------------------*/
#nav {
max-width: 100%;
background: url(images/nav_bkgd.png);
height: auto;
border-bottom:1px #CCC solid;
}

#nav ul.dropdown {
margin:0;
padding:0 0 0 80px;
position:relative;
}

#nav li img {
	padding:0px 0 0 7px;
	height:10px;
	width:1px;
	border:none;
	
}

#nav li {
	float:left;
	padding:0;
	margin:0;
	list-style:none;
	}
	
#nav li a:link, 
#nav li a:visited{
	color:#636466;
	text-transform:uppercase;
	padding:8px 0px 0px 7px;
	display:block;
	width:auto;
	text-decoration:none;
	height:22px;
	}

#nav li a:hover {
	
	background:url(images/nav_rollover.png) repeat-x top;
	color:#fff;

}

#nav li ul {
	visibility: hidden;
	padding:0;
	margin:0;
	position:absolute;
	top:30px;
	background:#fff;
	width:150px;
	border:1px #CCC solid;
	z-index:15;
}

#nav li ul li {
	float:none;
}

#nav li ul li a:link,
#nav li ul li a:visited {
	
	padding:10px 0px 5px 10px;
	text-transform:none;
}

#nav li ul li a:hover {
	background-color:#CCC;
	background-image:none;
}

/*END NAVIGATION-----------------------------------------------------------------------*/


/*INDEX -------------------------------------------------------------------------------*/
#index-main {
width: 635px;
height: auto;
margin:25px 0px 0px 30px; 
}

#index-main p {
margin:0px 0px 20px 0px; 
line-height:15px;
max-width: 100%;
height: auto;
}

#home-callout{
width:200px;
float:left;
margin:0 0 30px...