Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
5e5b4195 by Jeremy Groot
Options

OPPI Ad

1 parent ac145fee
Inline Side-by-side
Showing 11 changed files with 229 additions and 0 deletions
This diff could not be displayed because it is too large.
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 216.39 79.85"><defs><style>.\35 83689f2-e9ee-47fd-8b95-70c28468d559,.e7b417fe-f434-49b7-b105-c026ea1876ba{fill:none;}.\36 2fa3637-df23-4511-acdd-89160da2da55{clip-path:url(#01a72d62-c39f-4f16-aa20-06a229f717da);}.ba95189f-1ea8-41f5-827e-2c4396fc6641{fill:#167aac;}.\36 4488b13-cbc2-453d-97f6-0a2404d069b4,.f50f97de-7048-4e7c-8464-2f9d29d482ad{fill:#fff;}.e7b417fe-f434-49b7-b105-c026ea1876ba,.f50f97de-7048-4e7c-8464-2f9d29d482ad{stroke:#fff;stroke-miterlimit:10;}.f50f97de-7048-4e7c-8464-2f9d29d482ad{stroke-width:0.6px;}.b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36{fill:#edc12d;}.e7b417fe-f434-49b7-b105-c026ea1876ba{stroke-width:1.79px;}.b18d7146-9033-47f6-8a59-7fb578b524a9{font-size:7.42px;fill:#231f20;font-family:Gotham-Bold, Gotham;font-weight:700;letter-spacing:0em;}.f203dee6-efa6-45b8-bfc0-5bd8a81dade7{letter-spacing:0.01em;}.f8913dc3-b057-4374-bb03-e892920e0f69{letter-spacing:0em;}.c863275a-0dd3-4b05-8fee-63105beb4641{letter-spacing:-0.03em;}.eec576c0-3f63-4c93-a4f7-95ae6f8981fc{letter-spacing:0.02em;}.cb768054-71c8-4785-9369-8b51c873a83b{letter-spacing:-0.08em;}.\37 fe8c9ac-45f2-45b0-bff3-faa6f7699e0c{letter-spacing:-0.01em;}.\34 2c05c0e-b657-4dd9-a17f-d680d0978225{letter-spacing:0.01em;}.dae1cc2e-8b81-4e2b-b438-db73a7de88ef{letter-spacing:-0.02em;}.e8c3edff-0846-40f0-ae33-fe4f45426750{letter-spacing:-0.01em;}.f5c2830c-e62a-457b-bd21-cce2064bb39b{letter-spacing:-0.01em;}.\38 c9210cb-d0d9-4193-a9b0-2f7711c053f3{letter-spacing:0em;}.d31e9e92-69db-414c-ba9d-369a6610de3c{letter-spacing:0em;}.\39 15423e7-9652-4196-a8ce-0cec8aeb2795{letter-spacing:-0.01em;}.\38 8c66e28-7fc1-4558-8dbd-f8dc49740f8d{letter-spacing:-0.04em;}.\39 f4cfa08-654f-4324-a759-e47c0d280242{letter-spacing:0em;}.\35 e5a4db6-9aa1-4579-bd33-bbc79a0d4594{letter-spacing:0.08em;}.\34 ec26b60-6983-4ae9-82f6-f02910ae540e{letter-spacing:0em;}.ece268bc-0612-451a-a3cc-351b58fc6ce2{letter-spacing:0em;}.\31 4e079f0-9c61-441f-b384-427886f97d0c{letter-spacing:0em;}.dcddc43b-76e1-43a1-88f2-1e1b58fbe1ff{letter-spacing:0.01em;}.aa71b808-877b-4be0-add5-b7feb0110b06{letter-spacing:0.01em;}.\35 ae5d756-1c87-4220-b665-3022af015c3b{letter-spacing:-0.02em;}.bd100c0a-1bb9-48c0-a6f4-f7be0dcdc07b{letter-spacing:0.01em;}.\34 b78f999-6e56-4b33-a9aa-36ff5e5be308{letter-spacing:0.01em;}.\32 69185e1-e5bc-4c47-ac95-a306b9c022c8{letter-spacing:0em;}.a69d1176-ef25-446d-b6e0-0cc818a3f7ca{letter-spacing:-0.01em;}.d5c1ae91-2e98-4ffe-b59b-aa2f7bdfe41f{letter-spacing:-0.01em;}.\36 2f5d88f-9fa2-43dd-8438-256de65a3777{letter-spacing:0em;}</style><clipPath id="01a72d62-c39f-4f16-aa20-06a229f717da" transform="translate(0 -5.84)"><path class="583689f2-e9ee-47fd-8b95-70c28468d559" d="M151.66,60.15H58.24V0h93.42Zm0,10.33H58.24v33.08h93.42Z"/></clipPath></defs><title>Y</title><g id="0ba3f3cc-91bc-4626-8d5b-7b982f14253d" data-name="Layer 2"><g id="f9e4d40a-a920-4c64-a62e-4f25139aba91" data-name="type logos"><g class="62fa3637-df23-4511-acdd-89160da2da55"><polygon class="583689f2-e9ee-47fd-8b95-70c28468d559" points="105.75 27.8 105.75 27.8 91.97 1.42 67.25 1.42 93.47 51.94 93.96 50.98 105.75 27.8 105.75 27.8"/><polygon class="583689f2-e9ee-47fd-8b95-70c28468d559" points="145.51 1.42 120.79 1.42 107.01 27.8 107.01 27.8 107.01 27.8 119.35 51.84 119.4 51.94 145.51 1.42"/><polygon class="583689f2-e9ee-47fd-8b95-70c28468d559" points="94.94 51.51 93.57 54.44 119.5 54.44 118.37 52.38 106.38 29.04 94.94 51.51"/><circle class="ba95189f-1ea8-41f5-827e-2c4396fc6641" cx="107.01" cy="33.64" transform="translate(-3.36 7.8) rotate(-7.18)"/><polygon class="ba95189f-1ea8-41f5-827e-2c4396fc6641" points="93.48 54.39 93.48 54.38 93.48 54.38 93.48 54.39"/><polygon class="f50f97de-7048-4e7c-8464-2f9d29d482ad" points="93.47 51.94 67.25 1.42 91.97 1.42 105.75 27.8 105.79 27.71 106.37 26.57 92.65 0.3 65.41 0.3 92.85 53.16 93.96 50.98 93.47 51.94"/><polygon class="ba95189f-1ea8-41f5-827e-2c4396fc6641" points="106.38 29.03 94.94 51.51 106.38 29.04 106.38 29.03"/><polygon class="b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36" points="118.37 52.38 106.39 29.03 106.38 29.04 118.37 52.38"/><polygon class="f50f97de-7048-4e7c-8464-2f9d29d482ad" points="107.01 27.8 120.79 1.42 145.51 1.42 119.4 51.94 119.35 51.84 120.03 53.16 147.35 0.3 120.11 0.3 106.38 26.58 106.94 27.67 107.01 27.8"/><circle class="b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36" cx="105.75" cy="33.64" transform="translate(59.11 128.5) rotate(-82.8)"/><polygon class="b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36" points="105.79 27.71 105.75 27.8 105.75 27.8 105.79 27.71"/><circle class="b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36" cx="106.38" cy="34.87" r="0.01" transform="translate(38.31 117.91) rotate(-70.7)"/><polygon class="b1dacef1-06ec-4cc1-92c7-4dbd07fa3f36" points="107.01 27.8 106.94 27.67 107.01 27.8 107.01 27.8"/><polygon class="64488b13-cbc2-453d-97f6-0a2404d069b4" points="93.96 50.98 105.75 27.81 105.75 27.8 93.96 50.98"/><ellipse class="64488b13-cbc2-453d-97f6-0a2404d069b4" cx="106.38" cy="32.42" rx="0.01" ry="0.01" transform="translate(34.54 111.48) rotate(-66.71)"/><polygon class="64488b13-cbc2-453d-97f6-0a2404d069b4" points="107.01 27.8 119.35 51.84 107.01 27.8 107.01 27.8"/><path class="583689f2-e9ee-47fd-8b95-70c28468d559" d="M93.48,60.09l13.23,24.42a.11.11,0,0,0,.19,0L119.4,60.09l-1-1.87.45.88L106.92,82a.11.11,0,0,1-.19,0L94.05,59.1" transform="translate(0 -5.84)"/><polygon class="f50f97de-7048-4e7c-8464-2f9d29d482ad" points="106.38 29.03 105.75 27.81 93.96 50.98 92.85 53.16 93.52 54.31 94.94 51.51 106.38 29.03"/><polygon class="64488b13-cbc2-453d-97f6-0a2404d069b4" points="106.38 26.59 106.37 26.57 105.79 27.71 106.38 26.59"/><circle class="64488b13-cbc2-453d-97f6-0a2404d069b4" cx="107.01" cy="33.64" transform="translate(49.98 124.39) rotate(-76.89)"/><polygon class="f50f97de-7048-4e7c-8464-2f9d29d482ad" points="119.35 51.84 107.01 27.8 106.39 29.03 118.37 52.38 119.4 54.25 120.03 53.16 119.35 51.84"/><polygon class="64488b13-cbc2-453d-97f6-0a2404d069b4" points="106.94 27.67 106.38 26.58 106.38 26.59 106.94 27.67"/><circle class="64488b13-cbc2-453d-97f6-0a2404d069b4" cx="105.75" cy="33.64" transform="matrix(0.96, -0.29, 0.29, 0.96, -5.21, 26.41)"/><polygon class="64488b13-cbc2-453d-97f6-0a2404d069b4" points="107.01 27.8 106.94 27.67 106.38 26.59 105.79 27.71 105.75 27.8 105.75 27.81 105.75 27.81 106.38 29.03 106.38 29.02 106.39 29.03 107.01 27.8 107.01 27.8 107.01 27.8"/><polygon class="e7b417fe-f434-49b7-b105-c026ea1876ba" points="93.52 55.62 93.52 78.87 119.41 78.95 119.41 55.62 93.52 55.62"/></g><text class="b18d7146-9033-47f6-8a59-7fb578b524a9" transform="translate(0 62.37) scale(0.98 1)">ID<tspan class="f203dee6-efa6-45b8-bfc0-5bd8a81dade7" x="8.32" y="0">E</tspan><tspan class="f8913dc3-b057-4374-bb03-e892920e0f69" x="13.36" y="0">A</tspan><tspan class="c863275a-0dd3-4b05-8fee-63105beb4641" x="19.24" y="0">S</tspan><tspan class="eec576c0-3f63-4c93-a4f7-95ae6f8981fc" x="23.8" y="0"> </tspan><tspan class="cb768054-71c8-4785-9369-8b51c873a83b" x="26.21" y="0">A</tspan><tspan class="c863275a-0dd3-4b05-8fee-63105beb4641" x="31.48" y="0">T</tspan><tspan class="eec576c0-3f63-4c93-a4f7-95ae6f8981fc" x="36.11" y="0"> </tspan><tspan class="7fe8c9ac-45f2-45b0-bff3-faa6f7699e0c" x="38.52" y="0">T</tspan><tspan class="42c05c0e-b657-4dd9-a17f-d680d0978225" x="43.26" y="0">H</tspan><tspan class="dae1cc2e-8b81-4e2b-b438-db73a7de88ef" x="48.95" y="0">E</tspan><tspan class="eec576c0-3f63-4c93-a4f7-95ae6f8981fc" x="53.74" y="0"> </tspan><tspan class="e8c3edff-0846-40f0-ae33-fe4f45426750" x="56.15" y="0">CR</tspan><tspan class="f5c2830c-e62a-457b-bd21-cce2064bb39b" x="66.9" y="0">O</tspan><tspan class="8c9210cb-d0d9-4193-a9b0-2f7711c053f3" x="73.14" y="0">S</tspan><tspan class="d31e9e92-69db-414c-ba9d-369a6610de3c" x="77.87" y="0">S</tspan><tspan class="915423e7-9652-4196-a8ce-0cec8aeb2795" x="82.65" y="0">R</tspan><tspan class="88c66e28-7fc1-4558-8dbd-f8dc49740f8d" x="87.97" y="0">O</tspan><tspan class="9f4cfa08-654f-4324-a759-e47c0d280242" x="93.98" y="0">A</tspan><tspan class="f5c2830c-e62a-457b-bd21-cce2064bb39b" x="99.81" y="0">D</tspan><tspan class="c863275a-0dd3-4b05-8fee-63105beb4641" x="105.54" y="0">S</tspan><tspan class="5e5a4db6-9aa1-4579-bd33-bbc79a0d4594" x="110.11" y="0"> </tspan><tspan class="4ec26b60-6983-4ae9-82f6-f02910ae540e" x="112.89" y="0">O</tspan><tspan class="dae1cc2e-8b81-4e2b-b438-db73a7de88ef" x="119.21" y="0">F</tspan><tspan class="eec576c0-3f63-4c93-a4f7-95ae6f8981fc" x="123.89" y="0"> </tspan><tspan x="126.3" y="0">I</tspan><tspan class="ece268bc-0612-451a-a3cc-351b58fc6ce2" x="128.81" y="0">NS</tspan><tspan class="14e079f0-9c61-441f-b384-427886f97d0c" x="139.48" y="0">P</tspan><tspan x="144.44" y="0">I</tspan><tspan class="dcddc43b-76e1-43a1-88f2-1e1b58fbe1ff" x="146.94" y="0">R</tspan><tspan class="aa71b808-877b-4be0-add5-b7feb0110b06" x="152.35" y="0">E</tspan><tspan class="5ae5d756-1c87-4220-b665-3022af015c3b" x="157.4" y="0">D</tspan><tspan class="eec576c0-3f63-4c93-a4f7-95ae6f8981fc" x="163.02" y="0"> </tspan><tspan class="c863275a-0dd3-4b05-8fee-63105beb4641" x="165.43" y="0">C</tspan><tspan class="4ec26b60-6983-4ae9-82f6-f02910ae540e" x="170.72" y="0">O</tspan><tspan class="bd100c0a-1bb9-48c0-a6f4-f7be0dcdc07b" x="177.03" y="0">M</tspan><tspan class="4b78f999-6e56-4b33-a9aa-36ff5e5be308" x="183.53" y="0">MU</tspan><tspan class="269185e1-e5bc-4c47-ac95-a306b9c022c8" x="195.73" y="0">N</tspan><tspan class="a69d1176-ef25-446d-b6e0-0cc818a3f7ca" x="201.62" y="0">I</tspan><tspan class="d5c1ae91-2e98-4ffe-b59b-aa2f7bdfe41f" x="204.01" y="0">T</tspan><tspan x="208.73" y="0">I</tspan><tspan class="62f5d88f-9fa2-43dd-8438-256de65a3777" x="211.23" y="0">E</tspan><tspan class="dae1cc2e-8b81-4e2b-b438-db73a7de88ef" x="216.24" y="0">S</tspan></text></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298.54 78.28"><defs><style>.\38 d70ec33-c7e8-4156-98e3-7731046067f0{font-size:17px;fill:#fff;font-family:FranklinGothic-Demi, ITC Franklin Gothic;letter-spacing:0.02em;}</style></defs><title>txt1</title><g id="c099fc94-d9e2-4613-8548-8840a061c15f" data-name="Layer 2"><g id="190c08ad-7a02-4b03-a951-a45c58105f32" data-name="type logos"><text class="8d70ec33-c7e8-4156-98e3-7731046067f0" transform="translate(48.33 14.87)">COMING JANUARY 2019!</text></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298.54 78.28"><defs><style>.\35 7fe3fce-b1a0-4eec-8f4a-9dc3039fa888{font-size:17px;fill:#fff;font-family:FranklinGothic-Demi, ITC Franklin Gothic;letter-spacing:0.02em;}</style></defs><title>txt2</title><g id="3d266e28-8e7f-4a69-9e62-fdd538c29b7c" data-name="Layer 2"><g id="11e5f7b7-b091-4f00-b99d-c09b6c0aa5cd" data-name="type logos"><text class="57fe3fce-b1a0-4eec-8f4a-9dc3039fa888" transform="translate(42.34 14.87)">Follow the changing shape <tspan x="19.21" y="20.4">of your Ontario with…</tspan></text></g></g></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.46 39.53"><defs><style>.\39 31d793b-c47d-4315-a9df-ba3d732b1dd2{font-size:17px;font-family:FranklinGothic-Demi, ITC Franklin Gothic;letter-spacing:0.02em;}</style></defs><title>txt3</title><g id="a44b2047-729e-4c45-85ea-4fe463c278dc" data-name="Layer 2"><g id="1fb0e89f-fbbc-4ad3-b180-d3eeb1755743" data-name="type logos"><text class="931d793b-c47d-4315-a9df-ba3d732b1dd2" transform="translate(43.39 14.87)">SUBSCRIBE OR <tspan x="-16.66" y="20.4">ADVERTISE TODAY.</tspan></text></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 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: none;
57 background:#b3b3b3;
58 overflow: hidden;
59 cursor: pointer;
60 box-sizing: border-box;
61 }
62 img{
63 position: absolute;
64 }
65 #txt1 {
66 position: absolute;
67 opacity: 0;
68 top:65px;
69 left:0;
70 text-transform: uppercase;
71 }
72 #txt2 {
73 position: absolute;
74 opacity: 1;
75 top:250px;
76 left:0;
77 display: inline-block;
78 }
79 #txt3 {
80 position: absolute;
81 opacity: 1;
82 bottom:-40px;
83 left:50px;
84 display: inline-block;
85 width:198px;
86 }
87 #img1 {
88 -webkit-box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
89 -moz-box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
90 box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
91 }
92 #img2 {
93 position: absolute;
94 top:-80px;
95 left:45px;
96 width:215px;
97 }
98
99 </style>
100 </head>
101
102 <body>
103 <a href="javascript:eyeBuild.doClick(0)" class="cta">
104 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
105 <div id="border">
106
107 <img id='img1' src='assets/Y_Cover_300p.jpg' />
108
109 <img id='txt1' src='assets/txt1.svg' />
110
111 <img id='txt2' src='assets/txt2.svg' />
112
113 <img id='img2' src='assets/Y.svg' />
114
115 <img id='txt3' src='assets/txt3.svg' />
116
117 </div>
118 </a>
119
120
121 <!-- GREENSOCK-->
122 <script src="assets/TweenMax.min.js"></script>
123
124 <script>
125
126 var tl = new TimelineMax({repeat:1, repeatDelay:5});
127
128 function stage1(){
129
130
131 tl.to("#txt1", 2, {opacity:1, delay:0.5 });
132 tl.to("#txt1", 0.5, {opacity:0, delay:0.5 });
133 tl.to("#txt2", 2, {opacity:1, css:{top:"65px"}, delay:0.2 });
134 tl.to("#txt2", 0.5, {opacity:0, delay:1.5 });
135 tl.to("#img2", 2, {top:'20px', delay:0.2 });
136 tl.to("#img2", 2, {css:{scale:0.45,top:"10px"}, delay:1}, "scale");
137 tl.to("#img1", 2, {css:{scale:0.45,top:"-85px"}, delay:1}, "scale");
138 tl.to("#txt3", 1, {css:{bottom:"7px"}, delay:2.5}, "scale");
139
140 }
141
142 //---------------------
143 stage1();
144
145
146
147 </script>
148
149 </body>
150
151 </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">Urban Toronto Digital Ad</a></h3>
15
16 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
17
18 </body>
19 </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 }
30
31 iframe::-webkit-scrollbar {
32 display: none;
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 }
1 //js file
...\ No newline at end of file ...\ No newline at end of file