dd46a4ad by Dan Rempel

Merge branch 'deploy' of git.gotenzing.com:tenzing/banners-with-skip into deploy

2 parents 27d99fe0 920f8329
Showing 74 changed files with 694 additions and 0 deletions
This diff could not be displayed because it is too large.
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <script type="text/javascript">
7
8 /*
9 // IAB source: modified to allow link testing
10 var clickTag = "https://huntsvillehospitalfoundation.ca";
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 */
22
23 </script>
24 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
25 <script type="text/javascript">
26 window.onload = function() {
27 eyeBuild.initialize();
28 }
29 </script>
30
31
32 <style>
33
34 body{
35 margin: 0;
36 padding: 0;
37 width: 300px;
38 height: 250px;
39 line-height: 1.2;
40 font-size: 27px;
41 letter-spacing: .4;
42 color: #CD040B;
43 font-family: "Neue Haas Grotesk", Arial, sans-serif;
44 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
45 font-style: normal;
46 }
47
48 a{
49 text-decoration: none;
50 color: inherit;
51 }
52 #border{
53 position: absolute;
54 width: 300px;
55 height: 250px;
56 border: 1px solid #3191b2;
57 background-color: #0077a0;/* #0077a0 */
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 /* background: url(img-50.jpg); */
62 /* background: url(guide2@2x.png) no-repeat center center; */
63 /* background-size: 300px 600px ; */
64 }
65 img{
66 position: absolute;
67 }
68 .img{
69 opacity: 0;
70 }
71 .txt{
72 position: absolute;
73 opacity: 0;
74 top:95px;
75 left:50px;
76 }
77 #txt3 {
78 top:90px;
79 left:35px;
80 }
81 .txtb{
82 position: absolute;
83 }
84
85 #img1{
86 opacity: 1;
87 }
88 #txtb1{
89 left:-300px;
90 top:109px;
91 }
92 #txtb2{
93 left:-300px;
94 top:131px;
95 }
96 #txtb3{
97 left:-300px;
98 top:153px;
99 }
100
101 #cta{
102 width: 148px;
103 height: auto;
104 left: 18px;
105 bottom:40px;
106 opacity: 0;
107 }
108
109 #logo{
110 width: 156px;
111 height: auto;
112 left: 22px;
113 top:23px;
114 opacity: 0;
115 }
116
117
118 </style>
119 </head>
120
121 <body>
122 <a href="javascript:eyeBuild.doClick(0)" class="cta">
123 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
124 <div id="border">
125
126 <img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="444" height="250">
127 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="220">
128
129 <img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="444" height="250">
130 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="200">
131
132 <img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="444" height="250">
133 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="240">
134
135
136 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
137 <img id="cta" src="assets/donate@2x.png" alt="Donate Now">
138
139 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
140 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253">
141 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
142
143
144 </div>
145 </a>
146
147 <!-- GREENSOCK-->
148 <script src="assets/TweenMax.min.js"></script>
149
150 <script>
151
152 var tl = new TimelineMax({repeat:1, repeatDelay:4});
153
154 function stage1(){
155
156
157 tl.to("#img1", .5, {opacity:1, delay:-1 });
158 tl.to("#img1", 2.5, {x:-50, ease:Power1.easeOut, delay:-1 });
159 tl.to("#txt1", .7, {opacity:1, delay:-1.5 });
160
161 tl.to("#img1", .5, {opacity:0, delay:.5 });
162 tl.to("#txt1", .5, {opacity:0, delay:-.5 });
163
164 tl.to("#img2", .5, {opacity:1, delay:-1 });
165 tl.to("#img2", 2.5, {x:-20, ease:Power1.easeOut, delay:-1 });
166 tl.to("#txt2", .7, {opacity:1, delay:-1.5 });
167
168 tl.to("#img2", .5, {opacity:0, delay:.5 });
169 tl.to("#txt2", .5, {opacity:0, delay:-.5 });
170
171 tl.to("#img3", .5, {opacity:1, delay:-1 });
172 tl.to("#img3", 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
173 tl.to("#txt3", .7, {opacity:1, delay:-1.5 });
174
175 tl.to("#img3", .5, {opacity:0, delay:.5 });
176 tl.to("#txt3", .5, {opacity:0, delay:-.5 });
177
178 // phase 2
179 tl.to("#logo", .5, {opacity:1, delay:-.5 });
180 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
181 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
182 tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3});
183 tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
184
185 console.log( "time: " + tl.totalDuration() );
186 }
187
188 //---------------------
189 stage1();
190
191
192
193 </script>
194
195 </body>
196
197 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 <!DOCTYPE html>
2 <head>
3
4 </script>
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <script type="text/javascript">
9
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 */
24
25 </script>
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
32
33
34 <style>
35
36 body{
37 margin: 0;
38 padding: 0;
39 width: 300px;
40 height: 600px;
41 line-height: 1.2;
42 font-size: 27px;
43 letter-spacing: .4;
44 color: #CD040B;
45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
47 font-style: normal;
48 }
49
50 a{
51 text-decoration: none;
52 color: inherit;
53 }
54 #border{
55 position: absolute;
56 width: 300px;
57 height: 600px;
58 border: 1px solid #3191b2;
59 background-color: #0077a0;/* #0077a0 */
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */
66 }
67 img{
68 position: absolute;
69 }
70 .img{
71 position: absolute;
72 opacity: 0;
73 width: 300px;
74 height: 600px;
75 }
76 .txt{
77 position: absolute;
78 top:240px;
79 opacity: 0;
80 }
81 #txt1 {
82 left:10px;
83 }
84 #txt2 {
85 left:30px;
86 top:245px;
87 }
88 .txtb{
89 position: absolute;
90 left:-300px;
91 }
92
93 #img1{
94 opacity: .5;
95 }
96 #txtb1{
97 top:47px;
98 }
99 #txtb2{
100 top:79px;
101 }
102 #txtb3{
103 top:111px;
104 }
105 #txtb4{
106 top:143px;
107 }
108 #txtb5{
109 top:175px;
110 }
111 #txtb6{
112 top:207px;
113 }
114 #txtb7{
115 top:239px;
116 }
117
118 #cta{
119 position: absolute;
120 width: 175px;
121 height: auto;
122 left: 28px;
123 top:272px;
124 opacity: 0;
125 }
126
127 #logo{
128 position: absolute;
129 width: 200px;
130 height: auto;
131 left: 35px;
132 bottom:40px;
133 opacity: 0;
134 }
135
136
137 </style>
138 </head>
139
140 <body>
141 <a href="javascript:eyeBuild.doClick(0)" class="cta">
142 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
143 <div id="border">
144
145 <img id="img1" class="img" src="assets/img1.jpg" alt="img1@60" width="300">
146 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="280">
147
148 <img id="img2" class="img" src="assets/img2.jpg" alt="img2@60" width="300">
149 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="240">
150
151
152 <img id="img3" class="img" src="assets/img3.jpg" alt="img3@60" width="300">
153 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
154
155 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
156 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
157
158 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="78">
159 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="82">
160 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="147">
161 <img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="152">
162 <img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="63">
163 <img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="193">
164 <img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="223">
165
166 </div>
167 </a>
168
169 <!-- GREENSOCK-->
170 <script src="assets/TweenMax.min.js"></script>
171
172 <script>
173
174 var tl = new TimelineMax({repeat:2, repeatDelay:3.5});
175
176 function stage1(){
177 imgtxt("#img1", "#txt1");
178 imgtxt("#img2", "#txt2");
179 imgtxt("#img3", "#txt3");
180
181 // phase 2
182
183 tl.to("#logo", .5, {opacity:1, delay:-.5 });
184 tl.to("#txtb1", .5, {left:35, ease:Power1.easeOut, delay:-.3});
185 tl.to("#txtb2", .5, {left:35, ease:Power1.easeOut, delay:-.3});
186 tl.to("#txtb3", .5, {left:35, ease:Power1.easeOut, delay:-.3});
187 tl.to("#txtb4", .5, {left:35, ease:Power1.easeOut, delay:-.3});
188 tl.to("#txtb5", .5, {left:35, ease:Power1.easeOut, delay:-.3});
189 tl.to("#txtb6", .5, {left:35, ease:Power1.easeOut, delay:-.3});
190 tl.to("#txtb7", .5, {left:35, ease:Power1.easeOut, delay:-.3});
191 tl.to("#cta", .5, {opacity:1, top:282, ease:Power1.easeOut, delay:.2 });
192
193
194
195
196 console.log( "time: " + tl.totalDuration() );
197 }
198
199 function imgtxt(imgId, txtId){
200 console.log( "img: " + imgId );
201
202 tl.to(imgId, .5, {opacity:1, delay:-.5 });
203 tl.to(txtId, .7, {opacity:1, delay:0 });
204
205
206 tl.to(imgId, .5, {opacity:0, delay:.9 });
207 tl.to(txtId, .5, {opacity:0, delay:-.5 });
208
209 }
210
211
212 //---------------------
213 stage1();
214
215
216
217 </script>
218
219 </body>
220
221 </html>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute-un</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="19.11 35.14 19.11 50.24 29.17 50.24 41.76 62.82 41.76 22.55 29.17 35.14 19.11 35.14"/><path class="cls-3" d="M46.79,59.71a18,18,0,0,0,0-34.24V20.22a23.11,23.11,0,0,1,0,44.86Z"/><path class="cls-3" d="M46.79,46.33a6.69,6.69,0,0,0,0-7.44V32.23a11.79,11.79,0,0,1,0,20.78Z"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>mute</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><g id="volume-off"><path class="cls-3" d="M53.08,42.69a10.93,10.93,0,0,0-6.29-10.07v5.54l6.29,6.29Zm6.29,0a18.9,18.9,0,0,1-1.26,6.54L61.89,53a21.18,21.18,0,0,0,2.52-10.57A22.69,22.69,0,0,0,46.79,20.29v5.28A18.14,18.14,0,0,1,59.37,42.69ZM22.38,20l-3.27,3.27L30.94,35.14H19.11v15.1H29.17L41.76,62.82V46L52.58,56.78a21,21,0,0,1-5.79,3v5.28a21.49,21.49,0,0,0,9.31-4.53l5,5,3.27-3.27L41.76,39.67Zm19.38,2.52-5.28,5.28,5.28,5.28Z"/></g></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" width="83.27" height="83.27" viewBox="0 0 83.27 83.27"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>pause</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><rect class="cls-3" x="26.26" y="23.5" width="10.32" height="36.42"/><rect class="cls-3" x="46.9" y="23.5" width="10.32" height="36.42"/></g></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="83.28" height="83.28" viewBox="0 0 83.28 83.28"><defs><style>.cls-1{opacity:0.75;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:8.11px;}.cls-3{fill:#fff;}</style></defs><title>play</title><g class="cls-1"><circle class="cls-2" cx="41.64" cy="41.64" r="37.58"/><polygon class="cls-3" points="33.38 60.14 33.38 23.68 62.26 41.91 33.38 60.14"/></g></svg>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 <!DOCTYPE html>
2 <head>
3
4 </script>
5 <meta charset="utf-8">
6 <title>HTML5 GSAP Ad</title>
7 <meta name="ad.size" content="width=300,height=600">
8 <script type="text/javascript">
9
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 */
24
25 </script>
26 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
27 <script type="text/javascript">
28 window.onload = function() {
29 eyeBuild.initialize();
30 }
31 </script>
32
33
34 <style>
35
36 body{
37 margin: 0;
38 padding: 0;
39 width: 728px;
40 height: 90px;
41 line-height: 1.2;
42 font-size: 27px;
43 letter-spacing: .4;
44 color: #CD040B;
45 font-family: "Neue Haas Grotesk", Arial, sans-serif;
46 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
47 font-style: normal;
48 }
49
50 a{
51 text-decoration: none;
52 color: inherit;
53 }
54 #border{
55 position: absolute;
56 width: 728px;
57 height: 90px;
58 border: 1px solid #3191b2;
59 background-color: #0077a0;/* #0077a0 */
60 overflow: hidden;
61 cursor: pointer;
62 box-sizing: border-box;
63 /* background: url(img-50.jpg); */
64 /* background: url(guide2@2x.png) no-repeat center center; */
65 /* background-size: 300px 600px ; */
66 }
67 img{
68 position: absolute;
69 }
70 .img{
71 position: absolute;
72 opacity: 0;
73 width: 728px;
74 height: 90px;
75 }
76 .txt{
77 position: absolute;
78 right:220px;
79 top:10px;
80 opacity: 0;
81 }
82 .txtb{
83 position: absolute;
84 }
85 #txt1,#txt2 {
86 left:260px;
87 }
88 #img1{
89 opacity: 1;
90 background-color: #395252;
91 }
92 #img2{
93 background-color: #3e403c;
94 }
95 #img3{
96 background-color: #1e2226;
97 }
98 #txtb1{
99 left:-400px;
100 top:32px;
101 }
102
103 #cta{
104 position: absolute;
105 width: 157px;
106 height: auto;
107 left: 238px;
108 top:20px;
109 opacity: 0;
110 }
111
112 #logo{
113 position: absolute;
114 width: 150px;
115 height: auto;
116 right: 35px;
117 top:23px;
118 opacity: 0;
119 }
120
121
122 </style>
123 </head>
124
125 <body>
126 <a href="javascript:eyeBuild.doClick(0)" class="cta">
127 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
128 <div id="border">
129
130 <div id="img1" class="img"><img src="assets/img1.jpg" alt="img1@60" width="728"></div>
131 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="230">
132
133 <div id="img2" class="img"><img src="assets/img2.jpg" alt="img2@60" width="728"></div>
134 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="210">
135
136
137 <div id="img3" class="img"><img src="assets/img3.jpg" alt="img3@60" width="728"></div>
138 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="250">
139
140 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
141 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
142 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234">
143
144
145
146 </div>
147 </a>
148
149 <!-- GREENSOCK-->
150 <script src="assets/TweenMax.min.js"></script>
151
152 <script>
153
154 var tl = new TimelineMax({repeat:2, repeatDelay:3.5});
155
156 function stage1(){
157 imgtxt("#img1", "#txt1");
158 imgtxt("#img2", "#txt2");
159 imgtxt("#img3", "#txt3");
160
161 // phase 2
162
163 tl.to("#logo", .5, {opacity:1, delay:-.5 });
164 tl.to("#txtb1", .5, {left:38, ease:Power1.easeOut, delay:-.5});
165 tl.to("#cta", .5, {opacity:1, left:268, ease:Power1.easeOut, delay:.2 });
166
167 console.log( "time: " + tl.totalDuration() );
168 }
169
170 function imgtxt(imgId, txtId){
171 console.log( "img: " + imgId );
172
173 tl.to(imgId, .5, {opacity:1, delay:-.5 });
174 tl.to(txtId, .7, {opacity:1, delay:0 });
175
176
177 tl.to(imgId, .5, {opacity:0, delay:.9 });
178 tl.to(txtId, .5, {opacity:0, delay:-.5 });
179
180 }
181
182
183 //---------------------
184 stage1();
185
186
187
188 </script>
189
190 </body>
191
192 </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 <h3><a href="index.html">Summer 2018 Ads Refresh</a></h3>
14
15 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
16 <iframe id='' class="b300x600" scrolling="no" src="300x600/index.html"></iframe>
17 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
18 <iframe id='' class="b300x250" scrolling="no" src="300x250vid/index.html"></iframe>
19 <iframe id='' class="b300x600" scrolling="no" src="300x600vid/index.html"></iframe>
20
21 </body>
22 </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 overflow: hidden;
29 iframe::-webkit-scrollbar {
30 display: none;
31 };
32 }
33
34 .stacked {
35 display: flex;
36
37 }
38 .b300x250 {
39 width: 300px;
40 height: 250px;
41 }
42 .b728x90 {
43 width: 728px;
44 height: 90px;
45 }
46 .b300x600 {
47 width: 300px;
48 height: 600px;
49 }
50 .b600x566 {
51 width: 600px;
52 height: 566px;
53 }
1 //js file
...\ No newline at end of file ...\ No newline at end of file