bulletproof html template 2

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;">
                               &bull; 16 &bull;
                            </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;">
                                      &nbsp;
                                    </td>
                                  </tr>
                                  <tr>
                                    <td bgcolor="#fcfbfd"
                                        height="3"
                                        style="font-size: 3px;
                                               line-height: 3px;">
                                        &nbsp;
                                    </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>

Add your comment