A Pen by lio

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  lio</title>
  
  
  
  
  
</head>

<body>

  <!-- Module 23 -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="moduleContainer">
 <tbody>
  <tr>
   <td align="center" style="padding: 0px 20px;">
   <table width="540" cellspacing="0" cellpadding="0" border="0" class="container">
    <tbody>
     <tr>
      <td colspan="2" style="padding-bottom: 15px;" class="photo">
      <a href="http://www.starcasino.it/" target="_blank" style="display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; color: #37afdd;"> <img width="540" height="175" src="http://image.news.starcasino.it/lib/fe9515707362077870/m/1/540x175_CasinoBonus.gif" alt="Module 23 Image 1" style="display: block; border: 0px none; border-radius: 4px;" /> </a>
      </td>
     </tr>
     <tr>
      <td colspan="2" align="center" style="padding-bottom: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 25px; line-height: 25px; color: #5e5e5e;">
      Module 23 title
      </td>
     </tr>
     <tr>
      <td colspan="2" align="left" style="padding-bottom: 25px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0px; font-size: 13px; color: #5e5e5e;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in tempus mi. Sed porttitor placerat augue, eget porttitor mauris placerat facilisis. Donec ultrices sem ut ligula mattis, eu porttitor nulla varius. Quisque semper neque at ex elementum efficitur. Vestibulum consectetur sit amet ante et porta. Nam interdum ex tempus venenatis sagittis. 
      </td>
     </tr>
     <tr>
      <td valign="top" class="drop columnbottom" style="padding-right: 15px;">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
       <tbody>
        <tr>
         <td valign="top" class="photo">
         <a href="http://www.starcasino.it/" target="_blank" style="display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; color: #37afdd;"> <img width="260" height="150" src="http://image.news.starcasino.it/lib/fe9515707362077870/m/1/Spinatagrande440.jpg" alt="Module 23 Image 2" style="display: block; border: 0px none;" class="imageScale1" /> </a>
         </td>
        </tr>
        <tr>
         <td style="padding: 15px 0px;">
         <a href="http://www.starcasino.it/" target="_blank" style="display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; color: #37afdd;"> <img width="260" height="150" src="http://image.news.starcasino.it/lib/fe9515707362077870/m/1/Spinatagrande440.jpg" alt="Module 23 Image 3" style="display: block; border: 0px none;" class="imageScale1" /> </a>
         </td>
        </tr>
       </tbody>
      </table>
      </td>
      <td valign="top" align="left" class="drop columntop">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
       <tbody>
        <tr>
         <td valign="top" class="photo">
         <a href="http://www.starcasino.it/" target="_blank" style="display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; color: #37afdd;"> <img width="260" height="150" src="http://image.news.starcasino.it/lib/fe9515707362077870/m/1/Spinatagrande440.jpg" alt="Module 23 Image 4" style="display: block; border: 0px none;" class="imageScale1" /> </a>
         </td>
        </tr>
        <tr>
         <td style="padding: 15px 0px 25px;">
         <a href="http://www.starcasino.it/" target="_blank" style="display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; text-decoration: none; color: #37afdd;"> <img width="260" height="150" src="http://image.news.starcasino.it/lib/fe9515707362077870/m/1/Spinatagrande440.jpg" alt="Module 23 Image 5" style="display: block; border: 0px none;" class="imageScale1" /> </a>
         </td>
        </tr>
       </tbody>
      </table>
      </td>
     </tr>
     <tr>
      <td colspan="2" align="center" style="height: 0px; font-size: 0px; border-top-width: 0px; border-top-style: solid; border-top-color: #dec3af;">&nbsp;
      </td>
     </tr>
    </tbody>
   </table>
   </td>
  </tr>
 </tbody>
</table>
<!-- END Module 23 -->

                  <!-- Module 03 -->
                  <table width="100%" cellspacing="0" cellpadding="0" border="0" class="moduleContainer">
                    <tr>
                      <td align="center" style="padding: 0px 20px;">
                        <table width="540" cellspacing="0" cellpadding="0" border="0" class="container">
                          <tr>
                            <td style="padding-bottom: 20px;  font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 25px; line-height: 25px; color: #5E5E5E;">
                              Video heading
                            </td>
                          </tr>
                          <tr>
                            <td style="padding-bottom: 25px;">
                              <table cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td valign="top" style="padding-right: 20px;">
                                    <a href="http://www.starcasino.it/en/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color: #37AFDD">
                                    
                                    <img width="70" height="70" border="0" src="http://image.email.betsson.com/lib/fe941570716d007574/m/1/BS-140x140-playbutton.png" alt="Play video" style="display: block;" />
                                    
                                    </a>
                                  </td>
                                  <td valign="top" style="padding-bottom: 20px; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E;">
                                    Here's something everybody should like, free vectors! This oack includes 120+ <a style="text-decoration: underline; color: #37AFDD;" href="#">other elements.</a>
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="height:0; font-size: 0; border-top: 0px solid #DEC3AF;">&nbsp;
                              
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- END Module 03 -->
                  <!-- Module 09 -->
                  <table width="100%" cellspacing="0" cellpadding="0" border="0" class="moduleContainer">
                    <tr>
                      <td align="center" style="padding: 0px 20px;">
                        <table width="540" cellspacing="0" cellpadding="0" border="0" class="container">
                          <tr>
                            <td>
                              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td valign="top" align="left">
                                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                      <tr>
                                        <td valign="top" style="padding-right: 20px;" class="drop">
                                          <table cellspacing="0" cellpadding="0" border="0" class="container">
                                            <tr>
                                              <td class="photo">
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color:#37AFDD"> <img width="165" height="105" style="display: block; border: 0px none; border-radius: 4px;" alt="Module 09 Image 1" src="http://image.email.betsson.com/lib/fe941570716d007574/m/1/other_campaigns_image_03.jpg" class="imageScale3" /> </a>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td valign="top" width="165" height="160" style="padding-top: 20px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;" class="boxScale3">
                                                Module 09 copy 1. Here's something everyone should like, free vectors! This pack includes 120+ hand-drawn arrows and other elements.
                                              </td>
                                            </tr>
                                            <tr>
                                              <td style="padding: 15px 0px 25px;">
                                                <!-- CTA button -->
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#37AFDD">
                                                <table border="0" cellpadding="0" cellspacing="0" class="container">
                                                  <tr>
                                                    <td width="165" style="font-family:Helvetica, Arial, sans-serif; font-size:26px; font-weight: bold; color:#FFFFFF; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; padding: 8px 18px; background-color:#37AFDD" align="center">
                                                      <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#FFFFFF"> Play Now! </a>
                                                    </td>
                                                  </tr>
                                                </table>
                                                </a>
                                                <!-- END CTA button -->
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                        <td valign="top" class="drop" style="padding-right: 20px;">
                                          <table cellspacing="0" cellpadding="0" border="0" class="container">
                                            <tr>
                                              <td class="photo">
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color:#37AFDD"> <img width="165" height="105" style="display: block; border: 0px none; border-radius: 4px;" alt="Module 09 Image 2" src="http://image.email.betsson.com/lib/fe941570716d007574/m/1/other_campaigns_image_03.jpg" class="imageScale3" /> </a>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td valign="top" width="165" height="160" style="padding-top: 20px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;" class="boxScale3">
                                                Module 09 copy 2. Here's something everyone should like, free vectors! This pack includes 120+ hand-drawn arrows and other elements. I even snuck in some hand-drawn RSS logos.
                                              </td>
                                            </tr>
                                            <tr>
                                              <td style="padding: 15px 0px 25px;">
                                                <!-- CTA button -->
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#37AFDD">
                                                <table border="0" cellpadding="0" cellspacing="0" class="container">
                                                  <tr>
                                                    <td width="165" style="font-family:Helvetica, Arial, sans-serif; font-size:26px; font-weight: bold; color:#FFFFFF; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; padding: 8px 18px; background-color:#37AFDD" align="center">
                                                      <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#FFFFFF"> Play Now! </a>
                                                    </td>
                                                  </tr>
                                                </table>
                                                </a>
                                                <!-- END CTA button -->
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                        <td valign="top" class="drop">
                                          <table cellspacing="0" cellpadding="0" border="0" class="container">
                                            <tr>
                                              <td class="photo">
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color:#37AFDD"> <img width="165" height="105" style="display: block; border: 0px none; border-radius: 4px;" alt="Module 09 Image 3" src="http://image.email.betsson.com/lib/fe941570716d007574/m/1/other_campaigns_image_03.jpg" class="imageScale3" /> </a>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td valign="top" width="165" height="160" style="padding-top: 20px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;" class="boxScale3">
                                                Module 09 copy 3. Here's something everyone should like, free vectors!
                                              </td>
                                            </tr>
                                            <tr>
                                              <td style="padding: 15px 0px 25px;">
                                                <!-- CTA button -->
                                                <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#37AFDD">
                                                <table border="0" cellpadding="0" cellspacing="0" class="container">
                                                  <tr>
                                                    <td width="165" style="font-family:Helvetica, Arial, sans-serif; font-size:26px; font-weight: bold; color:#FFFFFF; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; padding: 8px 18px; background-color:#37AFDD" align="center">
                                                      <a href="http://www.starcasino.it/" target="_blank" style="display:block; text-decoration:none; color:#FFFFFF"> Play Now! </a>
                                                    </td>
                                                  </tr>
                                                </table>
                                                </a>
                                                <!-- END CTA button -->
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="height:0; font-size: 0; border-top: 0px solid #DEC3AF;">&nbsp;
                              
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- END Module 09 -->

                  <!-- Module 11 -->
                  <table width="100%" cellspacing="0" cellpadding="0" border="0" class="moduleContainer">
                    <tr>
                      <td align="center" style="padding: 0px 20px;">
                        <table width="540" cellspacing="0" cellpadding="0" border="0" class="container">
                          <tr>
                            <td style="padding-bottom: 25px;">
                              <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#EFEEEC" style="background-color: #EFEEEC;">
                                <tr>
                                  <td style="padding: 10px 0px 0px 10px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #000000; color: #1197D4;">
                                    Here is how to claim you free bet:
                                  </td>
                                </tr>
                                <tr>
                                  <td align="left" style="padding-right: 10px;">
                                    <ol style="font-family: Helvetica, Arial, sans-serif; text-align: left; line-height: 17px; font-size: 15px; color: #000000;">
                                      <li>Choose the football matches you prefer on you coupon</li>
                                      <li>Tick the box to claim your free bet and confirm the bet</li>
                                    </ol>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="padding: 0px 0px 10px 10px; font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #000000;">
                                    If you loose we will refund your money.
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="height:0; font-size: 0; border-top: 0px solid #DEC3AF;">&nbsp;
                              
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- END Module 11 -->

                  <!-- Module 14 -->
                  <table width="100%" cellspacing="0" cellpadding="0" border="0" class="moduleContainer">
                    <tr>
                      <td align="center" class="mobilePad3" style="padding: 0px 20px;">
                        <table width="540" cellspacing="0" cellpadding="0" border="0" class="container">
                          <tr>
                            <td valign="top" class="drop columnbottom" style="padding-right: 20px; padding-bottom: 25px;">
                              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td valign="top" style="padding-bottom: 15px;" class="photo">
                                    <a href="http://www.starcasino.it/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color:#37AFDD"> <img width="260" height="150" src="http://image.email.betsson.com/lib/fe941570716d007574/m/1/casino.jpg" alt="Module 14 Image 1" style="display: block; border: 0px; border-radius: 4px;" class="imageScale1" /> </a>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="padding-bottom: 10px; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E;" align="left">
                                    <!-- Promo 1 title -->
                                    <a style="font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration: none;" href="http://www.starcasino.it/en/">Get your &euro;200 in Casino bonuses!</a>
                                    <!-- END Promo 1 title -->
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top" height="120" style="font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;" class="content boxScale1">
                                    <!-- Promo 1 copy -->
                                    <p style="font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;">
                                      Module 14 copy 1. Why visit Las Vegas when you have the best online casinos right here? Double your first deposit and discover a world of excitement with a &euro;200 welcome package!
                                    </p>
                                    <!-- END Promo 1 copy -->
                                  </td>
                                </tr>
                              </table>
                            </td>
                            <td valign="top" align="left" class="drop columntop">
                              <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                  <td valign="top" style="padding-bottom: 15px;" class="photo">
                                    <a href="http://www.starcasino.it/" target="_blank" style="display:block; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration:none; color:#37AFDD"> <img width="260" height="150" src="http://image.email.betsson.com/lib/fe8c15707363037a72/m/1/sportsbook.jpg" alt="Module 14 Image 2" style="display: block; border: 0px; border-radius: 4px;" class="imageScale1" /> </a>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="padding-bottom: 10px; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E;" align="left">
                                    <!-- Promo 2 title -->
                                    <a style="font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size: 17px; line-height: 22px; color: #5E5E5E; text-decoration: none;" href="http://www.starcasino.it/en/">Crazy about Odds? Here's &euro;25 for ya'!</a>
                                    <!-- END Promo 2 title -->
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top" height="120" style="font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;" class="content boxScale1">
                                    <!-- Promo 2 copy -->
                                    <p style="font-family: Helvetica, Arial, sans-serif; line-height: 18px; text-align: left; margin: 1em 0; font-size: 13px; color: #5E5E5E;">
                                      Module 14 copy 2. You're getting our 50% up to &euro;25 Sports Bonus on your first deposit. You'll also get the sharpest odds, Live Betting, and a wicked Livestream.
                                    </p>
                                    <!-- END Promo 2 copy -->
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="height:0; font-size: 0; border-top: 0px solid #DEC3AF;" colspan="2">&nbsp;
                              
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!-- END Module 14 -->
  
  

</body>

</html>

Comments