FlipSnack BF Followup

In this example below you will see how to do a FlipSnack BF Followup with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pupex_calin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pupex_calin ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html style="margin: 0">

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,900" rel="stylesheet" />
  <title>Black Friday sale 50% off</title>
  <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>

<body align="center" style="margin: 0">
  <table align="center" height="100%" style="background-color: #000; padding: 0px 50px 150px 50px;" width="100%">
    <tbody>
      <tr>
        <td align="center" valign="top">
          <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #040404; color: white; padding-bottom: 20px; max" width="620px">
            <tbody>
              <tr>
                <td align="center" valign="top">
                  <table border="0" cellpadding="0" cellspacing="0" style="min-width: 300px; max-width: 600px;" width="100%">
                    <tbody>
                      <tr>
                        <td align="center" valign="top">
                          <table border="0" cellpadding="10" cellspacing="0" style="text-transform: uppercase;" width="100%">
                            <tbody>
                              <tr>
                                <td align="center" style="font-family: Roboto, Arial, sans serif; font-size: 14px; color: #ffffff;" valign="top">
                                  <img alt="FlipSnack Logo" src="https://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/flipsnack/FlipSnack%20Email%20Images/BlackFriday2016/white-flipsnack-logo.png" style="display: block; margin-top: 10px; max-width: 120px;" width="100%" /></td>

                              </tr>
                              <tr>
                                <td align="center" style="font-family: Roboto, Arial, sans serif; font-size: 14px; color: #ffffff;" valign="top">
                                  <img alt="-50%" src="https://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/flipsnack/FlipSnack%20Email%20Images/BlackFriday2016/bf_reminder_03.png" style="display: block; margin-top: 10px; max-width: 620px;" width="100%" /></td>

                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <tr>
                        <td align="center" valign="top">
                          <p style="font-family: Roboto, Arial, sans serif; font-weight: 900; color: #ffffff; font-size: 178px; letter-spacing: -2px; text-shadow: -7px 8px 0 #434343; max-width: 620px; margin: 0px 0px 0px 0px;" width="620px">
                            <img alt="&nbsp;" src="https://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/flipsnack/FlipSnack%20Email%20Images/BlackFriday2016/24h.gif" style="position: absolute; display: block; margin-top: 20px; align: center; max-width: 620px;">                            24 h</p>
                          <p style=" font-family: Roboto, Arial, sans serif; font-size: 28px; color: #ffffff; line-height: 5px; font-weight: 900; text-shadow: -2px 2px 0 #555555; margin: 0px 0px 80px;">
                            <span style="position: relative; display: inline-block; background-color: #434343; width: 30px; line-height: 2px; ">&nbsp;</span><b>&nbsp;&nbsp;LEFT&nbsp;&nbsp;</b><span style="position: relative; display: inline-block; background-color: #434343; width: 30px; line-height: 2px; ">&nbsp;</span></p>
                          <p style="font-family: Roboto, Arial, sans serif; color: #d0d0d0; font-size: 14px; color:#ffffff; margin: 22px 90px; font-weight: 300;">
                            Now&rsquo;s the time to save big - with <span style="color: #FFFFFF;"><b>50% OFF</b></span>&nbsp;on all FlipSnack subscriptions. Be quick and get incredible benefits at half price!</p>
                          <a href="https://www.flipsnack.com/?utm_source=Black-Friday-2016&amp;utm_medium=email&amp;utm_content=USPub&amp;utm_campaign=Black-Friday-2016&amp;fs_tags=BF-Flip-US-Pub#st-auto-login&amp;user={email}&amp;pass={password}&amp;coupon=FLIPBLACK2016" style="font-family: Roboto, Arial, sans serif; background-color: #bc0200; font-weight: 600; border-radius: 4px; color: #ffffff; display: inline-block; font-size: 16px; margin: 20px 0; padding: 10px 35px; text-decoration: none; text-transform: uppercase">UPGRADE NOW</a></td>
                      </tr>
                      <tr>
                        <td>
                          <p style="font-family: Roboto, Arial, sans serif; color: #d0d0d0; font-size: 14px; color:#ffffff; margin: 22px 100px; text-align: center; font-weight: 300;" width="620px">Upgrading to FlipSnack premium will have the following benefits:
                            <ul style="font-family: Roboto, Arial, sans serif; color: #d0d0d0; font-size: 14px; color:#ffffff; margin: 22px 80px; font-weight: 300;">
                              <table width="100%">
                                <tr>
                                  <td width="45%">
                                    <li>Remove the 15 pages limit;</td>
                                  <td width="10%">&nbsp;</td>
                                  <td width="45%">
                                    <li>Create unlimited flipbooks;</td>
                                </tr>
                                <tr>
                                  <td width="45%">
                                    <li>Set flipbooks as private;</td>
                                  <td width="10%">&nbsp;</td>
                                  <td width="45%">
                                    <li>Download to work offline.</td>
                                </tr>
                              </table>


                          </p>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                </td>
              </tr>

            </tbody>
          </table>
          <tr>
            <td align="center" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                  <tr>
                    <td align="center" style="font-size: 10px;  font-family: Roboto, Arial, sans serif;" valign="top">
                      <p style="color: #686868; margin: 25px 0 0;">
                        Copyright &copy; FlipSnack, All rights reserved.</p>
                      <p style="color: #8b8b8b; margin: 0 0 5px;">
                        <b>Our mailing address: 6665 Vernmoor Drive, Troy, MI 48098 - USA</b></p>
                      <p style="color: #686868; margin: 20px 0 0;">
                        You are receiving this email because you have registered on FlipSnack | <a href="http://www.snacktools.com/my-account/unsubscribe.html?email={email}&amp;pass={password}">Unsubscribe</a></p>
                      <span style="color:rgb(20, 29, 33); font-family:Roboto, Arial, sans serif; font-size:11px; -webkit-border-horizontal-spacing:1px; -webkit-border-vertical-spacing:1px;">{counter}</span></td>
                  </tr>
            </td>
          </tr>
          </tbody>
          </table>
        </td>
      </tr>

    </tbody>
  </table>
  </td>
  </tr>

  </tbody>
  </table>
</body>

</html>

/*Downloaded from https://www.codeseek.co/pupex_calin/flipsnack-bf-followup-JbNpqM */
    


/*Downloaded from https://www.codeseek.co/pupex_calin/flipsnack-bf-followup-JbNpqM */
    

Comments