TemplateEmail.html

<!DOCTYPE html>
<html
  lang="en"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"
>
  <head>
    <title>{0}</title>
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      #outlook a {{
        padding: 0;
      }}

      body {{
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }}

      table,
      td {{
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }}

      img {{
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }}

      p {{
        display: block;
        margin: 13px 0;
      }}

.table-modern {{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Arial, sans-serif;
}}

.table-modern th, .table-modern td {{
  padding: 10px;
  text-align: left;
  border: 1px solid #e0e0e0;
}}

.table-modern tr:nth-child(even) {{
  background-color: #f8f8f8;
}}

.table-modern tr:nth-child(odd) {{
  background-color: #ffffff;
}}
</style>
    <!--[if mso]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG />
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    <![endif]-->
    <!--[if lte mso 11]>
      <style type="text/css">
        .mj-outlook-group-fix {{
          width: 100% !important;
        }}
      </style>
    <![endif]-->
    <!--[if !mso]><!-->
    <link
      href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"
      rel="stylesheet"
      type="text/css"
    />
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Nunito:100, 400, 700);
    </style>
    <!--<![endif]-->
    <style type="text/css">
      @media only screen and (min-width: 480px) {{
        .mj-column-per-100 {{
          width: 100% !important;
          max-width: 100%;
        }}
      }}
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px) {{
        table.mj-full-width-mobile {{
          width: 100% !important;
        }}

        td.mj-full-width-mobile {{
          width: auto !important;
        }}
      }}
    </style>
    <style type="text/css">
      a,
      span,
      td,
      th {{
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
      }}
    </style>
  </head>

  <body style="background-color: #eaeaea">
    <div
      style="
        display: none;
        font-size: 1px;
        color: #ffffff;
        line-height: 1px;
        max-height: 0px;
        max-width: 0px;
        opacity: 0;
        overflow: hidden;
      "
    >
{0}    </div>
    <div style="background-color: #eaeaea">
      <!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
      <div style="margin: 0px auto; max-width: 800px">
        <table
          align="center"
          border="0"
          cellpadding="0"
          cellspacing="0"
          role="presentation"
          style="width: 100%"
        >
          <tbody>
            <tr>
              <td
                style="
                  direction: ltr;
                  font-size: 0px;
                  padding: 20px 0;
                  text-align: center;
                "
              >
                <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">

<tr>

<td
class="" style="vertical-align:top;width:800px;"
>
<![endif]-->
                <div
                  class="mj-column-per-100 mj-outlook-group-fix"
                  style="
                    font-size: 0px;
                    text-align: left;
                    direction: ltr;
                    display: inline-block;
                    vertical-align: top;
                    width: 100%;
                  "
                >
                  <table
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    style="vertical-align: top"
                    width="100%"
                  >
                    <tbody>
                      <tr>
                        <td style="font-size: 0px; word-break: break-word">
                          <!--[if mso | IE]>

<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="20" style="vertical-align:top;height:20px;">

<![endif]-->
                          <div style="height: 20px"> </div>
                          <!--[if mso | IE]>

</td></tr></table>

<![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
</td>

</tr>

</table>
<![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]>
</td>
</tr>
</table>

<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">

<v:rect  style="width:800px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
      <div
        style="margin: 0px auto; border-radius: 20px 20px 0 0; max-width: 800px"
      >
        <div style="line-height: 0; font-size: 0">
        </div>
      </div>
      <!--[if mso | IE]>
</v:textbox>
</v:rect>

</td>
</tr>
</table>

<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
      <div
        style="
          background: #ffffff;
          background-color: #ffffff;
          margin: 0px auto;
          border-radius: 0 0 20px 20px;
          max-width: 800px;
        "
      >
        <table
          align="center"
          border="0"
          cellpadding="0"
          cellspacing="0"
          role="presentation"
          style="
            background: #ffffff;
            background-color: #ffffff;
            width: 100%;
            border-radius: 0 0 20px 20px;
          "
        >
          <tbody>
            <tr>
              <td
                style="
                  direction: ltr;
                  font-size: 0px;
                  padding: 20px 0;
                  text-align: center;
                "
              >
                <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">

<tr>

<td
class="" style="vertical-align:top;width:800px;"
>
<![endif]-->
                <div
                  class="mj-column-per-100 mj-outlook-group-fix"
                  style="
                    font-size: 0px;
                    text-align: left;
                    direction: ltr;
                    display: inline-block;
                    vertical-align: top;
                    width: 100%;
                  "
                >
                  <table
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    style="vertical-align: top"
                    width="100%"
                  >
                    <tbody>
                      <tr>
                        <td
                          align="left"
                          style="
                            font-size: 0px;
                            padding: 10px 25px;
                            word-break: break-word;
                          "
                        >
                          <div
                            style="
                              font-family: Nunito, Helvetica, Arial, sans-serif;
                              font-size: 16px;
                              font-weight: 400;
                              line-height: 20px;
                              text-align: left;
                              color: #54595f;
                            "
                          >
                            <h1
                              style="
                                margin: 0;
                                font-size: 24px;
                                line-height: 32px;
                                line-height: normal;
                                font-weight: bold;
                              "
                            >
                              {0}
                            </h1>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td
                          align="left"
                          style="
                            font-size: 0px;
                            padding: 10px 25px;
                            word-break: break-word;
                          "
                        >
                          <div
                            style="
                              font-family: Nunito, Helvetica, Arial, sans-serif;
                              font-size: 16px;
                              font-weight: 400;
                              line-height: 20px;
                              text-align: left;
                              color: #54595f;
                            "
                          >
                            <p style="margin: 5px 0">{1}</p>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td
                          align="center"
                          vertical-align="middle"
                          style="
                            font-size: 0px;
                            padding: 10px 25px;
                            word-break: break-word;
                          "
                        >
                          <table
                            border="0"
                            cellpadding="0"
                            cellspacing="5"
                            role="presentation"
                            style="border-collapse: separate; line-height: 100%"
                          >
                            <tbody>
                              <tr>
                                <td
                                  align="center"
                                  bgcolor="#54595f"
                                  role="presentation"
                                  style="
                                    border: none;
                                    border-radius: 30px;
                                    cursor: auto;
                                    mso-padding-alt: 10px 25px;
                                    background: #54595f;
                                  "
                                  valign="middle"
                                >
                                  <a
                                    href="{2}"
                                    style="
                                      display: inline-block;
                                      background: #54595f;
                                      color: white;
                                      font-family: Nunito, Helvetica, Arial,
                                        sans-serif;
                                      font-size: 16px;
                                      font-weight: normal;
                                      line-height: 30px;
                                      margin: 0;
                                      text-decoration: none;
                                      text-transform: none;
                                      padding: 10px 25px;
                                      mso-padding-alt: 0px;
                                      border-radius: 30px;
                                    "
                                    target="_blank"
                                  >
                                    {3}
                                  </a>
                                </td>
                
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td
                          align="left"
                          style="
                            font-size: 0px;
                            padding: 10px 25px;
                            word-break: break-word;
                          "
                        >
                          <div
                            style="
                              font-family: Nunito, Helvetica, Arial, sans-serif;
                              font-size: 16px;
                              font-weight: 400;
                              line-height: 20px;
                              text-align: left;
                              color: #54595f;
                            "
                          >
                            <p style="margin: 5px 0">{4}</p>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td
                          align="left"
                          style="
                            font-size: 0px;
                            padding: 10px 25px;
                            word-break: break-word;
                          "
                        >
                          <div
                            style="
                              font-family: Nunito, Helvetica, Arial, sans-serif;
                              font-size: 16px;
                              font-weight: 400;
                              line-height: 20px;
                              text-align: left;
                              color: #54595f;
                            "
                          >
                            <p style="margin: 5px 0"></p>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
            </td>

        </tr>

                  </table>
                <![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]>
          </td>
        </tr>
      </table>

      <table
         align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:800px;" width="600"
      >
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->
      <div style="margin: 0px auto; max-width: 800px">
        <table
          align="center"
          border="0"
          cellpadding="0"
          cellspacing="0"
          role="presentation"
          style="width: 100%"
        >
          <tbody>
            <tr>
              <td
                style="
                  direction: ltr;
                  font-size: 0px;
                  padding: 20px 0;
                  padding-bottom: 0px;
                  text-align: center;
                "
              >
                <!--[if mso | IE]>
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td
               class="" style="vertical-align:top;width:800px;"
            >
          <![endif]-->

      </div>
      <!--[if mso | IE]>
          </td>
        </tr>
      </table>
      <![endif]-->
    </div>
  </body>
</html>