Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <style>
  .price {
    font-family: 'Kanit', sans-serif !important;
  }

  .price {
    font-family: 'Kanit', sans-serif !important;
  }

  body {
    font-family: sans-serif;
    font-size: 14px;
  }

  .ref-no {
    background:  !important;
  }

  table,
  tr,
  td {
    border-collapse: collapse;
  }

  .coverage-table {
    width: 400px !important;
  }

  body {
    width: 100% !important;
    margin: 0;
    padding: 0;
  }
</style>

<center>
  <table align=center border=0 cellpadding=0 cellspacing=0 width="100%" id=bodyTable style="height:100%;background-color:#FAFAFA;">
    <tbody>
      <tr class=keyboardFocusClass>
        <td align=center valign=top id=bodyCell style="padding:5px 8px 10px 8px;">

          <table border=0 cellpadding=0 cellspacing=0 width="100%" class=templateContainer style="max-width:600px;">

            <tbody>
              <tr>
                <td valign=top id=templatePreheader>

                  <table border=0 cellpadding=0 cellspacing=0 width="100%">
                    <tbody>
                      <tr>
                        <td valign=top>

                          <table align=left border=0 cellpadding=0 cellspacing=0 style="max-width:384px;" width="100%">
                            <tbody>
                              <tr>
                                <td valign=top style="padding:5px 0px 9px 5px;" class=keyboardFocusClass>
                                  <div>
                                    <span style="margin:0;padding:0;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:left;">Almost there!</span></div>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <table align=left border=0 cellpadding=0 cellspacing=0 style="max-width:180px;" width="100%" class=columnContainer>
                            <tbody>
                              <tr class=keyboardFocusClass>
                                <td valign=top>
                                  <div>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>

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

                </td>
              </tr>

              <tr>
                <td height=10 bgcolor="#29579b"></td>
              </tr>
              <tr>
                <td valign=top id=templateHeader style="background:#FFFFFF;padding:30px 0px 15px 0px;" align=center>

                  <img src="https://dxbpqg5e40reb.cloudfront.net/frank-Logo.png" width=230 style="width:230px;height:auto;display:block;" class="templateImage logo-image" alt=Frank-logo.png title="Frank.co.th logo">

                </td>
              </tr>

              <tr>
                <td width="100%" valign=top id=templateBody style="background:#FFFFFF;">
                  <table id=reference-block border=0 cellpadding=0 cellspacing=0 width="100%" style="min-width:100%; width: 100% !important;">
                    <tbody>
                      <tr>
                        <td width="100%" bgcolor="#00d0bc" style="padding:5px 0px 4px 0px;width:100%;">
                          <div class="ref-no keyboardFocusClass" style="width:100%;background:#00d0bc;min-height:30px;color:#ffffff;text-align:center;">
                            <span style="color:#fff;margin:0;padding:0;font-size:14px !important;line-height:100% !important;font-family:Helvetica;">Quote reference number</span>
                            <p style="color:#fff;margin:5px 0px 5px 0px;padding:0;font-size:19px;font-weight:bold;line-height:100%;font-family:Helvetica;" class=""> FR-TH-5A55D6B75E539 </p>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="100%" border=0 cellpadding=0 cellspacing=0 bgcolor="#29579b" style="min-width:100%;">
                    <tbody>
                      <tr>
                        <td border=0 cellpadding=0 cellspacing=0 style="padding:0px 0px 50px;">
                          <table border=0 cellpadding=0 cellspacing=0 id=header-travel-plan width="100%" style="min-width:100%;">
                            <tbody>
                              <tr class=header-title>
                                <td align=center border=0 cellpadding=0 cellspacing=0 style="padding:35px 10px 17px 10px;">
                                  <h2 style="line-height:120%;margin:0;padding:0;color:#ffffff;font-family:Helvetica;font-size:24px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:center;">Your policy is being processed and will be ready shortly!</h2>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <table width="100%" border=0 cellpadding=0 cellspacing=0 style="min-width:100%; width:100% !important;">
                            <tr class="header-plan-card">
                              <td height="10" style="min-width:20px !important"></td>

                              <td width="266" style="width: 266px !important; min-width:266px;">

                                <table width="100%" style="display:inline-block;background:#fff;border-top:5px solid #00d0bc;width:100%;border-radius:5px;margin:0px auto 5px;padding:0px; ">
                                  <tr>
                                    <td width="266" align="center" style="padding:0px 0px 65px;">
                                      <!-- Your content here -->
                                      <table width="100%" align="right" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
                                    <tr>
                                      <td  valign="bottom" style="padding:0px 0px 0px 20px;">
                                        <br style="line-height:40px;">
                                        <span style="display: inline-block; width: 100%; text-align: left; color: #29579b; line-height: 26px !important; font-weight: 600; font-size: 25px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; padding: 0; margin: 0 0;">Car Insurance</span>
                                      </td>

                                      <td width="35" align="right" valign="top" style="padding:10px 8px 5px 0px;">
                                        <img src="https://gallery.mailchimp.com/b57d36caa33f4e935e7516b30/images/52e7de35-9d94-4dcd-b5e3-5d158c036a97.png" width="48"  style=" width: 48px; display: inline-block; text-align:right;" >
                                      </td>
                                    </tr>
                                  </table>
                                  
                                  <table width="100%" align="center" style="width:100% !important; min-width:100%;">
                                    <tr>
                                      <td style="padding: 5px 0px 10px 20px;">
                                        <span style="display: inline-block; margin: 0 0; padding: 0; color: #29579b; font-size: 15px; font-weight: 600; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; line-height: 150%; text-align: left;">CTPL (Sedan / 4dr Pick-up)</span>
                                      </td>
                                    </tr>
                                  </table>
                                  
                                  <table width="100%" align="right" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
                                    <tr>
                                      <td valign="middle" style="text-align:left;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:3px 0 10px 20px;">

                                        <table width="100%" style="width:100% !important; min-width:100%;">
                                          <tr>
                                            <td style="padding:0px 0px 0px 0px;">
                                              <span style="font-size: 20px; font-weight:bold; color: #00d0bc; line-height:100%;">฿653.64 <span style="font-size:12px">per year</span></span>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                      
                                    </tr>
                                  </table>
                                  
                                  
                                  <table width="85%" style="height:auto;text-align:left;width:85% !important;min-width:85%;vertical-align:top;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;">
                                    <tr>
                                      <td width="40%" style="min-width:40%;vertical-align:top;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:3px 0 5px 0;">
                                        <span style="display: inline-block; width: 100%; color: #4f4f4f ; text-align: left; font-weight: bold; font-size: 14px; line-height: 130%; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; padding: 0; margin: 0;">Name</span>
                                      </td>
                                      <td width="60%" align="right" style="min-width:60%;vertical-align:top;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:3px 0 3px 0;">
                                        <span style="display: inline-block; width: 100%; text-align: right; color: #29579b; font-size: 14px ; line-height: 130% ; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; padding: 0; margin: 0;">Ice Surakrung</span>
                                      </td>
                                    </tr>
                                    
                                    <tr>
                                      <td width="40%" style="min-width:40%;vertical-align:top;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:3px 0 3px 0;">
                                        <span style="display: inline-block; width: 100%; color: #4f4f4f; text-align: left; font-weight: bold; font-size: 14px; line-height: 130%; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; padding: 0; margin: 0;">Start date</span>
                                      </td>
                                      <td width="60%" align="right" style="min-width:60%;vertical-align:top;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:3px 0 3px 0;">
                                        <span style="display: inline-block; width: 100%; text-align: right; color: #29579b; font-size: 14px; line-height: 130% ; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: Helvetica; padding: 0; margin: 0;"> 25 Oct 2018</span>
                                      </td>
                                    </tr>

                                  </table>
                                  <!-- Plan card  -->
                                </td>
                              </tr> 
                            </table>
                              </td>
                              <td height="10" style="min-width:20px !important"></td>
                            </tr>
                          </table>

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

                  <center>
                    <table width="100%" align=center style="min-width:100%;">
                      <tbody>
                        <tr>
                          <td align=center background="https://dxbpqg5e40reb.cloudfront.net/Travel/small-city-bg.png" bgcolor="#ffffff" valign=top height=115 style="background-repeat:no-repeat;background-position:center bottom;">

                            <p style="font-size:16px;text-align:center;color:#29579b;line-height:1.5em;max-width:400px;width:90%;margin:22px auto;padding-top:10px;">Thank you for insuring with <strong>Frank.co.th</strong>, your policy will be dispatched soon</p>

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

                  <table width=266 align=center style="min-width:266px;">
                    <tbody>
                      <tr class=keyboardFocusClass>
                        <td align=right style="padding:30px 0px 0px 0px;" class="">
                          <font color="#29579b" class=keyboardFocusClass>
                            <span style="font-size:13px;display:inline-block; color:#29579b;padding-right:5px;text-decoration-style:initial !important;text-decoration-color:initial !important;line-height:15px !important;" class=keyboardFocusClass><u><a href="https://www.frank.co.th/en/motorcycle-insurance/compulsory" style="color:#29579b;">See whats included in your plan</a></u></span></font>
                        </td>
                        <td width=40 align=left style="padding:30px 0px 0px 3px;"><img src="https://dxbpqg5e40reb.cloudfront.net/Travel/yellow-arrow-space.png" height=10 style="height:10px;margin-top:1px;" alt=972e9323-5c35-4b8e-bbb3-7a887be8ea37.png></td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="100%" style="min-width:100%;">
                    <tbody>
                      <tr class=keyboardFocusClass>
                        <td align=center style="padding:35px 10px 15px 10px;">
                          <p style="color:#29579b;font-size:15px;margin:0px;">If you need assistance, call us and we are happy to help!</p>
                        </td>
                      </tr>
                      <tr>
                        <td style="padding:0px 0px 0px 0px;">
                          <center>
                            <table align=center width="95%">
                              <tbody>
                                <tr>
                                  <td>
                                    <div style="margin:0 auto;text-align:center;">

                                      <span style="width:100%;display:inline-block;color:#29579b;font-size:15px;line-height:120%;font-weight:normal;vertical-align:top;margin:0;padding:0;font-family:Helvetica;">Call us on <br> <strong style="font-size:20px;color:#ffc12c;line-height:26px;">02-106-5800</strong> </span>
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </center>

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

                  <table width="30%" align=center style="min-width:30%;">
                    <tbody>
                      <tr>
                        <td style="border-bottom:1px solid #E5EBF3; padding: 25px 0px 0px;"></td>
                      </tr>
                    </tbody>
                  </table>

                  <table id=journey width="100%" align=center>
                    <tbody>
                      <tr>
                        <td align=center>

                          <h3 style="color:#29579b;font-size:18px;margin:35px 0 15px;padding:0;font-weight:bold;display:block;font-family:Helvetica;font-style:normal;line-height:150%;letter-spacing:normal;text-align:center;">What happens next?</h3>

                          <table align=center>
                            <tbody>
                              <tr>
                                <td  align="center" style="padding:12px 10px 45px 0px;">
                                  <a href=""><img width=190 src="https://dxbpqg5e40reb.cloudfront.net/CTPL/Motor-Journey-2.png"></a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="80%" align=center style="min-width:80%;">
                    <tbody>
                      <tr>
                        <td style="border-top:1px solid #E5EBF3;padding:15px 0px 10px 0px;"></td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="100%" align=center>
                    <tbody>
                      <tr>
                        <td>
                          <table align=center width=350>
                            <tbody>
                              <tr>
                                <td>
                                  <h3 style="color:#29579b;font-size:18px;margin-top:15px;margin-bottom:3px;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-weight:bold;display:block;font-family:Helvetica;font-style:normal;line-height:150%;letter-spacing:normal;text-align:center;">Useful links</h3>
                                  <ul style="max-width:350px;margin-top:10px;margin-bottom:45px;margin-right:auto;margin-left:auto;text-align:left;">
                                    <li style="line-height:150%;color:#29579b;">
                                      <a href="https://www.frank.co.th/en/terms" style="color:#29579b;font-size:14px !important;font-weight:normal;text-decoration:underline;">Terms and conditions<img width=11 src="https://dxbpqg5e40reb.cloudfront.net/Travel/yellow-arrow-space.png" alt=62e5c92b-b455-4ce9-8893-442e7dd91292.png></a>
                                    </li>
                                    <li style="line-height:150%;color:#29579b;">
                                      <a href="https://www.frank.co.th/blog/" style="color:#29579b;font-size:14px !important;font-weight:normal;text-decoration:underline;">Frank blog<img width=11 src="https://dxbpqg5e40reb.cloudfront.net/Travel/yellow-arrow-space.png" alt=62e5c92b-b455-4ce9-8893-442e7dd91292.png></a>
                                    </li>
                                    <li style="line-height:150%;color:#29579b;">
                                      <a href="https://www.frank.co.th/en/car-insurance/faq" style="color:#29579b;font-size:14px !important;font-weight:normal;text-decoration:underline;">Frequently asked questions<img width=11 src="https://dxbpqg5e40reb.cloudfront.net/Travel/yellow-arrow-space.png" alt=62e5c92b-b455-4ce9-8893-442e7dd91292.png></a>
                                    </li>
                                  </ul>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="33%" align=center>
                    <tbody>
                      <tr>
                        <td style="border-top:1px solid #E5EBF3;padding:10px 0px 10px 0px;"></td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="100%" align=center style="min-width:100%;">

                    <tbody>
                      <tr>
                        <td>

                          <table align=center width=350>

                            <tbody>
                              <tr>
                                <td style="padding:0px 0px 15px 0px;">
                                  <h3 style="color:#29579b;font-size:18px;margin-top:15px;margin-bottom:3px;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-weight:bold;display:block;font-family:Helvetica;font-style:normal;line-height:150%;letter-spacing:normal;text-align:center;">Our customers also buy</h3>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <table width="100%" align=center cellpadding=0 cellspacing=0 border=0>

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

                                <td width=533 align=center style="max-width:95%;">
                                  <table width="100%" align=center>
                                    <tbody>
                                      <tr>
                                        <td align=center>
                                          
                                          <a href="https://www.frank.co.th/en/car-insurance" style="display:inline-block;width:256px;">
                                              <img width=256 src="https://dxbpqg5e40reb.cloudfront.net/CTPL/Updated/Motor-Insurance.png" alt=4a7ab12c-57f1-49d9-ac73-6d1f8b633012.png></a>

                                          <a href="https://www.frank.co.th/en/car-insurance/ctpl-insurance" style="display:inline-block;width:256px;"> <img width=256 src="https://dxbpqg5e40reb.cloudfront.net/CTPL/Updated/MC-CTPL.png" style="background:white;" alt=2739b9ea-45fb-44d6-8a7f-bf0322b67c5a.png></a>
                                          
                                          
                                          
                                        </td>
                                      </tr>
                                      <tr>
                                        <td align=center>
                                          <a href="https://www.frank.co.th/en/travel-insurance" style="width:256px;"> <img width=256 src="https://dxbpqg5e40reb.cloudfront.net/CTPL/Updated/Travel-Insurance.png" style="background:white;" alt=0feb57d9-1108-438e-9e85-e6f3d2d8ccce.png></a>

                                          <img width=256 height=5 src="https://dxbpqg5e40reb.cloudfront.net/Travel/Transparent.png" alt=5bf5acd0-a541-4ffb-b91b-cf0d5c89bb62.png>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>

                                <td></td>
                              </tr>
                            </tbody>
                          </table>
                          <p style="color:#29579b;font-family:Helvetica;font-size:14px;line-height:100%;text-align:center;padding:0 5px 0 5px;margin:20px 0 0 0;">Extra protection at great prices!</p>

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

                  <table width="33%" align=center>
                    <tbody>
                      <tr>
                        <td style="border-bottom:1px solid #E5EBF3;padding:20px 0px 10px 0px;"></td>
                      </tr>
                    </tbody>
                  </table>

                  <table width="100%" align=center style="min-width:100%; width:100% !important;">
                    <tbody>
                      <tr>
                        <td align=center style="padding:0px 0px 15px 0px;">

                          <h3 style="color:#29579b;font-size:22px;margin:40px 0 15px;padding:0;font-weight:bold;display:block;font-family:Helvetica;font-style:normal;line-height:150%;letter-spacing:normal;text-align:center;">Get up to <span style="color:#00d0bc;">THB1000</span> of vouchers</h3>

                          <table>
                            <tbody>
                              <tr>
                                <td width=450 align=center style="max-width:85%;padding:0px 0px 15px 0px;">
                                  <span style="text-align:center;display:inline-block;padding-top:0;line-height:120%;padding-bottom:0;padding-right:5px;padding-left:5px;max-width:450px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;color:#29579b;font-family:Helvetica;font-size:14px;line-height:140%;"><strong>Refer your a friend</strong> and get up to ฿1000 worth of vouchers when they purchase a policy.</span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <table width="95%" style="min-width:95%; width: 95% !important;">
                            <tbody>
                              <tr>
                                <td background="https://dxbpqg5e40reb.cloudfront.net/referral-image.png" valign=top bgcolor="#1a3b8a" height=125 align=center style="min-width:85%;border-radius:0px 0px 10px 10px;">
                                  <p style="color:#FFFFFF;margin:25px 0px 5px 0px;">How to refer:</p>

                                  <div style="margin:0px 0px 0px 0px;">

                                    <center>
                                      <table align=center width="95%" style="width: 95% !important;">
                                        <tbody>
                                          <tr>
                                            <td>
                                              <div style="margin:0 auto;text-align:center;">
                                                <a href="https://www.frank.co.th/en/car-insurance/promotions/referral" style="line-height:46px;text-align:center;text-decoration:none;width:200px;" class=keyboardFocusClass>
                                              <img height="46 " src="https://dxbpqg5e40reb.cloudfront.net/Travel/see-instructions.png"></a>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </center>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>

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

                  <table width="100%" id="travel-usp" cellpadding="0" cellspacing="0" border="0" style="height:170px;min-width:100%; border-top:1px solid #f3f3f3; width:100% !important;">
                    <tr>
                      <td background="https://dxbpqg5e40reb.cloudfront.net/Travel/gray-background.png" valign="top" align="center" width="100%" style="padding:20px 0px 20px 0px; background-repeat: repeat-x;">

                        <table border="0" cellpadding="0" cellspacing="0" align="center" width="280" style="width:280px !important; max-width:280px;min-width:280px;margin:0 auto;text-align:left;color:#29579b;font-weight:bold;">

                          <tr>
                            <td align="center" style="padding:0px 0px 0px 0px;margin:0;">
                              <img src="https://dxbpqg5e40reb.cloudfront.net/Th-images/Most-Trusted.png" width="45" height="45" style="display:inline-block; height:45px; width:45px;" alt="Most-Trusted.png"></td>
                            <td style="line-height:120%;padding:0px 0px 0px 8px;">Reliable and trusted insurance provider</td>
                          </tr>

                          <tr>
                            <td align="center" style="padding:8px 0px 8px 0px;margin:0;">
                              <img src="https://dxbpqg5e40reb.cloudfront.net/CTPL/fast-quote.png" width="45" height="45" style="display:inline-block;  height:45px; width:45px;">
                            </td>
                            <td valign="middle" style="padding:0px 0px 0px 8px;margin:0;">
                              <span style="vertical-align: middle;">Fast & easy claims, 24/7 support</span>
                            </td>
                          </tr>

                          <tr>
                            <td align="center" style="padding:0px 0px 0px 0px;margin:0;">
                              <img src="https://dxbpqg5e40reb.cloudfront.net/CTPL/car-services.png" width="45" height="45" style="display:inline-block; height:45px; width:45px;"></td>
                            <td style="padding:0px 0px 0px 8px;">Top service and quality repairs <span style="font-weight:normal;font-size:12px;">(plans with repair services)</span></td>
                          </tr>
                        </table>

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

                  <table id=footer-section width="100%">
                    <tbody>
                      <tr>
                        <td style="padding:35px 0px 20px 0px;">

                          <table style="border-collapse:collapse;" width="100%">
                            <tbody>
                              <tr>
                                <td style="" width="100%">
                                  <table width=240 align=center>
                                    <tbody>
                                      <tr>
                                        <td width=37 align=center>
                                          <a style="color:#237a91;font-weight:normal;text-decoration:underline;" href="https://www.facebook.com/www.frank.co.th/" class=keyboardFocusClass> <img width=32 height=32 style="height:auto;display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th Facebook" src="https://dxbpqg5e40reb.cloudfront.net/Footer-Social-Media/fb-icon.png" alt="Frank.co.th Facebook"></a>
                                        </td>

                                        <td width=37 align=center>
                                          <a style="color:#237a91;font-weight:normal;text-decoration:underline;" href="https://plus.google.com/u/1/+frankthailand" class=keyboardFocusClass> <img width=32 height=32 style="height:auto;display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th Google+" src="https://dxbpqg5e40reb.cloudfront.net/Footer-Social-Media/gplus-icon.png" alt="Frank.co.th Google+"></a>
                                        </td>

                                        <td width=37 align=center>
                                          <a style="color:#237a91;font-weight:normal;text-decoration:underline;" href="https://twitter.com/frank_thailand" class=keyboardFocusClass><img width=32 style="height:auto;display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th Twitter" src="https://dxbpqg5e40reb.cloudfront.net/Footer-Social-Media/twtr-icon.png" alt="Frank.co.th Twitter"></a>
                                        </td>
                                        <td width=37 align=center>
                                          <a style="color:#237a91;font-weight:normal;text-decoration:underline;" href="https://www.youtube.com/channel/UCexZONYGNiVhdjCPkHD84mQ" class=keyboardFocusClass> <img width=32 style="height:auto;display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th Youtube" src="https://dxbpqg5e40reb.cloudfront.net/Footer-Social-Media/yt-icon.png" alt="Frank.co.th Youtube"></a>
                                        </td>

                                        <td width=37 align=center>
                                          <a style="color:#237a91;font-weight:normal;text-decoration:underline;" href="https://www.instagram.com/frank.co.th/" class=keyboardFocusClass> <img width=32 style="height:auto;display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th Instagram" src="https://dxbpqg5e40reb.cloudfront.net/Footer-Social-Media/ig-icon.png" alt="Frank.co.th Instagram"></a>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td style="padding:0px 10px 15px 10px;">
                                  <p class=company-footer style="width:90%;max-width:350px;color:#27579b;font-size:12px;margin:20px auto 0;padding:0;font-family:Helvetica;line-height:100%;text-align:center;">OIC license for non-life insurance registration number : 00017/2559 • DBD registration number 0105559056161</p>
                                </td>
                              </tr>
                              <tr>
                                <td style="padding:0px 0px 25px 0px;">

                                  <table width="100%">
                                    <tbody>
                                      <tr>
                                        <td align=right width="40%"><img width=89 style="width:89px;height:auto;display:inline-block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title=geo-trust-security src="https://dxbpqg5e40reb.cloudfront.net/geo-trust-logo.png"
                                            alt=geo-trust-security>
                                        </td>

                                        <td align=center width="20%"><img width=88 style="width:88px;height:auto;display:inline-block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="OIC compliant" src="https://dxbpqg5e40reb.cloudfront.net/oic-logo.png"
                                            alt="OIC compliant">
                                        </td>

                                        <td align=left width="40%"><img width=69 style="width:69px;height:auto;display:inline-block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="DBD registered" src="https://dxbpqg5e40reb.cloudfront.net/dbd-logo.png"
                                            alt="DBD registered">
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td style="padding:0px 0px 0px 0px;">
                                  <div style="text-align:center;">

                                    <table width="80%" align=center>
                                      <tbody>
                                        <tr>
                                          <td style="border-top:1px solid #E5EBF3;padding:0px 0px 23px 0px;"></td>
                                        </tr>
                                      </tbody>
                                    </table><img class=footer-logo width=130 style="margin:0px auto 2px;width:130px;height:auto;display:inline-block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" title="Frank.co.th logo" src="https://dxbpqg5e40reb.cloudfront.net/frank-Logo.png"
                                      alt=Frank-logo.png>
                                    <br><span style="display:inline-block;width:100%;font-size:10px;color:#29579b;margin:0px;padding:0px;font-family:Helvetica;line-height:100%;text-align:center;">Fast, Simple and Yours</span>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                </td>

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

        </td>

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

</center>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console