From Code school’s “unmasking html” course:
https://litmus.com/builder/7f28329
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Email Base</title>
<meta name="viewport" content="width=device-width" />
<style>
table {
margin: 0 auto !important; }
/* Media Queries */
@media screen and (max-width: 600px) {
.width-full {
width: 100% !important; }
.col-one-stack {
padding: 0 !important; }
.col-two-stack {
padding: 20px 0 0 0 !important; }
.email-stars {
padding: 5px 0 !important; }
.email-title {
padding: 2px 0 3px !important; }
.email-slogan {
padding: 5px 0 !important; }
.email-date-day {
padding-top: 10px !important; }
.email-date-month {
padding-bottom: 10px !important; }
.email-ornamentation {
height: auto !important;
width: 100% !important; }
.padding-top-10 {
padding-top: 10px !important; }
.stack-column-two {
padding-top: 20px !important;} }
@media screen and (max-width: 320px) {
.email-title {
font-size: 34px !important;}
.email-slogan {
font-size: 12px !important; }
.email-date-day {
font-size: 32px !important; }
.email-date-month {
font-size: 20px !important; }
.email-tickets-title {
font-size: 18px !important; }
.email-tickets-border {
width: 200px !important; }
.email-tickets-category {
font-size: 21px !important; }
.email-tickets-price {
font-size: 24px !important; } }
@media screen and (min-width: 321px) and (max-width: 375px) {
.email-title {
font-size: 40px !important; }
.email-slogan {
font-size: 14px !important; } }
@media screen and (min-width: 376px) and (max-width: 480px) {
.email-title {
font-size: 46px !important; }
.email-slogan {
font-size: 16px !important; } }
@media screen and (min-width: 481px) and (max-width: 599px) {
.email-title {
font-size: 54px !important; }
.email-slogan {
font-size: 19px !important; } }
@media screen and (max-width: 1160px) {
u + .gmail .width-full {
width: 100% !important; }
u + .gmail .col-one-stack {
padding: 0 !important; }
u + .gmail .col-two-stack {
padding: 20px 0 0 0 !important; }
u + .gmail .email-stars {
padding: 5px 0 !important; }
u + .gmail .email-title {
font-size: 52px !important;
line-height: 52px !important;
padding: 2px 0 3px !important; }
u + .gmail .email-slogan {
font-size: 18px !important;
line-height: 18px ;
padding: 5px 0 !important; }
u + .gmail .email-date-day {
padding-top: 10px !important; }
u + .gmail .email-date-month {
padding-bottom: 10px !important; }
u + .gmail .email-ornamentation {
height: auto !important;
width: 100% !important; }
u + .gmail .padding-top-10 {
padding-top: 10px !important; }
u + .gmail .stack-column-two {
padding-top: 20px !important; } }
</style>
<!--[if gte mso 12 && lt mso 15]>
<style>
.email-slogan {
font-size: 24px !important;
line-height: 24px !important; }
</style>
<![endif]-->
<!--[if gte mso 12]>
<style>
td{
mso-line-height-rule: exactly;
}
.email-tickets {
line-height: 32px !important;
}
.email-title {
padding-bottom: 0 !important;
}
</style>
<![endif]-->
</head>
<body class="gmail" style="margin: 0; padding: 0;">
<table border="0"
cellpadding="0"
cellspacing="0"
style="background-color: #211f31;
background-image: url('https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/710c3275-e533-4437-a1fa-14a74ce45405.png');"
width="100%">
<tr>
<td style="padding: 0 10px;">
<!--[if (IE)|mso]>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
<tr>
<td>
<![endif]-->
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="max-width: 600px;
text-align: center;"
width="100%">
<tr>
<td style="
background-color: #5b3885;
padding: 12px 0;" >
<img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/0b1312c7-f7ed-422d-8e3c-45bb0d0a38b8.png"
style="
display: block;
max-width: 100%;"
width="600" />
</td>
</tr>
<tr>
<td class="email-title"
style="
color: #7fcce9;
font-family: 'Arial Black',
'GillSans-Bold',
'Arial Bold',
Arial,
sans-serif;
font-size: 74px;
line-height: 74px;
margin: 0;
padding: 5px 0 10px 0;
text-transform: uppercase;">
Lucha Libre!</td>
</tr>
<tr>
<td class="email-slogan"
style="
background: #5b3885;
color: #fcfbfd;
font-family: 'Arial Black',
'GillSans-Bold',
'Arial Bold',
Arial,
sans-serif;
font-size: 26px;
line-height: 26px;
margin: 0;
padding: 10px 0;
text-transform: uppercase;">
Experience 3 Bone-Crushing Hours</td>
</tr>
</table>
<!--[if (IE)|mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (IE)|mso]>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
<tr>
<td>
<![endif]-->
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="color: #fcfbfd;
max-width: 600px;"
width="100%">
<tr>
<td style="padding-top: 20px;">
<img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/ca0f4fda-7ecd-498b-933f-31aaac16ddf3.png"
style="
display: block;
max-width: 100%;"
width="600" />
</td>
</tr>
</table>
<!--[if (IE)|mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (IE)|mso]>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
<tr>
<td>
<![endif]-->
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="max-width: 600px;"
width="100%">
<tr>
<td style="font-size: 0;">
<div style="display: inline-block;">
<table align="left"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
width="300">
<tr>
<td>
<table bgcolor="#5b3885"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="text-align: center;
text-transform: uppercase;"
width="290">
<tr>
<td style="font-size: 18px;
line-height: 18px;">
<img alt="ornamentation"
class="email-ornamentation"
height="15"
src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/bf112bcc-adf7-4ec9-92fd-185f6d559d11.png"
style="display: block;"
width="290" />
</td>
</tr>
<tr>
<td class="email-date-day"
style="color: #fcfbfd;
font-family: 'Arial Black', 'GillSans-Bold','Arial Bold',
Arial, sans-serif;
font-size: 48px;
font-weight: bold;
line-height: 48px;
padding-top: 25px;">
• 16 •
</td>
</tr>
<tr>
<td class="email-date-month"
style="color: #fcfbfd;
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
line-height: 100%;
padding-bottom: 25px;
padding-top: 5px;">
de Junio
</td>
</tr>
<tr>
<td>
<img alt="ornamentation"
class="email-ornamentation"
height="15"
src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/bf112bcc-adf7-4ec9-92fd-185f6d559d11.png"
style="display: block;"
width="290" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td>
<![endif]-->
<div style="display: inline-block;">
<table align="left"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
width="300">
<tr>
<td>
<table bgcolor="#0089b4"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="color: #fcfbfd;
text-align: center;
text-transform: uppercase;"
width="290">
<tr>
<td style="font-size: 18px;
line-height: 18px;">
<img alt="ornamentation"
class="email-ornamentation"
height="15"
src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/bf112bcc-adf7-4ec9-92fd-185f6d559d11.png"
style="display: block;"
width="290" />
</td>
</tr>
<tr>
<td class="email-tickets-title"
style="color: #fcfbfd;
font-family: Arial, sans-serif;
font-size: 22px;
font-weight: bold;
line-height: 100%;
padding-top: 15px;">
Open to the public
</td>
</tr>
<tr>
<td>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="email-tickets-border"
style="margin: 0 auto;"
width="236">
<tr>
<td height="4"
style="font-size: 4px;
line-height: 4px;">
</td>
</tr>
<tr>
<td bgcolor="#fcfbfd"
height="3"
style="font-size: 3px;
line-height: 3px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="email-tickets"
style="color: #fcfbfd;
font-family: Arial;
font-size: 14px;
font-weight: bold;
line-height: 14px;
padding-top: 5px;">
<span class="email-tickets-category"
style="font-family: 'Arial Black', 'GillSans-Bold','Arial Bold',
Arial, sans-serif; font-size: 28px; line-height: 28px;">Adults</span>
<span class="email-tickets-price"
style="font-family: 'Arial Black', 'GillSans-Bold','Arial Bold',
Arial, sans-serif; font-size: 32px; line-height: 32px;">15</span>
pesos
</td>
</tr>
<tr>
<td class="email-tickets"
style="color: #fcfbfd;
font-family: Arial;
font-size: 14px;
font-weight: bold;
line-height: 14px;
padding-bottom: 15px;
padding-top: 5px;">
<span class="email-tickets-category"
style="font-family: 'Arial Black', 'GillSans-Bold','Arial Bold',
Arial, sans-serif; font-size: 28px; line-height: 28px;">Ninos</span>
<span class="email-tickets-price"
style="font-family: 'Arial Black', 'GillSans-Bold','Arial Bold',
Arial, sans-serif; font-size: 32px; line-height: 32px;">10</span>
pesos
</td>
</tr>
<tr>
<td>
<img alt="ornamentation"
class="email-ornamentation"
height="15"
src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/bf112bcc-adf7-4ec9-92fd-185f6d559d11.png"
style="display: block;"
width="290" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!--[if (IE)|mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (IE) | mso]>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
width="600">
<tr>
<td>
<![endif]-->
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full width-fixed-600"
style="max-width: 600px;"
width="100%">
<tr>
<td align="center"
style="padding: 30px 0;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://example.org"
style="height:50px;
v-text-anchor:middle;
width:260px;"
arcsize="12%"
strokecolor="#000000"
fillcolor="#886cac">
<w:anchorlock/>
<center style="color: #ffffff;
font-family: Arial,sans-serif;
font-size: 20px;
font-weight:bold;
text-transform: uppercase;">
Buy Tickets</center>
</v:roundrect>
<![endif]-->
<a href="http://example.org"
style="background-color:#886cac;
border:1px solid #000000;
border-radius:6px;
color:#ffffff;
display:inline-block;
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 260px;
mso-hide:all;">
Buy Tickets</a>
</div>
</td>
</tr>
<tr>
<td align="center"
class="email-phone-number"
style="color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
padding-bottom: 30px;">
Or, call +12 34 5678 9012
</td>
</tr>
</table>
<table align="center"
border="0"
cellpadding="0"
cellspacing="0"
class="width-full"
style="color: #ddd0eb;
font-family: Arial, sans-serif;
font-size: 12px;
max-width: 600px;"
width="100%">
<tr>
<td align="center">
No mas? <a href="#" style="color: #ddd0eb;">Unsubscribe</a>
</td>
</tr>
<tr>
<td align="center"
style="padding: 15px 0;">
Av. de las Street No. 123
<br />
Azcapotzalco Santa Barbara
<br />
01234 Ciudad de México
<br />
D.F. Mexico
</td>
</tr>
</table>
<!--[if (IE) | mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
