cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container-fluid mainContainer">
		<div class="row mainRow">
			<!-- Left link area -->
			<div class="col-xl-2 col-lg-3 col-md-3 d-none d-md-block leftLinkArea">
				<div class="row linkAreaBox align-items-center" id="adAwardsLink">
					<div class="col-xl-12">
						<p class="text-center sideLinks">
							<a href="http://advertising.newyorkfestivals.com/">
								<strong>ADVERTISING</strong><span class="sideLinksLight">AWARDS</span>
							</a>
						</p>
					</div>
				</div>
				
				<div class="row linkAreaBox align-items-center" id="radioAwards">
					<div class="col-xl-12 mx-auto">
						<p class="text-center sideLinks">
							<a href="http://www.newyorkfestivals.com/radio/">
								<strong>RADIO</strong><span class="sideLinksLight">AWARDS</span>
							</a>
						</p>
					</div>
				</div>
				
				<div class="row linkAreaBox_bottom align-items-center" id="tvFilmsAwards">
					<div class="col-xl-12">
						<p class="text-center sideLinks">
							<a href="http://www.newyorkfestivals.com/tvfilm/">
								<strong>TV&amp;FILM</strong><span class="sideLinksLight">AWARDS</span>
							</a>
						</p>
					</div>
				</div>
			</div>
			<!-- End Left link area -->
			
			<!-- MAIN AREA -->
			<div class="col-xl-8 col-lg-6 col-md-6 col-sm-12 col-12" id="mainAreaSection">
				<!-- *** Mobile Navigation **** -->
				<nav class="navbar navbar-expand-lg navbar-light bg-light d-block d-md-none">
					<a class="navbar-brand" href="#"></a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
							
					<div class="collapse navbar-collapse" id="navbarNav">
						<ul class="navbar-nav">
							<li class="nav-item active">
								<a class="nav-link" href="http://advertising.newyorkfestivals.com/"><strong>ADVERTISING</strong>AWARDS</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>RADIO</strong><span class="sideLinksLight">AWARDS</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>TV&amp;FILM</strong><span class="sideLinksLight">AWARDS</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>MIDAS</strong><span class="sideLinksLight">AWARDS</span></a>
							</li>	  
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>TV&amp;FILM</strong><span class="sideLinksLight">AWARDS</span>S</a>
							</li>	  
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>GLOBAL</strong><span class="sideLinksLight">AWARDS</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><strong>AME</strong><span class="sideLinksLight">AWARDS</span></a>
							</li>
						</ul>
					</div>
							
				</nav>
				<!-- ********** -->
				
				<!-- Space on top of the icon -->
				<div class="row mainAreaRow">
					<div class="col-xl-12 col-lg-12 col-md-12 d-block d-md-none">
						
					</div>
				</div>
				<!-- ************************ -->
				
				<!--*** Logo ***-->
				<div class="row logoRow" id="logoTextSection">
					<div class="col-xl-12 text-center">
						<!--<img class="img-fluid" src="images/MIDAS-logo.png" />-->
						
						<!-- Logo & Text home page: show when page load, hide when click on the side links -->
						<div>						
							<!--<img class="NYFlogo" src="images/ad-logo.png" />-->
						</div>
						<div>
							<span class="NYFlogoTextBold">NEWYORK</span><span class="NYFlogoText">FESTIVALS</span>
							<span class="NYFlogoText5">INTERNATIONAL AWARDS COMPETITION FOR THE WORLD'S BEST WORK</span>
						</div>
					</div>
				</div>
				<!-- ******************* -->
						
				<!-- Logo + text links: hide when page load, show when click the side links -->
				<div class="row logoRowLinks" id="logoTextSectionLinks">
					<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2"><img class="NYFlogo" src="images/ad-logo.png" /></div>
					
					<div class="col-xl-10 col-xl-10 col-md-10 col-sm-10">
						<div class="row" style="min-height: 110px;">
							<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 logoSection" style="height: 22px;">
								<p>
									<span class="NYFlogoText1">NEWYORK</span>
									<span class="NYFlogoText2">FESTIVALS</span>
								</p>
							</div>
							<div class="col-xl-12 col-lg-12 col-md-12 col-sm12 col-12 logoSection" style="height: 60px;">
								<p>
									<span class="NYFlogoText3">RADIO</span>
									<span class="NYFlogoText4">AWARDS</span> 
								</p>
							</div>
							<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 logoSection" style="height: 25px;">
								<p>
									<span class="NYFlogoText5">WORLD'S BEST RADIO PROGRAMS</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- **************** -->
														
				<div class="row textRow">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">						 
						<p id="mainText">
							Text..
						</p>						 
					</div>
				</div>
				
				<!-- Social media icons -->
				<div class="row socialIconsRow">
					<div class="col-xl-12">
						<div class="d-flex flex-row justify-content-center">
							<div class="p-2">FB</div>
							<div class="p-2">Twitter</div>
							<div class="p-2">Instagram</div>
						</div>						
					</div>
				</div>
				<!-- End Social media icons -->
				
			</div>
			<!-- End MAIN AREA -->
			
			<!-- Right link area -->
			<div class="col-xl-2 col-lg-3 col-md-3 d-none d-md-block rightLinkArea">
				<div class="row linkAreaBox align-items-center" id="midasAwards">
					<div class="col-xl-12">
						<a href="https://www.midasawards.com/">
							<p class="text-center sideLinks"><strong>MIDAS</strong><span class="sideLinksLight">AWARDS</span></p>
						</a>
					</div>
				</div>
				
				<div class="row linkAreaBox align-items-center" id="globalAwards">
					<div class="col-xl-12">
						<a href="https://www.theglobalawards.com">
							<p class="text-center sideLinks"><strong>GLOBAL</strong><span class="sideLinksLight">AWARDS</span></p>
						</a>
					</div>
				</div>
				
				<div class="row linkAreaBox_bottom align-items-center" id="ameAwards">
					<div class="col-xl-12">
						<a href="http://www.ameawards.com/">
							<p class="text-center sideLinks"><strong>AME</strong><span class="sideLinksLight">AWARDS</span></p>
						</a>
					</div>
				</div>
			</div>
			<!-- End Right link area -->
		</div>
	</div>
            
          
!
            
              @font-face {
    font-family: 'Brandon-Grotesque-bold'; 
	src: url('fonts/Brandon_bld.otf') format('opentype');

	font-weight: bold;
}

@font-face {	   
    font-family: 'Brandon-Grotesque-light';  
    src: url('fonts/Brandon_light.otf') format('opentype');
	
	font-weight: light;
}

@font-face {		
	font-family: 'Brandon_reg';
    src: url('fonts/Brandon_reg.otf') format('opentype');
	font-style: normal;
}

@font-face {
    font-family: 'Museo700-Regular';
    src: url('fonts/museo_700_macroman/Museo700-Regular-webfont.woff2') format('woff2'),
         url('fonts/museo_700_macroman/Museo700-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Museo300-Regular';
    src: url('fonts/museo_300_macroman/Museo300-Regular-webfont.woff2') format('woff2'),
         url('fonts/museo_300_macroman/museo_300_macromanMuseo300-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html, body {
    height: 100%;
 
	margin: 0; padding: 0;
	
	/*background-color: rgba(236,189,5, 0.7) !important;*/
	
	background: url('https://source.unsplash.com/collection/495468/1600x900') no-repeat center center fixed;
	
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	
	/* Fade in / Fade Out effect */
	opacity: 1.0;
	-webkit-transition: background 1.5s linear;
	-moz-transition: background 1.5s linear;
	-o-transition: background 1.5s linear;
	-ms-transition: background 1.5s linear;
	transition: background 1.5s linear;
}


/* change navbar background */
nav.navbar {
  background: transparent !important;

}
 
/*  change navbar li colors, also active one but not disabled one */
.navbar ul.navbar-nav li.nav-item a.nav-link {
  color: white;
  background-color: rgba(236,189,5, 0.7) !important;
  
}

/* change hamburger button border color */
button.navbar-toggler.navbar-toggler-right {
  border-color: yellow;
}

p {
	color: white;
	text-align: justify;
}

a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
	text-decoration: none;
}

/* mouse over link */
a:hover {
    color: white !important;
	text-decoration: none;
}

/* selected link */
a:active {
    color: white;
	text-decoration: none;
}

.mainRow{height: 100%;}

.mainAreaRow {height: 5%;}
.logoRow {height: 30%; padding: 2% 18% 0 18%;}
.logoRowLinks {height: 45%; padding: 7% 14% 0 14%;}
.textRow {height: 150px; overflow: hidden; padding: 0 14% 0 14%;}
.socialIconsRow {height: 10%;}

.logoSection {margin: 0 !important; padding: 0 !important; }
.NYFlogo {width: 110px; height: 110px; margin-bottom: 20px;}
.NYFlogoText, .NYFlogoTextBold, .NYFlogoText1, .NYFlogoText2, .NYFlogoText3, .NYFlogoText4, .NYFlogoText5  {
	color: white;
	display: inline-block;
	line-height: 0.75em;
	
}

.NYFlogoText, .NYFlogoTextBold, .NYFlogoText1, .NYFlogoText2 {
	font-style: normal;  
	color: white;
}

.NYFlogoTextBold, .NYFlogoText {font-size: calc(8px + 2.2vw);  letter-spacing: 4px;}

.NYFlogoTextBold {font-family: 'Museo700-Regular';}
.NYFlogoText  {font-family: 'Museo300-Regular';}
.NYFlogoText1 {font-family: 'Museo700-Regular'; font-size: 20pt;}
.NYFlogoText2 {font-family: 'Museo300-Regular'; font-weight: 500; font-size: 20pt;}
.NYFlogoText3 {font-family: 'Brandon-Grotesque-bold', sans-serif; font-size: calc(14px + 2.4vw); }
.NYFlogoText4 {font-family: 'Brandon-Grotesque-light', sans-serif; font-size: calc(14px + 2.4vw); font-weight: light; }
.NYFlogoText5 {font-size: calc(9px + 0.4vw); letter-spacing: 1.2px;}

.sideLinks {
	font-size: calc(8px + 0.8vw) !important;
	font-family: 'Brandon-Grotesque-bold', Fallback, sans-serif;
}

.sideLinksLight {
	font-family: 'Brandon-Grotesque-light', Fallback, sans-serif;
}

.mainContainer {
	height: inherit;
	
	/*background: 
    /* top, transparent yellow */ 
   /* linear-gradient(
      rgba(236,189,5, 0.7), 
      rgba(236,189,5, 0.7)
    ),
    /* bottom, image */
    
}

.leftLinkArea, .rightLinkArea {
	height: 100%;
}
.leftLinkArea {
	border-right: 2px solid rgba(255,255,255, 0.3);
}

.rightLinkArea {
	border-left: 2px solid rgba(255,255,255, 0.3);
}

.linkAreaBox { 
	height: 33%;
	border-bottom: 2px solid rgba(255,255,255, 0.3);
	
}

/* Background Effect when hover on links */
div.linkAreaBox:hover, div.linkAreaBox_bottom:hover {background: rgba(255, 255, 255, 0.3);}

.linkAreaBox_bottom {
	height: 33%;
	border-bottom: none;
}



.socialIcons {width: 50px; height: 50px;}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 321px) {
	
	.mainAreaRow {height: 5%;}
	.logoRow {height: 25%; padding: 2% 5px 0 5px;}
	.logoRowLinks {height: 25%; padding: 7% 5px 0 5px;}
	.textRow {height: 80%; padding: 0 5px 5% 5px;}
	.socialIconsRow {height: 10%;}
	
	.NYFlogo {width: 70px; height: 70px;}
	
	.mainText {padding: 2% 2% 5% 2%;}
	
	.NYFlogoTextBold, .NYFlogoText {letter-spacing: 7px;}
	.NYFlogoText5 {letter-spacing: 0;}
	
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	
	.mainText {padding: 2% 2% 5% 2%;}
	
	.mainAreaRow {height: 5%;}
	.logoRow {height: 25%; padding: 2% 5px 0 5px;}
	.logoRowLinks {height: 25%; padding: 7% 1px 0 1px;}
	.textRow {height: 80%; padding: 0 1px 5% 1px;}
	.socialIconsRow {height: 10%;}
	
	.NYFlogo {width: 70px; height: 70px;}
	
	.NYFlogoTextBold, .NYFlogoText {letter-spacing: 7px;}
	.NYFlogoText5 {letter-spacing: 0; line-height: 15px;}
	
}

/* --- Extra small devices portrait phones, less than 544px --- */
@media (max-width: 543px) {

	
	.mainText {padding: 2% 5% 5% 5%;}
	
	.mainAreaRow {height: 5%;}
	.logoRow {height: 25%; padding: 2% 5px 0 5px;}
	.logoRowLinks {height: 25%; padding: 7% 5px 0 5px;}
	.textRow {height: 80%; padding: 0 5px 5% 5px;}
	.socialIconsRow {height: 10%;}
	
	.NYFlogo {width: 70px; height: 70px;}
	
	.NYFlogoTextBold, .NYFlogoText {letter-spacing: 7px;}
	.NYFlogoText5 {letter-spacing: 0; line-height: 15px;}
}

/* --- Small devices (landscape phones, 544px and up) --- */
@media (min-width: 544px) and (max-width: 767px) {
	
	.mainAreaRow {height: 5%;}
	.logoRow {height: 25%; padding: 2% 12px 0 12px;}
	.logoRowLinks {height: 25%; padding: 7% 12px 0 12px;}
	.textRow {height: 50%; padding: 0 12% 5% 12%;}
	.socialIconsRow {height: 5%;}
	
	.mainText {padding: 2% 2% 5% 2%;}
	
	.NYFlogo {width: 60px; height: 60px;}
	.NYFlogoTextBold, .NYFlogoText {letter-spacing: 6px;}
	.NYFlogoText5 {letter-spacing: 0;}
	
}


/* --- Medium devices (tablets, 768px and up) --- */
@media (min-width: 768px) and (max-width: 991px) {
	 
	.socialIcons {width: 30px; height: 30px;}
	
	
	.mainAreaRow {height: 15%;}
	.logoRow {height: 25%; padding: 2% 10px 0 5px;}
	.logoRowLinks {height: 25%; padding: 7% 1px 0 1px;}
	.textRow {height: 50%; padding: 0 1px 5% 1px;}
	.socialIconsRow {height: 10%;}
	
	.mainText {padding: 2% 2% 5% 2%;}

	.socialIconsRow {height: 5%;}
	
	.NYFlogo {width: 60px; height: 60px;}
	
	
	.NYFlogoText5 {letter-spacing: 0;}
	
}
  
 
/* --- Large devices (desktops, 992px and up) --- */
@media (min-width: 992px) and (max-width: 1199px) { 
	
	.mainAreaRow {height: 25%;}
	.logoRow {height: 25%; padding: 2% 2% 0 2%;;}
	.logoRowLinks {height: 25%; padding: 7% 2% 0 2%;}
	.textRow {height: 40%; padding: 0 2% 5% 2%;}
	.socialIconsRow {height: 10%;}
	
	.NYFlogo {width: 60px; height: 60px;}
	
	.mainText {padding: 2% 2% 5% 2%;}
	
	.socialIcons {width: 30px; height: 30px;}
	 
	.NYFlogoText5 {letter-spacing: 0.2px;}
	
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{
	.socialIcons {width: 30px; height: 30px;}
	.NYFlogo {width: 80px; height: 80px;}
	
}

/* --- Large devices (desktops, 1200px to 1575px) --- */
@media (min-width: 1200px) and (max-width: 1575px) { 
	.socialIcons {width: 30px; height: 30px;}
	.NYFlogo {width: 70px; height: 70px;}
	
	.NYFlogoText5 {letter-spacing: 0.5px;}
}
 





            
          
!
            
              		$(document).ready(function () {
			$('#logoTextSectionLinks').hide(); //when page load hide logo of links pages
			
			var mainTextString = 'Text..';
				
			var textNYFA = 'Advertising Awards honor advertising excellence through 19 competitions in' + 
				'all media from 80+ countries and represent the full spectrum of today’s advertising' + 
				'communications around the world.' ;
               			   
			// When hover with mouse on main area - homepage
			$('#mainAreaSection').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/collection/495468/1600x900) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
				
				$('#logoTextSectionLinks').hide();
				$('#logoTextSection').show();
				
				$('img.NYFlogo').attr({
					'src': 'images/ad-logo.png',
				});
				
				$('span.NYFlogoText5').text('INTERNATIONAL AWARDS COMPETITION FOR THE WORLD\'S BEST WORK');
				
				$('p#mainText').html(mainTextString);
				
			});
			
						
			// When hover with the mouse on the advertising award box
			$('#adAwardsLink').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/vaPoJZB9Mzg) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
			
				$('img.NYFlogo').attr({
					'src': 'images/ad-logo.png',
				});
				
				$('span.NYFlogoText3').text('ADVERTISING');
				$('span.NYFlogoText5').text('WORLD\'S BEST ADVERTISING');
				
				$('p#mainText').text(
					'Advertising Awards honor advertising excellence through 19 competitions in all media from 80+ countries and represent the full spectrum of today’s advertising communications around the world.'  
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();
				
			})
			
			// Radio 
			$('#radioAwards').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/collection/495468/1600x900) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
				
				$('img.NYFlogo').attr({
					'src': 'images/radio-logo.png',
				});
				
				$('span.NYFlogoText3').text('RADIO');
				$('span.NYFlogoText5').text('WORLD\'S BEST RADIO PROGRAMS&trade;');
				
				$('p#mainText').text(
					'Radio Awards honor innovative audio content in all genres and formats from independent producers, networks, and stations around the globe.' 
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();

			});
			
			//TV & Film 
			$('#tvFilmsAwards').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/collection/1596427/) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
				
				$('img.NYFlogo').attr({
					'src': 'images/tv-film-logo.png',
				});
				
				$('span.NYFlogoText3').text('TV&FILM');
				$('span.NYFlogoText5').text('WORLD\'S BEST TELEVISION AND FILMS;');
				
				$('p#mainText').text(
					'TV & Film Awards honor content in all lengths and across all platforms from around the world. Our categories encourage the next generation of story-tellers.' 
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();
				
			});
			
			// Global
			$('#globalAwards').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/collection/1596427/) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});		 
				
				$('img.NYFlogo').attr({
					'src': 'images/global-logo.png',
				});
				
				$('span.NYFlogoText3').text('GLOBAL');
				$('span.NYFlogoText5').text('WORLD\'S BEST HEALTHCARE AND WELLNESS ADVERTISING');
				
				$('p#mainText').text(
					'Global Awards honor excellence in healthcare communications and celebrates healthcare and wellness advertising, pharmaceutical (RX) advertising and communications on a global scale.' 
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();
				
				
			});
			
			// MIDAS 
			$('#midasAwards').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(https://source.unsplash.com/collection/1596427/) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
				
				$('img.NYFlogo').attr({
					'src': 'images/midas-logo-1.png',
				});
				
				$('span.NYFlogoText3').text('MIDAS');
				$('span.NYFlogoText5').text('WORLD\'S BEST FINANCIAL ADVERTISING');
				
				$('p#mainText').text(
					'Midas Awards honor excellence in financial services communications, including advertising and corporate communications for all mediums in the world-wide finance community.' 
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();
				
			});
			
			// AME
			$('#ameAwards').mouseenter(function () {
				$('html, body').css({
					
					'height': '100%' ,
					'margin': '0', 'padding': '0' ,
	
					'background': 'url(http://res.cloudinary.com/dxq3j4kus/image/upload/v1508476092/statue-of-liberty-1045266_1920_ez4k5w.jpg) no-repeat center center fixed' ,
	
					'-webkit-background-size': 'cover', 
					'-moz-background-size': 'cover', 
					'-o-background-size': 'cover', 
					'background-size': 'cover'
				});
				
				$('img.NYFlogo').attr({
					'src': 'images/ame-logo.png',
				});
				
				$('span.NYFlogoText3').text('AME');
				$('span.NYFlogoText5').text('WORLD\'S BEST ADVERTISING AND MARKETING EFFECTIVENESS');
				
				$('p#mainText').text(
					'AME Awards honor excellence in marketing effectiveness.  Judges evaluate creative execution, strategic planning, and groundbreaking solutions to solve challenging marketing problems. Judging is divided by region allowing all entries to be reviewed in their social, economic, and cultural context.' 
				);
				
				$('#logoTextSection').hide();
				$('#logoTextSectionLinks').show();

			});
			
		});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console