- Joined
- Feb 25, 2009
- Messages
- 343
- Reaction score
- 114
Hello ! Today I release a beautiful maintenance page 
Screen:
![tA1iCfm - [RELEASE] Maintenance from HabboCity / HabboAlpha - RaGEZONE Forums](data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='1173' height='761' viewBox%3D'0 0 1173 761'%2F%3E "tA1iCfm - [RELEASE] Maintenance from HabboCity / HabboAlpha - RaGEZONE Forums")
Code:
Demo:
And a copy:
Screen:
Code:
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);
}
[USER=363813]KEY[/USER]frames cloudLeft {
from {
background-position: left calc(100% + 273px) bottom -297px;
}
to {
background-position: left 0 bottom 5px;
}
}
[USER=363813]KEY[/USER]frames 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([url]https://i.imgur.com/0IGo8Y1.png);[/url]
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([url=http://bobbax.fr/./storage/img/hotel_view/reception_logo_drape.png);]Bobbax Hôtel - Maintenance[/url]
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;
}
[USER=363813]KEY[/USER]frames slideDown{ 0%{top:-100%}to {top:0} }
[USER=363813]KEY[/USER]frames slideUp{0%{bottom:-100%}to{bottom:0}}
[USER=363813]KEY[/USER]frames slideRight{0%{right:-100%}to{right:0}}
[USER=363813]KEY[/USER]frames 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>Demo:
You must be registered to see links
You must be registered to see links
And a copy:
You must be registered to see links
Last edited:
