From Code school’s “unmasking html” course:
https://litmus.com/builder/369cfaf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unmasking HTML Emails Challenges</title>
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width: 320px) {
.email-title {
font-size: 20px !important;
line-height: 30px !important;
padding-top: 15px !important; }
.email-intro {
font-size: 14px !important;
line-height: 21px !important; }
}
@media screen and (min-width: 321px) and (max-width: 375px) {
.email-title {
font-size: 22px !important;
line-height: 36px !important; }
}
table {
margin: 0 auto !important;
}
.client-link a {
color: #3a383a !important;
}
</style>
<!--[if gte mso 12]>
<style>
td {
mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #e4c59a; background-image: url('https://s3.amazonaws.com/unmasking-html-emails/bg.jpg');" 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" style="max-width: 600px;" width="100%">
<tr>
<td>
<img src="https://s3.amazonaws.com/unmasking-html-emails/info.png" style="display: block; max-width: 100%;" width="600" />
</td>
</tr>
<tr>
<td class="email-title" style="color: #3a383a; font-family: Georgia, serif; font-size: 42px; font-weight: bold; line-height: 44px; padding-top: 20px; text-transform: uppercase;">
Championship Match!
</td>
</tr>
<tr>
<td class="email-intro" style="color: #3a383a; font-family: Georgia, serif; font-size: 18px; line-height: 27px; padding-top: 5px;" >
Reigning Champion La Fuega Fatal will defend her title against the top contender, La Amor Peligrosa. Will the contender's attacks be enough to seize the belt, or will she go down in flames?
</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" style="max-width: 600px;" width="100%">
<tr>
<td style="font-size: 0; text-align: center;">
<div style="display: inline-block;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td style="padding-top: 15px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<img alt="La Amor Peligrosa" src="https://s3.amazonaws.com/unmasking-html-emails/la-amor-peligrosa.png" style="display: block; max-width: 100%;" width="300" />
</td>
</tr>
<tr>
<td style="color: #b83466; font-family: Georgia, serif; font-size: 20px; font-weight: bold; line-height: 20px; padding-top: 5px;">
Contender
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="140">
<tr>
<td height="5" style="line-height: 5px;"></td>
</tr>
<tr>
<td bgcolor="#902950" height="2" style="line-height: 2px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color: #902950; font-family: Georgia, serif; font-size: 20px; font-weight: bold; line-height: 20px; padding-top: 5px;">
21-0-0
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (IE)|mso]>
</td>
<td>
<![endif]-->
<div style="display: inline-block;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td style="padding-top: 15px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="text-align: center; text-transform: uppercase;" width="300">
<tr>
<td>
<img alt="La Fuega Fatal" src="https://s3.amazonaws.com/unmasking-html-emails/la-fuega-fatal.png" style="display: block; max-width: 100%;" width="300" />
</td>
</tr>
<tr>
<td style="color: #c11e29; font-family: Georgia, serif; font-size: 20px; font-weight: bold; line-height: 20px; padding-top: 5px;">
Champion
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tr>
<td height="5" style="line-height: 5px;"> </td>
</tr>
<tr>
<td bgcolor="#951720" height="2" style="line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color: #951720; font-family: Georgia, serif; font-size: 20px; font-weight: bold; line-height: 20px; padding-top: 5px;">
23-0-0
</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" style="max-width: 600px;" width="100%">
<tr>
<td style="padding-top: 30px; text-align: center;">
<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:240px;" arcsize="8%" strokecolor="#000000" fillcolor="#3a383a">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Georgia, serif;font-size:20px;font-weight:bold;text-transform: uppercase;">Buy Tickets</center>
</v:roundrect>
<![endif]-->
<a href="http://example.org" style="background-color:#3a383a;border:1px solid #000000;border-radius:4px;color:#ffffff;display:inline-block;font-family: Georgia,serif;font-size:20px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:240px;-webkit-text-size-adjust:none;mso-hide:all;text-transform: uppercase;">Buy Tickets</a>
</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" style="font-family: Georgia, serif; font-size: 12px; max-width: 600px;" width="100%">
<tr>
<td align="center" class="email-phone-number" style="color: #3a383a; font-family: Georgia, serif; font-size: 18px; font-weight: bold; line-height: 18px; padding-top: 20px;">
Or, call <span class="client-link">+90 12 3456 7890</span>
</td>
</tr>
<tr>
<td align="center" style="color: #545154; font-family: Georgia, serif; font-size: 12px; padding-top: 40px;">
No mas? <a href="http://example.org" style="color: #545154; -ms-text-size-adjust:none; -webkit-text-size-adjust:none;">Unsubscribe</a>
</td>
</tr>
<tr>
<td align="center" style="color: #545154; font-family: Georgia, serif; font-size: 12px; padding: 15px 0; -ms-text-size-adjust:none; -webkit-text-size-adjust:none;">
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>
