Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
f5a1b039 by Jeremy Groot
Options

OPPI 2020 Spring Ads

1 parent 4b89a244
Inline Side-by-side
Showing 66 changed files with 261 additions and 369 deletions
...@@ -43,102 +43,88 @@ ...@@ -43,102 +43,88 @@
43 text-decoration: none; 43 text-decoration: none;
44 color: inherit; 44 color: inherit;
45 } 45 }
46 img {
47 border-style:none;
48 }
46 49
47 #border{ 50 #border{
48 position: relative; 51 position: absolute;
49 width: 300px; 52 width: 300px;
50 height: 250px; 53 height: 250px;
51 /* border: 1px solid #55565A; */ 54 background:#F2F2F2;
52 background-color: #FFFFFF;
53 overflow: hidden; 55 overflow: hidden;
54 cursor: pointer; 56 cursor: pointer;
55 box-sizing: border-box; 57 box-sizing: border-box;
56 } 58 /* border:1px solid; */
57
58 .img1 {
59 opacity:0;
60 }
61
62 .img2 {
63 opacity: 0;
64 } 59 }
65 60
66 .img3 { 61 a{
67 opacity: 0; 62 text-decoration: none;
63 color: inherit;
68 } 64 }
69 65
70 #copy { 66 #gray-panel{
71 position: absolute;
72 width:100%; 67 width:100%;
73 top:0; 68 height:100%;
69 max-height: 100%;
74 text-align: center; 70 text-align: center;
75 max-width: 300px;
76
77 } 71 }
78 72
79 #copy .txt2 { 73 #blue-panel {
74 width:100%;
75 height:250px;
76 max-height: 100%;
77 text-align: center;
80 position: absolute; 78 position: absolute;
81 top:25px; 79 background:#0B4D85;
82 left:30px; 80 top:-240px;
83 opacity: 0;
84 } 81 }
85 82
86 #copy .txt3 { 83 #gold-panel {
87 opacity: 0; 84 width:100%;
85 height:165px;
86 max-height: 100%;
87 text-align: center;
88 position: absolute; 88 position: absolute;
89 top:40px; 89 background:#EDC130;
90 left:30px; 90 bottom:-155px;
91 } 91 }
92 92
93 #copy .txt1 { 93 .txt1 {
94 position: absolute; 94 position: absolute;
95 top:25px; 95 top:80px;
96 left:30px; 96 left:30px;
97 opacity: 0; 97 opacity: 0;
98 } 98 }
99 99
100 #logo{ 100 .txt2 {
101 position: absolute; 101 position: absolute;
102 z-index: 11; 102 bottom:0;
103 top: 15px; 103 bottom: 15px;
104 width: 100%; 104 left: 50px;
105 text-align: center;
106 } 105 }
107 106
108 #logo img { 107 .txt3 {
109 opacity: 0; 108 opacity: 0;
110 }
111
112 #img img {
113 position: absolute; 109 position: absolute;
114 top:0; 110 left: 50px;
111 top: 5px;
115 } 112 }
116 113
117 .circles { 114 .img1 {
118 position: absolute; 115 position: absolute;
119 bottom:0; 116 left: 70px;
120 right:20px; 117 top: 11px;
118 height: 160px;
121 } 119 }
122 120
123 #last-frame { 121 .img2 {
124 opacity:0; 122 opacity: 0;
125 position: absolute; 123 position: absolute;
126 top:70px; 124 left: 55px;
127 text-align: center; 125 top: 20px;
126 height: 45px;
128 } 127 }
129
130 hr {
131 border:1px solid #2C5435;
132 position: relative;
133 width:230px;
134 border-radius: 10px;
135 }
136
137 .img4 {
138 position: relative;
139 top:10px;
140 }
141
142 128
143 </style> 129 </style>
144 130
...@@ -148,28 +134,19 @@ ...@@ -148,28 +134,19 @@
148 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 134 <a id="click-tag" href="javascript:window.open(window.clickTag)">
149 <div id="border"> 135 <div id="border">
150 136
151 <div id="logo"> 137 <div id="gray-panel">
152 <img src="./assets/logo.png" alt="WestPerthVillage Logo"> 138 <img class='txt1' src="./assets/txt1.png" alt="" >
153 </div> 139 </div>
154 140
155 <div id='last-frame'> 141 <div id='blue-panel'>
156 <img class='txt4' src="./assets/txt4.png" alt="" > 142 <img class='txt2' src="./assets/txt2.png" alt="" >
157 <img class='img4' src="./assets/donate_btn.png" alt="img" > 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="" >
158 </div> 149 </div>
159
160 <div id="img">
161 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
162 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
163 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
164 </div>
165
166 <div id="copy">
167 <img class='txt1' src="./assets/txt1.png" alt="" >
168 <img class='txt2' src="./assets/txt2.png" alt="" >
169 <img class='txt3' src="./assets/txt3.png" alt="" >
170 </div>
171
172 <img class='circles' src="./assets/circles.png" alt="" >
173 150
174 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> --> 151 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
175 </div> 152 </div>
...@@ -192,25 +169,19 @@ ...@@ -192,25 +169,19 @@
192 169
193 var tl = new TimelineMax({repeat:0, repeatDelay:10}); 170 var tl = new TimelineMax({repeat:0, repeatDelay:10});
194 171
195 tl.to(".img1",2.5,{opacity:1});
196 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 172 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
197 173
198 tl.to(".img1",2.5,{opacity:0}, "+=1"); 174 tl.to("#blue-panel",2,{top:-160}, "+=4");
199 tl.to(".txt1",0.5,{opacity:0}); 175 tl.to("#gold-panel",2,{bottom:-5}, "-=2");
200 tl.to(".img2",2.5,{opacity:1});
201 tl.to(".txt2",1,{opacity:1}, "-=2.5");
202 176
203 tl.to(".img2",2,{opacity:0}, "+=1"); 177 tl.to(".txt2",1,{opacity:0}, "+=2.5");
204 tl.to(".txt2",2,{opacity:0}, "-=2"); 178 tl.to(".img1",1,{opacity:0}, "-=1.5");
205 tl.to(".img3",2,{opacity:1}, "-=0.5");
206 tl.to(".txt3",1,{opacity:1}, "-=2");
207 179
208 tl.to(".img3",2,{opacity:0}, "+=2.5"); 180 tl.to("#blue-panel",2,{top:0});
209 tl.to(".circles",2,{opacity:0}, "-=2"); 181 tl.to("#gold-panel",2,{bottom:-80}, "-=2");
210 tl.to(".txt3",0.5,{opacity:0}, "-=2"); 182
211 183 tl.to(".txt3",1,{opacity:1}, "-=2");
212 tl.to("#logo img",2,{opacity:1}, "-=1.5"); 184 tl.to(".img2",1,{opacity:1}, "-=1");
213 tl.to("#last-frame",1,{opacity:1}, "-=1.5");
214 185
215 } 186 }
216 187
......
...@@ -35,111 +35,87 @@ ...@@ -35,111 +35,87 @@
35 font-family: "Neue Haas Grotesk", Arial, sans-serif; 35 font-family: "Neue Haas Grotesk", Arial, sans-serif;
36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
37 font-style: normal; 37 font-style: normal;
38 background:#F2F2F2;
38 } 39 }
39 40
40 a{
41 text-decoration: none;
42 color: inherit;
43 }
44
45 #border{ 41 #border{
46 position: relative; 42 position: absolute;
47 width: 300px; 43 width: 300px;
48 height: 600px; 44 height: 600px;
49 /* border: 1px solid #55565A; */ 45 background:#F2F2F2;
50 background-color: #FFFFFF;
51 overflow: hidden; 46 overflow: hidden;
52 cursor: pointer; 47 cursor: pointer;
53 box-sizing: border-box; 48 box-sizing: border-box;
49 /* border:1px solid; */
54 } 50 }
55 51
56 .img1 { 52 a{
57 opacity:0; 53 text-decoration: none;
58 } 54 color: inherit;
59
60 .img2 {
61 opacity: 0;
62 }
63
64 .img3 {
65 opacity: 0;
66 } 55 }
67 56
68 #copy { 57 #gray-panel{
69 position: absolute;
70 width:100%; 58 width:100%;
71 top:0; 59 height:100%;
60 max-height: 100%;
72 text-align: center; 61 text-align: center;
73 max-width: 300px;
74
75 } 62 }
76 63
77 #copy .txt2 { 64 #blue-panel {
65 width:100%;
66 height:365px;
67 max-height: 100%;
68 text-align: center;
78 position: absolute; 69 position: absolute;
79 top:45px; 70 background:#0B4D85;
80 left:40px; 71 top:-350px;
81 opacity: 0;
82 } 72 }
83 73
84 #copy .txt3 { 74 #gold-panel {
85 opacity: 0; 75 width:100%;
76 height:235px;
77 max-height: 100%;
78 text-align: center;
86 position: absolute; 79 position: absolute;
87 top:125px; 80 right:-205px;
88 left:40px; 81 background:#EDC130;
82 bottom:-220px;
83 left:0;
89 } 84 }
90 85
91 #copy .txt1 { 86 .txt1 {
92 position: absolute; 87 position: absolute;
93 top:45px; 88 top:135px;
94 left:40px; 89 left:40px;
95 opacity: 0; 90 opacity: 0;
96 } 91 }
97 92
98 #logo{ 93 .txt2 {
99 position: absolute; 94 position: absolute;
100 z-index: 11; 95 top: 95px;
101 top:45px; 96 left: 45px;
102 left:40px;
103 } 97 }
104 98
105 #logo img { 99 .txt3 {
106 opacity: 0; 100 opacity: 0;
107 }
108
109 #img img {
110 position: absolute; 101 position: absolute;
111 top:0; 102 left: 45px;
103 top: 80px;
112 } 104 }
113 105
114 .circles { 106 .img1 {
115 position: absolute; 107 position: absolute;
116 bottom:0; 108 left: 65px;
117 right:20px; 109 top: 35px;
118 } 110 }
119 111
120 #last-frame { 112 .img2 {
121 opacity:0; 113 opacity: 0;
122 position: absolute; 114 position: absolute;
123 top:145px; 115 left: 90px;
124 left:15px; 116 top: 60px;
125 }
126
127 hr {
128 border:1px solid #2C5435;
129 position: relative;
130 width:230px;
131 border-radius: 10px;
132 }
133
134 .img4 {
135 position: relative;
136 left:20px;
137 top:50px;
138 }
139
140 .txt4 {
141 padding:30px 0;
142 } 117 }
118
143 119
144 120
145 </style> 121 </style>
...@@ -150,30 +126,19 @@ ...@@ -150,30 +126,19 @@
150 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 126 <a id="click-tag" href="javascript:window.open(window.clickTag)">
151 <div id="border"> 127 <div id="border">
152 128
153 <div id="logo"> 129 <div id="gray-panel">
154 <img src="./assets/logo.png" alt="WestPerthVillage Logo"> 130 <img class='txt1' src="./assets/txt1.png" alt="" >
155 </div> 131 </div>
156 132
157 <div id='last-frame'> 133 <div id='blue-panel'>
158 <hr />
159 <img class='txt4' src="./assets/txt4.png" alt="" >
160 <hr />
161 <img class='img4' src="./assets/donate_btn.png" alt="img" >
162 </div>
163
164 <div id="img">
165 <img class='img1' src="./assets/img1.png" alt="img" width="300" >
166 <img class='img2' src="./assets/img2.png" alt="img" width="300" >
167 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
168 </div>
169
170 <div id="copy">
171 <img class='txt1' src="./assets/txt1.png" alt="" >
172 <img class='txt2' src="./assets/txt2.png" alt="" > 134 <img class='txt2' src="./assets/txt2.png" alt="" >
173 <img class='txt3' src="./assets/txt3.png" alt="" > 135 <img class='txt3' src="./assets/txt3.png" alt="" >
174 </div> 136 </div>
175 137
176 <img class='circles' src="./assets/circles.png" alt="" > 138 <div id='gold-panel'>
139 <img class='img1' src="./assets/logo_rpp.png" alt="" >
140 <img class='img2' src="./assets/sponserd.png" alt="" >
141 </div>
177 142
178 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> --> 143 <!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
179 </div> 144 </div>
...@@ -196,24 +161,16 @@ ...@@ -196,24 +161,16 @@
196 161
197 var tl = new TimelineMax({repeat:0, repeatDelay:10}); 162 var tl = new TimelineMax({repeat:0, repeatDelay:10});
198 163
199 tl.to(".img1",2.5,{opacity:1});
200 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 164 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
201 165
202 tl.to(".img1",2.5,{opacity:0}, "+=1"); 166 tl.to("#blue-panel",2,{top:0}, "+=4");
203 tl.to(".txt1",0.5,{opacity:0}); 167 tl.to("#gold-panel",2,{bottom:0}, "-=2");
204 tl.to(".img2",2.5,{opacity:1});
205 tl.to(".txt2",1,{opacity:1}, "-=2.5");
206
207 tl.to(".img2",2,{opacity:0}, "+=1");
208 tl.to(".txt2",2,{opacity:0}, "-=2");
209 tl.to(".img3",2,{opacity:1}, "-=0.5");
210 tl.to(".txt3",1,{opacity:1}, "-=2");
211 168
212 tl.to(".img3",2,{opacity:0}, "+=2.5"); 169 tl.to(".txt2",1,{opacity:0}, "+=2.5");
213 tl.to(".txt3",0.5,{opacity:0}, "-=2"); 170 tl.to(".img1",1,{opacity:0}, "-=1.5");
214 171
215 tl.to("#logo img",2,{opacity:1}, "-=1.5"); 172 tl.to(".txt3",1,{opacity:1});
216 tl.to("#last-frame",1,{opacity:1}, "-=1.5"); 173 tl.to(".img2",1,{opacity:1}, "-=1");
217 174
218 } 175 }
219 176
......
...@@ -47,92 +47,85 @@ ...@@ -47,92 +47,85 @@
47 } 47 }
48 48
49 #border{ 49 #border{
50 position: relative; 50 position: absolute;
51 width: 728px; 51 width: 728px;
52 height: 90px; 52 height: 90px;
53 background-color: #FFFFFF; 53 background:#F2F2F2;
54 overflow: hidden; 54 overflow: hidden;
55 cursor: pointer; 55 cursor: pointer;
56 box-sizing: border-box; 56 box-sizing: border-box;
57 } 57 border:1px solid;
58
59 .img1 {
60 position: absolute;
61 top:0;
62 opacity:0;
63 width:100%;
64 } 58 }
65 59
66 .img2 { 60 a{
67 position: absolute; 61 text-decoration: none;
68 top:0; 62 color: inherit;
69 opacity: 0;
70 width:100%;
71 } 63 }
72 64
73 .img3 { 65 #gray-panel{
74 position: absolute;
75 top:0;
76 opacity: 0;
77 width:100%; 66 width:100%;
67 height:100%;
68 max-height: 100%;
69 text-align: center;
78 } 70 }
79 71
80 #copy { 72 #blue-panel {
73 width:566px;
74 height:100%;
75 max-height: 100%;
76 text-align: center;
81 position: absolute; 77 position: absolute;
82 width:100%; 78 background:#0B4D85;
83 top:0; 79 top:0;
84 text-align: center; 80 left:-551px;
85
86 } 81 }
87 82
88 #copy .txt2 { 83 #gold-panel {
84 width:162px;
85 height:100%;
86 max-height: 100%;
87 text-align: center;
89 position: absolute; 88 position: absolute;
90 top:10px; 89 background:#EDC130;
91 left:60px; 90 right:-148px;
92 opacity: 0; 91 top:0;
93 } 92 }
94 93
95 #copy .txt3 { 94 .txt1 {
96 opacity: 0;
97 position: absolute; 95 position: absolute;
98 top:10px; 96 top:30px;
99 left:60px; 97 left:60px;
98 opacity: 0;
100 } 99 }
101 100
102 #copy .txt4 { 101 .txt2 {
103 opacity: 0;
104 position: absolute; 102 position: absolute;
105 top:10px; 103 top: 12px;
106 left:60px; 104 left: 140px;
107 } 105 }
108 106
109 #copy .txt5 { 107 .txt3 {
110 opacity: 0; 108 opacity: 0;
111 position: absolute; 109 position: absolute;
112 top:20px; 110 left: 110px;
113 left:60px; 111 top: 15px;
114 } 112 }
115 113
116 #copy .txt1 { 114 .img1 {
117 position: absolute; 115 position: absolute;
118 top:10px; 116 left: 30px;
119 left:60px; 117 top: -5px;
120 opacity: 0; 118 height: 100px;
121 } 119 }
122 120
123 #logo img { 121 .img2 {
124 opacity: 0; 122 opacity: 0;
125 position: absolute;
126 right:20px;
127 top:20px;
128 }
129
130 .circles {
131 position: absolute; 123 position: absolute;
132 bottom:0; 124 left: 40px;
133 right:0; 125 top: 15px;
126 height: 55px;
134 } 127 }
135 128
136 </style> 129 </style>
137 </head> 130 </head>
138 131
...@@ -141,31 +134,25 @@ ...@@ -141,31 +134,25 @@
141 <!-- <a href="javascript:eyeBuild.doClick(0)"> --> 134 <!-- <a href="javascript:eyeBuild.doClick(0)"> -->
142 <div id="border"> 135 <div id="border">
143 136
144 <div id="img"> 137 <div id="gray-panel">
145 <img class='img1' src="./assets/img1.png" alt="img" width="300" > 138 <img class='txt1' src="./assets/txt1.png" alt="" >
146 <img class='img2' src="./assets/img2.png" alt="img" width="300" > 139 </div>
147 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
148 </div>
149
150 <div id="copy">
151 <img class='txt1' src="./assets/txt1.png" alt="" >
152 <img class='txt2' src="./assets/txt2.png" alt="" >
153 <img class='txt3' src="./assets/txt3.png" alt="" >
154 <img class='txt4' src="./assets/txt4.png" alt="" >
155 <img class='txt5' src="./assets/donate_btn.png" alt="" >
156 </div>
157 140
158 <div id="logo"> 141 <div id='blue-panel'>
159 <img src="./assets/logo.png" alt="WestPerthVillage Logo"> 142 <img class='txt2' src="./assets/txt2.png" alt="" >
160 </div> 143 <img class='txt3' src="./assets/txt3.png" alt="" >
161 144 </div>
162 <img class='circles' src="./assets/circles.png" alt="" > 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>
163 150
164 </div> 151 </div>
165 </a> 152 </a>
166 153
167 154
168 <!-- GREENSOCK--> 155 <!-- GREENSOCK-->
169 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 156 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
170 157
171 <script> 158 <script>
...@@ -182,26 +169,18 @@ ...@@ -182,26 +169,18 @@
182 169
183 var tl = new TimelineMax({repeat:0, repeatDelay:10}); 170 var tl = new TimelineMax({repeat:0, repeatDelay:10});
184 171
185 tl.to(".img1",2.5,{opacity:1});
186 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 172 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
187 173
188 tl.to(".img1",2.5,{opacity:0}, "+=1"); 174 tl.to("#blue-panel",2,{left:0}, "+=4");
189 tl.to(".txt1",0.5,{opacity:0}); 175 tl.to("#gold-panel",2,{right:0}, "-=2");
190 tl.to(".img2",2.5,{opacity:1});
191 tl.to(".txt2",1,{opacity:1}, "-=2.5");
192 176
193 tl.to(".img2",2,{opacity:0}, "+=1"); 177 tl.to(".txt2",1,{opacity:0}, "+=2.5");
194 tl.to(".txt2",2,{opacity:0}, "-=2"); 178 tl.to(".img1",1,{opacity:0}, "-=1.5");
195 tl.to(".img3",2,{opacity:1}, "-=0.5");
196 tl.to(".txt3",1,{opacity:1}, "-=1.5");
197 179
198 tl.to(".img3",2,{opacity:0}, "+=2.5"); 180 tl.to(".txt3",1,{opacity:1});
199 tl.to(".txt3",0.5,{opacity:0}, "-=1.5"); 181 tl.to(".img2",1,{opacity:1}, "-=1");
200 tl.to(".txt4",1,{opacity:1}, "-=1");
201 tl.to("#logo img",2,{opacity:1}, "-=1");
202 182
203 tl.to(".txt4",0.5,{opacity:0}, "+=3"); 183
204 tl.to(".txt5",1,{opacity:1});
205 184
206 } 185 }
207 186
......
...@@ -31,10 +31,10 @@ ...@@ -31,10 +31,10 @@
31 line-height: 1.2; 31 line-height: 1.2;
32 font-size: 27px; 32 font-size: 27px;
33 letter-spacing: 0; 33 letter-spacing: 0;
34 color: #CD040B;
35 font-family: "Neue Haas Grotesk", Arial, sans-serif; 34 font-family: "Neue Haas Grotesk", Arial, sans-serif;
36 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/ 35 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
37 font-style: normal; 36 font-style: normal;
37 background:#F2F2F2;
38 } 38 }
39 39
40 a{ 40 a{
...@@ -45,75 +45,73 @@ ...@@ -45,75 +45,73 @@
45 position: absolute; 45 position: absolute;
46 width: 970px; 46 width: 970px;
47 height: 250px; 47 height: 250px;
48 background-color: white; 48 background:#F2F2F2;
49 overflow: hidden; 49 overflow: hidden;
50 cursor: pointer; 50 cursor: pointer;
51 box-sizing: border-box; 51 box-sizing: border-box;
52 /* background: url(img-50.jpg); */
53 /* background: url(guide2@2x.png) no-repeat center center; */
54 /* background-size: 300px 600px ; */
55 }
56
57 .img1 {
58 opacity: 0;
59 } 52 }
60 53
61 .img2 { 54 #gray-panel{
62 opacity: 0; 55 width:100%;
56 height:100%;
57 max-height: 100%;
58 text-align: center;
63 } 59 }
64 60
65 .img3 { 61 #blue-panel {
66 opacity: 0; 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;
67 } 71 }
68 72
69 .img5 { 73 #gold-panel {
74 width:215px;
75 height:100%;
76 max-height: 100%;
77 text-align: center;
70 position: absolute; 78 position: absolute;
71 bottom: 40px; 79 right:-205px;
72 left: 80px; 80 background:#EDC130;
81 top:0;
82 }
83
84 #gold-panel img {
85 margin-top:40px;
73 } 86 }
74 87
75 .txt1 { 88 .txt1 {
76 opacity: 0; 89 opacity: 0;
90 margin-top:60px;
77 } 91 }
92
78 .txt2 { 93 .txt2 {
79 opacity: 0; 94 margin-top:75px;
80 } 95 }
96
81 .txt3 { 97 .txt3 {
82 opacity: 0; 98 opacity: 0;
83 } 99 }
84 .txt4 { 100
101 .img2 {
85 opacity: 0; 102 opacity: 0;
86 position: absolute; 103 position: absolute;
87 top: 30px; 104 top: 40px;
88 left: 80px; 105 left: 55px;
89 } 106 }
90 107
91 #img img { 108 .txt3 {
92 position: absolute; 109 position: absolute;
93 top:0; 110 top: 75px;
94 left:0; 111 left: 55px;
95 width:100%;
96 } 112 }
97 113
98 #copy img { 114
99 position: absolute;
100 top:50px;
101 left:80px;
102 }
103 #logo img {
104 opacity: 0;
105 position: absolute;
106 right:50px;
107 bottom:40px;
108 }
109 #last-frame {
110 opacity: 0;
111 }
112 .circles {
113 position: absolute;
114 right:0;
115 bottom:0;
116 }
117 </style> 115 </style>
118 </head> 116 </head>
119 117
...@@ -121,29 +119,20 @@ ...@@ -121,29 +119,20 @@
121 <a id="click-tag" href="javascript:window.open(window.clickTag)"> 119 <a id="click-tag" href="javascript:window.open(window.clickTag)">
122 <div id="border"> 120 <div id="border">
123 121
124 <div id='last-frame'> 122 <div id="gray-panel">
125 <img class='txt4' src="./assets/txt4.png" alt="" > 123 <img class='txt1' src="./assets/txt1.png" alt="" >
126 <img class='img5' src="./assets/donate_btn.png" alt="img" >
127 </div> 124 </div>
128 125
129 <div id="img"> 126 <div id='blue-panel'>
130 <img class='img1' src="./assets/img1.png" alt="img" width="300" > 127 <img class='txt2' src="./assets/txt2.png" alt="" >
131 <img class='img2' src="./assets/img2.png" alt="img" width="300" > 128 <img class='txt3' src="./assets/txt3.png" alt="" >
132 <img class='img3' src="./assets/img3.png" alt="img" width="300" >
133 </div>
134
135 <div id="copy">
136 <img class='txt1' src="./assets/txt1.png" alt="" >
137 <img class='txt2' src="./assets/txt2.png" alt="" >
138 <img class='txt3' src="./assets/txt3.png" alt="" >
139 </div> 129 </div>
140 130
141 <div id="logo"> 131 <div id='gold-panel'>
142 <img src="./assets/logo.png" alt="WestPerthVillage Logo"> 132 <img class='img1' src="./assets/logo_rpp.png" alt="" >
143 </div> 133 <img class='img2' src="./assets/sponserd.png" alt="" >
134 </div>
144 135
145 <img class='circles' src="./assets/circles.png" alt="" >
146
147 </div> 136 </div>
148 </a> 137 </a>
149 138
...@@ -169,23 +158,14 @@ ...@@ -169,23 +158,14 @@
169 tl.to(".img1",2.5,{opacity:1}); 158 tl.to(".img1",2.5,{opacity:1});
170 tl.to(".txt1",1.0,{opacity:1}, "-=1.5"); 159 tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
171 160
172 tl.to(".img1",2.5,{opacity:0}, "+=1"); 161 tl.to("#blue-panel",2,{left:0}, "+=4");
173 tl.to(".txt1",0.5,{opacity:0}); 162 tl.to("#gold-panel",2,{right:0}, "-=2");
174 tl.to(".img2",2.5,{opacity:1});
175 tl.to(".txt2",1,{opacity:1}, "-=2.5");
176
177 tl.to(".img2",2,{opacity:0}, "+=1");
178 tl.to(".circles",2,{opacity:0}, "-=2");
179 tl.to(".txt2",2,{opacity:0}, "-=2");
180 tl.to(".img3",2,{opacity:1}, "-=0.5");
181 tl.to(".txt3",1,{opacity:1}, "-=2");
182 163
183 tl.to(".img3",2,{opacity:0}, "+=2.5"); 164 tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
184 tl.to(".txt3",0.5,{opacity:0}, "-=2"); 165 tl.to(".img1",1.5,{opacity:0}, "-=1.5");
185 166
186 tl.to("#logo img",2,{opacity:1}, "-=1.5"); 167 tl.to(".txt3",1.5,{opacity:1});
187 tl.to("#last-frame",1,{opacity:1}, "-=1.5"); 168 tl.to(".img2",1.5,{opacity:1}, "-=1.5");
188 tl.to(".txt4",1,{opacity:1}, "-=2.5");
189 } 169 }
190 170
191 ready(stage1()); 171 ready(stage1());
......
...@@ -29,10 +29,15 @@ ...@@ -29,10 +29,15 @@
29 29
30 <iframe id='' class="b300x600 " scrolling="no" src="300x600-positive/index.html"></iframe> 30 <iframe id='' class="b300x600 " scrolling="no" src="300x600-positive/index.html"></iframe>
31 31
32 <iframe id='' class="b728x90 " scrolling="no" src="728x90-positive/index.html"></iframe>
33
34 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-positive/index.html"></iframe> 32 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-positive/index.html"></iframe>
35 33
34 <h1>Threat</h1>
35
36 <iframe id='' class="b300x250 " scrolling="no" src="300x250-threat/index.html"></iframe>
37
38 <iframe id='' class="b300x600 " scrolling="no" src="300x600-threat/index.html"></iframe>
39
40 <iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-threat/index.html"></iframe>
36 41
37 </body> 42 </body>
38 </html> 43 </html>
......