Welcome to The HabboShare; Although I leave the game, I am still trying to find content and shares for you. Sorry to share the shares content made in HabboShare irregularly...

CMS: HabboCITY Maintenance / HabboAlpha by pipitt05000

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>

Post a Comment

0 Comments