email_template_public_notification.html

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
/* -------------------------------------
    INLINED WITH htmlemail.io/inline
------------------------------------- */
/* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
  table[class=body] h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  table[class=body] p,
        table[class=body] ul,
        table[class=body] ol,
        table[class=body] td,
        table[class=body] span,
        table[class=body] a {
    font-size: 16px !important;
  }
  table[class=body] .wrapper,
        table[class=body] .article {
    padding: 10px !important;
  }
  table[class=body] .content {
    padding: 0 !important;
  }
  table[class=body] .container {
    padding: 0 !important;
    width: 100% !important;
  }
  table[class=body] .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
  }
  table[class=body] .btn table {
    width: 100% !important;
  }
  table[class=body] .btn a {
    width: 100% !important;
  }
  table[class=body] .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}
/* -------------------------------------
    PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
  .ExternalClass {
    width: 100%;
  }
  .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
    line-height: 100%;
  }
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
  }
  .btn-primary table td:hover {
    background-color: #34495e !important;
  }
  .btn-primary a:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
  }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center"  valign="top" style="vertical-align:top;">
            <div style="max-width: 500px; min-width: 350px;  border: 1px solid black">
                <div style="background-color: black; width: 100%; height: 50px;">
                <img src="https://des.ncsa.illinois.edu/static/images/DESDM_logo.png"
                width="50px"
                height="50px"
                alt="logo"/> <span style="color: white; vertical-align:60%; font-family:News Cycle,'Helvetica Neue','Comic Sans', Arial ,monospace; font-size: 24px;"> &nbsp; &nbsp; DESaccess </span>
                </div>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <!-- <tr>
                        <td align="left" style="padding: 1rem;">
                            {{ username }}:
                        </td>
                    </tr> -->
                    <tr>
                        <td align="left" style="padding: 1rem;">
                            {{ msg }}
                        </td>
                    </tr>

                    <tr>
                        <td align="left" style="padding: 20px;">
                            DES Labs Team <br /><br />
                            {{ ps }} <br><br>
				<span style="font-size:9px"> If you need assistance, please use our <a href="https://des.ncsa.illinois.edu/help"> Help Form </a></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" style="text-align: center; padding-bottom: 2rem;">
                            <b style="font-size: 12px;"> Please <u>do not reply</u> to this automatically generated email.</b>
                        </td>
                    </tr>
                    </table>
            </div>
        </td>
    </tr>
</table>
</body>

</html>