View:
Code:
<!doctype html>
<html>
<head>
<title>HabboCity - Maintenance</title>
<style>
body {
margin: 0;
padding: 0;
}
.maintenance-container {
width: 100%;
height: 100%;
position: fixed;
z-index: 1000;
background: rgba(5, 5, 5,0.65);
}
.landing-view {
width: 100%;
height: 100%;
position: fixed;
background-color: #4D9EDE;
filter: grayscale(1);
/*background-size: auto 100%;*/
}
.landing-view .bg-left {
background-color: #5EBFFF;
width: 331px;
position: absolute;
height: 100%;
background-image: url(https://i.imgur.com/t1r0WIz.png);
background-position: left calc(100% + 273px) bottom -297px;
animation-iteration-count:infinite;
animation-name:cloudLeft;
animation-duration:31s;
animation-timing-function: linear;
filter: grayscale(1);
}
.landing-view .bg-right {
background-color: #4D9EDE;
width: calc(100% - 331px);
position: absolute;
height: 100%;
right: 0px;
background-image: url(https://i.imgur.com/hJ0BFbW.png);
background-repeat: no-repeat;
background-position: left -330px bottom -1173px;
animation-iteration-count:infinite;
animation-name:cloudRight;
animation-duration:31s;
animation-timing-function: linear;
filter: grayscale(1);
}
@KEYframes cloudLeft {
from {
background-position: left calc(100% + 273px) bottom -297px;
}
to {
background-position: left 0 bottom 5px;
}
}
@KEYframes cloudRight {
from {
background-position: left -934px bottom -871px;
}
to {
background-position: left -330px bottom -1173px;
}
}
.landing-view .left {
height: 1260px;
width: 1260px;
position: absolute;
bottom: 0px;
left: 0px;
background-image: url(https://i.imgur.com/0IGo8Y1.png);
background-position: bottom left;
background-repeat: no-repeat;
animation-iteration-count:1;
animation-name:slideUp;
animation-duration:1.5s;
filter: grayscale(1);
}
.landing-view .right {
height: 463px;
width: 526px;
position: absolute;
bottom: 0px;
right: 0px;
background-position: bottom right;
background-repeat: no-repeat;
filter: grayscale(1);
}
.landing-view .drape {
height: 200px;
width: 145px;
position: absolute;
top: 0px;
left: 100px;
background-image: url(Bobbax Hôtel - Maintenance
background-position: bottom left;
background-repeat: no-repeat;
animation-iteration-count:1;
animation-name:slideDown;
animation-duration:1.5s;
filter: grayscale(1);
}
.maintenance-break {
-webkit-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-moz-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-ms-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-o-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
color: rgba(255,255,255,0.4);
font-size: 130px;
text-transform: uppercase;
position: absolute;
bottom: 390px;
left: 120px;
font-family: "Arial Black", sans-serif;
}
.maintenance-break-bottom {
-webkit-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-moz-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-ms-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
-o-transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
transform: rotateX(-19deg) rotateY(-52deg) skewX(0deg);
color: rgba(255,255,255,0.4);
font-size: 90px;
text-transform: uppercase;
position: absolute;
bottom: 330px;
left: 200px;
font-family: "Arial Black", sans-serif;
}
@KEYframes slideDown{ 0%{top:-100%}to {top:0} }
@KEYframes slideUp{0%{bottom:-100%}to{bottom:0}}
@KEYframes slideRight{0%{right:-100%}to{right:0}}
@KEYframes slideLeft{0%{left:-100%}to{left:0}}
</style>
</head>
<body>
<div class="maintenance-container">
<div class="maintenance-break">
Maintenance!
</div>
<div class="maintenance-break-bottom">
Coming soon...
</div>
</div>
<div class="landing-view">
<div class="bg-left">
</div>
<div class="bg-right">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
Comments