<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting" />
    <title>Account Verification | HTML Email Template</title>
    <meta
      name="description"
      content="Professional account verification html email template with bulletproof design and cross-client compatibility. Features secure authentication flow and responsive layout."
    />
    <style type="text/css">
      a[x-apple-data-detectors],
      #MessageViewBody a,
      a[href^="tel"],
      a[href^="sms"] {
        color: inherit !important;
        text-decoration: none !important;
        font-weight: inherit !important;
      }
    </style>
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: Arial, Helvetica, sans-serif !important;
        }
        a {
          text-decoration: none;
        }
      </style>
    <![endif]-->
  </head>
  <body
    style="
      margin: 0;
      padding: 0;
      background-color: #fafaf9;
      mso-line-height-rule: exactly;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    "
    bgcolor="#fafaf9"
  >
<center>
    <!-- Preheader (hidden) -->
    <div
      style="
        display: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        mso-hide: all;
      "
    >
      Account verification required • Link expires in 24 hours
    </div>

    <!-- Main Container -->
    <table
      role="presentation"
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      style="
        background-color: #fafaf9;
        font-family: Arial, Helvetica, sans-serif;
      "
      bgcolor="#fafaf9"
    >
      <tr>
        <td align="center" style="padding: 30px 10px" width="100%">
          <!-- Content Container -->
          <table
            role="presentation"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="
              width: 100%;
              max-width: 520px;
              background-color: #ffffff;
              border: 1px solid #e5e5e5;
              border-collapse: collapse;
              margin: 0 auto;
            "
            align="center"
          >
            <!-- Minimal Header -->
            <tr>
              <td style="padding: 30px 20px 20px 20px; text-align: center">
                <!-- Company Logo -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="width: 100%; min-width: 100%"
                >
                  <tr>
                    <td align="center" width="100%" style="text-align: center">
                      <img
                        src="https://nirajrajgor.github.io/email-templates/acme.png"
                        alt="Acme"
                        width="80"
                        height="30"
                        style="
                          margin: 0 auto;
                          height: auto;
                          border: 0;
                          outline: none;
                          text-decoration: none;
                        "
                      />
                    </td>
                  </tr>
                </table>
                <!-- spacer: 30px under logo -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="30" style="line-height: 30px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Minimal Divider -->
                <hr
                  style="
                    width: 60px;
                    height: 2px;
                    background-color: #d4a574;
                    border: none;
                    margin: 0 auto;
                    display: block;
                  "
                />
              </td>
            </tr>

            <!-- Main Content -->
            <tr>
              <td style="padding: 0 20px 20px 20px" width="100%">
                <!-- Greeting -->
                <h1
                  style="
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 28px;
                    font-weight: normal;
                    color: #2c1810;
                    line-height: 1.3;
                    text-align: center;
                    letter-spacing: -0.3px;
                  "
                >
                  Hello {{firstName}},
                </h1>
                <!-- spacer: 20px under h1 -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="20" style="line-height: 20px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Main Message -->
                <p
                  style="
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 17px;
                    color: #5c4b37;
                    line-height: 1.7;
                    text-align: center;
                  "
                >
                  Welcome to Acme. Before you begin exploring all that we have
                  to offer, we need to verify your email address to ensure
                  account security.
                </p>
                <!-- spacer: 25px under intro paragraph -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="25" style="line-height: 25px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Bulletproof CTA -->
                <div style="text-align: center">
                  <a
                    href="{{verificationUrl}}"
                    style="
                      color: #2c1810;
                      display: inline-block;
                      font-family: Arial, Helvetica, sans-serif;
                      font-size: 16px;
                      font-weight: bold;
                      letter-spacing: 1px;
                      line-height: 18px;
                      text-align: center;
                      text-decoration: none;
                      text-transform: uppercase;
                      padding: 16px 24px;
                      white-space: nowrap;
                      background-color: #d4a574;
                      border: 2px solid #d4a574;
                      border-radius: 8px;
                    "
                  >
                    Verify Account
                  </a>
                </div>
                <!-- spacer: 25px under CTA -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="25" style="line-height: 25px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Alternative Text -->
                <p
                  style="
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 15px;
                    color: #8b7355;
                    line-height: 1.6;
                    text-align: center;
                  "
                >
                  If the button doesn't work, copy and paste this link into your
                  browser:
                </p>
                <!-- spacer: 20px under helper copy -->
                <!-- <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="20" style="line-height: 20px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table> -->

                <!-- Link Display -->
                <p
                  style="
                    padding: 15px 20px;
                    font-family: 'Courier New', monospace;
                    font-size: 13px;
                    color: #8b7355;
                    word-break: break-all;
                    background-color: #f9f6f1;
                    border-left: 4px solid #d4a574;
                  "
                >
                  {{verificationUrl}}
                </p>
                <!-- spacer: 20px under link block -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="20" style="line-height: 20px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Info Section - Mobile-compatible 50/50 layout -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="table-layout: fixed; width: 100%; min-width: 100%"
                >
                  <tr>
                    <!-- Left card (50%) -->
                    <td
                      width="50%"
                      valign="top"
                      style="
                        width: 50%;
                        padding-right: 8px;
                        box-sizing: border-box;
                      "
                    >
                      <table
                        role="presentation"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        width="100%"
                        style="
                          background-color: #f9f6f1;
                          border-radius: 6px;
                          border: 1px solid #e8e3dd;
                          width: 100%;
                          min-width: 100%;
                        "
                      >
                        <tr>
                          <td
                            style="
                              padding: 20px 10px;
                              text-align: center;
                              width: 100%;
                            "
                          >
                            <div
                              style="
                                font-size: 24px;
                                padding-bottom: 8px;
                                color: #d4a574;
                              "
                            >
                              ⏱️
                            </div>
                            <div
                              style="
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 12px;
                                color: #8b7355;
                                padding-bottom: 5px;
                                font-weight: bold;
                                text-transform: uppercase;
                                letter-spacing: 0.5px;
                              "
                            >
                              Expires In
                            </div>
                            <div
                              style="
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 16px;
                                color: #2c1810;
                                font-weight: bold;
                              "
                            >
                              24 Hours
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <!-- Right card (50%) -->
                    <td
                      width="50%"
                      valign="top"
                      style="
                        width: 50%;
                        padding-left: 8px;
                        box-sizing: border-box;
                      "
                    >
                      <table
                        role="presentation"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        width="100%"
                        style="
                          background-color: #f9f6f1;
                          border-radius: 6px;
                          border: 1px solid #e8e3dd;
                          width: 100%;
                          min-width: 100%;
                        "
                      >
                        <tr>
                          <td
                            style="
                              padding: 20px 10px;
                              text-align: center;
                              width: 100%;
                            "
                          >
                            <div
                              style="
                                font-size: 24px;
                                padding-bottom: 8px;
                                color: #d4a574;
                              "
                            >
                              🔐
                            </div>
                            <div
                              style="
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 12px;
                                color: #8b7355;
                                padding-bottom: 5px;
                                font-weight: bold;
                                text-transform: uppercase;
                                letter-spacing: 0.5px;
                              "
                            >
                              Security
                            </div>
                            <div
                              style="
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 16px;
                                color: #2c1810;
                                font-weight: bold;
                              "
                            >
                              One-time link
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
                <!-- spacer: 25px under info cards -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td height="25" style="line-height: 25px; font-size: 0">
                      &nbsp;
                    </td>
                  </tr>
                </table>

                <!-- Support Section -->
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="width: 100%; min-width: 100%"
                >
                  <tr>
                    <td
                      align="center"
                      style="padding-top: 15px; text-align: center"
                      width="100%"
                    >
                      <p
                        style="
                          font-family: Arial, Helvetica, sans-serif;
                          font-size: 14px;
                          color: #8b7355;
                          line-height: 1.5;
                        "
                      >
                        Questions? Contact our
                        <a
                          href="{{contactUrl}}"
                          style="
                            color: #d4a574;
                            text-decoration: underline;
                            font-weight: bold;
                          "
                        >
                          support team
                        </a>
                      </p>
                      <!-- spacer: 10px between support lines -->
                      <table
                        role="presentation"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        width="100%"
                      >
                        <tr>
                          <td
                            height="10"
                            style="line-height: 10px; font-size: 0"
                          >
                            &nbsp;
                          </td>
                        </tr>
                      </table>
                      <p
                        style="
                          margin: 0;
                          font-family: Arial, Helvetica, sans-serif;
                          font-size: 12px;
                          color: #a8998a;
                          line-height: 1.4;
                        "
                      >
                        Sent to {{email}} on {{date}}
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Minimal Footer -->
            <tr>
              <td
                style="
                  background-color: #f9f6f1;
                  padding: 20px 20px;
                  border-top: 1px solid #e8e3dd;
                "
              >
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="width: 100%; min-width: 100%"
                >
                  <tr>
                    <td align="center" width="100%" style="text-align: center">
                      <!-- Footer Links -->
                      <a
                        href="{{privacyUrl}}"
                        style="
                          color: #a8998a;
                          text-decoration: underline;
                          padding-right: 12px;
                          display: inline-block;
                          font-size: 12px;
                        "
                      >
                        Privacy
                      </a>
                      <a
                        href="{{termsUrl}}"
                        style="
                          color: #a8998a;
                          text-decoration: underline;
                          padding-right: 12px;
                          display: inline-block;
                          font-size: 12px;
                        "
                      >
                        Terms
                      </a>
                      <a
                        href="{{unsubscribeUrl}}"
                        style="
                          color: #a8998a;
                          text-decoration: underline;
                          font-size: 12px;
                        "
                      >
                        Unsubscribe
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
