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.
<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
<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
<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
<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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<script type="text/javascript">
/*
// IAB source: modified to allow link testing
var clickTag = "https://huntsvillehospitalfoundation.ca";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
*/
</script>
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 300px;
height: 250px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#border{
position: absolute;
width: 300px;
height: 250px;
border: none;
background:#b3b3b3;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
img{
position: absolute;
}
#txt1 {
position: absolute;
opacity: 0;
top:65px;
left:0;
text-transform: uppercase;
}
#txt2 {
position: absolute;
opacity: 1;
top:250px;
left:0;
display: inline-block;
}
#txt3 {
position: absolute;
opacity: 1;
bottom:-40px;
left:50px;
display: inline-block;
width:198px;
}
#img1 {
-webkit-box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
-moz-box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
box-shadow: -8px 13px 23px 1px rgba(0,0,0,0.43);
}
#img2 {
position: absolute;
top:-80px;
left:45px;
width:215px;
}
</style>
</head>
<body>
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<img id='img1' src='assets/Y_Cover_300p.jpg' />
<img id='txt1' src='assets/txt1.svg' />
<img id='txt2' src='assets/txt2.svg' />
<img id='img2' src='assets/Y.svg' />
<img id='txt3' src='assets/txt3.svg' />
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:1, repeatDelay:5});
function stage1(){
tl.to("#txt1", 2, {opacity:1, delay:0.5 });
tl.to("#txt1", 0.5, {opacity:0, delay:0.5 });
tl.to("#txt2", 2, {opacity:1, css:{top:"65px"}, delay:0.2 });
tl.to("#txt2", 0.5, {opacity:0, delay:1.5 });
tl.to("#img2", 2, {top:'20px', delay:0.2 });
tl.to("#img2", 2, {css:{scale:0.45,top:"10px"}, delay:1}, "scale");
tl.to("#img1", 2, {css:{scale:0.45,top:"-85px"}, delay:1}, "scale");
tl.to("#txt3", 1, {css:{bottom:"7px"}, delay:2.5}, "scale");
}
//---------------------
stage1();
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5 Online Ads</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<h3><a href="index.html">Urban Toronto Digital Ad</a></h3>
<iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
</body>
</html>
html {
background-color: #d4d4d4;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #8e8e8e;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3em;
margin-left: 10px;
}
a {
color: #8e8e8e;
}
a:hover {
color: #FFFFFF;
}
iframe, img {
margin: 10px;
border: 1px #d4d4d4 solid;
overflow: hidden;
}
iframe::-webkit-scrollbar {
display: none;
};
.stacked {
display: flex;
}
.b300x250 {
width: 300px;
height: 250px;
}
.b728x90 {
width: 728px;
height: 90px;
}
.b300x600 {
width: 300px;
height: 600px;
}
.b600x566 {
width: 600px;
height: 566px;
}
//js file
\ No newline at end of file