500 page

by XTREME104

HTML

<html>
    <head>
        <meta name="robots" content="noindex"/>
        <title>We'll be back shortly</title>
    </head>
    <body>
        <div id="container">
            <div id="leds">
                <div class="online led"></div>
                <div class="offline active led"></div>
            </div>
            <div id="flip">500 :(
                <div id="break">
                    <div class="link left"></div>
                    <div class="link right"></div>
                </div>
            </div>
            <p id="sorry">An internal server error occured.</p>
        </div>
        <a id="title" href="">Back to the previous page</a>
        <a id="author" target="_blank" href="mailto:[email protected]">Contact</a>
    </body>
</html>

CSS

body, html {
    background:#252525;
    font-family: Arial, Helvetica, Arial, sans-serif;
}

*:not(a) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: default;
}

#container {
    width:709px;
    height: 256px;
    margin: -107px 0 0 -348px; margin:-128px 0 0 -348px;
    padding: 0 0 0 0px;
    position: absolute;
    top: 50%; left: 50%;
    
    background:url(images/status_flip_container.png) 79px 0px  no-repeat;
    background:-moz-linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.0) );
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.0)), to(rgba(0,0,0,0)));
}

#flip{
    margin:20px 0 0; float:left;
    width: 584px;
    height: 112px;
    position:relative; overflow:hidden;
    
    background:  none;
    background:     -moz-linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.5) ),
        -moz-linear-gradient(90deg, rgba(125,125,125,0.5), rgba(125,125,125,0.8) ),
        -moz-radial-gradient(top 90deg, ellipse closest-side, rgba(204,204,204,0.1) 30%, rgba(0,0,0,0.5) 120% ),
        -moz-linear-gradient(90deg, rgba(70,70,70,0.5), rgba(0,0,0,1) );
    background:  -webkit-gradient(linear, left top, left bottom, from(rgba(70,70,70,0.4)), to(rgba(0,0,0,0.4))),
        -webkit-gradient(radial, center -400, 50, center -480, 682, from(rgba(204,204,204,0.4)), to(rgba(70,70,70,0.2))),
        -webkit-gradient(radial, left center, 150, left center, 622, from(rgba(70,70,70,0.1)), to(rgba(0,0,0,0))),
        -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(125,125,125,0.3)), color-stop(0.01, rgba(0,0,0,0.4)), color-stop(0.03, rgba(0,0,0,0.4)) ),
        -webkit-gradient(linear, left top, left bottom, color-stop(0.5, rgba(0,0,0,0.5)), color-stop(1, rgba(0,0,0,0.9)) );
    
    color: #dadada;
    font-size: 54px; font-weight: bold;
    text-align: left; line-height: 145px;...