Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
06d25332 by Dan Rempel
Options

CWL 2018 Spring Ads for approval

1 parent de3ba32f
Inline Side-by-side
Showing 81 changed files with 2764 additions and 0 deletions
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
left: 33px;
opacity: 0;
}
#copy2{
top:108px;
}
#copy3{
left: 50px;
top: 35px;
}
#logo{
position: absolute;
width: 104px;
bottom:4px;
right:15px;
}
#logo img{
width: 104px;
height: auto;
}
.bar {
position: absolute;
width: 38px;
height: 20px;
}
.green{
background-color: #77BC1F;
top:15px;
}
.blue{
background-color: #009BDE;
top:40px;
}
.orange{
background-color: #F7A800;
top:65px;
}
.grey{
/* background-color: #55565A; */
background-color: #000000;
opacity:0.6;
top:90px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
left: 33px;
opacity: 0;
}
#copy2{
top:108px;
}
#copy3{
left: 50px;
top: 30px;
}
#logo{
position: absolute;
width: 104px;
bottom:4px;
right:15px;
}
#logo img{
width: 104px;
height: auto;
}
.bar {
position: absolute;
width: 38px;
height: 20px;
}
.green{
background-color: #77BC1F;
top:15px;
}
.blue{
background-color: #009BDE;
top:40px;
}
.orange{
background-color: #F7A800;
top:65px;
}
.grey{
/* background-color: #55565A; */
background-color: #000000;
opacity:0.6;
top:90px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 102px;
left: 33px;
opacity: 0;
}
#copy2{
top:108px;
}
#copy3{
left: 50px;
top: 30px;
}
#logo{
position: absolute;
width: 104px;
bottom:4px;
right:15px;
}
#logo img{
width: 104px;
height: auto;
}
.bar {
position: absolute;
width: 38px;
height: 20px;
}
.green{
background-color: #77BC1F;
top:15px;
}
.blue{
background-color: #009BDE;
top:40px;
}
.orange{
background-color: #F7A800;
top:65px;
}
.grey{
/* background-color: #55565A; */
background-color: #000000;
opacity:0.6;
top:90px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar green"></div>
<div id="bar2" class="bar blue"></div>
<div id="bar3" class="bar orange"></div>
<div id="bar4" class="bar grey"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="180"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="190"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="230"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var leftPos = 490;
tl.to("#bar4", .5, {width:242, height:80, ease:Power1.easeInOut, delay:.5 });
tl.to("#copy1", .7, {opacity:1, delay:0 });
tl.to("#copy1", .7, {opacity:0, delay:4 });
tl.to("#copy2", .7, {opacity:1, delay:-.5 });
tl.to("#copy2", .7, {opacity:0, delay:4 });
tl.to("#img", .7, {opacity:0, delay:0 });
tl.to("#bar4", .5, {width:38, height:20, ease:Power1.easeInOut, delay:-1.2 });
tl.to("#copy3", .7, {opacity:1, delay:-.2 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img{
height: auto;
}
#img{
position: absolute;
width: 257px;
left:21px;
top:24px;
}
#img img{
width: 257px;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 204px;
left: 31px;
opacity: 1;
}
#copy2{
top:261px;
left:-280px;
}
#copy3{
left: 37px;
top: 389px;
opacity: 0;
}
#logo{
position: absolute;
width: 185px;
bottom:37px;
left:55px;
}
#logo img{
width: 185px;
height: auto;
}
.bar {
position: absolute;
width: 22px;
left:-70px;
height: 16px;
}
.grey{
background-color: #55565A;
top:264px;
}
.green{
background-color: #77BC1F;
top:283px;
}
.blue{
background-color: #009BDE;
top:302px;
}
.orange{
background-color: #F7A800;
top:321px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
<div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 0;
tl.to("#copy2", 1, {left:31, ease:Power1.easeInOut, delay:3 });
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#copy3", 1, {opacity:1, delay:1 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img{
height: auto;
}
#img{
position: absolute;
width: 257px;
left:21px;
top:24px;
}
#img img{
width: 257px;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 204px;
left: 31px;
opacity: 1;
}
#copy2{
top:261px;
}
#copy3{
left: 37px;
top: 389px;
}
#logo{
position: absolute;
width: 185px;
bottom:37px;
left:55px;
}
#logo img{
width: 185px;
height: auto;
}
.bar {
position: absolute;
width: 22px;
height: 16px;
}
.grey{
background-color: #55565A;
top:264px;
}
.green{
background-color: #77BC1F;
top:283px;
}
.blue{
background-color: #009BDE;
top:302px;
}
.orange{
background-color: #F7A800;
top:321px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
<div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = -70;
tl.from("#copy2", 1, {left:-280, ease:Power1.easeInOut, delay:3 });
tl.from("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#copy3", 1, {opacity:0, delay:1 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img{
height: auto;
}
#img{
position: absolute;
width: 257px;
left:21px;
top:24px;
}
#img img{
width: 257px;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 204px;
left: 31px;
opacity: 1;
}
#copy2{
top:261px;
}
#copy3{
left: 37px;
top: 389px;
}
#logo{
position: absolute;
width: 185px;
bottom:37px;
left:55px;
}
#logo img{
width: 185px;
height: auto;
}
.bar {
position: absolute;
width: 22px;
height: 16px;
}
.grey{
background-color: #55565A;
top:264px;
}
.green{
background-color: #77BC1F;
top:283px;
}
.blue{
background-color: #009BDE;
top:302px;
}
.orange{
background-color: #F7A800;
top:321px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="img"><img src="assets/img.jpg" alt="img" width="300" height="179"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.png" alt="The Commonwell Logo" width="185"></div>
<div id="img"><img src="assets/img.jpg" alt="img" width="257"></div>
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="242"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="243"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="222"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = -70;
tl.from("#copy2", 1, {left:-280, ease:Power1.easeInOut, delay:3 });
tl.from("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.from("#copy3", 1, {opacity:0, delay:1 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 24px;
left: 57px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
}
#logo img{
width: 194px;
height: auto;
}
.bar {
position: absolute;
height: 19px;
width: 690px;
left: -653px;/*37*/
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
.white{
background-color: #FFFFFF;
height:90px;
width: 670px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
<div id="bar0" class="bar white"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 490;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy1", .7, {opacity:0, delay:-.9 });
tl.to("#copy2", .7, {opacity:1, delay:-.7 });
leftPos = -653;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy2", .7, {opacity:0, delay:-.9 });
tl.to("#copy3", .7, {opacity:1, delay:-.7 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 24px;
left: 57px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
}
#logo img{
width: 194px;
height: auto;
}
.bar {
position: absolute;
height: 19px;
width: 690px;
left: -653px;/*37*/
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
.white{
background-color: #FFFFFF;
height:90px;
width: 670px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
<div id="bar0" class="bar white"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 490;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy1", .7, {opacity:0, delay:-.9 });
tl.to("#copy2", .7, {opacity:1, delay:-.7 });
leftPos = -653;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy2", .7, {opacity:0, delay:-.9 });
tl.to("#copy3", .7, {opacity:1, delay:-.7 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="690.04" height="19.05" viewBox="0 0 690.04 19.05"><defs><style>.cls-1{fill:#55565a;}</style></defs><title>bar</title><rect class="cls-1" width="690.04" height="19.05"/></svg>
\ No newline at end of file
<!DOCTYPE html>
<head><script type="text/javascript">
(function() {
var relegateNavigation = '';
var handleClickTagMessage = function(e) {
try {
var eventData = JSON.parse(e.data);
} catch (err) {
return;
}
if (eventData.isInitClickTag) {
if (eventData.clickTags) {
for (var i = 0; i < eventData.clickTags.length; i++) {
var clkTag = eventData.clickTags[i];
window[clkTag.name] = clkTag.url;
}
} else if (eventData.clickTag) {
window.clickTag = eventData.clickTag;
}
relegateNavigation = eventData.relegateNavigation;
}
};
if (open.call) {
window.open = function(open) {
return function(url, name, features) {
if (relegateNavigation === 'parent') {
var message = {'clickTag': url, 'isPostClickTag': true};
parent.postMessage(JSON.stringify(message), '*');
} else {
var args = [url, name];
if (features) {
args.push(features);
}
open.apply(window, args);
}
};
}(window.open);
}
if (window.addEventListener) {
window.addEventListener(
'message', handleClickTagMessage, false);
} else {
window.attachEvent('onmessage', handleClickTagMessage);
}
})();
</script>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 728px;
height: 90px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
/*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
width: 728px;
height: 90px;
border: 1px solid #55565A;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#copy1, #copy2, #copy3{
position: absolute;
top: 24px;
left: 57px;
opacity: 0;
}
#copy1{
opacity: 1;
}
#logo{
position: absolute;
width: 194px;
right: 0px;
top: 0px;
}
#logo img{
width: 194px;
height: auto;
}
.bar {
position: absolute;
height: 19px;
width: 690px;
left: -653px;/*37*/
}
.grey{
background-color: #55565A;
top:0px;
}
.green{
background-color: #77BC1F;
top:23px;
}
.blue{
background-color: #009BDE;
top:46px;
}
.orange{
background-color: #F7A800;
top:69px;
}
.white{
background-color: #FFFFFF;
height:90px;
width: 670px;
}
</style>
</head>
<body>
<!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"> -->
<a href="javascript:eyeBuild.doClick(0)">
<div id="border">
<div id="copy1"><img src="assets/copy1@2x.png" alt="copy1@2x" width="332"></div>
<div id="copy2"><img src="assets/copy2@2x.png" alt="copy2@2x" width="378"></div>
<div id="copy3"><img src="assets/copy3@2x.png" alt="copy3@2x" width="469"></div>
<div id="bar0" class="bar white"></div>
<div id="bar1" class="bar grey"></div>
<div id="bar2" class="bar green"></div>
<div id="bar3" class="bar blue"></div>
<div id="bar4" class="bar orange"></div>
<div id="logo"><img src="assets/logo@2x.gif" alt="The Commonwell Logo"></div>
</div>
</a>
<!-- jQuery-->
<script src="//code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<!-- GREENSOCK-->
<!-- <script src="//www.greensock.com/js/src/utils/SplitText.min.js"></script> enables character or word animation - $99/yr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function stage1(){
var tl = new TimelineMax({repeat:1, repeatDelay:5});
var barDelay = -0.95;
var copyDelay = 2.5;
var leftPos = 490;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:5 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy1", .7, {opacity:0, delay:-.9 });
tl.to("#copy2", .7, {opacity:1, delay:-.7 });
leftPos = -653;
tl.to("#bar1", 1, {left:leftPos, ease:Power1.easeInOut, delay:4 });
tl.to("#bar2", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar3", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar4", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay });
tl.to("#bar0", 1, {left:leftPos, ease:Power1.easeInOut, delay:barDelay*1.1 });
tl.to("#copy2", .7, {opacity:0, delay:-.9 });
tl.to("#copy3", .7, {opacity:1, delay:-.7 });
console.log( "time: " + tl.totalDuration() );
}
//---------------------
$(document).ready(function(){
stage1();
});
</script>
</body>
</html>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.className = "start"
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
muteButton.addEventListener("click", function(e) {
if (video.muted == true) {
eyeBuild.doIAT(4);
} else {
eyeBuild.doIAT(3);
}
video.muted = !video.muted;
toggleClass(muteButton, "muted");
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
}
function toggleClass(element, toggleClass){
var currentClass = element.className;
if(currentClass.indexOf(toggleClass) > -1){ //has class
newClass = currentClass.replace(toggleClass,"")
}else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass;
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 169px;
top:0px;
}
#click-tag2{
display: block;
position: absolute;
width: 100%;
height: 243px;
top:357px;
}
#border{
position: relative;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#border:hover #cta{
background-color: #666666;
}
#border:active #cta{
background-color: #000000;
}
#video, #video-controls{
position: absolute;
width: 298px;
height: 167px;
left:1px;
top:169px;
}
#video-controls.start{
background: url(assets/video-poster.jpg) no-repeat center center;
opacity:1;
}
#video-controls.playing {
opacity:0;
}
#video-controls:hover {
opacity:1;
}
#video-controls button{
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
/*
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 127px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 126px;
background-size: 21px 21px;
}
*/
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 141px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 140px;
background-size: 21px 21px;
}
button#mute{
background: url(assets/mute-un.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
width: 22px;
height: 22px;
left:5px;
bottom: 5px;
}
button#mute.muted{
background: url(assets/mute.svg) no-repeat center center;
background-size: 20px 20px;
}
button#mute:hover{
background-size: 22px 22px;
}
</style>
</head>
<body>
<div id="border">
<div id="img"><img id="logoImg" src="assets/img.gif" width="300" height="600" style="border-style:none"></div>
<video id="video" width="272" height="152">
<source src="https://player.vimeo.com/external/233484382.sd.mp4?s=902644b5e5e2872370be3b5c3b80b9ef2547af91&profile_id=164" type="video/mp4" class="A">
<!-- <source src="https://player.vimeo.com/external/233484621.sd.mp4?s=57947d1e6ae360d26336a99694999f6d5e7dcad3&profile_id=164" type="video/mp4" class="B"> -->
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class=""></button>
<button type="button" id="mute" class=""></button>
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
</body>
</html>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
\ No newline at end of file
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.className = "start"
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
muteButton.addEventListener("click", function(e) {
if (video.muted == true) {
eyeBuild.doIAT(4);
} else {
eyeBuild.doIAT(3);
}
video.muted = !video.muted;
toggleClass(muteButton, "muted");
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
}
function toggleClass(element, toggleClass){
var currentClass = element.className;
if(currentClass.indexOf(toggleClass) > -1){ //has class
newClass = currentClass.replace(toggleClass,"")
}else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass;
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 600px;
height: 566px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 114px;
top:0px;
}
#click-tag2{
display: block;
position: absolute;
width: 100%;
height: 114px;
top:453px;
}
#border{
position: relative;
width: 600px;
height: 566px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#border:hover #cta{
background-color: #666666;
}
#border:active #cta{
background-color: #000000;
}
#video, #video-controls{
position: absolute;
width: 598px;
height: 337px;
left:1px;
top:113px;
}
#video-controls.start{
background: url(assets/video-poster.jpg) no-repeat center center;
opacity:1;
}
#video-controls.playing {
opacity:0;
}
#video-controls:hover {
opacity:1;
}
#video-controls button{
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
/*
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 127px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 126px;
background-size: 21px 21px;
}
*/
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 311px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 310px;
background-size: 21px 21px;
}
button#mute{
background: url(assets/mute-un.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
width: 22px;
height: 22px;
left:5px;
bottom: 5px;
}
button#mute.muted{
background: url(assets/mute.svg) no-repeat center center;
background-size: 20px 20px;
}
button#mute:hover{
background-size: 22px 22px;
}
</style>
</head>
<body>
<div id="border">
<div id="img"><img id="logoImg" src="assets/img.gif" width="600" height="566" style="border-style:none"></div>
<video id="video" width="272" height="152">
<source src="https://player.vimeo.com/external/233484382.sd.mp4?s=902644b5e5e2872370be3b5c3b80b9ef2547af91&profile_id=164" type="video/mp4" class="A">
<!-- <source src="https://player.vimeo.com/external/233484621.sd.mp4?s=57947d1e6ae360d26336a99694999f6d5e7dcad3&profile_id=164" type="video/mp4" class="B"> -->
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class=""></button>
<button type="button" id="mute" class=""></button>
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5 Online Ads</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3> -->
<iframe id='' class="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_A/index.html"></iframe>
<iframe id='' class="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_B/index.html"></iframe>
<iframe id='' class="b728x90 stacked" scrolling="no" src="CWL_2018_Spring_Online_728x90_C/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_A/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_B/index.html"></iframe>
<iframe id='' class="b300x250 " scrolling="no" src="CWL_2018_Spring_Online_300x250_C/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_A/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_B/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="CWL_2018_Spring_Online_300x600_C/index.html"></iframe>
</body>
</html>
html {
background-color: #d4d4d4;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #8e8e8e;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3em;
margin-left: 10px;
}
a {
color: #8e8e8e;
}
a:hover {
color: #FFFFFF;
}
iframe, img {
margin: 10px;
/* border: 1px #d4d4d4 solid; */
border: 0px fuchsia solid;
overflow: hidden;
iframe::-webkit-scrollbar {
display: none;
};
}
.stacked {
display: flex;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}