View source for User talk:Scar

{{DISPLAYTITLE:Scar's birthday party}}

{{Fade from black}}
<templatestyles src="Party.css" />
<div class="bg" style="padding:4px">
{{Dia|Nerd|SURPRISE! HAPPY BIRTHDAY!}}
<div style="line-height:0.3m;">
[[File:Bauble.png|center|frameless]]
[[File:Lettuce trudeau.png|500px|center]]
</div>
[[file:birth.jpg]]
[[Category:Surprises]]
</div>
<div style="position:absolute;text-align: center;top:-158px;color:#f443ffA0;font-size: 532%;z-index: -1;font-family:neuton;white-space: nowrap;">''And you smell like one too...''</div>

[[File:Birth dayer.png]]
[[File:ScarBirthday.png|500px]]

[[File:BlowOutYourCandles.png]]
{{Dia|Justin Trudeau|A very happy, uh... b-bird hatching day to our fellow G8er, [[Head of Lettuce]]!}}
{{#css:
.walkcake {
position: relative;
height: 100%;
width:inherit;
margin-right:margin-left
text-align: left;
transform:translateX(0%);
animation: move 3s ease-in-out infinite alternate-reverse;
}
@keyframes move {
 0% {transform: translateX(0%);}
 100% {transform: translateX(55%);}
}
}}
{{#css:
@keyframes move {
 0% {transform: translateX(0%);}
 100% {transform: translateX(50%);}
}
.shrubcake {
animation: shrubcakeAnim 0.5s linear infinite alternate-reverse;
}
@keyframes shrubcakeAnim{
  0% { transform: translate(0.1px, -0.1px) rotate(0.5deg); scaleY(1);}
  20% { transform: translate(-0.1px, 0.1px) rotate(-0.5deg) scaleY(1.05);}
  40% { transform: translate(0.1px, -0.1px) rotate(0.5deg) scaleY(1);}
  60% { transform: translate(-0.1px, 0.1px) rotate(-0.5deg) scaleY(0.95);}
  80% { transform: translate(0.1px, -0.1px) rotate(0.5deg) scaleY(1);}
  100% { transform: translate(-0.1px, 0.1px) rotate(-0.5deg) scaleY(1.05);}
}}
{{#css:
.yturn {
 animation: yturn 5s ease-in-out infinite;
}
.xturn {
 animation: xturn 11s ease-in-out infinite;
}
.zturn {
 animation: zturn 13s linear infinite;
}

@keyframes yturn {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
@keyframes xturn {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(-1); }
  100% { transform: scaleY(1); }
}
@keyframes zturn {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-359deg); }
}
}}

{{#css:
.scenecake {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotatey 5s linear infinite;
}

.cube-facecake {
position: absolute;
width: 200px;
height: 200px;
}
.facecake-front  { transform: rotateY(  0deg) translateZ(00px); background-color: rgba(255, 0, 0, 0); }
.facecake-right  { transform: rotateY( 90deg) translateZ(00px); background-color: rgba(255, 255, 0, 0); }
.facecake-back   { transform: rotateY(180deg) translateZ(00px); background-color: rgba(0, 255, 0, 0); }
.facecake-left   { transform: rotateY(-90deg) translateZ(00px); background-color: rgba(0, 255, 255, 0); }
.facecake-top    { transform: rotateX( 90deg) translateZ(00px); background-color: rgba(0, 0, 255, 0); }
.facecake-bottom { transform: rotateX(-90deg) translateZ(00px); background-color: rgba(255, 0, 255, 0); }
@keyframes rotatey {
0% { transform: rotate3d(0, 0, 1, 0deg); }
100% { transform: rotate3d(1, 0, 1, 360deg); }
}
/* most of the css was taken from https://3dtransforms.desandro.com/cube */
}}
<div class="zturn"><div class="xturn"><div class="yturn">
<noinclude>
<div class="scenecake">
<div class="cube">
<div class="cube-facecake facecake-front"><div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div></div>
<div class="cube-facecake facecake-back"><div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div></div>
<div class="cube-facecake facecake-right"><div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div></div>
<div class="cube-facecake facecake-left"><div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div></div></div>
<div class="cube-facecake facecake-top"></div>
<div class="cube-facecake facecake-bottom"></div>
</div>
</div></div></div>
</noinclude>
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
<div style="position: fixed; right:8px; bottom: 2%; z-index: 9000;">{{:Clippy}}</div>
<div style="transform: scale(0.500,0.500)">
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
</div>
<div style="transform: scale(0.300,0.300)">
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
</div>
{{#css:
.nyarpa h1{
position: absolute;
width: 350%;
margin: 0;
font-size: 42px;
text-align: center;
transform:translateX(-100%);
animation: cssmarquee 4s linear infinite;
}
@keyframes cssmarquee {
0% {transform: translateX(-100%)}
100% {transform: translateX(100%)}
}
}}
<div class="nyarpa">
<h1><div class="shrubcake";>{{Loop|20|{{noclick|[[File:Kingcake.png]]}}}}</div><div class="shrubcake";>{{noclick|[[File:Kingcake.png]]}}</div><div class="shrubcake";>{{noclick|[[File:Kingcake.png]]}}</div><div class="shrubcake";>{{noclick|[[File:Kingcake.png]]}}</div></h1>
</div>
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
<div style="position: fixed; right:8px; bottom: 2%; z-index: 9000;">{{:Clippy}}</div>
<div style="position: fixed; left:8px; bottom: 2%; z-index: 9000;">{{wibble wobble|[[File:Kingcake.png|100px]]}}</div>
<div style="position: fixed; left:8px; top: 2%; z-index: 9000;">{{wibble wobble|[[File:Kingcake.png|100px]]}}</div>
<div style="position: fixed; right:8px; top: 2%; z-index: 9000;">{{wibble wobble|[[File:Kingcake.png|100px]]}}</div>
<div style="position: fixed; right:8px; bottom: 2%; z-index: 8999;">{{wibble wobble|[[File:Kingcake.png|100px]]}}</div>
<div style="transform: scale(0.500,0.500)">
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
</div>
<div style="transform: scale(0.300,0.300)">
<div class="shrubcake";><div class="walkcake">{{noclick|[[File:Kingcake.png]]}}</div></div>
</div>
{{#css:
@keyframes blow {
50% {transform: scale(.3,.3);}
100% {transform: scale(2,2);}
} 
.bobbul {
animation: blow 1.5s alternate infinite;
}
}}
<div class="shrubcake";><div class="walkcake"><div class="bobbul">{{Loop|3|{{noclick|[[File:Kingcake.png]]}}}}</div></div></div>