Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
1c24230f by Jeremy Groot
Options

OPPI Summer 2021

1 parent 25559d72
Inline Side-by-side
Showing 29 changed files with 894 additions and 0 deletions
1 <svg xmlns="http://www.w3.org/2000/svg" width="116.05" height="24.76" viewBox="0 0 116.05 24.76"><title>btn_small</title><g id="ae2ce1e0-da9f-4132-8618-3a28e528cf1c" data-name="Layer 2"><g id="e8bd6253-da31-4f47-ad76-765dbb2eee92" data-name="Layer 1"><path d="M58.92,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17l5.62-5.63L58.32,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M51,19.52a.88.88,0,0,1-.6-.24.83.83,0,0,1,0-1.17L56,12.48,50.35,6.86a.83.83,0,0,1,0-1.17.84.84,0,0,1,1.17,0l6.21,6.21a.78.78,0,0,1,.24.59.87.87,0,0,1-.24.59l-6.21,6.21a.81.81,0,0,1-.57.24" style="fill:#edc130"/><path d="M103.67,24.32H12.38a11.94,11.94,0,0,1,0-23.88h91.29a11.94,11.94,0,0,1,0,23.88Z" style="fill:none;stroke:#edc130;stroke-miterlimit:10;stroke-width:0.8809999823570251px"/></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6
7 <meta name="ad.size" content="width=300,height=250">
8
9 <script type="text/javascript">
10
11 // IAB source: modified to allow link testing
12 var clickTag = "https://ontarioplanners.ca/planonit";
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 <style>
26
27 body{
28 margin: 0;
29 padding: 0;
30 width: 300px;
31 height: 250px;
32 line-height: 1.2;
33 font-size: 27px;
34 letter-spacing: .4;
35 background:white;
36 color: #CD040B;
37 font-family: "Neue Haas Grotesk", Arial, sans-serif;
38 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
39 font-style: normal;
40 }
41
42 a{
43 text-decoration: none;
44 color: inherit;
45 }
46 img {
47 border-style:none;
48 }
49
50 #border{
51 position: absolute;
52 width: 300px;
53 height: 250px;
54 background:#F2F2F2;
55 overflow: hidden;
56 cursor: pointer;
57 box-sizing: border-box;
58 /* border:1px solid; */
59 }
60
61 a{
62 text-decoration: none;
63 color: inherit;
64 }
65
66 #gray-panel{
67 width:100%;
68 height:100%;
69 max-height: 100%;
70 text-align: center;
71 }
72
73 #blue-panel {
74 width:100%;
75 height:250px;
76 max-height: 100%;
77 text-align: center;
78 position: absolute;
79 background:#0B4D85;
80 top:-240px;
81 }
82
83 #gold-panel {
84 width:100%;
85 height:165px;
86 max-height: 100%;
87 text-align: center;
88 position: absolute;
89 background:#EDC130;
90 bottom:-155px;
91 }
92
93 .txt1 {
94 position: absolute;
95 top:60px;
96 left:35px;
97 opacity: 0;
98 }
99
100 .txt2 {
101 position: absolute;
102 bottom:0;
103 bottom: 15px;
104 left: 50px;
105 }
106
107 .txt3 {
108 opacity: 0;
109 position: absolute;
110 left: 35px;
111 top: 5px;
112 }
113
114 .img1 {
115 position: absolute;
116 left: 70px;
117 top: 11px;
118 height: 160px;
119 }
120
121 .img2 {
122 opacity: 0;
123 position: absolute;
124 left: 35px;
125 top: 20px;
126 height: 45px;
127 }
128
129 .img3 {
130 opacity: 0;
131 position: absolute;
132 top: 125px;
133 left: 95px;
134 transition: x 0.5s;
135 }
136
137 .img3 path {
138 pointer-events: none;
139 }
140
141 </style>
142
143 </head>
144
145 <body>
146 <a id="click-tag" href="javascript:window.open(window.clickTag)">
147 <div id="border">
148
149 <div id="gray-panel">
150 <img class='txt1' src="./assets/txt1.png" alt="" >
151 </div>
152
153 <div id='blue-panel'>
154 <img class='txt2' src="./assets/txt2.png" alt="" >
155 <img class='txt3' src="./assets/txt3.png" alt="" >
156 </div>
157
158 <div id='gold-panel'>
159 <img class='img1' src="./assets/logo_rpp.png" alt="" >
160 <img class='img2' src="./assets/sponserd.png" alt="" >
161 </div>
162
163 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
164 </div>
165 </a>
166 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
167
168 <script>
169
170
171 function ready(fn) {
172 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
173 fn();
174 } else {
175 document.addEventListener('DOMContentLoaded', fn);
176 }
177 }
178
179
180 function stage1(){
181
182 var tl = new TimelineMax({repeat:0, repeatDelay:10});
183
184 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
185
186 tl.to("#blue-panel",2,{top:-160}, "+=4");
187 tl.to("#gold-panel",2,{bottom:-5}, "-=2");
188
189 tl.to(".txt2",1,{opacity:0}, "+=2.5");
190 tl.to(".img1",1,{opacity:0}, "-=1.5");
191
192 tl.to("#blue-panel",2,{top:0});
193 tl.to("#gold-panel",2,{bottom:-80}, "-=2");
194
195 tl.to(".txt3",1,{opacity:1}, "-=2");
196 tl.to(".img2",1,{opacity:1}, "-=1");
197 tl.to(".img3",1,{opacity:1}, "-=1");
198
199 }
200
201 function stopAnimateBtn() {
202 Tlpath.restart();
203 Tlpath.kill();
204 }
205
206 function animateBtn() {
207 Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
208 Tlpath.to(".img3 path:first-of-type",1,{x:10});
209 Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
210 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
211 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
212 Tlpath.to(".img3 path:first-of-type",0,{x:-10});
213 Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
214 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
215 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
216 Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
217 Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
218 }
219
220 ready(stage1());
221
222 </script>
223
224 </body>
225
226 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <meta name="ad.size" content="width=300,height=600">
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://ontarioplanners.ca/planonit";
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 <style>
24
25 body{
26 margin: 0;
27 padding: 0;
28 width: 300px;
29 height: 600px;
30 line-height: 1.2;
31 font-size: 27px;
32 letter-spacing: .4;
33 background:white;
34 color: #CD040B;
35 font-family: "Neue Haas Grotesk", Arial, sans-serif;
36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
37 font-style: normal;
38 background:#F2F2F2;
39 }
40
41 #border{
42 position: absolute;
43 width: 300px;
44 height: 600px;
45 background:#F2F2F2;
46 overflow: hidden;
47 cursor: pointer;
48 box-sizing: border-box;
49 /* border:1px solid; */
50 }
51
52 a{
53 text-decoration: none;
54 color: inherit;
55 }
56
57 #gray-panel{
58 width:100%;
59 height:100%;
60 max-height: 100%;
61 text-align: center;
62 }
63
64 #blue-panel {
65 width:100%;
66 height:365px;
67 max-height: 100%;
68 text-align: center;
69 position: absolute;
70 background:#0B4D85;
71 top:-350px;
72 }
73
74 #gold-panel {
75 width:100%;
76 height:235px;
77 max-height: 100%;
78 text-align: center;
79 position: absolute;
80 right:-205px;
81 background:#EDC130;
82 bottom:-220px;
83 left:0;
84 }
85
86 .txt1 {
87 position: absolute;
88 top:135px;
89 left:20px;
90 opacity: 0;
91 }
92
93 .txt2 {
94 position: absolute;
95 top: 95px;
96 left: 45px;
97 }
98
99 .txt3 {
100 opacity: 0;
101 position: absolute;
102 left: 30px;
103 top: 70px;
104 }
105
106 .img1 {
107 position: absolute;
108 left: 65px;
109 top: 35px;
110 }
111
112 .img2 {
113 opacity: 0;
114 position: absolute;
115 left: 90px;
116 top: 60px;
117 }
118
119
120 .img3 {
121 opacity: 0;
122 position: absolute;
123 top: 255px;
124 left: 65px;
125 transition: x 0.5s;
126 }
127
128 .img3 path {
129 pointer-events: none;
130 }
131
132 </style>
133
134 </head>
135
136 <body>
137 <a id="click-tag" href="javascript:window.open(window.clickTag)">
138 <div id="border">
139
140 <div id="gray-panel">
141 <img class='txt1' src="./assets/txt1.png" alt="" >
142 </div>
143
144 <div id='blue-panel'>
145 <img class='txt2' src="./assets/txt2.png" alt="" >
146 <img class='txt3' src="./assets/txt3.png" alt="" >
147 </div>
148
149 <div id='gold-panel'>
150 <img class='img1' src="./assets/logo_rpp.png" alt="" >
151 <img class='img2' src="./assets/sponserd.png" alt="" >
152 </div>
153
154 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
155 </div>
156 </a>
157 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
158
159 <script>
160
161
162 function ready(fn) {
163 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
164 fn();
165 } else {
166 document.addEventListener('DOMContentLoaded', fn);
167 }
168 }
169
170
171 function stage1(){
172
173 var tl = new TimelineMax({repeat:0, repeatDelay:10});
174
175 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
176
177 tl.to("#blue-panel",2,{top:0}, "+=4");
178 tl.to("#gold-panel",2,{bottom:0}, "-=2");
179
180 tl.to(".txt2",1,{opacity:0}, "+=2.5");
181 tl.to(".img1",1,{opacity:0}, "-=1.5");
182
183 tl.to(".txt3",1,{opacity:1});
184 tl.to(".img2",1,{opacity:1}, "-=1");
185 tl.to(".img3",1,{opacity:1}, "-=1");
186
187 }
188
189
190 function stopAnimateBtn() {
191 Tlpath.restart();
192 Tlpath.kill();
193 }
194
195 function animateBtn() {
196 Tlpath = new TimelineMax({repeat:-1, repeatDelay:0});
197 Tlpath.to(".img3 path:first-of-type",1,{x:10});
198 Tlpath.to(".img3 path:first-of-type + path",1,{x:10}, "-=0.6");
199 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:0}, "-=0.7");
200 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:0}, "-=0.5");
201 Tlpath.to(".img3 path:first-of-type",0,{x:-10});
202 Tlpath.to(".img3 path:first-of-type + path",0,{x:-10});
203 Tlpath.to(".img3 path:first-of-type",0.5,{opacity:1});
204 Tlpath.to(".img3 path:first-of-type + path",0.5,{opacity:1}, "-=0.3");
205 Tlpath.to(".img3 path:first-of-type",1,{x:0}, "-=0.6");
206 Tlpath.to(".img3 path:first-of-type + path",1,{x:0}, "-=0.6");
207 }
208
209 ready(stage1());
210
211 </script>
212
213 </body>
214
215 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <meta name="ad.size" content="width=728,height=90">
7
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 {
14 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
15 if (match == null || match == ""){
16 return clickTag;
17 } else{
18 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
19 }
20 }
21 clickTag = getParameterByName('clickTag');
22 </script>
23
24 <style>
25 body{
26 margin: 0;
27 padding: 0;
28 width: 728px;
29 height: 90px;
30 line-height: 1.2;
31 font-size: 27px;
32 letter-spacing: .4;
33 color: #CD040B;
34 /*font-family: "Neue Haas Grotesk", Arial, sans-serif;*/
35 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
36 font-style: normal;
37
38
39 }
40
41 a{
42 text-decoration: none;
43 color: inherit;
44 }
45 img {
46 border-style:none;
47 }
48
49 #border{
50 position: absolute;
51 width: 728px;
52 height: 90px;
53 background:#F2F2F2;
54 overflow: hidden;
55 cursor: pointer;
56 box-sizing: border-box;
57 /* border:1px solid; */
58 }
59
60 a{
61 text-decoration: none;
62 color: inherit;
63 }
64
65 #gray-panel{
66 width:100%;
67 height:100%;
68 max-height: 100%;
69 text-align: center;
70 }
71
72 #blue-panel {
73 width:566px;
74 height:100%;
75 max-height: 100%;
76 text-align: center;
77 position: absolute;
78 background:#0B4D85;
79 top:0;
80 left:-551px;
81 }
82
83 #gold-panel {
84 width:162px;
85 height:100%;
86 max-height: 100%;
87 text-align: center;
88 position: absolute;
89 background:#EDC130;
90 right:-148px;
91 top:0;
92 }
93
94 .txt1 {
95 position: absolute;
96 top:15px;
97 left:120px;
98 opacity: 0;
99 }
100
101 .txt2 {
102 position: absolute;
103 top: 12px;
104 left: 140px;
105 }
106
107 .txt3 {
108 opacity: 0;
109 position: absolute;
110 left: 90px;
111 top: 20px;
112 }
113
114 .img1 {
115 position: absolute;
116 left: 30px;
117 top: -5px;
118 height: 100px;
119 }
120
121 .img2 {
122 opacity: 0;
123 position: absolute;
124 left: 40px;
125 top: 15px;
126 height: 55px;
127 }
128
129 </style>
130 </head>
131
132 <body>
133 <a id="click-tag" href="javascript:window.open(window.clickTag)">
134 <!-- <a href="javascript:eyeBuild.doClick(0)"> -->
135 <div id="border">
136
137 <div id="gray-panel">
138 <img class='txt1' src="./assets/txt1.png" alt="" >
139 </div>
140
141 <div id='blue-panel'>
142 <img class='txt2' src="./assets/txt2.png" alt="" >
143 <img class='txt3' src="./assets/txt3.png" alt="" >
144 </div>
145
146 <div id='gold-panel'>
147 <img class='img1' src="./assets/logo_rpp.png" alt="" >
148 <img class='img2' src="./assets/sponserd.png" alt="" >
149 </div>
150
151 </div>
152 </a>
153
154
155 <!-- GREENSOCK-->
156 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
157
158 <script>
159
160 function ready(fn) {
161 if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
162 fn();
163 } else {
164 document.addEventListener('DOMContentLoaded', fn);
165 }
166 }
167
168 function stage1(){
169
170 var tl = new TimelineMax({repeat:0, repeatDelay:10});
171
172 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
173
174 tl.to("#blue-panel",2,{left:0}, "+=4");
175 tl.to("#gold-panel",2,{right:0}, "-=2");
176
177 tl.to(".txt2",1,{opacity:0}, "+=2.5");
178 tl.to(".img1",1,{opacity:0}, "-=1.5");
179
180 tl.to(".txt3",1,{opacity:1});
181 tl.to(".img2",1,{opacity:1}, "-=1");
182
183 }
184
185 ready(stage1());
186
187
188
189 </script>
190 </body>
191
192 </html>
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <meta name="ad.size" content="width=970,height=250">
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "https://ontarioplanners.ca/planonit";
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 </script>
23
24 <style>
25
26 body{
27 margin: 0;
28 padding: 0;
29 width: 970px;
30 height: 250px;
31 line-height: 1.2;
32 font-size: 27px;
33 letter-spacing: 0;
34 font-family: "Neue Haas Grotesk", Arial, sans-serif;
35 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
36 font-style: normal;
37 background:#F2F2F2;
38 }
39
40 a{
41 text-decoration: none;
42 color: inherit;
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 #gray-panel{
55 width:100%;
56 height:100%;
57 max-height: 100%;
58 text-align: center;
59 }
60
61 #blue-panel {
62 width:100%;
63 height:100%;
64 max-height: 100%;
65 text-align: center;
66 position: absolute;
67 left:-745px;
68 background:#0B4D85;
69 top:0;
70 width:755px;
71 }
72
73 #gold-panel {
74 width:215px;
75 height:100%;
76 max-height: 100%;
77 text-align: center;
78 position: absolute;
79 right:-205px;
80 background:#EDC130;
81 top:0;
82 }
83
84 #gold-panel img {
85 margin-top:40px;
86 }
87
88 .txt1 {
89 opacity: 0;
90 margin-top:60px;
91 }
92
93 .txt2 {
94 margin-top:75px;
95 }
96
97 .txt3 {
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
114
115 </style>
116 </head>
117
118 <body>
119 <a id="click-tag" href="javascript:window.open(window.clickTag)">
120 <div id="border">
121
122 <div id="gray-panel">
123 <img class='txt1' src="./assets/txt1.png" alt="" >
124 </div>
125
126 <div id='blue-panel'>
127 <img class='txt2' src="./assets/txt2.png" alt="" >
128 <img class='txt3' src="./assets/txt3.png" alt="" >
129 </div>
130
131 <div id='gold-panel'>
132 <img class='img1' src="./assets/logo_rpp.png" alt="" >
133 <img class='img2' src="./assets/sponserd.png" alt="" >
134 </div>
135
136 </div>
137 </a>
138
139 <!-- GREENSOCK-->
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 function stage1(){
155
156 var tl = new TimelineMax({repeat:0, repeatDelay:10});
157
158 tl.to(".img1",2.5,{opacity:1});
159 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
160
161 tl.to("#blue-panel",2,{left:0}, "+=4");
162 tl.to("#gold-panel",2,{right:0}, "-=2");
163
164 tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
165 tl.to(".img1",1.5,{opacity:0}, "-=1.5");
166
167 tl.to(".txt3",1.5,{opacity:1});
168 tl.to(".img2",1.5,{opacity:1}, "-=1.5");
169 }
170
171 ready(stage1());
172
173 </script>
174
175 </body>
176
177 </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">WPV Spring Digital Media Ads</a></h3>
15
16 <h1>OPPI Spring Media Ads</h1>
17
18 <iframe id='' class="b300x250 " scrolling="no" src="300x250/index.html"></iframe>
19
20 <iframe id='' class="b300x600 " scrolling="no" src="300x600/index.html"></iframe>
21
22 <iframe id='' class="b728x90 " scrolling="no" src="728x90/index.html"></iframe>
23
24 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250/index.html"></iframe>
25
26 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-2/index.html"></iframe>
27
28 </body>
29 </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 }