Skip to content

Instantly share code, notes, and snippets.

@willianjusten

willianjusten/layout.html

Last active August 16, 2019 13:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willianjusten/ad0667e15c93dab144332de2fb6839ff to your computer and use it in GitHub Desktop.
Save willianjusten/ad0667e15c93dab144332de2fb6839ff to your computer and use it in GitHub Desktop.
Download ZIP
MJML Template to text only
Raw
layout.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </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;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
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;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</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.full-width-mobile {
width: 100% !important;
}
td.full-width-mobile {
width: auto !important;
}
}
</style>
</head>
<body>
<div style="">
<!-- Company Logo -->
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="header-outlook" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="header" style="background-color: #204ECF; Margin: 0px auto; max-width: 600px;">
<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;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:100px;"> <img alt="Toptal" height="auto" src="{{ 'public/blocks/logo/big_and_white.png' | image_path }}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;" width="100"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!-- content section -->
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:white;background-color:white;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:white;background-color:white;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%">
<tr>
<td align="left" class="texts" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
<p style="color: #455065; font-size: 14px; line-height: 20px; padding-bottom: 10px;">Hi {{client_first_name}},</p>
<p style="color: #455065; font-size: 14px; line-height: 20px; padding-bottom: 10px;">Still not sure about Toptal? Why don't you come to check out one of <a href="#" style="color: #204ECF; text-decoration: none; white-space: nowrap;">our events</a> and get to know us in person?</p>
<p style="color: #455065; font-size: 14px; line-height: 20px; padding-bottom: 10px;">Members of our Toptal community host and sponsor gatherings in hundreds of cities globally so just find the event closest to you and we hope to see you there!</p>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!-- signature section -->
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:white;background-color:white;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:white;background-color:white;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 0 70px;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%">
<tr>
<td align="left" class="signature" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
<p style="color: #888888; font-size: 14px; line-height: 22px; margin: 0;"> --<br> Mimi Zheng || Sales Engineer || <a href="https://toptal.com" style="color: #204ECF; text-decoration: none; white-space: nowrap;">Toptal</a> || <a href="tel:1-650-276-9554" style="color: #204ECF; text-decoration: none; white-space: nowrap;">(650) 276-9554</a> || mimi.zheng (Skype) || </p>
<p style="color: #888888; font-size: 14px; line-height: 22px; margin: 0;"> <a href="https://toptal.com" style="color: #204ECF; text-decoration: none; white-space: nowrap;">Schedule a Call &rarr;</a></p>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<!-- Footer -->
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="footer-outlook" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="footer" style="background:#262D3D;background-color:#262D3D;Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#262D3D;background-color:#262D3D;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;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%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
<p style="color: #c4c6ca; font-size: 13px; line-height: 22px; margin: 0; text-decoration: none;">© 2010-2019 Toptal, LLC. All rights reserved. Toptal, LLC, 2810 N. Church Street, Wilmington, Delaware 94104.</p>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
Raw
layout.mjml
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif" />
</mj-attributes>
<mj-style inline="inline">
.header {
background-color: #204ECF;
}
.texts p {
color: #455065;
font-size: 14px;
line-height: 20px;
padding-bottom: 10px;
}
.footer p,
.footer a {
color: #c4c6ca;
font-size: 13px;
line-height: 22px;
margin: 0;
text-decoration: none;
}
.signature p {
color: #888888;
font-size: 14px;
line-height: 22px;
margin: 0;
}
.texts a,
.signature a,
.signature a[href^="tel:"]{
color: #204ECF;
text-decoration: none;
white-space: nowrap;
}
</mj-style>
</mj-head>
<mj-body>
<mj-container>
<!-- Company Logo -->
<mj-section css-class="header">
<mj-column>
<mj-image src="{{ 'public/blocks/logo/big_and_white.png' | image_path }}" alt="Toptal" width="100px" align="left" />
</mj-column>
</mj-section>
<!-- content section -->
<mj-section background-color="white" padding="20px 0 0">
<mj-column>
<mj-text css-class="texts">
<p>Hi {{client_first_name}},</p>
<p>Still not sure about Toptal? Why don't you come to check out one of <a href="#">our events</a> and get to know us in person?</p>
<p>Members of our Toptal community host and sponsor gatherings in hundreds of cities globally so just find the event closest to you and we hope to see you there!</p>
</mj-text>
</mj-column>
</mj-section>
<!-- signature section -->
<mj-section background-color="white" padding="0 0 70px">
<mj-column>
<mj-text css-class="signature">
<p>
--<br />
Mimi Zheng || Sales Engineer || <a href="https://toptal.com">Toptal</a> || <a href="tel:1-650-276-9554">(650) 276-9554</a> || mimi.zheng (Skype) ||
</p>
<p>
<a href="https://toptal.com">Schedule a Call &rarr;</a></p>
</mj-text>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section css-class="footer" background-color="#262D3D">
<mj-column>
<mj-text>
<p>© 2010-2019 Toptal, LLC. All rights reserved. Toptal, LLC, 2810 N. Church Street, Wilmington, Delaware 94104.</p>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment