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
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53 #logos {
54 right: 0px;
55 top: 185px;
56 opacity: 0;
57 }
58
59
60 /* Custom per ad */
61
62 body{
63 width: 300px;
64 height: 250px;
65 }
66
67 #blue {
68 left: -402px;
69 }
70
71 </style>
72
73 </head>
74
75 <body>
76 <div id="border">
77 <img id="img" src="assets/img.jpg">
78 <img id="blue" src="assets/blue.gif">
79 <img id="logos" src="assets/logos.gif">
80 <img id="triangle" src="assets/triangle.png">
81 <img id="check" src="assets/check.gif">
82
83 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
84 </div>
85
86 <!-- GREENSOCK-->
87 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
88 <script>
89 var tl = new TimelineMax({repeat:2});
90
91 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
92 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
93 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
94 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 });
95 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 });
96 </script>
97
98
99 </body>
100
101 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53 #logos {
54 right: 0px;
55 top: 185px;
56 opacity: 0;
57 }
58
59
60 /* Custom per ad */
61
62 body{
63 width: 300px;
64 height: 250px;
65 }
66
67 #blue {
68 left: -402px;
69 }
70
71 </style>
72
73 </head>
74
75 <body>
76 <div id="border">
77 <img id="img" src="assets/img.jpg">
78 <img id="blue" src="assets/blue.gif">
79 <img id="logos" src="assets/logos.gif">
80 <img id="triangle" src="assets/triangle.png">
81 <img id="check" src="assets/check.gif">
82
83 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
84 </div>
85
86 <!-- GREENSOCK-->
87 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
88 <script>
89 var tl = new TimelineMax({repeat:2});
90
91 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
92 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
93 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
94 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 });
95 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 });
96 </script>
97
98
99 </body>
100
101 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53 #logos {
54 right: 0px;
55 }
56
57
58 /* Custom per ad */
59
60 body{
61 width: 728px;
62 height: 90px;
63 }
64
65 #blue {
66 left: -402px;
67 }
68
69 </style>
70
71 </head>
72
73 <body>
74 <div id="border">
75 <img id="logos" src="assets/logos.gif">
76 <img id="img" src="assets/img.jpg">
77 <img id="blue" src="assets/blue.png">
78 <img id="triangle" src="assets/triangle.png">
79 <img id="check" src="assets/check.gif">
80
81 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
82 </div>
83
84 <!-- GREENSOCK-->
85 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
86 <script>
87 var tl = new TimelineMax({repeat:2});
88
89 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
90 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
91 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
92 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:3 });
93
94
95 </script>
96
97
98 </body>
99
100 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title>
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22
23
24
25 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 }
31 a{
32 text-decoration: none;
33 }
34 #click-tag{
35 display: block;
36 position: absolute;
37 width: 100%;
38 height: 100%;
39 }
40 #border{
41 position: relative;
42 width: 100%;
43 height: 100%;
44 border: 1px solid #939598;
45 background-color: #FFFFFF;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 }
50 img {
51 position: absolute;
52 }
53 #logos {
54 right: 0px;
55 }
56
57
58 /* Custom per ad */
59
60 body{
61 width: 728px;
62 height: 90px;
63 }
64
65 #blue {
66 left: -402px;
67 }
68
69 </style>
70
71 </head>
72
73 <body>
74 <div id="border">
75 <img id="logos" src="assets/logos.gif">
76 <img id="img" src="assets/img.jpg">
77 <img id="blue" src="assets/blue.png">
78 <img id="triangle" src="assets/triangle.png">
79 <img id="check" src="assets/check.gif">
80
81 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a>
82 </div>
83
84 <!-- GREENSOCK-->
85 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
86 <script>
87 var tl = new TimelineMax({repeat:2});
88
89 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 });
90 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 });
91 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 });
92 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:3 });
93
94 </script>
95
96
97 </body>
98
99 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <h3><a href="index.html">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3>
15
16 <iframe id='' class="b728x90 float" scrolling="no" src="728x90_Wiarton/index.html"></iframe>
17 <div style="width:700px">
18 <iframe id='' class="b300x250 float" scrolling="no" src="300x250_Wiarton/index.html"></iframe>
19 </div>
20 <!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Wiarton/index.html"></iframe> -->
21
22 </body>
23 </html>
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>HTML5 Online Ads</title>
8 <meta name="description" content="An interactive getting started guide for Brackets.">
9 <link rel="stylesheet" href="main.css">
10 <script src="main.js"></script>
11 </head>
12 <body>
13
14 <h3><a href="index.html">Wiarton</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_kin.html">Kincardine</a></h3>
15
16 <iframe id='' class="b728x90 float" scrolling="no" src="728x90_Kincardine/index.html"></iframe>
17 <div style="width:700px">
18 <iframe id='' class="b300x250 float" scrolling="no" src="300x250_Kincardine/index.html"></iframe>
19 </div>
20 <!-- <iframe id='' class="b300x600 stacked" scrolling="no" src="300x600_Kincardine/index.html"></iframe> -->
21
22 </body>
23 </html>
1 html {
2 background-color: #d4d4d4;
3 }
4
5 body {
6 margin: 0 auto;
7 padding: 2em 2em 4em;
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 14px;
10 line-height: 1.5em;
11 color: #8e8e8e;
12 }
13
14 h1, h2, h3, h4, h5, h6 {
15 font-weight: 600;
16 line-height: 1.3em;
17 margin-left: 10px;
18 }
19 a {
20 color: #8e8e8e;
21 }
22 a:hover {
23 color: #FFFFFF;
24 }
25 iframe, img {
26 margin: 10px;
27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
29 overflow: hidden;
30 iframe::-webkit-scrollbar {
31 display: none;
32 };
33 }
34
35 .stacked {
36 display: flex;
37
38 }
39 .float {
40 display: inline-flex;
41 vertical-align: top;
42 }
43 .b300x250 {
44 width: 300px;
45 height: 250px;
46 }
47 .b728x90 {
48 width: 728px;
49 height: 90px;
50 }
51 .b300x600 {
52 width: 300px;
53 height: 600px;
54 }
55 .b600x566 {
56 width: 600px;
57 height: 566px;
58 }
1 js file
...\ No newline at end of file ...\ No newline at end of file