Skip to content

Instantly share code, notes, and snippets.

@MOPineyro

MOPineyro/dabblet.css

Created February 20, 2013 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MOPineyro/4997049 to your computer and use it in GitHub Desktop.
Save MOPineyro/4997049 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
<style type="text/css">
/*<![CDATA[*/
#outlook a{padding:0;}
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;}
.ExternalClass{width:100%;}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%;}
.bodytbl{margin:0;padding:0;width:100% !important;}
img{outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block;}
a img{border:none;}
p{margin:1em 0;}
table{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td{border-collapse:collapse;}
.o-fix table,.o-fix td{mso-table-lspace:0pt;mso-table-rspace:0pt;}
body,.bodytbl{background-color:#D6D5D4;}
.body .o-fix table.o13{border-right:1px solid white;}
.body-i .o-fix table.o13{border-right:1px solid #FF7F04;}
table{color:#787878;}
div{color:#787878;}
.h1 div{color:#FF7F04;}
.h2 div{color:#787878;}
.h div{color:#FF7F04;}
.invert div,.invert .h{color:white;}
.issue div{color:white;}
.wrap.header{background-color:white;}
.wrap.body{background-color:white;}
.wrap.body-i{background-color:#FF7F04;}
.wrap.footer{}
.padd{width:24px;}
.f-body{margin-bottom:24px;margin-right:24px;margin-left:24px;}
.h-12{line-height:6px;font-size:6px;}
a{color:#FF7F04;}
a:link,a:visited,a:hover{color:#FF7F04;}
.invert div a{color:#FFFFFF;}
body{margin:0;padding:0;}
.bodytbl{margin:0;padding:0;-webkit-text-size-adjust:none;}
table{font-family:Helvetica, Arial, sans-serif;font-size:12px;}
div{line-height:24px;}
td,tr{padding:0;}
ul{margin-top:24px;margin-bottom:24px;}
li{list-style:disc;line-height:24px;}
a{text-decoration:none;padding:2px 0px;}
.invert div a{font-weight:bold;}
.h1 div{font-family:Helvetica,Arial,sans-serif;font-size:26px;font-weight:bold;letter-spacing:-1px;margin-bottom:16px;margin-top:2px;line-height:30px;}
.h2 div{font-family:Helvetica,Arial,sans-serif;font-size:20px;letter-spacing:0;margin-top:2px;line-height:30px;}
.h div{font-family:Helvetica,Arial,sans-serif;font-size:20px;letter-spacing:-1px;margin-bottom:16px;margin-top:4px;line-height:24px;}
.small div{font-size:10px;line-height:16px;}
.btn{margin-top:10px;display:block;}
.btn img,.social img{display:inline;}
.toc div{line-height:18px;}
.issue div{font-size:16px;letter-spacing:-1px;font-weight:bold;}
div.preheader{line-height:0px;font-size:0px;height:0px;display:none !important;visibility:hidden;text-indent:-9999px;}
@media only screen and (max-width: 480px) {
body{-webkit-text-size-adjust:120% !important;-ms-text-size-adjust:120% !important;}
table[class~=wrap]{width:460px; !important;}
table[class~=wrap] table{width:100% !important;}
table[class~=wrap] .padd{width:12px !important;}
table[class~=wrap] .f-body{margin-right:12px !important;margin-left:12px !important;}
table[class~=wrap] img {max-width:100% !important;height:auto !important;}
table[class~=wrap] .h1 div{font-size:22px !important;line-height:28px !important;}
table[class~=wrap] .h2 div{font-size:18px !important;line-height:28px !important;}
table[class~=wrap] .h div{font-size:18px !important;line-height:20px !important;}
table[class~=wrap] .m-padd {padding:12px 12px 0 !important;}
table[class~=wrap] .m-padd-r {padding-right:12px !important;}
table[class~=wrap] .m-padd-l {padding-left:12px !important;}
table[class~=wrap] .m-l{text-align:left !important;}
[class~=m-0]{width:0;display:none;}
[class~=m-b]{display:block;width:100% !important;margin-bottom:24px !important;}
[class~=m-1-2]{max-width:264px !important;}
[class~=m-1-3]{max-width:168px !important;}
[class~=m-1-4]{max-width:120px !important;}
table[class~=wrap] .m-mac{width:339px !important;margin-left:36px;}
table[class~=wrap] .m-mac-h img{height:192px !important;}
table[class~=wrap] .m-mac-b img{max-width:406px !important;margin-left:2px;}
}
@media only screen and (max-width: 320px) {
table[class~=wrap]{width:310px; !important;}
table[class~=wrap] .m-mac{width:229px !important;margin-left:26px;}
table[class~=wrap] .m-mac-h img{height:129px !important;}
table[class~=wrap] .m-mac-b img{max-width:274px !important;margin-left:3px;}
}
/*]]>*/
</style>
Raw
dabblet.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title>Vivastreet</title>
</head>
<body style=
"width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#D6D5D4">
<table cellpadding="0" cellspacing="0" class="bodytbl" style=
"margin:0;padding:0;width:100% !important;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;background-color:#f4f5f7;color:#787878;-webkit-text-size-adjust:none;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="100%">
<tr style="padding:0">
<td align="center" style="border-collapse:collapse;padding:0">
<table cellpadding="0" cellspacing="0" class="wrap" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" height="12" style=
"border-collapse:collapse;padding:0" valign="middle">
<div class="preheader" style=
"color:#787878;line-height:0px;font-size:0px;height:0px;display:none !important;visibility:hidden;text-indent:-9999px">
</div>
<div class="small" style=
"color:#787878;line-height:24px">
<div style=
"color:#787878;line-height:16px;font-size:10px">
<a href="#" style=
"color:#FF7F04;text-decoration:none;padding:2px 0px">
</a><a href="#">ver en el browser</a> |
<a href="#">añadir Vivastreet a tus
contactos</a>
</div><a name="top"></a>
</div><a name="top" style=
"color:#FF7F04;text-decoration:none;padding:2px 0px"></a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="wrap" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" height="6" style=
"border-collapse:collapse;padding:0" valign="bottom">
<img alt="" border="0" height="6" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_bottom.png"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="wrap header"
style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td height="12" style=
"border-collapse:collapse;padding:0"></td>
</tr>
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="100%">
<tr style="padding:0">
<td class="padd" rowspan="2" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<!-- CONTENT start -->
<td align="left" style=
"border-collapse:collapse;padding:0"
valign="top"><img alt="" border="0" height=
"35" src=
"http://static.viva-images.com/bundle/RFfXK/viwii3/makeover/images/logos/logo_mx.png?nocache=RFfXK"
style=
"max-width:264px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="176" /><br /></td>
<td class="padd m-0" rowspan="2" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="right" class="invert toc"
rowspan="2" style=
"border-collapse:collapse;padding:0"
valign="middle">
<table border="0" cellspacing="10px"
style=
"font-size: 12px; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; color: #787878; mso-table-rspace: 0pt; mso-table-lspace: 0pt;"
width="200">
<tr style="padding: 0;">
<td align="center" style=
"border-collapse: collapse; padding: 0;"
valign="top" width="40">
<a href=
"#d41d8cd98f00b204e9800998ecf8427e"
style=
"padding: 2px 0px; text-decoration: none; color: #DE8E53;">
</a>
<div style=
"max-width: 50px; line-height: 24px; background-size: auto auto; background-clip: border-box; background-attachment: scroll; background-repeat: no-repeat; background-color: transparent; background-position: -340px 0px; color: #787878; height: 28px; max-height: 32px; background-image: url('http://static.viva-images.com/templates/viwii3/makeover/images/sprites/home.png') !important; background-origin: padding-box; width: 35px;">
</div>
<div style=
"background-color: #3770C3; border-right-color: white; border-right-style: solid; border-right-width: 1px; color: white !important; font-weight: 600; line-height: 24px; text-align: center">
Empleos
</div>
</td>
<td align="center" style=
"border-collapse: collapse; padding: 0;"
valign="top" width="40">
<a href=
"#d41d8cd98f00b204e9800998ecf8427e"
style=
"padding: 2px 0px; text-decoration: none; color: #DE8E53;">
</a>
<div style=
"max-width: 50px; line-height: 24px; background-size: auto auto; background-clip: border-box; background-attachment: scroll; background-repeat: no-repeat; background-color: transparent; background-position: -300px 0px; color: #787878; height: 28px; max-height: 32px; background-image: url('http://static.viva-images.com/templates/viwii3/makeover/images/sprites/home.png') !important; background-origin: padding-box; width: 35px;">
</div>
<div style=
"background-color: #F3B203; border-right-color: white; border-right-style: solid; border-right-width: 1px; color: white !important; font-weight: 600; line-height: 24px; text-align: center">
Immuebles
</div>
</td>
<td align="center" style=
"border-collapse: collapse; padding: 0;"
valign="top" width="40">
<a href=
"#d41d8cd98f00b204e9800998ecf8427e"
style=
"padding: 2px 0px; text-decoration: none; color: #DE8E53;">
</a>
<div style=
"max-width: 50px; line-height: 24px; background-size: auto auto; background-clip: border-box; background-attachment: scroll; background-repeat: no-repeat; background-color: transparent; background-position: -540px 0px; color: #787878; height: 28px; max-height: 32px; background-image: url('http://static.viva-images.com/templates/viwii3/makeover/images/sprites/home.png') !important; background-origin: padding-box; width: 35px;">
</div>
<div style=
"background-color: #8ECC1C; border-right-color: white; border-right-style: solid; border-right-width: 1px; color: white !important; font-weight: 600; line-height: 24px; text-align: center">
Autos
</div>
</td>
<td align="center" style=
"border-collapse: collapse; padding: 0;"
valign="top" width="40">
<a href=
"#d41d8cd98f00b204e9800998ecf8427e"
style=
"padding: 2px 0px; text-decoration: none; color: #DE8E53;">
</a>
<div style=
"max-width: 50px; line-height: 24px; background-size: auto auto; background-clip: border-box; background-attachment: scroll; background-repeat: no-repeat; background-color: transparent; background-position: -260px 0px; color: #787878; height: 28px; max-height: 32px; background-image: url('http://static.viva-images.com/templates/viwii3/makeover/images/sprites/home.png') !important; background-origin: padding-box; width: 35px;">
</div>
<div style=
"background-color: #C30101; border-right-color: white; border-right-style: solid; border-right-width: 1px; color: white !important; font-weight: 600; line-height: 24px; text-align: center">
Ofertas
</div>
</td>
<td align="center" style=
"border-collapse: collapse; padding: 0;"
valign="top" width="40">
<a href=
"#d41d8cd98f00b204e9800998ecf8427e"
style=
"padding: 2px 0px; text-decoration: none; color: #DE8E53;">
</a>
<div style=
"max-width: 50px; line-height: 24px; background-size: auto auto; background-clip: border-box; background-attachment: scroll; background-repeat: no-repeat; background-color: transparent; background-position: -460px 0px; color: #787878; height: 28px; max-height: 32px; background-image: url('http://static.viva-images.com/templates/viwii3/makeover/images/sprites/home.png') !important; background-origin: padding-box; width: 35px;">
</div>
<div style=
"background-color: #646464; color: white !important; font-weight: 600; line-height: 24px; text-align: center">
Servicios
</div>
</td>
</tr>
</table>
</td><!-- CONTENT end -->
<td class="padd" rowspan="2" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="left" style=
"border-collapse:collapse;padding:0;#626364; font-size:9px"
valign="top">Anuncios Clasificados GRATIS
en México</td>
</tr>
</table>
</td>
</tr>
<tr style="padding:0">
<td height="12" style=
"border-collapse:collapse;padding:0"></td>
</tr>
</table><!-- ☺ header block ends here -->
<!-- Seperator with gap start -->
<table cellpadding="0" cellspacing="0" class="wrap" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" class="h-12" height="12" style=
"border-collapse:collapse;line-height:6px;font-size:6px;padding:0"
valign="top"><img alt="" border="0" height="12" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_top.png"
style=
"max-width:600px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
<tr style="padding:0">
<td align="center" height="12" style=
"border-collapse:collapse;padding:0" valign="bottom">
<img alt="" border="0" height="6" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_bottom.png"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
</table><!-- Seperator with gap end -->
<!-- Full Size Image start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td style="border-collapse:collapse;padding:0" valign=
"top"><!-- CONTENT start -->
<img alt="" border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/mexico_header.jpg"
style=
"max-width:600px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td><!-- CONTENT end -->
</tr>
</table><!-- Full Size Image end -->
<!-- Intro start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td colspan="3" height="12" style=
"border-collapse:collapse;padding:0"></td>
</tr>
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0" width=
"24">&nbsp;</td>
<td align="left" style=
"border-collapse:collapse;padding:0" valign="top">
<!-- CONTENT start -->
<div class="h1" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 2px">
Lorem ipsum dolor sit amet consetetur!
</div><!-- CONTENT end -->
</td>
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0" width=
"24">&nbsp;</td>
</tr>
<tr style="padding:0">
<td colspan="3" height="24" style=
"border-collapse:collapse;padding:0">&nbsp;</td>
</tr>
</table><!-- Intro end -->
<!-- Seperator with gap start -->
<table cellpadding="0" cellspacing="0" class="wrap" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" class="h-12" height="12" style=
"border-collapse:collapse;line-height:6px;font-size:6px;padding:0"
valign="top"><img alt="" border="0" height="12" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_top.png"
style=
"max-width:600px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
<tr style="padding:0">
<td align="center" height="12" style=
"border-collapse:collapse;padding:0" valign="bottom">
<img alt="" border="0" height="6" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_bottom.png"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
</table><!-- Seperator with gap end -->
<!-- 1/3 Column start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px">
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<!-- CONTENT start -->
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td><!-- CONTENT end -->
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr class="m-0" style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
</table><!-- 1/3 Column end -->
<!-- 1/3 Column Images start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<!-- CONTENT start -->
<td align="left" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_left.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<td align="center" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_mid.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<td align="right" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_right.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<!-- CONTENT end -->
</tr>
</table>
</td>
</tr>
</table><!-- 1/3 Column Images end -->
<!-- 1/3 Column start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px">
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<!-- CONTENT start -->
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td><!-- CONTENT end -->
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr class="m-0" style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
</table><!-- 1/3 Column end --><!-- 1/3 Column start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px">
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<!-- CONTENT start -->
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="h" style=
"color: #787878; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Headline
</div>
</td><!-- CONTENT end -->
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr class="m-0" style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
</table><!-- 1/3 Column end -->
<!-- 1/3 Column Images start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<!-- CONTENT start -->
<td align="left" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_left2.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<td align="center" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_mid2.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<td align="right" style=
"border-collapse:collapse;padding:0"
valign="top" width="200"><img alt=""
border="0" height="200" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/stack_right2.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
<!-- CONTENT end -->
</tr>
</table>
</td>
</tr>
</table><!-- 1/3 Column Images end -->
<!-- 1/3 Column start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px">
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<!-- CONTENT start -->
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="m-b" style=
"border-collapse:collapse;padding:0"
valign="top" width="168">
<div class="btn" style=
"color:#787878;line-height:24px;margin-top:10px;display:block">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" height=
"40" style=
"-moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FF7F04; border-radius: 5px; color: #ffffff; display: block"
width="168"><a href=
"http://www.EXAMPLE.com/"
style=
"color: #ffffff; font-size:16px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Clic Aqui!</a></td>
</tr>
</table>
</div>
</td><!-- CONTENT end -->
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr class="m-0" style="padding:0">
<td style="border-collapse:collapse;padding:0">
&nbsp;</td>
</tr>
</table><!-- 1/3 Column end -->
<!-- Seperator with gap start -->
<table cellpadding="0" cellspacing="0" class="wrap" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" class="h-12" height="12" style=
"border-collapse:collapse;line-height:6px;font-size:6px;padding:0"
valign="top"><img alt="" border="0" height="12" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_top.png"
style=
"max-width:600px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
<tr style="padding:0">
<td align="center" height="12" style=
"border-collapse:collapse;padding:0" valign="bottom">
<img alt="" border="0" height="6" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_bottom.png"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
</table><!-- Seperator with gap end -->
<!-- 1/3 Image on the Left Inverted start -->
<table cellpadding="0" cellspacing="0" class="wrap body-i"
style=
"background-color: #95D15C; border-collapse: collapse; color: #787878; font-family: Helvetica, Arial, sans-serif; font-size: 12px; mso-table-lspace: 0pt; mso-table-rspace: 0pt"
width="600">
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" class=
"o-fix" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="100%">
<tr style="padding:0">
<td style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0"
valign="top">
<!-- CONTENT start -->
<table align="left" cellpadding="0"
cellspacing="0" class="m-b o13" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-right:1px solid #95D15C;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="200">
<tr style="padding:0">
<td align="left" class="m-padd"
style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0"
valign="top"><img alt=""
border="0" height="225" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/5_MX.jpg"
style=
"max-width:200px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="200" /></td>
</tr>
</table>
<table align="right" cellpadding="0"
cellspacing="0" class="o13" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-right:1px solid #95D15C;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="376">
<tr style="padding:0">
<td class="m-0" colspan="2"
height="24" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0">
&nbsp;</td>
</tr>
<tr style="padding:0">
<td align="left" class=
"invert m-padd-l" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0"
valign="top">
<div class="h" style=
"color: white; font-family: Helvetica,Arial,sans-serif; font-size: 20px; letter-spacing: -1px; line-height: 24px; margin-bottom: 16px; margin-top: 4px">
Mobile App
</div>
<div style=
"color:white;line-height:24px">
Li Europan lingu es es
membres del sam familie.
Lor separat existentie es
un myth. Por scientie,
musica, sport etc, litot
Europa usa li sam
<a style="color:#FFFFFF;text-decoration:none;padding:2px 0px;font-weight:bold">
vocabular</a>.
</div>
<div class="btn" style=
"color:white;line-height:24px;margin-top:10px;display:block">
<a style=
"color:#FFFFFF;text-decoration:none;padding:2px 0px;font-weight:bold">
<img alt="read more"
border="0" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/Clean-App-Download-Buttons_01_white_small.jpg"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:inline;border:none"
title=
"read more" /></a><a style="color:#FFFFFF;text-decoration:none;padding:2px 0px;font-weight:bold"><img alt="read more"
border="0" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/Clean-App-Download-Buttons_02_white_small.jpg"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:inline;border:none"
title=
"read more" /></a>
</div>
</td>
<td class="padd" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
<tr style="padding:0">
<td colspan="2" height="24"
style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;padding:0">
&nbsp;</td>
</tr>
</table>
</td><!-- CONTENT end -->
</tr>
</table>
</td>
</tr>
</table><!-- 1/3 Image on the Left Inverted end -->
<!-- Footer start -->
<table cellpadding="0" cellspacing="0" class="wrap body" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;background-color:white;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" style=
"border-collapse:collapse;padding:0" valign="top">
<table cellpadding="0" cellspacing="0" style=
"border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="100%">
<tr style="padding:0">
<td colspan="5" style=
"border-collapse:collapse;padding:0"></td>
</tr>
<tr style="padding:0">
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="left" class="small m-b" style=
"border-collapse:collapse;padding:0"
valign="top">
<div style=
"color:#787878;line-height:16px;font-size:10px">
Si no quieres recibir más emails de
Vivastreet, <a href="#" style=
"color:#FF7F04;text-decoration:none;padding:2px 0px">
haz clic aquí</a>
</div>
<div style=
"color:#787878;line-height:16px;font-size:10px">
<br />
© 2013 Vivastreet - Empresa de W3
LTD, Servicio de DM Services Inc, W
Services LLC, Web DMUK Ltd, DMIS
SARL
</div>
</td>
<td class="padd m-0" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
<td align="right" class="small social m-b"
style="border-collapse:collapse;padding:0"
valign="top" width="187">
<div style=
"color:#787878;line-height:16px;font-size:10px">
<a href="https://facebook.com"
style="color:#FF7F04;text-decoration:none;padding:2px 0px">
<img alt="" border="0" height="32"
src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/facebook.png"
style=
"max-width:32px;max-height:32px;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:inline;border:none"
title="" width="32" /></a>
</div>
</td>
<td class="padd" style=
"border-collapse:collapse;width:24px;padding:0"
width="24">&nbsp;</td>
</tr>
<tr class="m-0" style="padding:0">
<td colspan="5" height="24" style=
"border-collapse:collapse;padding:0"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="wrap" style=
"margin-bottom:24px;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;color:#787878;font-family:Helvetica, Arial, sans-serif;font-size:12px"
width="600">
<tr style="padding:0">
<td align="center" height="48" style=
"border-collapse:collapse;padding:0" valign="top">
<img alt="" border="0" height="12" src=
"http://i897.photobucket.com/albums/ac180/vivastreet/Vivastreet_MX/Email%20Template%20Elements/shadow_top.png"
style=
"outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;display:block"
title="" width="600" /></td>
</tr>
</table><!-- Footer end -->
</td>
</tr>
</table>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment