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 @@
text-decoration: none;
color: inherit;
}
img {
border-style:none;
}
#border{
position: relative;
position: absolute;
width: 300px;
height: 250px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
box-sizing: border-box;
/* border:1px solid; */
}
.img3 {
opacity: 0;
a{
text-decoration: none;
color: inherit;
}
#copy {
position: absolute;
#gray-panel{
width:100%;
top:0;
height:100%;
max-height: 100%;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
#blue-panel {
width:100%;
height:250px;
max-height: 100%;
text-align: center;
position: absolute;
top:25px;
left:30px;
opacity: 0;
background:#0B4D85;
top:-240px;
}
#copy .txt3 {
opacity: 0;
#gold-panel {
width:100%;
height:165px;
max-height: 100%;
text-align: center;
position: absolute;
top:40px;
left:30px;
background:#EDC130;
bottom:-155px;
}
#copy .txt1 {
.txt1 {
position: absolute;
top:25px;
top:80px;
left:30px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top: 15px;
width: 100%;
text-align: center;
.txt2 {
position: absolute;
bottom:0;
bottom: 15px;
left: 50px;
}
#logo img {
.txt3 {
opacity: 0;
}
#img img {
position: absolute;
top:0;
left: 50px;
top: 5px;
}
.circles {
.img1 {
position: absolute;
bottom:0;
right:20px;
left: 70px;
top: 11px;
height: 160px;
}
#last-frame {
opacity:0;
.img2 {
opacity: 0;
position: absolute;
top:70px;
text-align: center;
left: 55px;
top: 20px;
height: 45px;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img4 {
position: relative;
top:10px;
}
</style>
......@@ -148,28 +134,19 @@
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='last-frame'>
<img class='txt4' src="./assets/txt4.png" alt="" >
<img class='img4' src="./assets/donate_btn.png" alt="img" >
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
......@@ -192,25 +169,19 @@
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to("#blue-panel",2,{top:-160}, "+=4");
tl.to("#gold-panel",2,{bottom:-5}, "-=2");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".circles",2,{opacity:0}, "-=2");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
tl.to("#blue-panel",2,{top:0});
tl.to("#gold-panel",2,{bottom:-80}, "-=2");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to(".img2",1,{opacity:1}, "-=1");
}
......
......@@ -35,111 +35,87 @@
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
background:#F2F2F2;
}
a{
text-decoration: none;
color: inherit;
}
#border{
position: relative;
position: absolute;
width: 300px;
height: 600px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
box-sizing: border-box;
/* border:1px solid; */
}
.img1 {
opacity:0;
}
.img2 {
opacity: 0;
}
.img3 {
opacity: 0;
a{
text-decoration: none;
color: inherit;
}
#copy {
position: absolute;
#gray-panel{
width:100%;
top:0;
height:100%;
max-height: 100%;
text-align: center;
max-width: 300px;
}
#copy .txt2 {
#blue-panel {
width:100%;
height:365px;
max-height: 100%;
text-align: center;
position: absolute;
top:45px;
left:40px;
opacity: 0;
background:#0B4D85;
top:-350px;
}
#copy .txt3 {
opacity: 0;
#gold-panel {
width:100%;
height:235px;
max-height: 100%;
text-align: center;
position: absolute;
top:125px;
left:40px;
right:-205px;
background:#EDC130;
bottom:-220px;
left:0;
}
#copy .txt1 {
.txt1 {
position: absolute;
top:45px;
top:135px;
left:40px;
opacity: 0;
}
#logo{
position: absolute;
z-index: 11;
top:45px;
left:40px;
.txt2 {
position: absolute;
top: 95px;
left: 45px;
}
#logo img {
.txt3 {
opacity: 0;
}
#img img {
position: absolute;
top:0;
left: 45px;
top: 80px;
}
.circles {
.img1 {
position: absolute;
bottom:0;
right:20px;
left: 65px;
top: 35px;
}
#last-frame {
opacity:0;
.img2 {
opacity: 0;
position: absolute;
top:145px;
left:15px;
}
hr {
border:1px solid #2C5435;
position: relative;
width:230px;
border-radius: 10px;
}
.img4 {
position: relative;
left:20px;
top:50px;
}
.txt4 {
padding:30px 0;
left: 90px;
top: 60px;
}
</style>
......@@ -150,30 +126,19 @@
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='last-frame'>
<hr />
<img class='txt4' src="./assets/txt4.png" alt="" >
<hr />
<img class='img4' src="./assets/donate_btn.png" alt="img" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
<!-- <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a> -->
</div>
......@@ -196,24 +161,16 @@
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to("#blue-panel",2,{top:0}, "+=4");
tl.to("#gold-panel",2,{bottom:0}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
tl.to(".txt3",1,{opacity:1});
tl.to(".img2",1,{opacity:1}, "-=1");
}
......
......@@ -47,92 +47,85 @@
}
#border{
position: relative;
position: absolute;
width: 728px;
height: 90px;
background-color: #FFFFFF;
background:#F2F2F2;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
.img1 {
position: absolute;
top:0;
opacity:0;
width:100%;
box-sizing: border-box;
border:1px solid;
}
.img2 {
position: absolute;
top:0;
opacity: 0;
width:100%;
a{
text-decoration: none;
color: inherit;
}
.img3 {
position: absolute;
top:0;
opacity: 0;
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
#copy {
#blue-panel {
width:566px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
width:100%;
background:#0B4D85;
top:0;
text-align: center;
left:-551px;
}
#copy .txt2 {
#gold-panel {
width:162px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
top:10px;
left:60px;
opacity: 0;
background:#EDC130;
right:-148px;
top:0;
}
#copy .txt3 {
opacity: 0;
.txt1 {
position: absolute;
top:10px;
top:30px;
left:60px;
opacity: 0;
}
#copy .txt4 {
opacity: 0;
.txt2 {
position: absolute;
top:10px;
left:60px;
top: 12px;
left: 140px;
}
#copy .txt5 {
.txt3 {
opacity: 0;
position: absolute;
top:20px;
left:60px;
left: 110px;
top: 15px;
}
#copy .txt1 {
.img1 {
position: absolute;
top:10px;
left:60px;
opacity: 0;
left: 30px;
top: -5px;
height: 100px;
}
#logo img {
opacity: 0;
position: absolute;
right:20px;
top:20px;
}
.circles {
.img2 {
opacity: 0;
position: absolute;
bottom:0;
right:0;
left: 40px;
top: 15px;
height: 55px;
}
</style>
</head>
......@@ -141,31 +134,25 @@
<!-- <a href="javascript:eyeBuild.doClick(0)"> -->
<div id="border">
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
<img class='txt4' src="./assets/txt4.png" alt="" >
<img class='txt5' src="./assets/donate_btn.png" alt="" >
</div>
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<img class='circles' src="./assets/circles.png" alt="" >
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
</div>
</a>
<!-- GREENSOCK-->
<!-- GREENSOCK-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
......@@ -182,26 +169,18 @@
var tl = new TimelineMax({repeat:0, repeatDelay:10});
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to("#blue-panel",2,{left:0}, "+=4");
tl.to("#gold-panel",2,{right:0}, "-=2");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=1.5");
tl.to(".txt2",1,{opacity:0}, "+=2.5");
tl.to(".img1",1,{opacity:0}, "-=1.5");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=1.5");
tl.to(".txt4",1,{opacity:1}, "-=1");
tl.to("#logo img",2,{opacity:1}, "-=1");
tl.to(".txt3",1,{opacity:1});
tl.to(".img2",1,{opacity:1}, "-=1");
tl.to(".txt4",0.5,{opacity:0}, "+=3");
tl.to(".txt5",1,{opacity:1});
}
......
......@@ -31,10 +31,10 @@
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;
background:#F2F2F2;
}
a{
......@@ -45,75 +45,73 @@
position: absolute;
width: 970px;
height: 250px;
background-color: white;
background:#F2F2F2;
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 ; */
}
.img1 {
opacity: 0;
}
.img2 {
opacity: 0;
#gray-panel{
width:100%;
height:100%;
max-height: 100%;
text-align: center;
}
.img3 {
opacity: 0;
#blue-panel {
width:100%;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
left:-745px;
background:#0B4D85;
top:0;
width:755px;
}
.img5 {
#gold-panel {
width:215px;
height:100%;
max-height: 100%;
text-align: center;
position: absolute;
bottom: 40px;
left: 80px;
right:-205px;
background:#EDC130;
top:0;
}
#gold-panel img {
margin-top:40px;
}
.txt1 {
opacity: 0;
margin-top:60px;
}
.txt2 {
opacity: 0;
margin-top:75px;
}
.txt3 {
opacity: 0;
}
.txt4 {
.img2 {
opacity: 0;
position: absolute;
top: 30px;
left: 80px;
top: 40px;
left: 55px;
}
#img img {
.txt3 {
position: absolute;
top:0;
left:0;
width:100%;
top: 75px;
left: 55px;
}
#copy img {
position: absolute;
top:50px;
left:80px;
}
#logo img {
opacity: 0;
position: absolute;
right:50px;
bottom:40px;
}
#last-frame {
opacity: 0;
}
.circles {
position: absolute;
right:0;
bottom:0;
}
</style>
</head>
......@@ -121,29 +119,20 @@
<a id="click-tag" href="javascript:window.open(window.clickTag)">
<div id="border">
<div id='last-frame'>
<img class='txt4' src="./assets/txt4.png" alt="" >
<img class='img5' src="./assets/donate_btn.png" alt="img" >
<div id="gray-panel">
<img class='txt1' src="./assets/txt1.png" alt="" >
</div>
<div id="img">
<img class='img1' src="./assets/img1.png" alt="img" width="300" >
<img class='img2' src="./assets/img2.png" alt="img" width="300" >
<img class='img3' src="./assets/img3.png" alt="img" width="300" >
</div>
<div id="copy">
<img class='txt1' src="./assets/txt1.png" alt="" >
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
<div id='blue-panel'>
<img class='txt2' src="./assets/txt2.png" alt="" >
<img class='txt3' src="./assets/txt3.png" alt="" >
</div>
<div id="logo">
<img src="./assets/logo.png" alt="WestPerthVillage Logo">
</div>
<div id='gold-panel'>
<img class='img1' src="./assets/logo_rpp.png" alt="" >
<img class='img2' src="./assets/sponserd.png" alt="" >
</div>
<img class='circles' src="./assets/circles.png" alt="" >
</div>
</a>
......@@ -169,23 +158,14 @@
tl.to(".img1",2.5,{opacity:1});
tl.to(".txt1",1.0,{opacity:1}, "-=1.5");
tl.to(".img1",2.5,{opacity:0}, "+=1");
tl.to(".txt1",0.5,{opacity:0});
tl.to(".img2",2.5,{opacity:1});
tl.to(".txt2",1,{opacity:1}, "-=2.5");
tl.to(".img2",2,{opacity:0}, "+=1");
tl.to(".circles",2,{opacity:0}, "-=2");
tl.to(".txt2",2,{opacity:0}, "-=2");
tl.to(".img3",2,{opacity:1}, "-=0.5");
tl.to(".txt3",1,{opacity:1}, "-=2");
tl.to("#blue-panel",2,{left:0}, "+=4");
tl.to("#gold-panel",2,{right:0}, "-=2");
tl.to(".img3",2,{opacity:0}, "+=2.5");
tl.to(".txt3",0.5,{opacity:0}, "-=2");
tl.to(".txt2",1.5,{opacity:0}, "+=2.5");
tl.to(".img1",1.5,{opacity:0}, "-=1.5");
tl.to("#logo img",2,{opacity:1}, "-=1.5");
tl.to("#last-frame",1,{opacity:1}, "-=1.5");
tl.to(".txt4",1,{opacity:1}, "-=2.5");
tl.to(".txt3",1.5,{opacity:1});
tl.to(".img2",1.5,{opacity:1}, "-=1.5");
}
ready(stage1());
......
......@@ -29,10 +29,15 @@
<iframe id='' class="b300x600 " scrolling="no" src="300x600-positive/index.html"></iframe>
<iframe id='' class="b728x90 " scrolling="no" src="728x90-positive/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-positive/index.html"></iframe>
<h1>Threat</h1>
<iframe id='' class="b300x250 " scrolling="no" src="300x250-threat/index.html"></iframe>
<iframe id='' class="b300x600 " scrolling="no" src="300x600-threat/index.html"></iframe>
<iframe id='' class="b970x250 " style='width:970px;height:250px;' scrolling="no" src="970x250-threat/index.html"></iframe>
</body>
</html>
......