This is email template works great in all email-clients. It got a lot of hacks but they necessary in order to make it look good in all email clients. The email design is also responsive! For generating your own buttons that are email-friendly check out buttons.cm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Championship Match!</title>
<meta name="viewport" content="width=device-width" />
<style>
@media screen and (max-width: 600px) {
.width-full {
width: 100% !important;
}
.stack-cell {
display: block !important;
width: 100% !important;
}
}
@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; }
}
.client-link a {
color: #3a383a !important;
}
td {
-ms-text-size-adjust:none;
-webkit -text-size-adjust:none;
}
table { margin: 0 auto !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 (mso)|(IE)]>
<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>
<img alt="La Amor Peligrosa vs. La Fuega Fatal" 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 (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (mso)|(IE)]>
<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; text-align: center;">
<div style="display: inline-block;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="width-full" width="300">
<tr>
<td>
<table 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 align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="140">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;"></td>
</tr>
<tr>
<td bgcolor="#902950" height="2" style="font-size: 2px; 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" class="width-full" width="300">
<tr>
<td>
<table 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 align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;"> </td>
</tr>
<tr>
<td bgcolor="#951720" height="2" style="font-size: 2px; 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 (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (mso)|(IE)]>
<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="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://buttons.cm" 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;">Buy Tickets</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" 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;mso-hide:all;">Buy Tickets</a>
</div>
</td>
</tr>
</table>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<!--[if (mso)|(IE)]>
<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 align="center" 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;">Unsubscribe</a>
</td>
</tr>
<tr>
<td align="center" style="color: #545154; font-family: Georgia, serif; font-size: 12px; 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 (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
