[RELEASE] Maintenance from HabboCity / HabboAlpha

Results 1 to 7 of 7
  1. 28-04-21 #1
    pipitt05000
    CHIBRE ! pipitt05000 is offline
    MemberRank
    Feb 2009 Join Date
    FranceLocation
    347Posts

    [RELEASE] Maintenance from HabboCity / HabboAlpha

    Hello ! Today I release a beautiful maintenance page :)

    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);
        }
           @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>
    Demo:
    Habbocity - Maintenance
    Habbo Alpha/
    And a copy: Bobbax Hôtel - Maintenance
    Last edited by pipitt05000; 29-04-21 at 12:07 AM.
    Reply With Quote Reply With Quote
  2. Check out our sponsor
    [RELEASE] Maintenance from HabboCity / HabboAlpha
  3. 28-04-21 #2
    Eklopsis
    Novice Eklopsis is offline
    MemberRank
    Apr 2021 Join Date
    2Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    thanks for your sharing :DDD
    Reply With Quote Reply With Quote
  4. 28-04-21 #3
    KittyChloe
    Proficient Member KittyChloe is offline
    MemberRank
    Jul 2019 Join Date
    162Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    this is hot
    Reply With Quote Reply With Quote
  5. 28-04-21 #4
    Kozenn
    Novice Kozenn is offline
    MemberRank
    Apr 2020 Join Date
    1Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    "And a copy: Bobbax Hôtel - Maintenance" STOP THE PETA RIGHT NOW PIPITT :@
    Reply With Quote Reply With Quote
  6. 28-04-21 #5
    Eklopsis
    Novice Eklopsis is offline
    MemberRank
    Apr 2021 Join Date
    2Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    is not peta u peta clouds @Kozenn !!
    Reply With Quote Reply With Quote
  7. 29-04-21 #6
    Praietoubi
    Novice Praietoubi is offline
    MemberRank
    Apr 2021 Join Date
    1Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    soon enft
    Reply With Quote Reply With Quote
  8. 29-04-21 #7
    HangoutHotel
    Apprentice HangoutHotel is offline
    MemberRank
    Nov 2019 Join Date
    19Posts

    Re: [RELEASE] Maintenance from HabboCity / HabboAlpha

    the image from bobba.fr isn't working Error: Error1020
    Reply With Quote Reply With Quote


« Previous Thread | Next Thread »

Advertisement