Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
370e85e3 by Dan Rempel
Options

Sisk 2018 fall ads for approval

1 parent dd46a4ad
Inline Side-by-side
Showing 30 changed files with 505 additions and 0 deletions
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
/*
// IAB source: modified to allow link testing
var clickTag = "";
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: 0;
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: 1px solid black;
background-color: black;/* #0077a0 */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
#img{
position: absolute;
}
.txt{
position: absolute;
left:25px;
top:36px;
}
#txt1 {
opacity: 0;
}
#txt2 {
top:272px;/* 272px */
}
#txt3 {
top:97px;/* 97px */
left:305px;
}
#txt4 {
top:126px;/* 126px */
left:305px;
}
#logo{
position: absolute;
right: 36px;/* 36px */
top:255px;/* 70px */
}
</style>
</head>
<body>
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<div id="img" class="img"><img src="assets/img.jpg" alt="img" width="300"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="254">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="254">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="256">
<img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="256">
<img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="186">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2, repeatDelay:0});
var d=10;
tl.to("#img", d, {top:-100});
d=d*-1;
tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
tl.to("#txt2", .5, {top:152, ease:Power1.easeOut, delay:d+=1});
tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
tl.to("#logo", .5, {top:163, delay:d+=.4 });
tl.to("#txt3", .5, {left:25, ease:Power1.easeOut, delay:d+=.3});
tl.to("#txt4", .5, {left:25, ease:Power1.easeOut, delay:d+=.2});
console.log( "time: " + tl.totalDuration() );
</script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=300,height=600">
<script type="text/javascript">
/*
// IAB source: modified to allow link testing
var clickTag = "";
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: 600px;
line-height: 1.2;
font-size: 27px;
letter-spacing: 0;
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: 600px;
border: 1px solid black;
background-color: black;/* #0077a0 */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
#img{
position: absolute;
}
.txt{
position: absolute;
left:25px;
top:369px;
}
#txt1 {
opacity: 0;
}
#txt2 {
top:605px;/* 485px */
}
#txt3 {
top:375px;/* 375px */
left:305px;
}
#txt4 {
top:403px;/* 403px */
left:305px;
}
#logo{
position: absolute;
right: 36px;/* 36px */
top:605px;/* 467px */
}
</style>
</head>
<body>
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<div id="img" class="img"><img src="assets/img.jpg" alt="img" width="300"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="254">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="254">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="256">
<img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="256">
<img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="186">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2, repeatDelay:0});
var d=10;
tl.to("#img", d, {top:-88});
d=d*-1;
tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
tl.to("#txt2", .5, {top:485, ease:Power1.easeOut, delay:d+=1});
tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
tl.to("#logo", .5, {top:467, delay:d+=.4 });
tl.to("#txt3", .5, {left:25, ease:Power1.easeOut, delay:d+=.3});
tl.to("#txt4", .5, {left:25, ease:Power1.easeOut, delay:d+=.2});
console.log( "time: " + tl.totalDuration() );
</script>
</body>
</html>
\ No newline at end of file
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 GSAP Ad</title>
<meta name="ad.size" content="width=728,height=90">
<script type="text/javascript">
/*
// IAB source: modified to allow link testing
var clickTag = "";
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: 728px;
height: 90px;
line-height: 1.2;
font-size: 27px;
letter-spacing: 0;
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: 728px;
height: 90px;
border: 1px solid black;
background-color: black;/* #0077a0 */
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
/* background: url(img-50.jpg); */
/* background: url(guide2@2x.png) no-repeat center center; */
/* background-size: 300px 600px ; */
}
#img{
position: absolute;
}
.txt{
position: absolute;
left:52px;
top:33px;
}
.txtb{
position: absolute;
}
#txt1 {
opacity: 0;
}
#txt2 {
left:730px;/* 465px */
}
#txt3 {
top:100px;/* 19px */
}
#txt4 {
top:125px;/* 46px */
}
#logo{
position: absolute;
right: -300px;/* 54px */
top:15px;
}
</style>
</head>
<body>
<a href="javascript:eyeBuild.doClick(0)" class="cta">
<!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
<div id="border">
<div id="img" class="img"><img src="assets/img.jpg" alt="img" width="728"></div>
<img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="634">
<img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="143">
<img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="340">
<img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="318">
<img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="168">
</div>
</a>
<!-- GREENSOCK-->
<script src="assets/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax({repeat:2, repeatDelay:0});
var d=10;
tl.to("#img", d, {top:-125});
d=d*-1;
tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
tl.to("#txt2", .5, {left:465, ease:Power1.easeOut, delay:d+=1});
tl.to("#txt1", .5, {top:-30, ease:Power1.easeIn, delay:d+=2});
tl.to("#txt2", .5, {top:-30, ease:Power1.easeIn, delay:d});
tl.to("#logo", .5, {right:54, delay:d+=.4 });
tl.to("#txt3", .5, {top:19, ease:Power1.easeOut, delay:d+=.3});
tl.to("#txt4", .5, {top:46, ease:Power1.easeOut, delay:d+=.2});
console.log( "time: " + tl.totalDuration() );
</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>Fall 2018 Ads</h3>
<iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
<iframe id='' class="b300x600" scrolling="no" src="300x600/index.html"></iframe>
<iframe id='' class="b728x90" scrolling="no" src="728x90/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