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.
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <meta name="ad.size" content="width=300,height=250">
7 <script type="text/javascript">
8
9 /*
10 // IAB source: modified to allow link testing
11 var clickTag = "";
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 */
23
24 </script>
25 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
26 <script type="text/javascript">
27 window.onload = function() {
28 eyeBuild.initialize();
29 }
30 </script>
31
32
33 <style>
34
35 body{
36 margin: 0;
37 padding: 0;
38 width: 300px;
39 height: 250px;
40 line-height: 1.2;
41 font-size: 27px;
42 letter-spacing: 0;
43 color: #CD040B;
44 font-family: "Neue Haas Grotesk", Arial, sans-serif;
45 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
46 font-style: normal;
47 }
48
49 a{
50 text-decoration: none;
51 color: inherit;
52 }
53 #border{
54 position: absolute;
55 width: 300px;
56 height: 250px;
57 border: 1px solid black;
58 background-color: black;/* #0077a0 */
59 overflow: hidden;
60 cursor: pointer;
61 box-sizing: border-box;
62 /* background: url(img-50.jpg); */
63 /* background: url(guide2@2x.png) no-repeat center center; */
64 /* background-size: 300px 600px ; */
65 }
66 #img{
67 position: absolute;
68 }
69 .txt{
70 position: absolute;
71 left:25px;
72 top:36px;
73 }
74 #txt1 {
75 opacity: 0;
76 }
77 #txt2 {
78 top:272px;/* 272px */
79 }
80 #txt3 {
81 top:97px;/* 97px */
82 left:305px;
83 }
84 #txt4 {
85 top:126px;/* 126px */
86 left:305px;
87 }
88
89 #logo{
90 position: absolute;
91 right: 36px;/* 36px */
92 top:255px;/* 70px */
93 }
94
95
96 </style>
97 </head>
98
99 <body>
100 <a href="javascript:eyeBuild.doClick(0)" class="cta">
101 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
102 <div id="border">
103
104 <div id="img" class="img"><img src="assets/img.jpg" alt="img" width="300"></div>
105
106 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="254">
107 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="254">
108 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="256">
109 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="256">
110
111 <img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="186">
112 </div>
113 </a>
114
115 <!-- GREENSOCK-->
116 <script src="assets/TweenMax.min.js"></script>
117
118 <script>
119
120 var tl = new TimelineMax({repeat:2, repeatDelay:0});
121 var d=10;
122
123 tl.to("#img", d, {top:-100});
124 d=d*-1;
125
126 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
127 tl.to("#txt2", .5, {top:152, ease:Power1.easeOut, delay:d+=1});
128
129 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
130 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
131
132 tl.to("#logo", .5, {top:163, delay:d+=.4 });
133 tl.to("#txt3", .5, {left:25, ease:Power1.easeOut, delay:d+=.3});
134 tl.to("#txt4", .5, {left:25, ease:Power1.easeOut, delay:d+=.2});
135
136 console.log( "time: " + tl.totalDuration() );
137
138
139 </script>
140
141 </body>
142
143 </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 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 GSAP Ad</title>
6 <meta name="ad.size" content="width=300,height=600">
7 <script type="text/javascript">
8
9 /*
10 // IAB source: modified to allow link testing
11 var clickTag = "";
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 */
23
24 </script>
25 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
26 <script type="text/javascript">
27 window.onload = function() {
28 eyeBuild.initialize();
29 }
30 </script>
31
32
33 <style>
34
35 body{
36 margin: 0;
37 padding: 0;
38 width: 300px;
39 height: 600px;
40 line-height: 1.2;
41 font-size: 27px;
42 letter-spacing: 0;
43 color: #CD040B;
44 font-family: "Neue Haas Grotesk", Arial, sans-serif;
45 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
46 font-style: normal;
47 }
48
49 a{
50 text-decoration: none;
51 color: inherit;
52 }
53 #border{
54 position: absolute;
55 width: 300px;
56 height: 600px;
57 border: 1px solid black;
58 background-color: black;/* #0077a0 */
59 overflow: hidden;
60 cursor: pointer;
61 box-sizing: border-box;
62 /* background: url(img-50.jpg); */
63 /* background: url(guide2@2x.png) no-repeat center center; */
64 /* background-size: 300px 600px ; */
65 }
66 #img{
67 position: absolute;
68 }
69 .txt{
70 position: absolute;
71 left:25px;
72 top:369px;
73 }
74 #txt1 {
75 opacity: 0;
76 }
77 #txt2 {
78 top:605px;/* 485px */
79 }
80 #txt3 {
81 top:375px;/* 375px */
82 left:305px;
83 }
84 #txt4 {
85 top:403px;/* 403px */
86 left:305px;
87 }
88
89 #logo{
90 position: absolute;
91 right: 36px;/* 36px */
92 top:605px;/* 467px */
93 }
94
95
96 </style>
97 </head>
98
99 <body>
100 <a href="javascript:eyeBuild.doClick(0)" class="cta">
101 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
102 <div id="border">
103
104 <div id="img" class="img"><img src="assets/img.jpg" alt="img" width="300"></div>
105
106 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="254">
107 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="254">
108 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="256">
109 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="256">
110
111 <img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="186">
112 </div>
113 </a>
114
115 <!-- GREENSOCK-->
116 <script src="assets/TweenMax.min.js"></script>
117
118 <script>
119
120 var tl = new TimelineMax({repeat:2, repeatDelay:0});
121 var d=10;
122
123 tl.to("#img", d, {top:-88});
124 d=d*-1;
125
126 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
127 tl.to("#txt2", .5, {top:485, ease:Power1.easeOut, delay:d+=1});
128
129 tl.to("#txt1", .5, {left:-300, ease:Power1.easeIn, delay:d+=2});
130 tl.to("#txt2", .5, {left:-300, ease:Power1.easeIn, delay:d});
131
132 tl.to("#logo", .5, {top:467, delay:d+=.4 });
133 tl.to("#txt3", .5, {left:25, ease:Power1.easeOut, delay:d+=.3});
134 tl.to("#txt4", .5, {left:25, ease:Power1.easeOut, delay:d+=.2});
135
136 console.log( "time: " + tl.totalDuration() );
137
138
139 </script>
140
141 </body>
142
143 </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 <!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 <script type="text/javascript">
8
9 /*
10 // IAB source: modified to allow link testing
11 var clickTag = "";
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 */
23
24 </script>
25 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
26 <script type="text/javascript">
27 window.onload = function() {
28 eyeBuild.initialize();
29 }
30 </script>
31
32
33 <style>
34
35 body{
36 margin: 0;
37 padding: 0;
38 width: 728px;
39 height: 90px;
40 line-height: 1.2;
41 font-size: 27px;
42 letter-spacing: 0;
43 color: #CD040B;
44 font-family: "Neue Haas Grotesk", Arial, sans-serif;
45 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
46 font-style: normal;
47 }
48
49 a{
50 text-decoration: none;
51 color: inherit;
52 }
53 #border{
54 position: absolute;
55 width: 728px;
56 height: 90px;
57 border: 1px solid black;
58 background-color: black;/* #0077a0 */
59 overflow: hidden;
60 cursor: pointer;
61 box-sizing: border-box;
62 /* background: url(img-50.jpg); */
63 /* background: url(guide2@2x.png) no-repeat center center; */
64 /* background-size: 300px 600px ; */
65 }
66 #img{
67 position: absolute;
68 }
69 .txt{
70 position: absolute;
71 left:52px;
72 top:33px;
73 }
74 .txtb{
75 position: absolute;
76 }
77 #txt1 {
78 opacity: 0;
79 }
80 #txt2 {
81 left:730px;/* 465px */
82 }
83 #txt3 {
84 top:100px;/* 19px */
85 }
86 #txt4 {
87 top:125px;/* 46px */
88 }
89
90 #logo{
91 position: absolute;
92 right: -300px;/* 54px */
93 top:15px;
94 }
95
96
97 </style>
98 </head>
99
100 <body>
101 <a href="javascript:eyeBuild.doClick(0)" class="cta">
102 <!-- <a href="javascript:window.open(clickTag, '_blank');" class="cta"> -->
103 <div id="border">
104
105 <div id="img" class="img"><img src="assets/img.jpg" alt="img" width="728"></div>
106
107 <img id="txt1" class="txt" src="assets/txt1@2x.png" alt="Finding the right lawyer in Lambton County" width="634">
108 <img id="txt2" class="txt" src="assets/txt2@2x.png" alt="just got easier." width="143">
109 <img id="txt3" class="txt" src="assets/txt3@2x.png" alt="Siskinds – now in Sarnia." width="340">
110 <img id="txt4" class="txt" src="assets/txt4@2x.png" alt="siskinds.com 877.672.2121" width="318">
111
112 <img id="logo" src="assets/logo@2x.png" alt="Siskinds The Law Firm" width="168">
113
114 </div>
115 </a>
116
117 <!-- GREENSOCK-->
118 <script src="assets/TweenMax.min.js"></script>
119
120 <script>
121
122 var tl = new TimelineMax({repeat:2, repeatDelay:0});
123 var d=10;
124
125 tl.to("#img", d, {top:-125});
126 d=d*-1;
127
128 tl.to("#txt1", .5, {opacity:1, ease:Power1.easeOut, delay:d+=.25});
129 tl.to("#txt2", .5, {left:465, ease:Power1.easeOut, delay:d+=1});
130
131 tl.to("#txt1", .5, {top:-30, ease:Power1.easeIn, delay:d+=2});
132 tl.to("#txt2", .5, {top:-30, ease:Power1.easeIn, delay:d});
133
134 tl.to("#logo", .5, {right:54, delay:d+=.4 });
135 tl.to("#txt3", .5, {top:19, ease:Power1.easeOut, delay:d+=.3});
136 tl.to("#txt4", .5, {top:46, ease:Power1.easeOut, delay:d+=.2});
137
138 console.log( "time: " + tl.totalDuration() );
139
140
141 </script>
142
143 </body>
144
145 </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 <h3>Fall 2018 Ads</h3>
14
15 <iframe id='' class="b300x250" scrolling="no" src="300x250/index.html"></iframe>
16 <iframe id='' class="b300x600" scrolling="no" src="300x600/index.html"></iframe>
17 <iframe id='' class="b728x90" scrolling="no" src="728x90/index.html"></iframe>
18
19 </body>
20 </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 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