Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
1c24230f by Jeremy Groot
Options

OPPI Summer 2021

1 parent 25559d72
Inline Side-by-side
Showing 29 changed files with 894 additions and 0 deletions
<svg xmlns="http://www.w3.org/2000/svg" width="116.05" height="24.76" viewBox="0 0 116.05 24.76"><title>btn_small</title><g id="ae2ce1e0-da9f-4132-8618-3a28e528cf1c" data-name="Layer 2"><g id="e8bd6253-da31-4f47-ad76-765dbb2eee92" data-name="Layer 1"><path d="M58.92,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17l5.62-5.63L58.32,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M51,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17L56,12.48,50.35,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M103.67,24.32H12.38a11.94,11.94,0,0,1,0-23.88h91.29a11.94,11.94,0,0,1,0,23.88Z" style="fill:none;stroke:#edc130;stroke-miterlimit:10;stroke-width:0.8809999823570251px"/></g></g></svg>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://ontarioplanners.ca/planonit";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
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: absolute;
width: 300px;
height: 250px;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
}
a{
text-decoration: none;
color: inherit;
}
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
#blue-panel {
width:100%;
height:250px;
max-height: 100%;
text-align: center;
position: absolute;
background:#0B4D85;
top:-240px;
}
#gold-panel {
width:100%;
height:165px;
max-height: 100%;
text-align: center;
position: absolute;
background:#EDC130;
bottom:-155px;
}
.txt1 {
position: absolute;
top:60px;
left:35px;
opacity: 0;
}
.txt2 {
position: absolute;
bottom:0;
bottom: 15px;
left: 50px;
}
.txt3 {
opacity: 0;
position: absolute;
left: 35px;
top: 5px;
}
.img1 {
position: absolute;
left: 70px;
top: 11px;
height: 160px;
}
.img2 {
opacity: 0;
position: absolute;
left: 35px;
top: 20px;
height: 45px;
}
.img3 {
opacity: 0;
position: absolute;
top: 125px;
left: 95px;
transition: x 0.5s;
}
.img3 path {
pointer-events: none;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{top:-160}, "+=4");
tl.to("#gold-panel",2,{bottom:-5}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to("#blue-panel",2,{top:0});
tl.to("#gold-panel",2,{bottom:-80}, "-=2");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img2",1,{opacity:1}, "-=1");
tl.to(".img3",1,{opacity:1}, "-=1");
}
function stopAnimateBtn() {
Tlpath.restart();
Tlpath.kill();
}
function animateBtn() {
Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
Tlpath.to(".img3 path:first-of-type",1,{x:10});
Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
Tlpath.to(".img3 path:first-of-type",0,{x:-10});
Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<meta name="ad.size" content="width=300,height=600">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://ontarioplanners.ca/planonit";
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>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
background:white;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
background:#F2F2F2;
}
#border{
position: absolute;
width: 300px;
height: 600px;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
}
a{
text-decoration: none;
color: inherit;
}
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
#blue-panel {
width:100%;
height:365px;
max-height: 100%;
text-align: center;
position: absolute;
background:#0B4D85;
top:-350px;
}
#gold-panel {
width:100%;
height:235px;
max-height: 100%;
text-align: center;
position: absolute;
right:-205px;
background:#EDC130;
bottom:-220px;
left:0;
}
.txt1 {
position: absolute;
top:135px;
left:20px;
opacity: 0;
}
.txt2 {
position: absolute;
top: 95px;
left: 45px;
}
.txt3 {
opacity: 0;
position: absolute;
left: 30px;
top: 70px;
}
.img1 {
position: absolute;
left: 65px;
top: 35px;
}
.img2 {
opacity: 0;
position: absolute;
left: 90px;
top: 60px;
}
.img3 {
opacity: 0;
position: absolute;
top: 255px;
left: 65px;
transition: x 0.5s;
}
.img3 path {
pointer-events: none;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{top:0}, "+=4");
tl.to("#gold-panel",2,{bottom:0}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to(".txt3",1,{opacity:1});
tl.to(".img2",1,{opacity:1}, "-=1");
tl.to(".img3",1,{opacity:1}, "-=1");
}
function stopAnimateBtn() {
Tlpath.restart();
Tlpath.kill();
}
function animateBtn() {
Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
Tlpath.to(".img3 path:first-of-type",1,{x:10});
Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
Tlpath.to(".img3 path:first-of-type",0,{x:-10});
Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<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 = "https://ontarioplanners.ca/planonit";
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>
<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: absolute;
width: 728px;
height: 90px;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* border:1px solid; */
}
a{
text-decoration: none;
color: inherit;
}
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
#blue-panel {
width:566px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
background:#0B4D85;
top:0;
left:-551px;
}
#gold-panel {
width:162px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
background:#EDC130;
right:-148px;
top:0;
}
.txt1 {
position: absolute;
top:15px;
left:120px;
opacity: 0;
}
.txt2 {
position: absolute;
top: 12px;
left: 140px;
}
.txt3 {
opacity: 0;
position: absolute;
left: 90px;
top: 20px;
}
.img1 {
position: absolute;
left: 30px;
top: -5px;
height: 100px;
}
.img2 {
opacity: 0;
position: absolute;
left: 40px;
top: 15px;
height: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<!-- <a href="javascript:eyeBuild.doClick(0)"> -->
<div id="border">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
</div>
</a>
<!-- GREENSOCK-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{left:0}, "+=4");
tl.to("#gold-panel",2,{right:0}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to(".txt3",1,{opacity:1});
tl.to(".img2",1,{opacity:1}, "-=1");
}
ready(stage1());
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=970,height=250">
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://ontarioplanners.ca/planonit";
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>
<style>
body{
margin: 0;
padding: 0;
width: 970px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: 0;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
background:#F2F2F2;
}
a{
text-decoration: none;
color: inherit;
}
#border{
position: absolute;
width: 970px;
height: 250px;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
#blue-panel {
width:100%;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
left:-745px;
background:#0B4D85;
top:0;
width:755px;
}
#gold-panel {
width:215px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
right:-205px;
background:#EDC130;
top:0;
}
#gold-panel img {
margin-top:40px;
}
.txt1 {
opacity: 0;
margin-top:60px;
}
.txt2 {
margin-top:75px;
}
.txt3 {
opacity: 0;
}
.img2 {
opacity: 0;
position: absolute;
top: 40px;
left: 55px;
}
.txt3 {
position: absolute;
top: 75px;
left: 55px;
}
</style>
</head>
<body>
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
</div>
</a>
<!-- GREENSOCK-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function stage1(){
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{left:0}, "+=4");
tl.to("#gold-panel",2,{right:0}, "-=2");
tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
tl.to(".img1",1.5,{opacity:0}, "-=1.5");
tl.to(".txt3",1.5,{opacity:1});
tl.to(".img2",1.5,{opacity:1}, "-=1.5");
}
ready(stage1());
</script>
</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">WPV Spring Digital Media Ads</a></h3>
<h1>OPPI Spring Media Ads</h1>
<iframe id='' class="b300x250 " scrolling="no" src="300x250/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-2/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;
}