"mobile layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Helix Sleep -- Newsletter Template 2</title> <style type="text/css"> .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} .ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; } body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} body {margin:0; padding:0;} table td {border-collapse:collapse;} img {outline:none; text-decoration:none; height:auto; -ms-interpolation-mode: bicubic;} a img {border:none;} .ioslinkdkblue a { color:#002e66; text-decoration:none; } .ioslinkltteal a { color:#fff9f4; text-decoration:none; } /* Media Query for mobile */ @media screen and (max-width: 480px) { .wrapto100pc {width:100% !important; height:auto !important;} .hide-me {display:none !important;} .colsplit1 {width:100%!important; float:left!important;padding-bottom:30px !important;border:0 !important;} .colsplitimg {width:100%!important; float:left!important;padding:0 !important;height:auto !important;} .colsplittext {width:100%!important; float:left!important;padding:33px 0!important;height:auto !important;} .colctr {text-align:center !important;} .bodytext {font-size:18px !important; line-height:24px !important;} .h1 {font-size:24px !important; line-height:28px !important;} .h2 {font-size:20px !important; line-height:24px !important;} .pdg10 {padding-right:10px !important;padding-left:10px !important;} .pdg3310 {padding:33px;padding:10px !important;} .noborder {border:0 !important;} .bordertop {border:0 !important; border-top:1px solid #78b399 !important;} } </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body bgcolor="#ffffff" style="min-height:1000px;margin:0;padding:0;height:100%;background-color:#ffffff;"> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;"> <tbody> <tr> <td valign="top" align="center"> <!-- PREHEADER --> <table width="740" border="0" cellpadding="0" cellspacing="0" class="hide-me"> <tbody> <tr> <td width="540"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td valign="top" class="preheader" style="font-family:Avenir,Helvetica,Arial,sans-serif;color:#606069;font-size:12px;line-height:21px;"> Just in time for spring cleaning.</td> </tr> </tbody> </table> </td> <td width="200" style="padding-top:9px;padding-right:0;padding-bottom:9px;padding-left:0;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td valign="top" class="preheader" style="font-family:Avenir,Helvetica,Arial,sans-serif;color:#606069;font-size:12px;line-height:21px;text-align:right;"><a href="#" style="color:#606069;" target="_blank">View on web</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- # PREHEADER --> <!-- CONTAINER --> <table width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="wrapto100pc"> <tbody> <tr> <td style="padding-top:28px;padding-bottom:28px;"> <!-- HEADER --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:36px;color:#002e66;font-weight:bold;font-weight:600;">Dream Journal</td> </tr> <tr> <td align="center" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:13px;color:#002e66;font-weight:300;letter-spacing: 1px;text-transform:uppercase;">A Helix Sleep Newsletter</td> </tr> </tbody> </table> </td> </tr> <!-- # HEADER --> <!-- ROW 1 --> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <th height="496" valign="top" align="left" bgcolor="#002e66" class="colsplitimg" style="font-weight:normal;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td> <a href="https://www.helixsleep.com/?utm_source=bronto&utm_medium=email&utm_term=Image+-+https://www.helixsleep.com&utm_content=Newsletter+-+2017.03&utm_campaign=Dream+Journal+%E2%80%93+Something%E2%80%99s+coming...&_bta_tid=29634592885476417347478045424850872807039961341366698363596745390571097080588149301139960640920271619622" target="_blank"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20-%20Images/2017.03/Photo-201703-03.jpg" width="248" alt="" class="wrapto100pc"></a> </td> </tr> <tr> <td height="248" align="center" valign="middle" class="pdg40" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:34px;letter-spacing: 2px;color:#ffffff;font-weight:bold;font-weight:900;">#NAPCITY</td> </tr> </tbody> </table> </th> <th height="496" valign="middle" align="left" bgcolor="#78b399" class="colsplittext" style="font-weight:normal;padding-right:40px;padding-left:40px;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td class="pdg10"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20-%20Images/2017.03/Icon-02.png" width="114" alt=""></td> </tr> <tr> <td class="pdg10" style="padding-top:12px;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:34px;line-height:38px;color:#ffffff;font-weight:bold;font-weight:600;">We’ve got a surprise coming this month.</td> </tr> <tr> <td class="pdg10" style="padding-top:12px;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:22px;line-height:32px;color:#ffffff;font-weight:300;">Keep up with us on Instagram for a <br>sneak peek.</td> </tr> <tr> <td class="pdg10" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:32px;color:#ffffff;font-weight:500;text-transform:uppercase;"><a href="https://www.instagram.com/helixsleep/?_bta_tid=15265179195476417347478045424850872807039961341366698363596745390571097080588458786149781985988996400678" target="_blank" style="color:#ffffff;font-weight:bold;font-weight:900;text-decoration:none;border-bottom:2px solid #ffffff;">Check out our Instagram</a></td> </tr> </tbody> </table> </th> </tr> </tbody> </table> </td> </tr> <!-- ROW 2 --> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <th height="496" valign="middle" align="left" bgcolor="#fff9f4" class="colsplittext" style="font-weight:normal;padding-right:40px;padding-left:40px;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td class="pdg10"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20-%20Images/2017.03/Icon-01.png" width="114" alt=""></td> </tr> <tr> <td class="pdg10" style="padding-top:12px;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:34px;line-height:38px;color:#002e66;font-weight:bold;font-weight:600;">Clean up your sleep.</td> </tr> <tr> <td class="pdg10" style="padding-top:12px;font-family:Avenir,Helvetica,Arial,sans-serif;font-size:22px;line-height:32px;color:#002e66;font-weight:300;">Spring is the perfect time to bring in the new (mattress) and toss out the old. Make this year’s spring cleaning all about better, more personalized sleep.</td> </tr> <tr> <td class="pdg10" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:32px;color:#002e66;font-weight:500;text-transform:uppercase;"><a href="https://helixsleep.com/shop/?_bta_tid=10048816065476417347478045424850872807039961341366698363596745390571097080588768271159603331057721181734" target="_blank" style="color:#002e66;font-weight:bold;font-weight:900;text-decoration:none;border-bottom:2px solid #002e66;">See Our Mattress</a></td> </tr> </tbody> </table> </th> <th width="246" height="496" valign="top" align="left" bgcolor="#919496" class="colsplitimg" style="font-weight:normal;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td> <a href="https://www.helixsleep.com/?utm_source=bronto&utm_medium=email&utm_term=Image+-+https://www.helixsleep.com&utm_content=Newsletter+-+2017.03&utm_campaign=Dream+Journal+%E2%80%93+Something%E2%80%99s+coming...&_bta_tid=17106584435476417347478045424850872807039961341366698363596745390571097080589077756169424676126445962790" target="_blank"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20-%20Images/2017.03/Photo-201703-01.jpg" width="246" alt="" class="wrapto100pc"></a> </td> </tr> <tr> <td class="pdg10" style="padding-top:40px;padding-right:30px;padding-bottom:40px;padding-left:30px;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:20px;line-height:px;color:#ffffff;font-weight:bold;font-weight:400;"><b>Snooze fact of<br> the month:</b><br>We lose over a pound through the night by exhaling.</td> </tr> <tr> <td style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:32px;color:#ffffff;font-weight:500;text-transform:uppercase;"> <a href="" target="_blank" style="color:#ffffff;font-weight:bold;font-weight:900;text-decoration:none;border-bottom:2px solid #ffffff;"></a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </th> </tr> </tbody> </table> </td> </tr> <!-- ROW 3 --> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <th align="left" valign="middle" bgcolor="#f2574f" class="colsplittext" style="padding-right:30px;padding-left:30px;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td class="pdg10" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:20px;line-height:28px;color:#ffffff;font-weight:bold;font-weight:400;"><b>We’re hiring!</b><br> Join our New York City based team.</td> </tr> <tr> <td class="pdg10" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:32px;color:#ffffff;font-weight:500;text-transform:uppercase;"><a href="https://helixsleep.workable.com/?_bta_tid=36843012445476417347478045424850872807039961341366698363596745390571097080589387241179246021195170743846" target="_blank" style="color:#ffffff;font-weight:bold;font-weight:900;text-decoration:none;border-bottom:2px solid #ffffff;">Check it out</a></td> </tr> </tbody> </table> </th> <th align="center" bgcolor="#a1bec4" class="colsplitimg"> <a href="https://www.helixsleep.com/?utm_source=bronto&utm_medium=email&utm_term=Image+-+https://www.helixsleep.com&utm_content=Newsletter+-+2017.03&utm_campaign=Dream+Journal+%E2%80%93+Something%E2%80%99s+coming...&_bta_tid=13135016225476417347478045424850872807039961341366698363596745390571097080589696726189067366263895524902" target="_blank"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20-%20Images/2017.03/Photo-201703-04.jpg" width="246" alt="" class="wrapto100pc"></a> </th> <th align="center" bgcolor="#a1bec4" class="colsplitimg"> <a href="https://twitter.com/helixsleep/?_bta_tid=05372037925476417347478045424850872807039961341366698363596745390571097080590006211198888711332620305958" target="_blank"><img src="http://hosting.fyleio.com/35914/public/Newsletters%20F5/icon-twitter-2x.png" width="246" alt="" class="wrapto100pc"></a> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- FOOTER --> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <td align="center" bgcolor="#012a68" style="padding-top:40px;padding-right:30px;padding-bottom:40px;padding-left:30px;"> <table border="0" cellpadding="0" cellspacing="0" class="wrapto100pc"> <tbody> <tr> <th width="212" class="colsplit1" style="font-weight:normal;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" class="colctr" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:20px;color:#fff9f4;"><b>Talk</b> <a href="tel:18883300781" style="color:#fff9f4; text-decoration:none;" target="_blank">(888) 330-0781</a></td> </tr> </tbody> </table> </th> <th width="282" class="colsplit1" style="font-weight:normal;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" width="100%" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:20px;color:#fff9f4;"><b>Type</b> <a href="mailto:help@helixsleep.com" style="color:#fff9f4;text-decoration:none;" target="_blank">info@helixsleep.com</a></td> </tr> </tbody> </table> </th> <th width="186" class="colsplit1" style="font-weight:normal;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" class="colctr" style="font-family:Avenir,Helvetica,Arial,sans-serif;font-size:20px;color:#fff9f4;"><b>Tag</b> @helixsleep</td> </tr> </tbody> </table> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!-- # FOOTER --> <!-- # CONTAINER --> </td> </tr> </tbody> </table> <div> </div> <div> </div> <table class="mcnCaptionBlock" style="width: 100%;" border="0" cellspacing="0" cellpadding="0"> <tbody class="mcnCaptionBlockOuter"> <tr> <td class="mcnCaptionBlockInner" valign="top" style="padding: 9px;"> <p style="text-align: center;"><img alt="" src="https://gallery.mailchimp.com/ba76ccaf57f0a1d7fb9caada7/images/6c62cd32-54c7-4bba-8812-21cedae91fab.png" height="49" width="129" class="mcnImage"></p> <p style="text-align: center;"> <a href="https://www.facebook.com/helixsleep?_bta_tid=05458068875476417347478045424850872807039961341366698363596745390571097080590315696208710056401345087014" target="_blank"><img src="http://cdn-images.mailchimp.com/icons/social-block-v2/light-facebook-48.png" height="24" width="24"></a> <a href="https://twitter.com/helixsleep?_bta_tid=06215223595476417347478045424850872807039961341366698363596745390571097080590625181218531401470069868070" target="_blank"><img src="http://cdn-images.mailchimp.com/icons/social-block-v2/light-twitter-48.png" height="24" width="24"></a> <a href="https://www.instagram.com/helixsleep/?_bta_tid=00711167395476417347478045424850872807039961341366698363596745390571097080590934666228352746538794649126" target="_blank"><img src="http://cdn-images.mailchimp.com/icons/social-block-v2/light-instagram-48.png" height="24" width="24"></a> <a href="https://www.pinterest.com/helixsleep/?_bta_tid=42306567535476417347478045424850872807039961341366698363596745390571097080591244151238174091607519430182" target="_blank"><img src="http://cdn-images.mailchimp.com/icons/social-block-v2/light-pinterest-48.png" height="24" width="24"></a> <a href="https://plus.google.com/helixsleep?_bta_tid=16084435515476417347478045424850872807039961341366698363596745390571097080591553636247995436676244211238" target="_blank"><img src="http://cdn-images.mailchimp.com/icons/social-block-v2/light-googleplus-48.png" height="24" width="24"></a> </p> <table class="mcnCaptionRightContentOuter" style="width: 100%;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="mcnCaptionRightContentInner" valign="top" style="padding: 0px 9px; text-align: center;"><span style="font-size: 10pt; color: #333333;" xml="lang">Helix Sleep 1123 Broadway, #600, New York, NY 10010</span><br><span style="font-size: 10pt; color: #333333;" xml="lang">info@helixsleep.com |  (888) 330-0781</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table class="mcnTextBlock" style="width: 100%;" border="0" cellspacing="0" cellpadding="0"> <tbody class="mcnTextBlockOuter"> <tr> <td class="mcnTextBlockInner" valign="top"> <table class="mcnTextContentContainer" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td class="mcnTextContent" valign="top" style="padding-top: 9px; padding-right: 18px; padding-bottom: 9px; padding-left: 18px;"> <div style="text-align: center;"> <div style="line-height: 20.8px; text-align: center;"><span style="color: #808080;" xml="lang"><em><span style="font-size: 12px;" xml="lang"><span style="line-height: 20.8px;" xml="lang">Copyright © 2017 Helix Sleep, All rights reserved.</span></span> </em> </span> </div> <div style="line-height: 20.8px; text-align: center;"><br><a title="Unsubscribe" href="#" target="_blank"><span style="font-size: 11px;" xml="lang">Unsubscribe</span></a></div> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body>

Related: See More


Questions / Comments: