Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
39b153c3 by Dan Rempel
Options

Bruce Kincardine and Wiarton for approval

1 parent 50408cd0
Inline Side-by-side
Showing 32 changed files with 506 additions and 0 deletions
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "https://businesstobruce.com/wiarton";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
#logos {
right: 0px;
top: 185px;
opacity: 0;
}
/* Custom per ad */
body{
width: 300px;
height: 250px;
}
#blue {
left: -402px;
}
</style>
</head>
<body>
<div id="border">
<img id="img" src="assets/img.jpg">
<img id="blue" src="assets/blue.gif">
<img id="logos" src="assets/logos.gif">
<img id="triangle" src="assets/triangle.png">
<img id="check" src="assets/check.gif">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2});
tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 });
</script>
</body>
</html>
\ 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 = "https://businesstobruce.com/wiarton";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
#logos {
right: 0px;
top: 185px;
opacity: 0;
}
/* Custom per ad */
body{
width: 300px;
height: 250px;
}
#blue {
left: -402px;
}
</style>
</head>
<body>
<div id="border">
<img id="img" src="assets/img.jpg">
<img id="blue" src="assets/blue.gif">
<img id="logos" src="assets/logos.gif">
<img id="triangle" src="assets/triangle.png">
<img id="check" src="assets/check.gif">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2});
tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 });
</script>
</body>
</html>
\ 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 = "https://businesstobruce.com/wiarton";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
#logos {
right: 0px;
}
/* Custom per ad */
body{
width: 728px;
height: 90px;
}
#blue {
left: -402px;
}
</style>
</head>
<body>
<div id="border">
<img id="logos" src="assets/logos.gif">
<img id="img" src="assets/img.jpg">
<img id="blue" src="assets/blue.png">
<img id="triangle" src="assets/triangle.png">
<img id="check" src="assets/check.gif">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2});
tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:3 });
</script>
</body>
</html>
\ 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 = "https://businesstobruce.com/wiarton";
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;
}
a{
text-decoration: none;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#border{
position: relative;
width: 100%;
height: 100%;
border: 1px solid #939598;
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img {
position: absolute;
}
#logos {
right: 0px;
}
/* Custom per ad */
body{
width: 728px;
height: 90px;
}
#blue {
left: -402px;
}
</style>
</head>
<body>
<div id="border">
<img id="logos" src="assets/logos.gif">
<img id="img" src="assets/img.jpg">
<img id="blue" src="assets/blue.png">
<img id="triangle" src="assets/triangle.png">
<img id="check" src="assets/check.gif">
<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
</div>
<!-- GREENSOCK-->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2});
tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:3 });
</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">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3>
<iframe id='' class="b728x90 float" scrolling="no" src="728x90_Wiarton/index.html"></iframe>
<div style="width:700px">
<iframe id='' class="b300x250 float" scrolling="no" src="300x250_Wiarton/index.html"></iframe>
</div>
<!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Wiarton/index.html"></iframe> -->
</body>
</html>
<!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">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3>
<iframe id='' class="b728x90 float" scrolling="no" src="728x90_Kincardine/index.html"></iframe>
<div style="width:700px">
<iframe id='' class="b300x250 float" scrolling="no" src="300x250_Kincardine/index.html"></iframe>
</div>
<!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Kincardine/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;
}
.float {
display: inline-flex;
vertical-align: top;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}
js file
\ No newline at end of file