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>