dbois/application/views/emails/twofactor_otp_email.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Verificatiecode DBOIS</title>
    <link href="styles.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<style>
    /* Same styles as requestpassword_email.php */
    * {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
    }

    img {
        max-width: 100%;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        width: 100% !important;
        height: 100%;
        line-height: 1.6;
        background-color: #f6f6f6;
    }

    table td {
        vertical-align: top;
    }

    .body-wrap {
        background-color: #f6f6f6;
        width: 100%;
    }

    .container {
        display: block !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        clear: both !important;
    }

    .content {
        max-width: 600px;
        margin: 0 auto;
        display: block;
        padding: 20px;
    }

    .main {
        background: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 3px;
    }

    .content-wrap {
        padding: 20px;
    }

    .content-block {
        padding: 0 0 20px;
    }

    .alert {
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        padding: 20px;
        text-align: center;
        border-radius: 3px 3px 0 0;
    }

    .alert.alert-warning {
        background: #ff9f00;
    }

    .alert.alert-good {
        background: #68b90f;
    }

    .otp-code {
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 8px;
        text-align: center;
        padding: 20px;
        background-color: #f0f0f0;
        border: 2px dashed #348eda;
        border-radius: 5px;
        margin: 20px 0;
    }

    p {
        margin-bottom: 10px;
        font-weight: normal;
    }

    @media only screen and (max-width: 640px) {
        .container {
            width: 100% !important;
        }

        .content {
            padding: 10px !important;
        }

        .otp-code {
            font-size: 24px;
            letter-spacing: 4px;
        }
    }
</style>

<body>

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" width="600">
            <div class="content">
                <table class="main" width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="alert alert-good">
                            Tweefactorauthenticatie - DBOIS
                        </td>
                    </tr>
                    <tr>
                        <td class="content-wrap">
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="content-block">
                                        <p>
                                            Beste <?= $user['firstname']?> <?=$user['middlename']?> <?=$user['lastname']?>
                                        </p>
                                        <p>
                                            U probeert in te loggen in DBOIS. Gebruik de onderstaande verificatiecode om uw login te voltooien.
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        <div class="otp-code">
                                            <?= $user['otp_code'] ?>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content-block">
                                        <p>
                                            Deze code is 10 minuten geldig.
                                        </p>
                                        <p>
                                            Als u niet heeft geprobeerd in te loggen, negeer dan deze e-mail.
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
        </td>
        <td></td>
    </tr>
</table>
</body>
</html>