Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
aa7cea9b by Jeremy Groot
Options

HHF ads

1 parent b9a629df
Inline Side-by-side
Showing 57 changed files with 2639 additions and 0 deletions
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25
26 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
27 rel="stylesheet">
28 <style>
29 body {
30 margin: 0;
31 padding: 0;
32 width: 300px;
33 height: 600px;
34 line-height: 1.7;
35 font-size: 24px;
36 letter-spacing: 0;
37 font-family: 'Libre Caslon Text', serif;
38 font-style: normal;
39 background: #F2F2F2;
40 }
41
42 a {
43 text-decoration: none;
44 color: inherit;
45 }
46
47 #border {
48 position: absolute;
49 width: 300px;
50 height: 600px;
51 background: #F2F2F2;
52 overflow: hidden;
53 cursor: pointer;
54 box-sizing: border-box;
55 }
56
57 #txt-panel {
58 position: absolute;
59 top: 0px;
60 left: 10px;
61 width: 280px;
62 }
63
64 #txt-panel p {
65 opacity: 0;
66 color: #fff;
67 font-weight: 200;
68 text-align: center;
69 }
70
71
72 #txt-panel p strong {
73 opacity: 0;
74 font-weight: 700;
75 margin-top: 20px;
76 font-size: 32px;
77 display: block;
78 }
79
80 #circles-panel {
81 position: absolute;
82 top: 220px;
83 left: 134px;
84 }
85
86 #circles-panel svg {
87 height: 153px;
88 width: 37px;
89 }
90
91 #selfie-panel {
92 position: absolute;
93 top: 288px;
94 left: 84px;
95 opacity: 0;
96
97 }
98
99 #button-panel {
100 position: absolute;
101 top: 440px;
102 left: 40px;
103 opacity: 0;
104
105 }
106 </style>
107 </head>
108
109 <body>
110 <a id="click-tag" href="javascript:window.open(window.clickTag)">
111 <div id="border">
112 <div id="txt-panel">
113 <p>When a Lake Vernon double flip lands you in the hospital.<br /><strong>Count On Us.</strong>
114 </p>
115 </div>
116
117 <div id="circles-panel">
118 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
119 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
120 transform="translate(0 0)"
121 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
122 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
123 transform="translate(0 0)"
124 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
125 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
126 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
127 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
129 </div>
130
131 <div id="selfie-panel">
132 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
133 </div>
134
135 <div id="button-panel">
136 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
137 </div>
138
139 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
140
141 </div></a>
142
143 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
144
145 <script>
146
147
148 function ready(fn) {
149 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
150 fn();
151 } else {
152 document.addEventListener('DOMContentLoaded', fn);
153 }
154 }
155
156
157 var
158 pulse2 = document.getElementById("outer"),
159 pulse1 = document.getElementById("mid"),
160 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
161
162 tl.fromTo(pulse1, 1,
163 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
164 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
165 )
166 .fromTo(pulse2, 1,
167 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
168 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
169 )
170 ;
171
172
173
174 function stage1() {
175 var line = document.getElementById("line");
176 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
177
178 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
179 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
180 tl2.fromTo(line, 3,
181 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
182 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
183 )
184 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
185 tl2.fromTo("#button-panel", 1,
186 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
187 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
188 )
189
190
191 }
192
193 ready(stage1());
194
195 </script>
196
197 </body>
198
199 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25
26 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
27 rel="stylesheet">
28 <style>
29 body {
30 margin: 0;
31 padding: 0;
32 width: 970px;
33 height: 250px;
34 line-height: 1.7;
35 font-size: 29px;
36 letter-spacing: 0;
37 font-family: 'Libre Caslon Text', serif;
38 font-style: normal;
39 background: #F2F2F2;
40 }
41
42 a {
43 text-decoration: none;
44 color: inherit;
45 }
46
47 #border {
48 position: absolute;
49 width: 970px;
50 height: 250px;
51 background: #F2F2F2;
52 overflow: hidden;
53 cursor: pointer;
54 box-sizing: border-box;
55 }
56
57 #txt-panel {
58 position: absolute;
59 top: 0px;
60 left: 44px;
61 width: 530px;
62 }
63
64 #txt-panel p {
65 opacity: 0;
66 color: #fff;
67 font-weight: 200;
68 }
69
70
71 #txt-panel p strong {
72 opacity: 0;
73 font-weight: 700;
74 }
75
76 #circles-panel {
77 position: absolute;
78 top: 140px;
79 left: 344px;
80 }
81
82 #circles-panel svg {
83 height: 39px;
84 width: 267px;
85 }
86
87 #selfie-panel {
88 position: absolute;
89 top: 90px;
90 left: 570px;
91 opacity: 0;
92 }
93
94 #button-panel {
95 position: absolute;
96 top: 70px;
97 left: 720px;
98 opacity: 0;
99 }
100
101 .img2 {
102 opacity: 0;
103 position: absolute;
104 top: 40px;
105 left: 55px;
106 }
107
108 .txt3 {
109 position: absolute;
110 top: 75px;
111 left: 55px;
112 }
113 </style>
114
115 </head>
116
117 <body>
118 <a id="click-tag" href="javascript:window.open(window.clickTag)">
119 <div id="border">
120
121 <div id="txt-panel">
122 <p>When a Lake Vernon double flip lands you in the hospital. <strong> Count On Us.</strong></p>
123 </div>
124 <div id="circles-panel">
125 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
126 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
127 transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
130 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
131 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
132 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
133 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
134 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
135 </svg>
136 </div>
137 <div id="selfie-panel">
138 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
139 </div>
140 <div id="button-panel">
141 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
142 </div>
143 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
144
145 </div>
146 </a>
147
148 <!-- GREENSOCK-->
149 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
150
151 <script>
152
153
154 function ready(fn) {
155 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
156 fn();
157 } else {
158 document.addEventListener('DOMContentLoaded', fn);
159 }
160 }
161
162 var
163 pulse2 = document.getElementById("outer"),
164 pulse1 = document.getElementById("mid"),
165 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
166
167 tl.fromTo(pulse1, 1,
168 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
169 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
170 )
171 .fromTo(pulse2, 1,
172 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
173 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
174 )
175 ;
176
177
178
179 function stage1() {
180 var line = document.getElementById("line");
181 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
182
183 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
184 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
185 tl2.fromTo(line, 3,
186 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
187 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
188 )
189 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
190 tl2.fromTo("#button-panel", 1,
191 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
192 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
193 )
194
195
196 }
197
198 ready(stage1());
199
200 </script>
201
202 </body>
203
204 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
26 rel="stylesheet">
27 <style>
28 body {
29 margin: 0;
30 padding: 0;
31 width: 300px;
32 height: 600px;
33 line-height: 1.7;
34 font-size: 22px;
35 letter-spacing: 0;
36 font-family: 'Libre Caslon Text', serif;
37 font-style: normal;
38 background: #F2F2F2;
39 }
40
41 a {
42 text-decoration: none;
43 color: inherit;
44 }
45
46 #border {
47 position: absolute;
48 width: 300px;
49 height: 600px;
50 background: #F2F2F2;
51 overflow: hidden;
52 cursor: pointer;
53 box-sizing: border-box;
54 }
55
56 #txt-panel {
57 position: absolute;
58 top: 0px;
59 left: 10px;
60 width: 280px;
61 }
62
63 #txt-panel p {
64 opacity: 0;
65 color: #fff;
66 font-weight: 200;
67 text-align: center;
68 }
69
70
71 #txt-panel p strong {
72 opacity: 0;
73 font-weight: 700;
74 margin-top: 20px;
75 font-size: 32px;
76 display: block;
77 }
78
79 #circles-panel {
80 position: absolute;
81 top: 220px;
82 left: 134px;
83 }
84
85 #circles-panel svg {
86 height: 153px;
87 width: 37px;
88 }
89
90 #selfie-panel {
91 position: absolute;
92 top: 288px;
93 left: 84px;
94 opacity: 0;
95
96 }
97
98 #button-panel {
99 position: absolute;
100 top: 440px;
101 left: 40px;
102 opacity: 0;
103
104 }
105 </style>
106 </head>
107
108 <body>
109 <a id="click-tag" href="javascript:window.open(window.clickTag)">
110 <div id="border">
111 <div id="txt-panel">
112 <p>If you catch a Northern pike in Mary Lake
113 and then the pike catches you.<strong> Count On Us.</strong></p>
114 </div>
115
116 <div id="circles-panel">
117 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
118 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
119 transform="translate(0 0)"
120 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
121 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
122 transform="translate(0 0)"
123 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
124 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
125 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
126 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
127 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
128 </div>
129
130 <div id="selfie-panel">
131 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
132 </div>
133
134 <div id="button-panel">
135 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
136 </div>
137
138 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
139 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
140 </div>
141 </a>
142 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
143
144 <script>
145
146
147 function ready(fn) {
148 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
149 fn();
150 } else {
151 document.addEventListener('DOMContentLoaded', fn);
152 }
153 }
154
155
156 var
157 pulse2 = document.getElementById("outer"),
158 pulse1 = document.getElementById("mid"),
159 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
160
161 tl.fromTo(pulse1, 1,
162 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
163 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
164 )
165 .fromTo(pulse2, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
168 )
169 ;
170
171
172
173 function stage1() {
174 var line = document.getElementById("line");
175 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
176
177 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
178 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
179 tl2.fromTo(line, 3,
180 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
181 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
182 )
183 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
184 tl2.fromTo("#button-panel", 1,
185 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
186 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
187 )
188
189
190 }
191
192 ready(stage1());
193
194 </script>
195
196 </body>
197
198 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
26 rel="stylesheet">
27 <style>
28 body {
29 margin: 0;
30 padding: 0;
31 width: 970px;
32 height: 250px;
33 line-height: 1.7;
34 font-size: 29px;
35 letter-spacing: 0;
36 font-family: 'Libre Caslon Text', serif;
37 font-style: normal;
38 background: #F2F2F2;
39 }
40
41 a {
42 text-decoration: none;
43 color: inherit;
44 }
45
46 #border {
47 position: absolute;
48 width: 970px;
49 height: 250px;
50 background: #F2F2F2;
51 overflow: hidden;
52 cursor: pointer;
53 box-sizing: border-box;
54 }
55
56 #txt-panel {
57 position: absolute;
58 top: 0px;
59 left: 44px;
60 width: 530px;
61 }
62
63 #txt-panel p {
64 opacity: 0;
65 color: #fff;
66 font-weight: 200;
67 }
68
69
70 #txt-panel p strong {
71 opacity: 0;
72 font-weight: 700;
73 }
74
75 #circles-panel {
76 position: absolute;
77 top: 140px;
78 left: 344px;
79 }
80
81 #circles-panel svg {
82 height: 39px;
83 width: 267px;
84 }
85
86 #selfie-panel {
87 position: absolute;
88 top: 90px;
89 left: 570px;
90 opacity: 0;
91 }
92
93 #button-panel {
94 position: absolute;
95 top: 70px;
96 left: 720px;
97 opacity: 0;
98 }
99
100 .img2 {
101 opacity: 0;
102 position: absolute;
103 top: 40px;
104 left: 55px;
105 }
106
107 .txt3 {
108 position: absolute;
109 top: 75px;
110 left: 55px;
111 }
112 </style>
113
114 </head>
115
116 <body>
117 <a id="click-tag" href="javascript:window.open(window.clickTag)">
118 <div id="border">
119
120 <div id="txt-panel">
121 <p>If you catch a Northern pike in Mary Lake
122 and then the pike catches you.<strong> Count On Us.</strong></p>
123 </div>
124 <div id="circles-panel">
125 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
126 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
127 transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
130 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
131 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
132 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
133 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
134 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
135 </svg>
136 </div>
137 <div id="selfie-panel">
138 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
139 </div>
140 <div id="button-panel">
141 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
142 </div>
143 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
144
145 </div>
146 </a>
147
148 <!-- GREENSOCK-->
149 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
150
151 <script>
152
153
154 function ready(fn) {
155 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
156 fn();
157 } else {
158 document.addEventListener('DOMContentLoaded', fn);
159 }
160 }
161
162 var
163 pulse2 = document.getElementById("outer"),
164 pulse1 = document.getElementById("mid"),
165 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
166
167 tl.fromTo(pulse1, 1,
168 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
169 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
170 )
171 .fromTo(pulse2, 1,
172 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
173 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
174 )
175 ;
176
177
178
179 function stage1() {
180 var line = document.getElementById("line");
181 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
182
183 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
184 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
185 tl2.fromTo(line, 3,
186 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
187 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
188 )
189 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
190 tl2.fromTo("#button-panel", 1,
191 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
192 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
193 )
194
195
196 }
197
198 ready(stage1());
199
200 </script>
201
202 </body>
203
204 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://huntsvillehospitalfoundation.ca";
13 function getParameterByName(name)
14 {
15 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
16 if (match == null || match == ""){
17 return clickTag;
18 } else{
19 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
20 }
21 }
22 clickTag = getParameterByName('clickTag');
23 </script>
24
25 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
26 rel="stylesheet">
27 <style>
28 body {
29 margin: 0;
30 padding: 0;
31 width: 300px;
32 height: 600px;
33 line-height: 1.7;
34 font-size: 24px;
35 letter-spacing: 0;
36 font-family: 'Libre Caslon Text', serif;
37 font-style: normal;
38 background: #F2F2F2;
39 }
40
41 a {
42 text-decoration: none;
43 color: inherit;
44 }
45
46 #border {
47 position: absolute;
48 width: 300px;
49 height: 600px;
50 background: #F2F2F2;
51 overflow: hidden;
52 cursor: pointer;
53 box-sizing: border-box;
54 }
55
56 #txt-panel {
57 position: absolute;
58 top: 0px;
59 left: 10px;
60 width: 280px;
61 }
62
63 #txt-panel p {
64 opacity: 0;
65 color: #fff;
66 font-weight: 200;
67 text-align: center;
68 }
69
70
71 #txt-panel p strong {
72 opacity: 0;
73 font-weight: 700;
74 margin-top: 20px;
75 font-size: 32px;
76 display: block;
77 }
78
79 #circles-panel {
80 position: absolute;
81 top: 220px;
82 left: 134px;
83 }
84
85 #circles-panel svg {
86 height: 153px;
87 width: 37px;
88 }
89
90 #selfie-panel {
91 position: absolute;
92 top: 288px;
93 left: 84px;
94 opacity: 0;
95
96 }
97
98 #button-panel {
99 position: absolute;
100 top: 440px;
101 left: 40px;
102 opacity: 0;
103
104 }
105 </style>
106 </head>
107
108 <body>
109 <a id="click-tag" href="javascript:window.open(window.clickTag)">
110 <div id="border">
111 <div id="txt-panel">
112 <p>When you learn every axe on Fairy Lake
113 cuts both ways.<br><strong> Count On Us.</strong></p>
114 </div>
115
116 <div id="circles-panel">
117 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
118 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
119 transform="translate(0 0)"
120 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
121 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
122 transform="translate(0 0)"
123 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
124 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
125 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
126 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
127 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
128 </div>
129
130 <div id="selfie-panel">
131 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
132 </div>
133
134 <div id="button-panel">
135 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
136 </div>
137
138 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
139 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
140 </div>
141 </a>
142 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
143
144 <script>
145
146
147 function ready(fn) {
148 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
149 fn();
150 } else {
151 document.addEventListener('DOMContentLoaded', fn);
152 }
153 }
154
155
156 var
157 pulse2 = document.getElementById("outer"),
158 pulse1 = document.getElementById("mid"),
159 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
160
161 tl.fromTo(pulse1, 1,
162 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
163 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
164 )
165 .fromTo(pulse2, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
168 )
169 ;
170
171
172
173 function stage1() {
174 var line = document.getElementById("line");
175 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
176
177 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
178 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
179 tl2.fromTo(line, 3,
180 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
181 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
182 )
183 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
184 tl2.fromTo("#button-panel", 1,
185 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
186 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
187 )
188
189
190 }
191
192 ready(stage1());
193
194 </script>
195
196 </body>
197
198 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 970px;
30 height: 250px;
31 line-height: 1.7;
32 font-size: 29px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 970px;
47 height: 250px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 44px;
58 width: 530px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 }
66
67
68 #txt-panel p strong {
69 opacity: 0;
70 font-weight: 700;
71 }
72
73 #circles-panel {
74 position: absolute;
75 top: 140px;
76 left: 344px;
77 }
78
79 #circles-panel svg {
80 height: 39px;
81 width: 267px;
82 }
83
84 #selfie-panel {
85 position: absolute;
86 top: 90px;
87 left: 570px;
88 opacity: 0;
89 }
90
91 #button-panel {
92 position: absolute;
93 top: 70px;
94 left: 720px;
95 opacity: 0;
96 }
97
98 .img2 {
99 opacity: 0;
100 position: absolute;
101 top: 40px;
102 left: 55px;
103 }
104
105 .txt3 {
106 position: absolute;
107 top: 75px;
108 left: 55px;
109 }
110 </style>
111
112 </head>
113
114 <body>
115 <a id="click-tag" href="javascript:window.open(window.clickTag)">
116 <div id="border">
117
118 <div id="txt-panel">
119 <p>When you learn every axe on Fairy Lake
120 cuts both ways.<strong> Count On Us.</strong></p>
121 </div>
122 <div id="circles-panel">
123 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
124 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
125 transform="translate(0.03 0)"
126 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
127 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
130 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
131 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
132 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
133 </svg>
134 </div>
135 <div id="selfie-panel">
136 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
137 </div>
138 <div id="button-panel">
139 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
140 </div>
141 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
142
143 </div>
144 </a>
145
146 <!-- GREENSOCK-->
147 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
148
149 <script>
150
151
152 function ready(fn) {
153 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
154 fn();
155 } else {
156 document.addEventListener('DOMContentLoaded', fn);
157 }
158 }
159
160 var
161 pulse2 = document.getElementById("outer"),
162 pulse1 = document.getElementById("mid"),
163 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
164
165 tl.fromTo(pulse1, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
168 )
169 .fromTo(pulse2, 1,
170 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
171 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
172 )
173 ;
174
175
176
177 function stage1() {
178 var line = document.getElementById("line");
179 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
180
181 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
182 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
183 tl2.fromTo(line, 3,
184 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
185 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
186 )
187 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
188 tl2.fromTo("#button-panel", 1,
189 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
190 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
191 )
192
193
194 }
195
196 ready(stage1());
197
198 </script>
199
200 </body>
201
202 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 300px;
30 height: 600px;
31 line-height: 1.7;
32 font-size: 24px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 300px;
47 height: 600px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 10px;
58 width: 280px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 text-align: center;
66 }
67
68
69 #txt-panel p strong {
70 opacity: 0;
71 font-weight: 700;
72 margin-top: 10px;
73 font-size: 32px;
74 display: block;
75 }
76
77 #circles-panel {
78 position: absolute;
79 top: 220px;
80 left: 134px;
81 }
82
83 #circles-panel svg {
84 height: 153px;
85 width: 37px;
86 }
87
88 #selfie-panel {
89 position: absolute;
90 top: 288px;
91 left: 84px;
92 opacity: 0;
93
94 }
95
96 #button-panel {
97 position: absolute;
98 top: 440px;
99 left: 40px;
100 opacity: 0;
101
102 }
103 </style>
104 </head>
105
106 <body>
107 <a id="click-tag" href="javascript:window.open(window.clickTag)">
108 <div id="border">
109 <div id="txt-panel">
110 <p>When you're hiking north of Novar and
111 you have a Burk’s Fall.<br /><strong> Count On Us.</strong></p>
112 </div>
113
114 <div id="circles-panel">
115 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
116 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
117 transform="translate(0 0)"
118 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
119 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
120 transform="translate(0 0)"
121 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
122 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
123 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
124 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
125 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
126 </div>
127
128 <div id="selfie-panel">
129 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
130 </div>
131
132 <div id="button-panel">
133 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
134 </div>
135
136 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
137 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
138 </div>
139 </a>
140 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
141
142 <script>
143
144
145 function ready(fn) {
146 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
147 fn();
148 } else {
149 document.addEventListener('DOMContentLoaded', fn);
150 }
151 }
152
153
154 var
155 pulse2 = document.getElementById("outer"),
156 pulse1 = document.getElementById("mid"),
157 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
158
159 tl.fromTo(pulse1, 1,
160 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
161 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
162 )
163 .fromTo(pulse2, 1,
164 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
165 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
166 )
167 ;
168
169
170
171 function stage1() {
172 var line = document.getElementById("line");
173 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
174
175 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
176 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
177 tl2.fromTo(line, 3,
178 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
179 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
180 )
181 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
182 tl2.fromTo("#button-panel", 1,
183 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
184 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
185 )
186
187
188 }
189
190 ready(stage1());
191
192 </script>
193
194 </body>
195
196 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 970px;
30 height: 250px;
31 line-height: 1.7;
32 font-size: 29px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 970px;
47 height: 250px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 44px;
58 width: 530px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 }
66
67
68 #txt-panel p strong {
69 opacity: 0;
70 font-weight: 700;
71 }
72
73 #circles-panel {
74 position: absolute;
75 top: 140px;
76 left: 344px;
77 }
78
79 #circles-panel svg {
80 height: 39px;
81 width: 267px;
82 }
83
84 #selfie-panel {
85 position: absolute;
86 top: 90px;
87 left: 570px;
88 opacity: 0;
89 }
90
91 #button-panel {
92 position: absolute;
93 top: 70px;
94 left: 720px;
95 opacity: 0;
96 }
97
98 .img2 {
99 opacity: 0;
100 position: absolute;
101 top: 40px;
102 left: 55px;
103 }
104
105 .txt3 {
106 position: absolute;
107 top: 75px;
108 left: 55px;
109 }
110 </style>
111
112 </head>
113
114 <body>
115 <a id="click-tag" href="javascript:window.open(window.clickTag)">
116 <div id="border">
117
118 <div id="txt-panel">
119 <p>When you're hiking north of Novar and
120 you have a Burk’s Fall.<br /><strong> Count On Us.</strong></p>
121 </div>
122 <div id="circles-panel">
123 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
124 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
125 transform="translate(0.03 0)"
126 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
127 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
130 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
131 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
132 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
133 </svg>
134 </div>
135 <div id="selfie-panel">
136 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
137 </div>
138 <div id="button-panel">
139 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
140 </div>
141 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
142
143 </div>
144 </a>
145
146 <!-- GREENSOCK-->
147 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
148
149 <script>
150
151
152 function ready(fn) {
153 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
154 fn();
155 } else {
156 document.addEventListener('DOMContentLoaded', fn);
157 }
158 }
159
160 var
161 pulse2 = document.getElementById("outer"),
162 pulse1 = document.getElementById("mid"),
163 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
164
165 tl.fromTo(pulse1, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
168 )
169 .fromTo(pulse2, 1,
170 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
171 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
172 )
173 ;
174
175
176
177 function stage1() {
178 var line = document.getElementById("line");
179 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
180
181 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
182 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
183 tl2.fromTo(line, 3,
184 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
185 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
186 )
187 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
188 tl2.fromTo("#button-panel", 1,
189 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
190 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
191 )
192
193
194 }
195
196 ready(stage1());
197
198 </script>
199
200 </body>
201
202 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 300px;
30 height: 600px;
31 line-height: 1.7;
32 font-size: 24px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 300px;
47 height: 600px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 10px;
58 width: 280px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 text-align: center;
66 }
67
68
69 #txt-panel p strong {
70 opacity: 0;
71 font-weight: 700;
72 margin-top: 20px;
73 font-size: 32px;
74 display: block;
75 }
76
77 #circles-panel {
78 position: absolute;
79 top: 220px;
80 left: 134px;
81 }
82
83 #circles-panel svg {
84 height: 153px;
85 width: 37px;
86 }
87
88 #selfie-panel {
89 position: absolute;
90 top: 288px;
91 left: 84px;
92 opacity: 0;
93
94 }
95
96 #button-panel {
97 position: absolute;
98 top: 440px;
99 left: 40px;
100 opacity: 0;
101
102 }
103 </style>
104 </head>
105
106 <body>
107 <a id="click-tag" href="javascript:window.open(window.clickTag)">
108 <div id="border">
109 <div id="txt-panel">
110 <p>When tripping in Algonquin and you
111 tumble into poison ivy.<br><strong> Count On Us.</strong></p>
112 </div>
113
114 <div id="circles-panel">
115 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
116 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
117 transform="translate(0 0)"
118 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
119 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
120 transform="translate(0 0)"
121 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
122 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
123 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
124 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
125 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
126 </div>
127
128 <div id="selfie-panel">
129 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
130 </div>
131
132 <div id="button-panel">
133 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
134 </div>
135
136 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
137 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
138 </div>
139 </a>
140 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
141
142 <script>
143
144
145 function ready(fn) {
146 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
147 fn();
148 } else {
149 document.addEventListener('DOMContentLoaded', fn);
150 }
151 }
152
153
154 var
155 pulse2 = document.getElementById("outer"),
156 pulse1 = document.getElementById("mid"),
157 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
158
159 tl.fromTo(pulse1, 1,
160 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
161 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
162 )
163 .fromTo(pulse2, 1,
164 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
165 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
166 )
167 ;
168
169
170
171 function stage1() {
172 var line = document.getElementById("line");
173 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
174
175 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
176 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
177 tl2.fromTo(line, 3,
178 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
179 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
180 )
181 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
182 tl2.fromTo("#button-panel", 1,
183 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
184 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
185 )
186
187
188 }
189
190 ready(stage1());
191
192 </script>
193
194 </body>
195
196 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 970px;
30 height: 250px;
31 line-height: 1.7;
32 font-size: 29px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 970px;
47 height: 250px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 44px;
58 width: 530px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 }
66
67
68 #txt-panel p strong {
69 opacity: 0;
70 font-weight: 700;
71 }
72
73 #circles-panel {
74 position: absolute;
75 top: 140px;
76 left: 344px;
77 }
78
79 #circles-panel svg {
80 height: 39px;
81 width: 267px;
82 }
83
84 #selfie-panel {
85 position: absolute;
86 top: 90px;
87 left: 570px;
88 opacity: 0;
89 }
90
91 #button-panel {
92 position: absolute;
93 top: 70px;
94 left: 720px;
95 opacity: 0;
96 }
97
98 .img2 {
99 opacity: 0;
100 position: absolute;
101 top: 40px;
102 left: 55px;
103 }
104
105 .txt3 {
106 position: absolute;
107 top: 75px;
108 left: 55px;
109 }
110 </style>
111
112 </head>
113
114 <body>
115 <a id="click-tag" href="javascript:window.open(window.clickTag)">
116 <div id="border">
117
118 <div id="txt-panel">
119 <p>When tripping in Algonquin and you
120 tumble into poison ivy.<strong> Count On Us.</strong></p>
121 </div>
122 <div id="circles-panel">
123 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
124 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
125 transform="translate(0.03 0)"
126 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
127 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
130 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
131 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
132 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
133 </svg>
134 </div>
135 <div id="selfie-panel">
136 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
137 </div>
138 <div id="button-panel">
139 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
140 </div>
141 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
142
143 </div>
144 </a>
145
146 <!-- GREENSOCK-->
147 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
148
149 <script>
150
151
152 function ready(fn) {
153 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
154 fn();
155 } else {
156 document.addEventListener('DOMContentLoaded', fn);
157 }
158 }
159
160 var
161 pulse2 = document.getElementById("outer"),
162 pulse1 = document.getElementById("mid"),
163 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
164
165 tl.fromTo(pulse1, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
168 )
169 .fromTo(pulse2, 1,
170 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
171 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
172 )
173 ;
174
175
176
177 function stage1() {
178 var line = document.getElementById("line");
179 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
180
181 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
182 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
183 tl2.fromTo(line, 3,
184 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
185 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
186 )
187 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
188 tl2.fromTo("#button-panel", 1,
189 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
190 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
191 )
192
193
194 }
195
196 ready(stage1());
197
198 </script>
199
200 </body>
201
202 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23
24 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
25 rel="stylesheet">
26 <style>
27 body {
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 600px;
32 line-height: 1.7;
33 font-size: 24px;
34 letter-spacing: 0;
35 font-family: 'Libre Caslon Text', serif;
36 font-style: normal;
37 background: #F2F2F2;
38 }
39
40 a {
41 text-decoration: none;
42 color: inherit;
43 }
44
45 #border {
46 position: absolute;
47 width: 300px;
48 height: 600px;
49 background: #F2F2F2;
50 overflow: hidden;
51 cursor: pointer;
52 box-sizing: border-box;
53 }
54
55 #txt-panel {
56 position: absolute;
57 top: 0px;
58 left: 10px;
59 width: 280px;
60 }
61
62 #txt-panel p {
63 opacity: 0;
64 color: #fff;
65 font-weight: 200;
66 text-align: center;
67 }
68
69
70 #txt-panel p strong {
71 opacity: 0;
72 font-weight: 700;
73 margin-top: 20px;
74 font-size: 32px;
75 display: block;
76 }
77
78 #circles-panel {
79 position: absolute;
80 top: 220px;
81 left: 134px;
82 }
83
84 #circles-panel svg {
85 height: 153px;
86 width: 37px;
87 }
88
89 #selfie-panel {
90 position: absolute;
91 top: 288px;
92 left: 84px;
93 opacity: 0;
94
95 }
96
97 #button-panel {
98 position: absolute;
99 top: 440px;
100 left: 40px;
101 opacity: 0;
102
103 }
104 </style>
105 </head>
106
107 <body>
108 <a id="click-tag" href="javascript:window.open(window.clickTag)">
109 <div id="border">
110 <div id="txt-panel">
111 <p>If Amalguin's early morning mist hides
112 that last curve before home.<br><strong> Count On Us.</strong></p>
113 </div>
114
115 <div id="circles-panel">
116 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.65 134.11">
117 <path id="outer" d="M21.27,14.33a7,7,0,1,1-6.95-6.95h0a6.94,6.94,0,0,1,6.94,6.94Z"
118 transform="translate(0 0)"
119 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
120 <path id="mid" d="M28.11,14.33A13.78,13.78,0,1,1,14.33.55,13.78,13.78,0,0,1,28.11,14.33Z"
121 transform="translate(0 0)"
122 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.0943639278411865px" />
123 <circle id="inner" cx="14.33" cy="14.33" r="3.49"
124 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.5103546380996704px" />
125 <line id="line" x1="14.33" y1="16.56" x2="14.33" y2="16.56"
126 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px" /></svg>
127 </div>
128
129 <div id="selfie-panel">
130 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
131 </div>
132
133 <div id="button-panel">
134 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
135 </div>
136
137 <img class='background' src="./assets/background@2x.png" alt="" width="300" height="600">
138 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
139 </div>
140 </a>
141 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
142
143 <script>
144
145
146 function ready(fn) {
147 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
148 fn();
149 } else {
150 document.addEventListener('DOMContentLoaded', fn);
151 }
152 }
153
154
155 var
156 pulse2 = document.getElementById("outer"),
157 pulse1 = document.getElementById("mid"),
158 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
159
160 tl.fromTo(pulse1, 1,
161 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
162 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }
163 )
164 .fromTo(pulse2, 1,
165 { transformOrigin: "center center", autoAlpha: 1, scale: 0.8 },
166 { transformOrigin: "center center", autoAlpha: 0, scale: 1.1, ease: Quad.easeInOut }, 0.5
167 )
168 ;
169
170
171
172 function stage1() {
173 var line = document.getElementById("line");
174 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
175
176 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
177 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
178 tl2.fromTo(line, 3,
179 { transformOrigin: "left", autoAlpha: 0, attr: { y2: 16.56 } },
180 { transformOrigin: "left", autoAlpha: 1, attr: { y2: 75.11 } }
181 )
182 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
183 tl2.fromTo("#button-panel", 1,
184 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
185 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
186 )
187
188
189 }
190
191 ready(stage1());
192
193 </script>
194
195 </body>
196
197 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 viewBox="0 0 268.1 41.5" style="enable-background:new 0 0 268.1 41.5;" xml:space="preserve">
5 <style type="text/css">
6 .st0{fill:none;stroke:#FFFFFF;stroke-width:1.5859;stroke-miterlimit:10;}
7 .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7396;stroke-miterlimit:10;}
8 .st2{fill:none;stroke:#FFFFFF;stroke-width:2.1107;stroke-miterlimit:10;}
9 </style>
10 <g id="outer_1_">
11 <path id="outer" class="st0" d="M20.8,10.7c5.6,0,10.1,4.5,10.1,10.1s-4.5,10.1-10.1,10.1s-10.1-4.5-10.1-10.1c0,0,0,0,0,0
12 C10.7,15.2,15.2,10.7,20.8,10.7z"/>
13 </g>
14 <g id="middle_1_">
15 <path id="middle" class="st0" d="M20.8,0.8c11,0,20,9,20,20s-9,20-20,20s-20-9-20-20C0.8,9.7,9.7,0.8,20.8,0.8L20.8,0.8z"/>
16 </g>
17 <g id="inner_1_">
18 <circle id="inner" class="st1" cx="20.8" cy="20.8" r="5.1"/>
19 </g>
20 <g id="line_1_">
21 <line id="line" class="st2" x1="268.1" y1="20.8" x2="40.7" y2="20.8"/>
22 </g>
23 </svg>
1 <!DOCTYPE html>
2
3 <head>
4
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=970,height=250">
8 <script type="text/javascript">
9
10 // IAB source: modified to allow link testing
11 var clickTag = "https://ontarioplanners.ca/planonit";
12 function getParameterByName(name) {
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
22 </script>
23 <link href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@200;300;400;700&display=swap"
24 rel="stylesheet">
25 <style>
26 body {
27 margin: 0;
28 padding: 0;
29 width: 970px;
30 height: 250px;
31 line-height: 1.7;
32 font-size: 29px;
33 letter-spacing: 0;
34 font-family: 'Libre Caslon Text', serif;
35 font-style: normal;
36 background: #F2F2F2;
37 }
38
39 a {
40 text-decoration: none;
41 color: inherit;
42 }
43
44 #border {
45 position: absolute;
46 width: 970px;
47 height: 250px;
48 background: #F2F2F2;
49 overflow: hidden;
50 cursor: pointer;
51 box-sizing: border-box;
52 }
53
54 #txt-panel {
55 position: absolute;
56 top: 0px;
57 left: 44px;
58 width: 530px;
59 }
60
61 #txt-panel p {
62 opacity: 0;
63 color: #fff;
64 font-weight: 200;
65 }
66
67
68 #txt-panel p strong {
69 opacity: 0;
70 font-weight: 700;
71 }
72
73 #circles-panel {
74 position: absolute;
75 top: 140px;
76 left: 344px;
77 }
78
79 #circles-panel svg {
80 height: 39px;
81 width: 267px;
82 }
83
84 #selfie-panel {
85 position: absolute;
86 top: 90px;
87 left: 570px;
88 opacity: 0;
89 }
90
91 #button-panel {
92 position: absolute;
93 top: 70px;
94 left: 720px;
95 opacity: 0;
96 }
97
98 .img2 {
99 opacity: 0;
100 position: absolute;
101 top: 40px;
102 left: 55px;
103 }
104
105 .txt3 {
106 position: absolute;
107 top: 75px;
108 left: 55px;
109 }
110 </style>
111
112 </head>
113
114 <body>
115 <a id="click-tag" href="javascript:window.open(window.clickTag)">
116 <div id="border">
117
118 <div id="txt-panel">
119 <p>If Amalguin's early morning mist hides
120 that last curve before home.<br><strong> Count On Us.</strong></p>
121 </div>
122 <div id="circles-panel">
123 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.13 41.59">
124 <path id="outer" d="M20.76,10.7A10.07,10.07,0,1,1,10.7,20.78v0A10.08,10.08,0,0,1,20.76,10.7Z"
125 transform="translate(0.03 0)"
126 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
127 <path id="mid" d="M20.76.79a20,20,0,1,1-20,20,20,20,0,0,1,20-20Z" transform="translate(0.03 0)"
128 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5858899354934692px" />
129 <circle id="inner" cx="20.79" cy="20.76" r="5.05"
130 style="fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:0.7395769357681274px" />
131 <line id="line" x1="26.76" y1="20.76" x2="26.76" y2="20.76"
132 style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.1106748580932617px;" />
133 </svg>
134 </div>
135 <div id="selfie-panel">
136 <img class='selfie' src="./assets/selfie.png" alt="" width="146" height="147">
137 </div>
138 <div id="button-panel">
139 <img class='button' src="./assets/button2x.png" alt="" width="215" height="36">
140 </div>
141 <img class='background' src="./assets/background@2x.png" alt="" width="970" height="250">
142
143 </div>
144 </a>
145
146 <!-- GREENSOCK-->
147 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
148
149 <script>
150
151
152 function ready(fn) {
153 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
154 fn();
155 } else {
156 document.addEventListener('DOMContentLoaded', fn);
157 }
158 }
159
160 var
161 pulse2 = document.getElementById("outer"),
162 pulse1 = document.getElementById("mid"),
163 tl = new TimelineMax({ repeat: 6, repeatDelay: 0.5 });
164
165 tl.fromTo(pulse1, 1,
166 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
167 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }
168 )
169 .fromTo(pulse2, 1,
170 { transformOrigin: "center center", autoAlpha: 1, scale: 0.7 },
171 { transformOrigin: "center center", autoAlpha: 0, scale: 1, ease: Quad.easeInOut }, 0.5
172 )
173 ;
174
175
176
177 function stage1() {
178 var line = document.getElementById("line");
179 var tl2 = new TimelineMax({ repeat: 0, repeatDelay: 20 });
180
181 tl2.to("#txt-panel p", 1.0, { opacity: 1 }, 1);
182 tl2.to("#txt-panel p strong", 1.0, { opacity: 1 }, 2);
183 tl2.fromTo(line, 3,
184 { transformOrigin: "left", autoAlpha: 0, attr: { x2: 26.76 } },
185 { transformOrigin: "left", autoAlpha: 1, attr: { x2: 244.13 } }
186 )
187 tl2.to("#selfie-panel", 1.0, { opacity: 1 }, "-=0.5");
188 tl2.fromTo("#button-panel", 1,
189 { transformOrigin: "center center", autoAlpha: 1, scale: 0 },
190 { transformOrigin: "center center", autoAlpha: 1, scale: 1, ease: Quad.easeInOut }, 6
191 )
192
193
194 }
195
196 ready(stage1());
197
198 </script>
199
200 </body>
201
202 </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">HHF 2020 Ads</a></h3>
15
16 <h1>Group 1</h1>
17
18 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_1/300x600/index.html"></iframe>
19 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_1/970x250/index.html"></iframe>
20
21 <h1>Group 2</h1>
22
23 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_2/300x600/index.html"></iframe>
24 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_2/970x250/index.html"></iframe>
25
26 <h1>Group 3</h1>
27
28 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_3/300x600/index.html"></iframe>
29 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_3/970x250/index.html"></iframe>
30
31 <h1>Group 4</h1>
32
33 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_4/300x600/index.html"></iframe>
34 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_4/970x250/index.html"></iframe>
35
36 <h1>Group 5</h1>
37
38 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_5/300x600/index.html"></iframe>
39 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_5/970x250/index.html"></iframe>
40
41 <h1>Group 6</h1>
42
43 <iframe id='' class="b300x250 " scrolling="no" src="HHF_ad_6/300x600/index.html"></iframe>
44 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="HHF_ad_6/970x250/index.html"></iframe>
45
46 </body>
47 </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 .b300x250 {
40 width: 300px;
41 height: 250px;
42 }
43 .b728x90 {
44 width: 728px;
45 height: 90px;
46 }
47 .b300x600 {
48 width: 300px;
49 height: 600px;
50 }
51 .b600x566 {
52 width: 600px;
53 height: 566px;
54 }