Simple Maintenance HTML Code

Under construction/maintenance website templates helps you to retain customers when you are busy in revamping your website. Even some of the websites manage to get as many leads as possible before launching their site using the under construction page.

we all need some time to have a quick maintenance html code, below is the simple code usually i use it anywhere, enjoy :)

<!doctype html>
<title>Site Maintenance</title>
<style>
    body { text-align: center; padding: auto; }
    h1 { font-size: 2em;text-align: center }
    body { font: 20px Helvetica, sans-serif; color: #333; }
    article { display: block; text-align: left; max-width: 650px; margin: 0 auto; }
    a { color: #dc8100; text-decoration: none; }
    a:hover { color: #333; text-decoration: none; }
</style>
<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:[email protected]">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
        <p>&mdash; The Team</p>
    </div>
</article>

another example with two languages

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wartungsmodus / Mode Maintenance</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f3f4f6;
            color: #333;
            text-align: center;
            padding: 50px;
            margin: 0;
        }

        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            color: #555;
            font-size: 1.8rem;
        }

        p {
            font-size: 1.125rem;
            line-height: 1.6;
            margin: 1em 0;
        }

        .date {
            font-weight: bold;
            color: #d9534f;
        }

        @media (max-width: 480px) {
            body {
                padding: 20px;
            }

            h1 {
                font-size: 1.5rem;
            }

            p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Wartungsmodus</h1>
    <p>Geschätzter Besucher,<br>
        Wir sind gerade daran, unseren Shop für dich stabiler und sicherer zu machen. Während dieses Updates können keine Bestellungen getätigt werden.</p>
    <p></p>
    <p>Danke für dein Verständnis!</p>

    <hr>

    <h1>Mode Maintenance</h1>
    <p>Chère visiteuse, cher visiteur,<br>
        Actuellement, nous effectuons une mise à jour de notre boutique en ligne afin de la rendre plus stable et plus fiable pour vous. Durant cette mise à jour, il n'est malheureusement pas possible de passer commande.</p>
    <p></p>
    <p>Nous vous remercions de votre compréhension!</p>

    <hr>

    <h1>Maintenance Mode</h1>
    <p>Dear Visitor,<br>
        We are currently working on making our shop more stable and secure for you. During this update, placing orders will not be possible.</p>
    <p></p>
    <p>Thank you for your understanding!</p>

</div>
</body>
</html>

Simple Maintenance HTML Code

Tags