Last active
June 12, 2019 21:37
-
-
Save deryckoe/62d66bdd275de500a92a6901b9427467 to your computer and use it in GitHub Desktop.
Responsive Newsletter test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<mjml> | |
<mj-head> | |
</mj-head> | |
<mj-body> | |
<mj-section> | |
<mj-column> | |
<mj-image src="img/image2.jpg"></mj-image> | |
</mj-column> | |
<mj-column> | |
<mj-text font-size="26px"><a href="email-permalink">Título de bloque</a></mj-text> | |
</mj-column> | |
<mj-column> | |
<mj-text font-size="16px"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, autem, corporis cum dicta dignissimos eaque exercitationem explicabo fugiat obcaecati tempora veniam vero. A enim eos maxime numquam quae vel, vero!</p></mj-text> | |
</mj-column> | |
</mj-section> | |
</mj-body> | |
</mjml> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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]--> | |
<!--[if !mso]><!--> | |
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"> | |
<style type="text/css"> | |
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); | |
</style> | |
<!--<![endif]--> | |
<style type="text/css"> | |
@media only screen and (min-width:480px) { | |
.mj-column-per-33 { | |
width: 33.333333333333336% !important; | |
max-width: 33.333333333333336%; | |
} | |
} | |
</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=""> | |
<!--[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="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;"> | |
<!--[if mso | IE]> | |
<table role="presentation" border="0" cellpadding="0" cellspacing="0"> | |
<tr> | |
<td | |
class="" style="vertical-align:top;width:200px;" | |
> | |
<![endif]--> | |
<div class="mj-column-per-33 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%"> | |
<tr> | |
<td align="center" 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:150px;"> | |
<img height="auto" src="img/image2.jpg" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="150" /> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</div> | |
<!--[if mso | IE]> | |
</td> | |
<td | |
class="" style="vertical-align:top;width:200px;" | |
> | |
<![endif]--> | |
<div class="mj-column-per-33 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%"> | |
<tr> | |
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"> | |
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:26px;line-height:1;text-align:left;color:#000000;"><a href="email-permalink">Título de bloque</a></div> | |
</td> | |
</tr> | |
</table> | |
</div> | |
<!--[if mso | IE]> | |
</td> | |
<td | |
class="" style="vertical-align:top;width:200px;" | |
> | |
<![endif]--> | |
<div class="mj-column-per-33 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%"> | |
<tr> | |
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"> | |
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#000000;"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, autem, corporis cum dicta dignissimos eaque exercitationem explicabo fugiat obcaecati tempora veniam vero. A enim eos maxime numquam quae vel, vero!</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment