<!DOCTYPE html>
    <html>
    <head>
        <title>Under Maintenance</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="icon" type="image/x-icon" href="favicon.png" />
        <style type="text/css">
            body, html {
                background-color: #f8f8f8;
                font-weight: 300;
            }
            #wrapper {
                text-align:center;
                font-family: "Gill Sans", Calibri, Verdana, Helvetica, Arial, sans-serif;
                background-color:#fff;
                padding:20px;
                width: 40%;
                margin: 3% auto 0;
                border-radius:50px;
                font-size: 20px;
            }
            h1 {
                font-size: 3em;
                font-weight: 100;
            }
            .img-fluid {
                max-width: 100%;
                width: 100%;
            }
            @media( max-width: 480px ){
                #wrapper {
                    width: 90%;
                }
                h1 {
                    font-size: 1.5em;
                }
            }
        </style>
    </head>
    <body>
    <div id="wrapper">
        <img src="{LOGO}" alt="Demotic logo" class="img-fluid" />
        <h1>We are under<br>maintenance</h1>
        <p>See you soon!</p>
        <p> :-)) </p>
    </div>
    </body>
</html>