Everything is Free Until Sunday!

In this example below you will see how to do a Everything is Free Until Sunday! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by reallygoodemails, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright reallygoodemails ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Everything is Free Until Sunday!</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>

<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Free Weekend Launch</title>

<body style="margin: 0; padding: 0;">
  <style type="text/css">
    table {
        border-collapse: collapse;
        border-spacing: 0; }
      
      td.text,
      .has-btn {
        mso-line-height-rule: exactly;
        -webkit-font-smoothing: antialiased;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: none; }
      
      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important; }
      
      @media screen and (max-width: 600px) {
        .text {
          font-size: 14px !important;
          line-height: 21px !important; }
      
        .h1 {
          font-size: 20px !important; }
      
        .h2 {
          font-size: 18px !important; }
      
        .h3 {
          font-size: 16px !important; }
      
        .h4 {
          font-size: 14px !important; }
      
        .h5 {
          font-size: 14px !important; }
      
        table {
          line-height: 1.5 !important; }
      
        .h1, .h2, .h3, .h4, .h5 {
          line-height: 1.2 !important; }
      
        .cs-logo {
          width: 120px !important; }
      
        .flex-size {
          max-width: 100% !important;
          width: 100% !important; }
      
        .flex-size img {
          max-width: 100% !important; }
      
        .s-height {
          height: 10px !important; }
      
        .s-db {
          display: block !important; }
      
        .s-dib {
          display: inline-block !important; }
      
        .s-hf {
          height: 0 !important; }
      
        .s-paf {
          padding: 0 !important; }
      
        .s-pbf {
          padding-bottom: 0 !important; }
      
        .s-pbm {
          padding-bottom: 16px !important; }
      
        .s-plf {
          padding-left: 0 !important; }
      
        .s-prf {
          padding-right: 0 !important; }
      
        .s-pts {
          padding-top: 8px !important; }
      
        .s-ptm {
          padding-top: 16px !important; }
      
        .s-ptl {
          padding-top: 32px !important; }
      
        .s-tac {
          text-align: center !important; }
      
        .s-tal {
          text-align: left !important; } }
      @media screen and (min-device-width: 375px) and (max-device-width: 667px) {
        table {
          font-size: 16px !important; }
      
        table.footer-content {
          font-size: 12px !important; } }
      .footer a {
        color: #d6eff6; }
      
      .airmail-link a {
        color: #ffffff; }
      
      .share-facebook {
        animation: shareFacebook 2s forwards ease-in-out; }
      
      .share-twitter {
        animation: shareTwitter 2s forwards ease-in-out; }
      
      .btn-a {
        transition: background 0.25s linear; }
      
      .btn-a:hover {
        background: #f05158 !important; }
      
      .bgColorifier {
        animation: bgColorifier 30s ease infinite;
        background: linear-gradient(270deg, #f05158, #7a6fa3);
        background-size: 400% 400%; }
      
      @keyframes bgColorifier {
        0% {
          background-position: 0% 50%; }
        50% {
          background-position: 100% 50%; }
        100% {
          background-position: 0% 50%; } }
  </style>
  <table bgcolor="#7a6fa3" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" class="bgColorifier" style="padding: 40px 20px 20px 20px;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size">
          <tr>
            <td style="font-size: 0;">&nbsp;</td>
            <td width="480">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td align="center">
                    <img alt="" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/a492d2d4-eba1-4b20-8d71-e2cb44006cba.png" style="display: block; max-width: 100%; opacity: 0.8;" width="200">
                  </td>
                </tr>
                <tr>
                  <td align="center" style="padding-top: 24px;">
                    <img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/bb944589-b870-4d42-a853-42e13305f4fb.png" style="display: block; max-width: 100%;" width="480">
                  </td>
                </tr>
                <tr>
                  <td class="text" style="color: #{e.cText}; font-family: #{e.tFamily}; font-size: 16px; line-height: 24px;"></td>
                </tr>
              </table>
            </td>
            <td style="font-size: 0;">&nbsp;</td>
          </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size">
          <tr>
            <td style="font-size: 0;">&nbsp;</td>
            <td width="440">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td class="text" style="color: #ffffff; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; padding-top: 24px;">
                    Free Weekend has officially begun! Log in to Code School now to get access to our entire content library for free until <span class="airmail-link">Sunday at 11:59 p.m. EST.</span> Don't forget to check out the leaderboard &#8212; the
                    top 10 point-earners will win a free year of Code School!
                  </td>
                </tr>
                <tr>
                  <td align="center" style="padding-top: 32px;">
                    <!--[if mso]>
                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.codeschool.com/free-weekend/?utm_medium=email&utm_campaign=free_weekend_launch&utm_source=mailchimp&utm_content=null" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="250%" stroke="f" fillcolor="#faa627">
                        <w:anchorlock/>
                        <center>
                      <![endif]-->
                    <a class="btn-a" href="http://CodeSchool.us5.list-manage1.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=2e86b9a39f&amp;e=f67ef7bd0f" style="background-color:#faa627; border-radius:100px; color:#ffffff; display:inline-block; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size:14px; line-height:40px; text-align:center; text-decoration:none; width:200px;">Get Started Now</a>
                    <!--[if mso]>
                        </center>
                        </v:roundrect>
                      <![endif]-->
                  </td>
                </tr>
                <tr>
                  <td align="center" style="padding-top: 80px;">
                    <!--[if (IE)|mso]>
                      <table align='center' border='0' cellpadding='0' cellspacing='0' width='440'>
                      <tr>
                      <td>
                      <![endif]-->
                    <table border="0" cellpadding="0" cellspacing="0" class="flex-size" style="max-width: 440px;" 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="content" width="220">
                              <tr>
                                <td align="center">
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="share-twitter" valign="middle">
                                    <tr>
                                      <td>
                                        <a href="http://CodeSchool.us5.list-manage2.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=66eda482ab&amp;e=f67ef7bd0f">
                                          <img border="0" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/f587c208-d093-434f-b2c1-746be81eccdf.png" style="display: block; max-width: 100%;" width="40">
                                        </a>
                                      </td>
                                      <td class="text" style="color: #ffffff; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; padding-right: 6px;">
                                        <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=fd40edeb08&amp;e=f67ef7bd0f" style="color: #ffffff; font-weight: 300;">Share on Twitter</a>
                                      </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="content" width="220">
                              <tr>
                                <td align="center">
                                  <table border="0" cellpadding="0" cellspacing="0" class="share-facebook" valign="middle">
                                    <tr>
                                      <td style="padding: 7px 6px 7px 6px;">
                                        <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=f3bc96eab8&amp;e=f67ef7bd0f">
                                          <img border="0" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/ae6c3a77-3698-4dfe-af96-3a2dd6ff3250.png" style="display: block; max-width: 100%;" width="26">
                                        </a>
                                      </td>
                                      <td class="text" style="color: #ffffff; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; padding: 0 4px;">
                                        <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=5914748f4e&amp;e=f67ef7bd0f" style="color: #ffffff; font-weight: 300;">Share on Facebook</a>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </table>
                    <!--[if (IE)|mso]>
                      </td>
                      </tr>
                      </table>
                      <![endif]-->
                  </td>
                </tr>
              </table>
            </td>
            <td style="font-size: 0;">&nbsp;</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <table bgcolor="#4a4956" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="color: #d6eff6; font-size: 12px;" width="100%">
    <tr>
      <td align="center" style="padding-top: 32px;">
        <a href="http://CodeSchool.us5.list-manage1.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=6e99bb6941&amp;e=f67ef7bd0f" style="text-decoration: none;">
          <img alt="Download the Code School app on the app store" border="0" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/f24caf18-6ec3-4492-b5ea-352f6248a789.png" width="140">
        </a>
        <table align="center" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" style="padding: 32px 12px 0 12px;">
              <a href="http://CodeSchool.us5.list-manage1.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=fd6e78c9b3&amp;e=f67ef7bd0f" style="text-decoration: none;">
                <img alt="Twitter Icon" border="0" height="30" src="https://d367zuf2xzw0m3.cloudfront.net/common/social-twitter.png" width="30">
              </a>
            </td>
            <td align="center" style="padding: 32px 12px 0 12px;">
              <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=86e396b1e1&amp;e=f67ef7bd0f" style="text-decoration: none;">
                <img alt="Facebook Icon" border="0" height="30" src="https://d367zuf2xzw0m3.cloudfront.net/common/social-facebook.png" width="30">
              </a>
            </td>
            <td align="center" style="padding: 32px 12px 0 12px;">
              <a href="http://CodeSchool.us5.list-manage1.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=21ca4d9ced&amp;e=f67ef7bd0f" style="text-decoration: none;">
                <img alt="Youtube Icon" border="0" height="30" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/email_social_youtube.png" width="30">
              </a>
            </td>
            <td align="center" style="padding: 32px 12px 0 12px;">
              <a href="http://CodeSchool.us5.list-manage2.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=eb7e4ea9b7&amp;e=f67ef7bd0f" style="text-decoration: none;">
                <img alt="Google&#43; Icon" border="0" height="30" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/email_social_gplus.png" width="30">
              </a>
            </td>
          </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size">
          <tr>
            <td align="left" class="text s-tac" style="color: #d6eff6; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; padding-top: 24px;">
              Have questions or need assistance?
            </td>
          </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size">
          <tr>
            <td align="center">
              <!--[if (IE)|mso]>
                <table align='center' border='0' cellpadding='0' cellspacing='0' width='384'>
                <tr>
                <td>
                <![endif]-->
              <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size" style="max-width: 384px;" 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="content" width="182">
                        <tr>
                          <td align="center" style="padding: 16px 16px 0 16px;">
                            <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.codeschool.com/support" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="200%" strokecolor="#d6eff6" fillcolor="#4a4956">
                                <w:anchorlock/>
                                <center style="color:#d6eff6;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:bold;">Support</center>
                                </v:roundrect>
                              <![endif]-->
                            <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=f744a55be6&amp;e=f67ef7bd0f" style="background-color:#4a4956;border:1px solid #d6eff6;border-radius:20px;color:#d6eff6;display:inline-block;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:300;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;text-transform: uppercase;mso-hide:all;">Support</a>
                          </td>
                        </tr>
                      </table>
                    </div>
                    <!--[if mso]>
                      </td>
                      <td>
                      <![endif]-->
                    <div style="display: inline-block;">
                      <table align="left" border="0" cellpadding="0" cellspacing="0" class="content" width="182">
                        <tr>
                          <td align="center" style="padding: 16px 16px 0 16px;">
                            <!--[if mso]>
                                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.codeschool.com/faq" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="200%" strokecolor="#d6eff6" fillcolor="#4a4956">
                                <w:anchorlock/>
                                <center style="color:#d6eff6;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:bold;">FAQ</center>
                                </v:roundrect>
                              <![endif]-->
                            <a href="http://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=8af67bb0cf&amp;e=f67ef7bd0f" style="background-color:#4a4956;border:1px solid #d6eff6;border-radius:20px;color:#d6eff6;display:inline-block;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:300;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;text-transform: uppercase;mso-hide:all;">FAQ</a>
                            <!--[if (IE)|mso]>
                              </td>
                              </tr>
                              </table>
                              <![endif]-->
                          </td>
                        </tr>
                      </table>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size">
          <tr>
            <td align="center" class="text" style="color: #d6eff6; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 32px 20px 0 20px;">
              &copy; 2015 Code School LLC. Crafted lovingly in Orlando, Florida.
            </td>
          </tr>
          <tr>
            <td align="center" class="text" style="color: #d6eff6; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0 20px;">
              <span class="maskLink-footer">Code School
618 E South Street
Suite 620
Orlando, FL 32801
USA</span>
            </td>
          </tr>
          <tr>
            <td align="center" class="text" style="color: #d6eff6; font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 16px 0 32px 0;">
              <a href="#" style="color: #d6eff6;">Edit your email settings</a> &nbsp; &nbsp;
              <a href="#" style="color: #d6eff6;">
                  Unsubscribe
                </a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>
  
  

</body>

</html>

Comments