index.html 4.37 KB
<!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" lang="en" xml:lang="en">
	<head>
		<title>EY 2015 PMM HTML5 Ads</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
        <script type="text/javascript" src="assets/TweenMax.min.js"></script>


		<style type="text/css">
    		body {
                margin: 0 auto;
                padding: 0;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 1.5em;
                color: #8e8e8e;
            }

            
            .ad300x1050{
                width:300px;
                height: 1050px;
                padding-top: 1px;
                background-color: black;                
            }
            .ad270x40{
                width:270px;
                height: 40px;
                margin: 14px 15px 0px 15px;
            }
            .ad270x40 a{
                display: block;
                width:270px;
                height: 40px;
            }
            .ad270x460{
                box-sizing: border-box;
                width:270px;
                height: 460px;
                margin:15px;
                padding: 13px;
                background-image: url(assets/270x460-3.jpg);
            }
            .ad270x460 a{
                display: block;
                width:270px;
                height: 460px;
            }
            .ad270x220{
                width:270px;
                height: 220px;
                margin:15px;
            }
            .ad270x220 a{
                display: block;
                width:270px;
                height: 220px;
            }
            
            #mask-1{
                width:243px;
                height: 164px;
                overflow: hidden;
            }
            #app1 {
                background-image: url(assets/app1-img3.jpg);
            }
            #app1 a{
                background-image: url(assets/play-ey.svg);
                background-position: center center;
                background-repeat: no-repeat;
            }
            #app1 a:hover{
/*                 background-image: url(assets/play-ey-hover.svg); */
                background-size: 58px 58px;
            }
            #app2 {
                background-image: url(assets/app2-img.svg);
            }
            #app2 a{
                background-image: url(assets/app2-cta.svg);
                background-position: left 45px;
                background-repeat: no-repeat;
            }
            #app2 a:hover{
                background-image: url(assets/app2-cta-hover.svg);
            }
            #app2 .txt{
                margin-top: 45px;
            }

		</style>
	</head>
	<body>

	<div class="ad300x1050">
        
		<div id="logo" class="ad270x40">
            <a class="click-tag" href="javascript:eyeBuild.doClick(0);">
                <img src="assets/home-logo_ey.svg" alt="logo_ey" width="98" height="47" />
            </a>
		</div>
		<div id="primary" class="ad270x460">
            <a class="click-tag" href="javascript:eyeBuild.doClick(1);">
                <div id="mask-1">
            		<img id="txt" src="assets/270x460_txt_national-general.svg" alt="Life, business, both? What kinds of questions trigger growth and opportunity for your private company? See the movie." width="243" height="164" />
        		</div>
            </a>
    		
		</div>
		<div id="app1" class="ad270x220">
            <a class="click-tag" href="javascript:eyeBuild.doOpen();">
            </a>
		</div>
		<div id="app2" class="ad270x220">
            <a class="click-tag" href="javascript:eyeBuild.doClick(2);">
                <img class="txt" src="assets/app2-cta-txt.svg" alt="EY works with private business owners across Canada. Learn more." width="186" />
            </a>
		</div>
	</div>
		
    <script>
        eyeBuild.initialize();
        
        function stage1(){
        	var tl = new TimelineMax({repeat:0, repeatDelay:2});

         	tl.fromTo("#txt", .3, {y:165, ease:Power1.easeIn, delay:.5 }, {y:0, ease:Power1.easeIn, delay:.5 });
        	console.log( "time: " + tl.totalDuration() );
        }
        stage1();
    
    </script>

	
	</body>
</html>