Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
b5521616 by Dan Rempel
Options

HHF Summer Remarketing ads for approval

1 parent 0a24fe30
Inline Side-by-side
Showing 97 changed files with 56 additions and 900 deletions
...@@ -83,30 +83,26 @@ ...@@ -83,30 +83,26 @@
83 } 83 }
84 #txtb1{ 84 #txtb1{
85 left:-300px; 85 left:-300px;
86 top:109px; 86 top:36px;
87 } 87 }
88 #txtb2{ 88 #txtb2{
89 left:-300px; 89 left:-300px;
90 top:131px; 90 top:57px;
91 }
92 #txtb3{
93 left:-300px;
94 top:153px;
95 } 91 }
96 92
97 #cta{ 93 #cta{
98 width: 148px; 94 width: 148px;
99 height: auto; 95 height: auto;
100 left: 18px; 96 left: 18px;
101 bottom:40px; 97 bottom:150px;
102 opacity: 0; 98 opacity: 0;
103 } 99 }
104 100
105 #logo{ 101 #logo{
106 width: 156px; 102 width: 156px;
107 height: auto; 103 height: auto;
108 left: 22px; 104 left: 26px;
109 top:23px; 105 top:164px;
110 opacity: 0; 106 opacity: 0;
111 } 107 }
112 108
...@@ -122,62 +118,42 @@ ...@@ -122,62 +118,42 @@
122 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="444" height="250"> 118 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="444" height="250">
123 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300"> 119 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
124 120
125 <img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="444" height="250">
126 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
127
128 <img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="444" height="250">
129 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
130
131 <img id="img4" class="img" src="assets/img4@60.jpg" alt="img4@60" width="444" height="250">
132 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="txt4@2x" width="300">
133
134 121
135 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here."> 122 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
136 <img id="cta" src="assets/donate@2x.png" alt="Donate Now"> 123 <img id="cta" src="assets/donate@2x.png" alt="Donate Now">
137 124
138 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234"> 125 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="257">
139 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="253"> 126 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="257">
140 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="161">
141
142 127
143 </div> 128 </div>
144 </a> 129 </a>
145 130
146 <!-- GREENSOCK--> 131 <!-- GREENSOCK-->
147 <script src="assets/TweenMax.min.js"></script> 132 <script src="assets/tweenMax.min.js"></script>
148 133
149 <script> 134 <script>
150 135
151 var tl; 136 var tl = new TimelineMax({repeat:2, repeatDelay:5});
152 137
153 function stage1(){ 138 function stage1(){
154 tl = new TimelineMax({repeat:1, repeatDelay:4});
155 139
156 imgtxt("#img1", "#txt1"); 140
157 imgtxt("#img2", "#txt2"); 141 tl.to("#txt1", .5, {opacity:1, delay:-1 });
158 imgtxt("#img3", "#txt3"); 142 tl.to("#img1", 3.5, {x:-100, ease:Power1.easeOut, delay:-1 });
159 imgtxt("#img4", "#txt4"); 143
144 tl.to("#img1", .5, {opacity:0, delay:.5 });
145 tl.to("#txt1", .5, {opacity:0, delay:-.5 });
160 146
161 // phase 2 147 // phase 2
162 148
163 tl.to("#logo", .5, {opacity:1, delay:-.5 }); 149 tl.to("#logo", .5, {opacity:1, delay:-.5 });
164 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5}); 150 tl.to("#txtb1", .5, {left:24, ease:Power1.easeOut, delay:-.5});
165 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3}); 151 tl.to("#txtb2", .5, {left:24, ease:Power1.easeOut, delay:-.3});
166 tl.to("#txtb3", .5, {left:24, ease:Power1.easeOut, delay:-.3}); 152 tl.to("#cta", .7, {opacity:1, bottom:107, ease:Power1.easeOut, delay:.2 });
167 tl.to("#cta", .7, {opacity:1, bottom:15, ease:Power1.easeOut, delay:.2 });
168 153
169 console.log( "time: " + tl.totalDuration() ); 154 console.log( "time: " + tl.totalDuration() );
170 } 155 }
171 156
172 function imgtxt(imgId, txtId){
173 tl.to(imgId, .5, {opacity:1, delay:-1 });
174 tl.to(imgId, 2.5, {x:-100, ease:Power1.easeOut, delay:-1 });
175 tl.to(txtId, .7, {opacity:1, delay:-1.5 });
176
177 tl.to(imgId, .5, {opacity:0, delay:.5 });
178 tl.to(txtId, .5, {opacity:0, delay:-.5 });
179
180 }
181 157
182 158
183 //--------------------- 159 //---------------------
......
...@@ -70,8 +70,6 @@ ...@@ -70,8 +70,6 @@
70 .img{ 70 .img{
71 position: absolute; 71 position: absolute;
72 opacity: 0; 72 opacity: 0;
73 width: 300px;
74 height: 600px;
75 } 73 }
76 .txt{ 74 .txt{
77 position: absolute; 75 position: absolute;
...@@ -88,25 +86,10 @@ ...@@ -88,25 +86,10 @@
88 opacity: .5; 86 opacity: .5;
89 } 87 }
90 #txtb1{ 88 #txtb1{
91 top:47px; 89 top:252px;
92 } 90 }
93 #txtb2{ 91 #txtb2{
94 top:79px; 92 top:284px;
95 }
96 #txtb3{
97 top:111px;
98 }
99 #txtb4{
100 top:143px;
101 }
102 #txtb5{
103 top:175px;
104 }
105 #txtb6{
106 top:207px;
107 }
108 #txtb7{
109 top:239px;
110 } 93 }
111 94
112 #cta{ 95 #cta{
...@@ -114,7 +97,7 @@ ...@@ -114,7 +97,7 @@
114 width: 175px; 97 width: 175px;
115 height: auto; 98 height: auto;
116 left: 28px; 99 left: 28px;
117 top:272px; 100 top:295px;
118 opacity: 0; 101 opacity: 0;
119 } 102 }
120 103
...@@ -136,73 +119,46 @@ ...@@ -136,73 +119,46 @@
136 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> --> 119 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
137 <div id="border"> 120 <div id="border">
138 121
139 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="300"> 122 <img id="img1" class="img" src="assets/img1@60.jpg" alt="img1@60" width="807">
140 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300"> 123 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="300">
141 124
142 <img id="img2" class="img" src="assets/img2@60.jpg" alt="img2@60" width="300">
143 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="300">
144
145
146 <img id="img3" class="img" src="assets/img3@60.jpg" alt="img3@60" width="300">
147 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="300">
148
149 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here."> 125 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
150 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157"> 126 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
151 127
152 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="78"> 128 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="242">
153 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="82"> 129 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="242">
154 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="147">
155 <img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="152">
156 <img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="63">
157 <img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="193">
158 <img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="223">
159 130
160 </div> 131 </div>
161 </a> 132 </a>
162 133
163 <!-- GREENSOCK--> 134 <!-- GREENSOCK-->
164 <script src="assets/TweenMax.min.js"></script> 135 <script src="assets/tweenMax.min.js"></script>
165 136
166 <script> 137 <script>
167 138
168 var tl; 139 var tl = new TimelineMax({repeat:2, repeatDelay:5});
169 140
170 function stage1(){ 141 function stage1(){
171 tl = new TimelineMax({repeat:2, repeatDelay:3});
172 142
173 imgtxt("#img1", "#txt1"); 143
174 imgtxt("#img2", "#txt2"); 144 tl.to("#txt1", .5, {opacity:1, delay:-1 });
175 imgtxt("#img3", "#txt3"); 145 tl.to("#img1", 3.5, {x:-450, ease:Power1.easeInOut, delay:-1 });
146
147 tl.to("#img1", .5, {scaleX:.385, scaleY:.385, x:0, transformOrigin:"left top", ease:Power1.easeInOut, delay:.5 });
148 tl.to("#txt1", .5, {opacity:0, delay:-.5 });
149
176 150
177 // phase 2 151 // phase 2
178 152
179 tl.to("#logo", .5, {opacity:1, delay:-.5 }); 153 tl.to("#logo", .5, {opacity:1, delay:0 });
180 tl.to("#txtb1", .5, {left:35, ease:Power1.easeOut, delay:-.3}); 154 tl.to("#txtb1", .5, {left:35, ease:Power1.easeOut, delay:-.3});
181 tl.to("#txtb2", .5, {left:35, ease:Power1.easeOut, delay:-.3}); 155 tl.to("#txtb2", .5, {left:35, ease:Power1.easeOut, delay:-.3});
182 tl.to("#txtb3", .5, {left:35, ease:Power1.easeOut, delay:-.3}); 156 tl.to("#cta", .5, {opacity:1, top:347, ease:Power1.easeOut, delay:.2 });
183 tl.to("#txtb4", .5, {left:35, ease:Power1.easeOut, delay:-.3});
184 tl.to("#txtb5", .5, {left:35, ease:Power1.easeOut, delay:-.3});
185 tl.to("#txtb6", .5, {left:35, ease:Power1.easeOut, delay:-.3});
186 tl.to("#txtb7", .5, {left:35, ease:Power1.easeOut, delay:-.3});
187 tl.to("#cta", .5, {opacity:1, top:282, ease:Power1.easeOut, delay:.2 });
188
189
190 157
191 158
192 console.log( "time: " + tl.totalDuration() ); 159 console.log( "time: " + tl.totalDuration() );
193 } 160 }
194 161
195 function imgtxt(imgId, txtId){
196 console.log( "img: " + imgId );
197
198 tl.to(imgId, .5, {opacity:1, delay:-.5 });
199 tl.to(txtId, .7, {opacity:1, delay:0 });
200
201
202 tl.to(imgId, .5, {opacity:0, delay:.6 });
203 tl.to(txtId, .5, {opacity:0, delay:-.5 });
204
205 }
206 162
207 163
208 //--------------------- 164 //---------------------
......
...@@ -85,24 +85,22 @@ ...@@ -85,24 +85,22 @@
85 85
86 #img1{ 86 #img1{
87 opacity: 1; 87 opacity: 1;
88 background-color: #395252; 88 background-color: #998d77;
89 }
90 #img2{
91 background-color: #3e403c;
92 }
93 #img3{
94 background-color: #1e2226;
95 } 89 }
96 #txtb1{ 90 #txtb1{
97 left:-400px; 91 left:-400px;
98 top:32px; 92 top:19px;
93 }
94 #txtb2{
95 left:-400px;
96 top:46px;
99 } 97 }
100 98
101 #cta{ 99 #cta{
102 position: absolute; 100 position: absolute;
103 width: 157px; 101 width: 157px;
104 height: auto; 102 height: auto;
105 left: 238px; 103 left: 288px;
106 top:20px; 104 top:20px;
107 opacity: 0; 105 opacity: 0;
108 } 106 }
...@@ -125,60 +123,43 @@ ...@@ -125,60 +123,43 @@
125 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> --> 123 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
126 <div id="border"> 124 <div id="border">
127 125
128 <div id="img1" class="img"><img src="assets/img1@60.jpg" alt="img1@60" width="415"></div>
129 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="728">
130
131 <div id="img2" class="img"><img src="assets/img2@60.jpg" alt="img2@60" width="415"></div>
132 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="txt2@2x" width="728">
133 126
127 <div id="img1" class="img"><img src="assets/img1@60.jpg" alt="img1@60" width="219"></div>
128 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="txt1@2x" width="728">
134 129
135 <div id="img3" class="img"><img src="assets/img3@60.jpg" alt="img3@60" width="415"></div>
136 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="txt3@2x" width="728">
137 130
138 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here."> 131 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
139 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157"> 132 <img id="cta" src="assets/donate@2x.png" alt="Donate Now" width="157">
140 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="234"> 133 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="378">
141 134 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="378">
142 135
143 136
144 </div> 137 </div>
145 </a> 138 </a>
146 139
147 <!-- GREENSOCK--> 140 <!-- GREENSOCK-->
148 <script src="assets/TweenMax.min.js"></script> 141 <script src="assets/tweenMax.min.js"></script>
149 142
150 <script> 143 <script>
151 144
152 var tl; 145 var tl = new TimelineMax({repeat:2, repeatDelay:4});
153 146
154 function stage1(){ 147 function stage1(){
155 tl = new TimelineMax({repeat:2, repeatDelay:3.5}); 148 tl.to("#txt1", .5, {opacity:1, delay:-1 });
156 149
157 imgtxt("#img1", "#txt1"); 150 tl.to("#img1", .5, {opacity:0, delay:3.5 });
158 imgtxt("#img2", "#txt2"); 151 tl.to("#txt1", .5, {opacity:0, delay:-.5 });
159 imgtxt("#img3", "#txt3");
160 152
161 // phase 2 153 // phase 2
162 154
163 tl.to("#logo", .5, {opacity:1, delay:-.5 }); 155 tl.to("#logo", .5, {opacity:1, delay:-.5 });
164 tl.to("#txtb1", .5, {left:38, ease:Power1.easeOut, delay:-.5}); 156 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 }); 157 tl.to("#txtb2", .5, {left:38, ease:Power1.easeOut, delay:-.3});
158 tl.to("#cta", .5, {opacity:1, left:368, ease:Power1.easeOut, delay:.2 });
166 159
167 console.log( "time: " + tl.totalDuration() ); 160 console.log( "time: " + tl.totalDuration() );
168 } 161 }
169 162
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 163
183 //--------------------- 164 //---------------------
184 stage1(); 165 stage1();
......
...@@ -10,13 +10,11 @@ ...@@ -10,13 +10,11 @@
10 <script src="main.js"></script> 10 <script src="main.js"></script>
11 </head> 11 </head>
12 <body> 12 <body>
13 <!-- <h3><a href="index.html">Summer 2017 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_may.html">May 2016 Ads</a></h3> --> 13 <h3><a href="index.html">Summer 2018 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index-re.html">Summer 2018 Remarketing Ads</a></h3>
14 14
15 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe> 15 <iframe id='' class="b728x90" scrolling="no" src="728x90re/index.html"></iframe>
16 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe> 16 <iframe id='' class="b300x250" scrolling="no" src="300x250re/index.html"></iframe>
17 <iframe id='' class="b300x250 " scrolling="no" src="300x250vid/index.html"></iframe> 17 <iframe id='' class="b300x600 " scrolling="no" src="300x600re/index.html"></iframe>
18 <iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
19 <iframe id='' class="b300x600 " scrolling="no" src="300x600vid/index.html"></iframe>
20 18
21 </body> 19 </body>
22 </html> 20 </html>
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 <script src="main.js"></script> 10 <script src="main.js"></script>
11 </head> 11 </head>
12 <body> 12 <body>
13 <!-- <h3><a href="index.html">Summer 2017 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_may.html">May 2016 Ads</a></h3> --> 13 <h3><a href="index.html">Summer 2018 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index-re.html">Summer 2018 Remarketing Ads</a></h3>
14 14
15 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe> 15 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
16 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe> 16 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
......
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 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.75;}
8 .st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
9 .st2{fill:#FFFFFF;}
10 </style>
11 <title>play</title>
12 <g class="st0">
13 <circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
14 <polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
15 </g>
16 </svg>
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 video.addEventListener('ended', function(e){
50 video.currentTime = 0;
51 pause();
52 videoControls.className = "start"
53 v0 = false;
54 v25 = false;
55 v50 = false;
56 v75 = false;
57 eyeBuild.doIAT(9);
58 }, false);
59
60 muteButton.addEventListener("click", function(e) {
61 if (video.muted == true) {
62 eyeBuild.doIAT(4);
63 } else {
64 eyeBuild.doIAT(3);
65 }
66 video.muted = !video.muted;
67 toggleClass(muteButton, "muted");
68 });
69
70 // track video plays
71 video.addEventListener('timeupdate', function(e){
72 var pct = video.currentTime / video.duration *100;
73 if (pct > 75 && !v75){
74 v75 = true;
75 eyeBuild.doIAT(8);
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 }
88 }
89 }, false);
90 var play = function(){
91 video.play();
92 videoPlays++;
93 videoControls.className = ""
94 toggleClass(videoControls, "playing");
95 toggleClass(playButton, "playing");
96 }
97 var pause = function(){
98 video.pause();
99 toggleClass(videoControls, "playing");
100 toggleClass(playButton, "playing");
101 }
102 var mute = function(){
103 video.muted=true;
104 toggleClass(muteButton, "muted");
105 }
106
107 mute();
108 play();
109
110 }
111
112
113 function toggleClass(element, toggleClass){
114 var currentClass = element.className;
115 if(currentClass.indexOf(toggleClass) > -1){ //has class
116 newClass = currentClass.replace(toggleClass,"")
117 }else{
118 newClass = currentClass + " " + toggleClass;
119 }
120 element.className = newClass;
121 }
122
123 </script>
124
125
126 <style>
127
128 body{
129 margin: 0;
130 padding: 0;
131 width: 300px;
132 height: 250px;
133 line-height: 1.2;
134 font-size: 27px;
135 letter-spacing: .4;
136 color: #CD040B;
137 font-family: "Neue Haas Grotesk", Arial, sans-serif;
138 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
139 font-style: normal;
140 }
141
142 a{
143 text-decoration: none;
144 color: inherit;
145 }
146 #click-tag{
147 display: block;
148 position: absolute;
149 width: 100%;
150 height: 420px;
151 top:190px;
152 }
153
154 #border{
155 position: relative;
156 width: 300px;
157 height: 250px;
158 /* border: 1px solid #55565A; */
159 background-color: #0077a0;
160 overflow: hidden;
161 cursor: pointer;
162 box-sizing: border-box;
163 }
164
165 #border:hover #cta{
166 /* background-color: #666666; */
167 }
168
169 #border:active #cta{
170 /* background-color: #000000; */
171 }
172
173 #video, #video-controls{
174 position: absolute;
175 width: 298px;
176 height: 168px;
177 left:1px;
178 top:22px;
179 }
180 #video-controls.start{
181 background: url(assets/poster.jpg) no-repeat center center;
182 opacity:1;
183 }
184 #video-controls.playing {
185 opacity:0;
186 }
187
188 #video-controls:hover {
189 opacity:1;
190 }
191
192 #video-controls button{
193 border: none;
194 cursor: pointer;
195 width: 100%;
196 height: 100%;
197 }
198
199 button#play-pause{
200 background: url(assets/play.svg) no-repeat center center;
201 background-size: 83px 83px;
202 }
203 button#play-pause.playing{
204 background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
205 background-size: 20px 20px;
206 }
207 button#play-pause:hover{
208 background-size: 85px 85px;
209 }
210 button#play-pause.playing:hover{
211 background-position: 29px 141px;
212 background-size: 21px 21px;
213 }
214
215
216 button#mute{
217 background: url(assets/mute-un.svg) no-repeat center center;
218 background-size: 20px 20px;
219 position: absolute;
220 width: 22px;
221 height: 22px;
222 left:5px;
223 bottom: 5px;
224 }
225 button#mute.muted{
226 background: url(assets/mute.svg) no-repeat center center;
227 background-size: 20px 20px;
228 }
229
230 button#mute:hover{
231 background-size: 22px 22px;
232 }
233
234
235 /* */
236
237 .hidden{
238 opacity: 0;
239 position:absolute;
240 }
241 #txt1{
242 left:19px;
243 bottom:16px;
244 }
245 #txt2{
246 left:21px;
247 bottom:21px;
248 }
249 #logo{
250 right:18px;
251 bottom:14px;
252 }
253 #icon-play2{
254 right:18px;
255 bottom:16px;
256 }
257
258 </style>
259
260 </head>
261
262 <body>
263 <div id="border">
264
265 <video id="video" width="272" height="152">
266 <source src="https://player.vimeo.com/external/276039544.sd.mp4?s=0f72735b5319d23b7b024045ab34ef8b65b39b13&profile_id=164" type="video/mp4" class="A">
267
268 Your browser doesn't support HTML5 video.
269 </video>
270 <div id="video-controls" class="start">
271 <button type="button" id="play-pause" class=""></button>
272 <button type="button" id="mute" class=""></button>
273 </div>
274
275 <img id="txt1" class="hidden" src="assets/txt1@2x.png" alt="txt1@2x" width="133">
276 <img id="logo" class="hidden" src="assets/logo@2x.png" alt="logo@2x" width="117">
277
278 <img id="txt2" class="hidden" src="assets/txt2@2x.png" alt="txt2@2x" width="222">
279 <img id="icon-play2" class="hidden" src="assets/icon-play@2x.png" alt="icon-play@2x" width="30">
280
281 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
282 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
283 </div>
284 <!-- GREENSOCK-->
285 <script src="assets/TweenMax.min.js"></script>
286
287 <script>
288
289 var tl;
290
291 function stage1(){
292 tl = new TimelineMax({repeat:3, repeatDelay:3.5});
293
294 tl.to("#txt2", .5, {opacity:1, delay:.3 });
295 tl.to("#icon-play2", .5, {opacity:1, delay:-.4 });
296
297 tl.to("#txt2", .5, {opacity:0, delay:3 });
298 tl.to("#icon-play2", .5, {opacity:0, delay:-.4 });
299
300 tl.to("#logo", .5, {opacity:1, delay:-.5 });
301 tl.to("#txt1", .5, {opacity:1, delay: -.3});
302
303 console.log( "time: " + tl.totalDuration() );
304 }
305
306 stage1();
307
308
309
310 </script>
311
312 </body>
313
314 </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 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.75;}
8 .st1{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}
9 .st2{fill:#FFFFFF;}
10 </style>
11 <title>play</title>
12 <g class="st0">
13 <circle class="st1" cx="41.6" cy="41.6" r="37.6"/>
14 <polygon class="st2" points="29.5,57.3 29.5,26.5 62.3,41.9 "/>
15 </g>
16 </svg>
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 video.addEventListener('ended', function(e){
50 video.currentTime = 0;
51 pause();
52 videoControls.className = "start"
53 v0 = false;
54 v25 = false;
55 v50 = false;
56 v75 = false;
57 eyeBuild.doIAT(9);
58 }, false);
59
60 muteButton.addEventListener("click", function(e) {
61 if (video.muted == true) {
62 eyeBuild.doIAT(4);
63 } else {
64 eyeBuild.doIAT(3);
65 }
66 video.muted = !video.muted;
67 toggleClass(muteButton, "muted");
68 });
69
70 // track video plays
71 video.addEventListener('timeupdate', function(e){
72 var pct = video.currentTime / video.duration *100;
73 if (pct > 75 && !v75){
74 v75 = true;
75 eyeBuild.doIAT(8);
76 }else if (pct > 50 && !v50){
77 v50 = true;
78 eyeBuild.doIAT(7);
79 }else if (pct > 25 && !v25){
80 v25 = true;
81 eyeBuild.doIAT(6);
82 }else if (pct > 0 && !v0){
83 v0 = true;
84 eyeBuild.doIAT(5);
85 if(videoPlays>1){
86 eyeBuild.doIAT(10);
87 }
88 }
89 }, false);
90 var play = function(){
91 video.play();
92 videoPlays++;
93 videoControls.className = ""
94 toggleClass(videoControls, "playing");
95 toggleClass(playButton, "playing");
96 }
97 var pause = function(){
98 video.pause();
99 toggleClass(videoControls, "playing");
100 toggleClass(playButton, "playing");
101 }
102 var mute = function(){
103 video.muted=true;
104 toggleClass(muteButton, "muted");
105 }
106
107 mute();
108 play();
109
110 }
111
112
113 function toggleClass(element, toggleClass){
114 var currentClass = element.className;
115 if(currentClass.indexOf(toggleClass) > -1){ //has class
116 newClass = currentClass.replace(toggleClass,"")
117 }else{
118 newClass = currentClass + " " + toggleClass;
119 }
120 element.className = newClass;
121 }
122
123 </script>
124
125
126 <style>
127
128 body{
129 margin: 0;
130 padding: 0;
131 width: 300px;
132 height: 600px;
133 line-height: 1.2;
134 font-size: 27px;
135 letter-spacing: .4;
136 color: #CD040B;
137 font-family: "Neue Haas Grotesk", Arial, sans-serif;
138 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
139 font-style: normal;
140 }
141
142 a{
143 text-decoration: none;
144 color: inherit;
145 }
146 #click-tag{
147 display: block;
148 position: absolute;
149 width: 100%;
150 height: 420px;
151 top:200px;
152 }
153
154 #border{
155 position: relative;
156 width: 300px;
157 height: 600px;
158 /* border: 1px solid #55565A; */
159 background-color: #0077a0;
160 overflow: hidden;
161 cursor: pointer;
162 box-sizing: border-box;
163 }
164
165 #border:hover #cta{
166 /* background-color: #666666; */
167 }
168
169 #border:active #cta{
170 /* background-color: #000000; */
171 }
172
173 #video, #video-controls{
174 position: absolute;
175 width: 298px;
176 height: 168px;
177 left:1px;
178 top:30px;
179 }
180 #video-controls.start{
181 background: url(assets/poster.jpg) no-repeat center center;
182 opacity:1;
183 }
184 #video-controls.playing {
185 opacity:0;
186 }
187
188 #video-controls:hover {
189 opacity:1;
190 }
191
192 #video-controls button{
193 border: none;
194 cursor: pointer;
195 width: 100%;
196 height: 100%;
197 }
198
199 button#play-pause{
200 background: url(assets/play.svg) no-repeat center center;
201 background-size: 83px 83px;
202 }
203 button#play-pause.playing{
204 background: url(assets/pause.svg) no-repeat 30px 142px; /* This changes the pause postion on hover of mute button */
205 background-size: 20px 20px;
206 }
207 button#play-pause:hover{
208 background-size: 85px 85px;
209 }
210 button#play-pause.playing:hover{
211 background-position: 29px 141px;
212 background-size: 21px 21px;
213 }
214
215
216 button#mute{
217 background: url(assets/mute-un.svg) no-repeat center center;
218 background-size: 20px 20px;
219 position: absolute;
220 width: 22px;
221 height: 22px;
222 left:5px;
223 bottom: 5px;
224 }
225 button#mute.muted{
226 background: url(assets/mute.svg) no-repeat center center;
227 background-size: 20px 20px;
228 }
229
230 button#mute:hover{
231 background-size: 22px 22px;
232 }
233
234
235 /* */
236
237 .txt{
238 position: absolute;
239 left:0;
240 top:0;
241 opacity: 0;
242 }
243 .txtb{
244 position: absolute;
245 left:-300px;
246 }
247 #txtb1{
248 top:218px;
249 }
250 #txtb2{
251 top:246px;
252 }
253 #txtb3{
254 top:273px;
255 }
256 #txtb4{
257 top:300px;
258 }
259 #txtb5{
260 top:327px;
261 }
262 #txtb6{
263 top:353px;
264 }
265 #txtb7{
266 top:380px;
267 }
268
269 #cta{
270 position: absolute;
271 left: 24px;
272 top:380px;
273 opacity: 0;
274 }
275
276 #logo{
277 position: absolute;
278 width: 180px;
279 height: auto;
280 left: 33px;
281 bottom:33px;
282 opacity: 0;
283 }
284
285 </style>
286
287 </head>
288
289 <body>
290 <div id="border">
291 <video id="video" width="272" height="152">
292 <source src="https://player.vimeo.com/external/276039544.sd.mp4?s=0f72735b5319d23b7b024045ab34ef8b65b39b13&profile_id=164" type="video/mp4" class="A">
293 Your browser doesn't support HTML5 video.
294 </video>
295 <div id="video-controls" class="start">
296 <button type="button" id="play-pause" class=""></button>
297 <button type="button" id="mute" class=""></button>
298 </div>
299
300 <img id="logo" src="assets/logo@2x.png" alt="Huntsville Hospital Foundation logo. Healthcare for Life. Here.">
301 <img id="cta" src="assets/cta@2x.png" alt="Get the full story here" width="263">
302
303 <img id="txtb1" class="txtb" src="assets/txtb1@2x.png" alt="txtb1@2x" width="66">
304 <img id="txtb2" class="txtb" src="assets/txtb2@2x.png" alt="txtb2@2x" width="69">
305 <img id="txtb3" class="txtb" src="assets/txtb3@2x.png" alt="txtb3@2x" width="124">
306 <img id="txtb4" class="txtb" src="assets/txtb4@2x.png" alt="txtb4@2x" width="128">
307 <img id="txtb5" class="txtb" src="assets/txtb5@2x.png" alt="txtb5@2x" width="53">
308 <img id="txtb6" class="txtb" src="assets/txtb6@2x.png" alt="txtb6@2x" width="163">
309 <img id="txtb7" class="txtb" src="assets/txtb7@2x.png" alt="txtb7@2x" width="188">
310
311 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
312 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
313 </div>
314 <!-- GREENSOCK-->
315 <script src="assets/TweenMax.min.js"></script>
316
317 <script>
318
319
320 var tl;
321
322 function stage1(){
323 tl = new TimelineMax({repeat:1, repeatDelay:3.5});
324
325 var l = 31;
326 tl.to("#logo", .5, {opacity:1, delay:-.5 });
327 tl.to("#txtb1", .5, {left:l, ease:Power1.easeOut, delay:-.3});
328 tl.to("#txtb2", .5, {left:l, ease:Power1.easeOut, delay:-.3});
329 tl.to("#txtb3", .5, {left:l, ease:Power1.easeOut, delay:-.3});
330 tl.to("#txtb4", .5, {left:l, ease:Power1.easeOut, delay:-.3});
331 tl.to("#txtb5", .5, {left:l, ease:Power1.easeOut, delay:-.3});
332 tl.to("#txtb6", .5, {left:l, ease:Power1.easeOut, delay:-.3});
333 tl.to("#txtb7", .5, {left:l, ease:Power1.easeOut, delay:-.3});
334 tl.to("#cta", .5, {opacity:1, top:414, ease:Power1.easeOut, delay:.2 });
335
336 console.log( "time: " + tl.totalDuration() );
337 }
338
339
340 //---------------------
341 stage1();
342
343
344
345 </script>
346
347 </body>
348
349 </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 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