Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<![endif]-->
    <!--[if gte mso 9]><xml>
    <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
</xml><![endif]-->
    <title></title>
    <style type="text/css">
        div, p, a, li, td {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
        body {min-width:100% !important; Margin:0; padding:0;}
        #outlook a {padding:0;}
        .ReadMsgBody {width:100%;}
        .ExternalClass {width:100%;}
        .ExternalClass * {line-height:110%;}
        img {display:block; line-height:100%; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;}
        table {border-collapse:collapse !important; border-spacing:0; mso-table-lspace:0pt; mso-table-rspace:0pt;}
        table td {padding:0; border-collapse:collapse;}
        @media only screen and (min-device-width:320px) and (max-device-width:1024px) {
            a[href^="tel"], a[href^="sms"], a {color:inherit !important; cursor:default !important; text-decoration:none !important;}
        }
        @media only screen and (max-width:480px) {
            img.img100pc {width:100% !important; height:auto !important;}
            img.img40 {width:40px !important; height:auto !important;}
            table.hide, td.hide, span.hide, br.hide {display:none !important;}
            table.w100pc {width:100% !important;}
            table.w290 {width:290px !important;}
            td.h20 {height:20px !important;}
            td.hautopadh14 {height:auto !important; padding-left:14px !important; padding-right:14px !important;}
            td.padh14 {padding-left:14px !important; padding-right:14px !important;}
            td.padt20 {padding-top:20px !important;}
            td.padt20txtcenter {text-align:center !important; padding-top:20px !important;}
            td.padv20 {padding-top: 20px !important; padding-bottom:20px !important;}
            td.txtcenter {text-align:center !important;}
        }
    </style>
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css" media="all">
        table {border-collapse:collapse;}
    </style>
    <![endif]-->
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ffffff" style="min-width:100% !important; Margin:0; padding:0;">
<!--Full width table start-->
<table width="100%" border="0" align="center" bgcolor="#ffffff"  cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="top"><table width="700" border="0" align="center" cellpadding="0" style="table-layout:fixed;" cellspacing="0" class="w100pc">
            <tr>
                <td class="hide" height="1"  bgcolor="#ffffff" style="line-height:1px;min-width:700px;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/spacer.png" height="1" width="700" style="max-height:1px;min-height:1px;display:block;width:700px;min-width:700px" border="0" /></td>
            </tr>
            <tr>
                <td height="40" bgcolor="#ffffff" class="padh14"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="70" class="hide">&nbsp;</td>
                        <td class="padv20" ><table  border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                            <tr>
                                <td height="40" class="h20" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:13px; color:#000000">Snippet text</td>
                            </tr>
                        </table> <table  border="0" align="right" cellpadding="0" cellspacing="0" class="w100pc">
                            <tr>
                                <td height="40" align="center" class="h20" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:13px; color:#000000">Can't see this email? <a href="#SPCLICKTOVIEW" xt="SPCLICKTOVIEW" target="_blank" name="CCTV_html" style="text-decoration:underline; color:#000000;">View online</a></td>
                            </tr>
                        </table>
                        </td>
                        <td width="70" class="hide">&nbsp;</td>
                    </tr>
                </table></td>
            </tr>
            <tr>
                <td bgcolor="#000916"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="40" class="h20">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="70">&nbsp;</td>
                                <td><table width="160" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                                    <tr>
                                        <td align="center"><a href="http://" target="_blank" name="TrackedLink_SPCLICK"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/logohere.png" width="160" height="21" alt="Logo Here" style="display:block;" border="0" /></a></td>
                                    </tr>
                                </table> <table  border="0" align="right" cellpadding="0" cellspacing="0" class="w100pc">
                                    <tr>
                                        <td height="21" align="center"  class="padt20txtcenter" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:13px; color:#ffffff;"><a href="http://" target="_blank" style="text-decoration:none; color:#ffffff;">Link 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://" target="_blank" style="text-decoration:none; color:#ffffff;">&nbsp;Link 2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://" target="_blank" style="text-decoration:none; color:#ffffff;">Link 3</a></td>
                                    </tr>
                                </table>

                                </td>
                                <td width="70">&nbsp;</td>
                            </tr>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="40" class="h20">&nbsp;</td>
                    </tr>
                </table></td>
            </tr>
            <tr>
                <td align="center"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><table width="350" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                            <tr>
                                <td align="left"><img src="https://dummyimage.com/350x300/ccc/fff.png" class="img100pc" width="350" height="300" alt="Banner" style="display:block;" border="0" spname="layouts_images_banner_5.png"  xt="SPIMAGE" contentid="64b78f19-15d5fe1fd94-3f3d5eceea4051b7c82d96ba93c1b04e" /></td>
                            </tr>
                        </table> <!--[if gte mso 9]>
                            </td>
                            <td valign="top">
                            <![endif]--> <table width="340" border="0" align="right" cellpadding="0" cellspacing="0" class="w100pc">
                                <tr>
                                    <td width="19" class="hide">&nbsp;</td>
                                    <td height="300" valign="top" class="hautopadh14"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="59" class="h20">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; font-weight:bold; text-transform:uppercase; color:#59afe1;">In this month's issue:</td>
                                        </tr>
                                        <tr>
                                            <td height="5" style="line-height:5px; font-size:5px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td height="1" style="line-height:1px; font-size:1px;" bgcolor="#59afe1">&nbsp;</td>
                                                </tr>
                                            </table></td>
                                        </tr>
                                        <tr>
                                            <td height="20">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6" valign="middle" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/dot.png" width="6" height="9" style="display:block;" border="0"  /></td>
                                                    <td width="10">&nbsp;</td>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#000916;"><a href="http://" target="_blank" style="text-decoration:underline; color:#000916;">Lorem ipsum donot sit</a></td>
                                                </tr>
                                            </table></td>
                                        </tr>
                                        <tr>
                                            <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6" valign="middle" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/dot.png" width="6" height="9" style="display:block;" border="0"></td>
                                                    <td width="10">&nbsp;</td>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#000916;"><a href="http://" target="_blank" style="text-decoration:underline; color:#000916;">Latest News</a></td>
                                                </tr>
                                            </table></td>
                                        </tr>
                                        <tr>
                                            <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6" valign="middle" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/dot.png" width="6" height="9" style="display:block;" border="0"></td>
                                                    <td width="10">&nbsp;</td>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#000916;"><a href="http://" target="_blank" style="text-decoration:underline; color:#000916;">Hot Topics</a></td>
                                                </tr>
                                            </table></td>
                                        </tr>
                                        <tr>
                                            <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6" valign="middle" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/dot.png" width="6" height="9" style="display:block;" border="0"></td>
                                                    <td width="10">&nbsp;</td>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#000916;"><a href="http://" target="_blank" style="text-decoration:underline; color:#000916;">Popular Post</a></td>
                                                </tr>
                                            </table></td>
                                        </tr>
                                        <tr>
                                            <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6" valign="middle" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/dot.png" width="6" height="9" style="display:block;" border="0"></td>
                                                    <td width="10">&nbsp;</td>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#000916;"><a href="http://" target="_blank" style="text-decoration:underline; color:#000916;">Lorem ipsum donot sit</a></td>
                                                </tr>
                                            </table></td>
                                        </tr>

                                        <tr>
                                            <td height="1" style="line-height:1px; font-size:1px;" class="h20">&nbsp;</td>
                                        </tr>
                                    </table></td>
                                    <td width="19" class="hide">&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                </td>
            </tr>
            <tr>
                <td bgcolor="#59afe1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="60" class="h20">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="68" class="hide">&nbsp;</td>
                                <td class="padh14">  <table width="260" border="0" align="right" cellpadding="0" cellspacing="0" class="w100pc">
                                    <tr>
                                        <td align="left"><img src="https://dummyimage.com/260x200/1884c3/fff.png" width="260" height="200" alt="Image" style="display:block;" border="0" spname="layouts_images_img_1_5.png"  xt="SPIMAGE" contentid="64b78f19-15d5fe20907-3f3d5eceea4051b7c82d96ba93c1b04e" /></td>
                                    </tr>
                                </table> <table width="265" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                                    <tr>
                                        <td align="left" class="padt20" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; text-transform:uppercase; color:#ffffff; font-weight:bold;">Lorem ipsum dolor sit amet</td>
                                    </tr>
                                    <tr>
                                        <td height="20">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td align="left"><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="1" bgcolor="#ffffff" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est. Fusce dictum sem at condimentum porttitor. Integer varius condimentum enim sed pharetra.</td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td><table width="156" border="0" align="left" style="border-radius:2px; background-color:#000916;" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="38" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase;" ><a href="http://" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:38px;" xt="SPCLICK" name="TrackedLink_SPCLICK_10">read more</a></td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                </table>
                                </td>
                                <td width="71" class="hide">&nbsp;</td>
                            </tr>
                        </table></td>
                    </tr>
                    <tr>
                        <td height="60" class="h20">&nbsp;</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="60" class="h20">&nbsp;</td>
                    </tr>
                    <tr>
                        <td ><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="70" class="hide">&nbsp;</td>
                                <td><table width="275" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                                    <tr>
                                        <td class="padh14"><table width="275" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                                            <tr>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td width="25"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/newspic.png" width="25" height="25" alt="Lastest News" style="display:block;" border="0"></td>
                                                        <td width="10">&nbsp;</td>
                                                        <td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; text-transform:uppercase; color:#59afe1; font-weight:bold;">latest news</td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left"><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="1" bgcolor="#59afe1" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="20">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916; font-weight:bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                                            </tr>
                                            <tr>
                                                <td height="17" style="line-height:17px; font-size:17px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                            </tr>
                                            <tr>
                                                <td height="20">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td><table width="156" border="0" align="left" style="border-radius:2px; background-color:#59afe1;" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="38" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase;" ><a href="http://" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:38px;" xt="SPCLICK" name="TrackedLink_SPCLICK_11">read more</a></td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="30">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left"><table width="259" border="0" align="left" cellpadding="0" cellspacing="0" class="w100pc">
                                                    <tr>
                                                        <td height="1" bgcolor="#ebebeb" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="35">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td width="25"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/comts.png" width="25" height="25" alt="hot topics" style="display:block;" border="0"/></td>
                                                        <td width="10">&nbsp;</td>
                                                        <td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; text-transform:uppercase; color:#59afe1; font-weight:bold;">hot topics</td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="10" style="line-height:10px; font-size:10px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left"><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="1" bgcolor="#59afe1" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="20">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916; font-weight:bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                                            </tr>
                                            <tr>
                                                <td height="17" style="line-height:17px; font-size:17px;">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                            </tr>
                                            <tr>
                                                <td height="20">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td><table width="156" border="0" align="left" style="border-radius:2px; background-color:#59afe1;" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="38" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase;" ><a href="http://" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:38px;" xt="SPCLICK" name="TrackedLink_SPCLICK_12">read more</a></td>
                                                    </tr>
                                                </table></td>
                                            </tr>
                                            <tr>
                                                <td height="20">&nbsp;</td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                </table>
                                    <table width="260" border="0" align="right" bgcolor="#f7f7f7" cellpadding="0" cellspacing="0" class="w100pc">
                                        <tr>
                                            <td width="30" class="hide">&nbsp;</td>
                                            <td class="padh14" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td height="29">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                        <tr>
                                                            <td width="25"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/envopen.png" width="25" height="25" alt="popular post" style="display:block;" border="0" ></td>
                                                            <td width="10">&nbsp;</td>
                                                            <td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; text-transform:uppercase; color:#59afe1; font-weight:bold;">popular post</td>
                                                        </tr>
                                                    </table></td>
                                                </tr>
                                                <tr>
                                                    <td height="9" style="line-height:9px; font-size:9px;">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left"><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td height="1" bgcolor="#59afe1" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                                        </tr>
                                                    </table></td>
                                                </tr>
                                                <tr>
                                                    <td height="20">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                                </tr>
                                                <tr>
                                                    <td height="20">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#59afe1; text-decoration:underline; text-transform:uppercase;"><a href="http://" target="_blank" style="text-decoration:underline; color:#59afe1;" xt="SPCLICK" name="TrackedLink_SPCLICK_13">read more</a></td>
                                                </tr>
                                                <tr>
                                                    <td height="30">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td height="1" style="line-height:1px; font-size:1px;" bgcolor="#ebebeb">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td height="28">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                                </tr>
                                                <tr>
                                                    <td height="20">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left"  style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#59afe1; text-decoration:underline; text-transform:uppercase;"><a href="http://" target="_blank" style="text-decoration:underline; color:#59afe1;" xt="SPCLICK" name="TrackedLink_SPCLICK_14">read more</a></td>
                                                </tr>
                                                <tr>
                                                    <td height="30" >&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td height="1" style="line-height:1px; font-size:1px;" bgcolor="#ebebeb">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td height="30" >&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:20px; color:#000916;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                                </tr>
                                                <tr>
                                                    <td height="20">&nbsp;</td>
                                                </tr>
                                                <tr>
                                                    <td align="left"  style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#59afe1; text-decoration:underline; text-transform:uppercase;"><a href="http://" target="_blank" style="text-decoration:underline; color:#59afe1;" xt="SPCLICK" name="TrackedLink_SPCLICK_15">read more</a></td>
                                                </tr>
                                                <tr>
                                                    <td height="30" >&nbsp;</td>
                                                </tr>
                                            </table></td>
                                            <td width="30" class="hide">&nbsp;</td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="70" class="hide">&nbsp;</td>
                            </tr>
                        </table></td>
                    </tr>
                    <tr>
                        <td height="40" class="h20">&nbsp;</td>
                    </tr>
                </table>
                </td>
            </tr>

        </table></td>
    </tr>
    <tr>
        <td align="center" valign="top"><table width="700" border="0" align="center" cellpadding="0" style="table-layout:fixed;width:700px;" cellspacing="0" class="w100pc">

            <tr>
                <td bgcolor="#59afe1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="60" class="h20">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="70" class="hide">&nbsp;</td>
                                <td class="padh14"><table width="260" border="0" align="left" cellpadding="0" cellspacing="0" style="width:260px;" class="w100pc">
                                    <tr>
                                        <td align="left"><img src="https://dummyimage.com/260x200/1884c3/fff.png" width="260" height="200" alt="Image" style="display:block;" border="0" spname="layouts_images_img_1_5.png"  xt="SPIMAGE" contentid="64b78f19-15d5fe20907-3f3d5eceea4051b7c82d96ba93c1b04e" /></td>
                                    </tr>
                                </table> <table width="265" border="0" align="right" cellpadding="0" cellspacing="0" style="width:265px;" class="w100pc">
                                    <tr>
                                        <td align="left" class="padt20" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; line-height:22px; text-transform:uppercase; color:#ffffff; font-weight:bold;">Lorem ipsum dolor sit amet</td>
                                    </tr>
                                    <tr>
                                        <td height="20">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td align="left"><table width="89" border="0" align="left" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="1" bgcolor="#ffffff" style="line-height:1px; font-size:1px;border-top:solid 1px #59afe1;border-collapse:collapse;">&nbsp;</td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="10" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/tick.png" width="10" height="10" alt="" style="display:block;" border="0"></td>
                                                <td width="10"></td>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#ffffff;"><a href="http://" target="_blank" style="text-decoration:underline; color:#ffffff;" xt="SPCLICK" name="TrackedLink_SPCLICK_16">Lorem ipsum dolor amet, consectetur</a></td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="10" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/tick.png" width="10" height="10" alt="" style="display:block;" border="0"></td>
                                                <td width="10"></td>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#ffffff;"><a href="http://" target="_blank" style="text-decoration:underline; color:#ffffff;" xt="SPCLICK" name="TrackedLink_SPCLICK_17">adipiscing elit Nunc in tincidunt urna</a></td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="10" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/tick.png" width="10" height="10" alt="" style="display:block;" border="0"></td>
                                                <td width="10"></td>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#ffffff;"><a href="http://" target="_blank" style="text-decoration:underline; color:#ffffff;" xt="SPCLICK" name="TrackedLink_SPCLICK_18">laoreet lorem Sed vitae ornare augue </a></td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="line-height:15px; font-size:15px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td width="10" style="line-height:0; font-size:0;"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/tick.png" width="10" height="10" alt="" style="display:block;" border="0"></td>
                                                <td width="10"></td>
                                                <td align="left" style="font-family:Tahoma, Geneva, sans-serif; font-size:13px; line-height:15px; text-decoration:underline; color:#ffffff;"><a href="http://" target="_blank" style="text-decoration:underline; color:#ffffff;">Praesent vestibulum in felis molestie</a></td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="19" style="line-height:19px; font-size:19px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td><table width="156" border="0" align="left" style="border-radius:2px; background-color:#000916;" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td height="38" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-transform:uppercase;" ><a href="http://" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:38px;" xt="SPCLICK" name="TrackedLink_SPCLICK_20">read more</a></td>
                                            </tr>
                                        </table></td>
                                    </tr>
                                </table></td>
                                <td width="70" class="hide">&nbsp;</td>
                            </tr>
                        </table></td>
                    </tr>
                    <tr>
                        <td height="60" class="h20">&nbsp;</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td bgcolor="#000916" class="padh14"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="40">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center"><table width="171" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="26" align="left"><a href="http://" target="_blank"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/facebook.png" width="26" height="26" alt="facebook" style="display:block;" border="0" ></a></td>
                                <td width="10">&nbsp;</td>
                                <td width="26" align="left"><a href="http://" target="_blank"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/linkedin.png" width="26" height="26" alt="Linked In" style="display:block;" border="0"></a></td>
                                <td width="10">&nbsp;</td>
                                <td width="26" align="left"><a href="http://" target="_blank"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/twitter.png" width="26" height="26" alt="twitter" style="display:block;" border="0"></a></td>
                                <td width="10">&nbsp;</td>
                                <td width="26" align="left"><a href="http://" target="_blank"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/youtube.png" width="26" height="26" alt="you_tube" style="display:block;" border="0"></a></td>
                                <td width="10">&nbsp;</td>
                                <td width="26" align="left"><a href="http://" target="_blank"><img src="http://blog.idevelopweb.site/newsletters/newsletter-moderate/img/gplus.png" width="26" height="26" alt="google_plus" style="display:block;" border="0"></a></td>
                            </tr>
                        </table></td>
                    </tr>
                    <tr>
                        <td height="20">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; line-height:13px; color:#ffffff;">&copy; 2017. Site your company</td>
                    </tr>
                    <tr>
                        <td height="20">&nbsp;</td>
                    </tr>

                    <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="60" class="hide">&nbsp;</td>
                                <td align="center" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; line-height:18px; color:#ffffff;"> 123, Street Name, Address Line 2, Country<br />
                                    <a href="mailto:info@yourcompany.com" style="text-decoration:none; color:#ffffff">info@yourcompany.com</a> <br /><br />
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est. Fusce dictum sem at condimentum porttitor. Integer varius condimentum enim sed pharetra.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed nunc eget urna tristique gravida in et est.</td>
                                <td width="60" class="hide">&nbsp;</td>
                            </tr>
                        </table></td>
                    </tr>


                    <tr>
                        <td height="40">&nbsp;</td>
                    </tr>
                </table>
                </td>
            </tr>
            <tr>
                <td height="40" align="center" bgcolor="#ffffff" class="padh14" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; line-height:13px; color:#000000;">If you do not wish to receive any further email from us, please
                    <a href="#SPONECLICKOPTOUT" target="_blank" style="text-decoration:underline; color:#000000;">unsubscribe</a></td>
            </tr>
        </table></td>
    </tr>
</table>
<div style="display:none; white-space:nowrap; font:20px courier; color:#ffffff;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
</body>
</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console