159 lines
4.6 KiB
Svelte
159 lines
4.6 KiB
Svelte
|
|
||
|
|
<style>
|
||
|
|
.maincontainer {
|
||
|
|
position: relative;
|
||
|
|
top: -50px;
|
||
|
|
transform: scale(0.8);
|
||
|
|
background: url("/public/images/forbidden/HauntedHouseBackground.png");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size: 700px 600px;
|
||
|
|
width: 800px;
|
||
|
|
height: 600px;
|
||
|
|
margin: 0px auto;
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
.foregroundimg {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
top: -230px;
|
||
|
|
z-index: 5;
|
||
|
|
}
|
||
|
|
.errorcode {
|
||
|
|
position: relative;
|
||
|
|
top: -200px;
|
||
|
|
font-family: 'Creepster', cursive;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 6em;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
.errortext {
|
||
|
|
position: relative;
|
||
|
|
top: -260px;
|
||
|
|
color: #FBD130;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: 1.8em;
|
||
|
|
}
|
||
|
|
.bat {
|
||
|
|
opacity: 0;
|
||
|
|
position: relative;
|
||
|
|
transform-origin: center;
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
.bat:nth-child(1) {
|
||
|
|
top: 380px;
|
||
|
|
left: 120px;
|
||
|
|
transform: scale(0.5);
|
||
|
|
animation: 13s 1s flyBat1 infinite linear;
|
||
|
|
}
|
||
|
|
.bat:nth-child(2) {
|
||
|
|
top: 280px;
|
||
|
|
left: 80px;
|
||
|
|
transform: scale(0.3);
|
||
|
|
animation: 8s 4s flyBat2 infinite linear;
|
||
|
|
}
|
||
|
|
.bat:nth-child(3) {
|
||
|
|
top: 200px;
|
||
|
|
left: 150px;
|
||
|
|
transform: scale(0.4);
|
||
|
|
animation: 12s 2s flyBat3 infinite linear;
|
||
|
|
}
|
||
|
|
.body {
|
||
|
|
position: relative;
|
||
|
|
width: 50px;
|
||
|
|
top: 12px;
|
||
|
|
}
|
||
|
|
.wing {
|
||
|
|
width: 150px;
|
||
|
|
position: relative;
|
||
|
|
transform-origin: right center;
|
||
|
|
}
|
||
|
|
.leftwing {
|
||
|
|
left: 30px;
|
||
|
|
animation: 0.8s flapLeft infinite ease-in-out;
|
||
|
|
}
|
||
|
|
.rightwing {
|
||
|
|
left: -180px;
|
||
|
|
transform: scaleX(-1);
|
||
|
|
animation: 0.8s flapRight infinite ease-in-out;
|
||
|
|
}
|
||
|
|
@keyframes flapLeft {
|
||
|
|
0% { transform: rotateZ(0); }
|
||
|
|
50% { transform: rotateZ(10deg) rotateY(40deg); }
|
||
|
|
100% { transform: rotateZ(0); }
|
||
|
|
}
|
||
|
|
@keyframes flapRight {
|
||
|
|
0% { transform: scaleX(-1) rotateZ(0); }
|
||
|
|
50% { transform: scaleX(-1) rotateZ(10deg) rotateY(40deg); }
|
||
|
|
100% { transform: scaleX(-1) rotateZ(0); }
|
||
|
|
}
|
||
|
|
@keyframes flyBat1 {
|
||
|
|
0% { opacity: 1; transform: scale(0.5)}
|
||
|
|
25% { opacity: 1; transform: scale(0.5) translate(-400px, -330px) }
|
||
|
|
50% { opacity: 1; transform: scale(0.5) translate(400px, -800px) }
|
||
|
|
75% { opacity: 1; transform: scale(0.5) translate(600px, 100px) }
|
||
|
|
100% { opacity: 1; transform: scale(0.5) translate(100px, 300px) }
|
||
|
|
}
|
||
|
|
@keyframes flyBat2 {
|
||
|
|
0% { opacity: 1; transform: scale(0.3)}
|
||
|
|
25% { opacity: 1; transform: scale(0.3) translate(200px, -330px) }
|
||
|
|
50% { opacity: 1; transform: scale(0.3) translate(-300px, -800px) }
|
||
|
|
75% { opacity: 1; transform: scale(0.3) translate(-400px, 100px) }
|
||
|
|
100% { opacity: 1; transform: scale(0.3) translate(100px, 300px) }
|
||
|
|
}
|
||
|
|
@keyframes flyBat3 {
|
||
|
|
0% { opacity: 1; transform: scale(0.4)}
|
||
|
|
25% { opacity: 1; transform: scale(0.4) translate(-350px, -330px) }
|
||
|
|
50% { opacity: 1; transform: scale(0.4) translate(400px, -800px) }
|
||
|
|
75% { opacity: 1; transform: scale(0.4) translate(-600px, 100px) }
|
||
|
|
100% { opacity: 1; transform: scale(0.4) translate(100px, 300px) }
|
||
|
|
}
|
||
|
|
/*@media only screen and (max-width: 850px) {
|
||
|
|
.maincontainer {
|
||
|
|
transform: scale(0.6);
|
||
|
|
width: 600px;
|
||
|
|
height: 400px;
|
||
|
|
background-size: 600px 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.errortext {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div className="container" style="background-color: #4d4242">
|
||
|
|
<div class="maincontainer row">
|
||
|
|
<div class="bat">
|
||
|
|
<img class="wing leftwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
<img class="body"
|
||
|
|
src="/images/forbidden/bat-body.png" alt="bat">
|
||
|
|
<img class="wing rightwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
</div>
|
||
|
|
<div class="bat">
|
||
|
|
<img class="wing leftwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
<img class="body"
|
||
|
|
src="/images/forbidden/bat-body.png" alt="bat">
|
||
|
|
<img class="wing rightwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
</div>
|
||
|
|
<div class="bat">
|
||
|
|
<img class="wing leftwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
<img class="body"
|
||
|
|
src="/images/forbidden/bat-body.png" alt="bat">
|
||
|
|
<img class="wing rightwing"
|
||
|
|
src="/images/forbidden/bat-wing.png">
|
||
|
|
</div>
|
||
|
|
<img class="foregroundimg" src="/images/forbidden/HauntedHouseForeground.png" alt="haunted house">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h1 class="errorcode">ERROR 403</h1>
|
||
|
|
<div class="errortext">This area is forbidden. Turn back now!</div>
|
||
|
|
</div>
|