src/assets/mail/message_new.twig
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Password</title>
<style media="all" type="text/css">
@media only screen and (max-width: 640px) {
.span-2,
.span-3 {
float: none !important;
max-width: none !important;
width: 100% !important;
}
.span-2 > table,
.span-3 > table {
max-width: 100% !important;
width: 100% !important;
}
}
@media all {
.btn-primary table td:hover {
background-color: #b73134 !important;
}
.btn-primary a:hover {
background-color: #b73134 !important;
border-color: #b73134 !important;
}
}
@media all {
.btn-secondary a:hover {
border-color: #b73134 !important;
color: #34495e !important;
}
}
@media only screen and (max-width: 640px) {
h1 {
font-size: 36px !important;
margin-bottom: 16px !important;
}
h2 {
font-size: 28px !important;
margin-bottom: 8px !important;
}
h3 {
font-size: 22px !important;
margin-bottom: 8px !important;
}
.main p,
.main ul,
.main ol,
.main td,
.main span {
font-size: 16px !important;
}
.wrapper {
padding: 8px !important;
}
.article {
padding-left: 8px !important;
padding-right: 8px !important;
}
.content {
padding: 0 !important;
}
.container {
padding: 0 !important;
padding-top: 8px !important;
width: 100% !important;
}
.header {
margin-bottom: 8px !important;
margin-top: 0 !important;
}
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
.btn table {
max-width: 100% !important;
width: 100% !important;
}
.btn a {
font-size: 16px !important;
max-width: 100% !important;
width: 100% !important;
}
.img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
.alert td {
border-radius: 0 !important;
font-size: 16px !important;
padding-bottom: 16px !important;
padding-left: 8px !important;
padding-right: 8px !important;
padding-top: 16px !important;
}
.receipt,
.receipt-container {
width: 100% !important;
}
.hr tr:first-of-type td,
.hr tr:last-of-type td {
height: 16px !important;
line-height: 16px !important;
}
}
@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;
}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="font-family: Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f6f6f6; margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" class="body"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;"
width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top;"
valign="top">
</td>
<td class="container"
style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; margin: 0 auto !important; max-width: 600px; padding: 0; padding-top: 24px; width: 600px;"
width="600" valign="top">
<div class="content"
style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px; padding: 0;">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader"
style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">Oh Hey! Looks someone send you messages when you was offline.</span>
<!-- START HEADER -->
<div class="header"
style="margin-bottom: 24px; margin-top: 0; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; min-width: 100%;"
width="100%">
<tr>
<td class="align-center"
style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; text-align: center;"
valign="top" align="center">
<a href="http://htmlemail.io" target="_blank"
style="color: #3498db; text-decoration: underline;">
<img src="https://s3.amazonaws.com/bigtuna/ava/ava_logo.png"
width="70" height="41" alt="Logo"
align="center"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%;">
</a>
</td>
</tr>
</table>
</div>
<!-- END HEADER -->
<table class="main"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #fff; border-radius: 4px;"
width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper"
style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 24px;"
valign="top">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
width="100%">
<tr>
<td style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top;"
valign="top">
<h1 style="color: #5B5B5B; font-family: Helvetica, sans-serif; font-weight: 300; line-height: 1.4; margin: 0; font-size: 36px; margin-bottom: 24px; text-align: center; text-transform: capitalize;">
New messages</h1>
{% for message in messages %}
<p style="font-family: Helvetica, sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 16px;">
{{ message.content }}
</p>
{% endfor %}
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
<!-- START CALL OUT -->
<tr>
<td class="wrapper section-callout"
style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 24px; background-color: #ED494D; color: #ffffff;"
valign="top" bgcolor="#1abc9c">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
width="100%">
<tr>
<td class="align-center"
style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top; text-align: center; color: #ffffff;"
valign="top" align="center">
Have a great day {{ user.first_name }}!
</td>
</tr>
</table>
</td>
</tr>
<!-- END CALL OUT -->
</table>
<!-- START FOOTER -->
<div class="footer"
style="clear: both; padding-top: 24px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
width="100%">
<tr>
<td class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; padding-top: 0; padding-bottom: 24px; font-size: 12px; color: #999999; text-align: center;"
valign="top" align="center">
<span class="apple-link"
style="color: #999999; font-size: 12px; text-align: center;">AVA, PO Box 1505 PMB 81279 Austin, TX 78767</span>
<br> Don't like these emails? <a href="#"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Unsubscribe</a>.
</td>
</tr>
<tr>
<td class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; padding-top: 0; padding-bottom: 24px; font-size: 12px; color: #999999; text-align: center;"
valign="top" align="center">
<table border="0" cellpadding="0"
cellspacing="0" class="social-sharing"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto; margin: 0 auto; text-align: center;"
align="center">
<tr>
<td style="font-family: Helvetica, sans-serif; vertical-align: top; font-size: 12px; color: #999999; text-align: center;"
valign="top" align="center">
<a href="https://www.ava.house/twitter"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">
<img src="https://s3.amazonaws.com/bigtuna/ava/twitter.png"
alt="Follow us on Twitter"
width="44"
class="social-sharing-icon"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: 44px; margin: 0 2px;">
</a>
<a href="https://www.ava.house/facebook"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">
<img src="https://s3.amazonaws.com/bigtuna/ava/facebook.png"
alt="Like us on Facebook"
width="44"
class="social-sharing-icon"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: 44px; margin: 0 2px;">
</a>
<a href="https://www.ava.house/pinterest"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">
<img src="https://s3.amazonaws.com/bigtuna/ava/pinterest.png"
alt="Follow us on Pinterest"
width="44"
class="social-sharing-icon"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: 44px; margin: 0 2px;">
</a>
<a href="https://www.ava.house/instagram"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">
<img src="https://s3.amazonaws.com/bigtuna/ava/instagram.png"
alt="Follow us on Instagram"
width="44"
class="social-sharing-icon"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: 44px; margin: 0 2px;">
</a>
<a href="https://www.ava.house/youtube"
style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">
<img src="https://s3.amazonaws.com/bigtuna/ava/youtube.png"
alt="Follow us on YouTube"
width="44"
class="social-sharing-icon"
style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: 44px; margin: 0 2px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER --></div>
</td>
<td style="font-family: Helvetica, sans-serif; font-size: 14px; vertical-align: top;"
valign="top">
</td>
</tr>
</table>
</body>
</html>