Skip to content

Instantly share code, notes, and snippets.

@vennsoh

vennsoh/dabblet.css

Created October 14, 2013 04:46
Show Gist options
  • Save vennsoh/6970902 to your computer and use it in GitHub Desktop.
Save vennsoh/6970902 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
body {
margin: 0;
padding: 0;
}
table td {
border-collapse: collapse;
}
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #004A99;
line-height: 100%;
}
a, a:link {
color: #004A99;
text-decoration: underline;
}
body, #body_style {
background: #ccc;
min-height: 1000px;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
a:visited {
color: #004A99;
text-decoration: none
}
a:focus {
color: #004A99;
text-decoration: underline
}
a:hover {
color: #004A99;
text-decoration: underline
}
img[class=tweet] {
margin-bottom: 5px;
}
/*@media only screen and (max-device-width: 480px) {*/
@media only screen and (max-width: 480px) {
table[class=table620] {
width: 320px !important;
}
table[class=table600] {
width: 300px !important;
}
table[class=table600pad20] {
width: 320px !important;
}
.share-wide {
float: left;
width: 192px;
display: block;
}
Raw
dabblet.html
<!-- HEADER -->
<table align="center" bgcolor="#001e54" border="0" cellpadding="0" cellspacing="0" class="table620" width="620">
<tbody>
<tr>
<td>
<img alt="" border="0" height="100" src="http://placehold.it/100x100/ddd/001b4d&text=Logo+(100x100)" style="display:block;" title="" width="100" /></td>
</tr>
</tbody>
</table>
<!-- BODY -->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="10" class="table620" width="620">
<tbody>
<tr>
<td>
<tp:section id="main"> <!-- A: TEXT -->
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td>
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
Welcome <Customer Name>,</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- B: IMAGE -->
<table align="center" bgcolor="" border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img alt="" src="http://lionpartners.co.nz/lionpartners/media/main/logos/Carousel-MF-Coffee-banner.JPG" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- C: DIVIDER -->
<table align="center" bgcolor="" border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img alt="" border="0" height="19" src="http://placehold.it/580x19/ddd/001b4d&text=Component+C+(580x19)" style="display:block;width:100%;" title="" width="600" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- D: SIDE BY SIDE, TEXT / IMAGE -->
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT D</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<img alt="" border="0" height="100" src="http://placehold.it/280x100/ddd/001b4d" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- E: SIDE BY SIDE, IMAGE / TEXT -->
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<img alt="" border="0" height="100" src="http://placehold.it/280x100/ddd/001b4d" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT E</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- F & G : These components go together -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" bgcolor="" border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<!-- F: TOP AND TAIL, TEXT / IMAGE -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img alt="" border="0" height="220" src="http://placehold.it/280x220/ddd/001b4d" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
<table bgcolor="#a4a4a4" border="0" cellpadding="20" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<h2 style="color:#FFFFFF;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT F</h2>
<p style="color:#FFFFFF;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table bgcolor="" border="0" cellpadding="10" cellspacing="0" width="300">
<tbody>
<tr>
<td>
<!-- G: TOP AND TAIL, IMAGE / TEXT -->
<table bgcolor="#a4a4a4" border="0" cellpadding="20" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<h2 style="color:#FFFFFF;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT G</h2>
<p style="color:#FFFFFF;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img alt="" border="0" height="220" src="http://placehold.it/280x220/ddd/001b4d" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- H: IMAGES x 3 -->
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" src="http://placehold.it/280x140/ddd/001b4d&text=Component+H+(280x140)" style="display:block;" title="" width="180" /></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" src="http://placehold.it/280x140/ddd/001b4d&text=Component+H+(280x140)" style="display:block;" title="" width="180" /></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" src="http://placehold.it/280x140/ddd/001b4d&text=Component+H+(280x140)" style="display:block;" title="" width="180" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- I: IMAGES 2 -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" height="" src="http://placehold.it/280x220/ddd/001b4d&text=Component+I+(280x220)" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" height="" src="http://placehold.it/280x220/ddd/001b4d&text=Component+I+(280x220)" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- J: TEXT 2 -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT J</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT J</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- K: IMAGES 2 -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" height="" src="http://placehold.it/280x220/ddd/001b4d&text=Component+K+(280x220)" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td align="center">
<img alt="" border="0" height="" src="http://placehold.it/280x220/ddd/001b4d&text=Component+K+(280x220)" style="display:block;" title="" width="280" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- K END --><!-- L: TEXT 3 -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT L</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT L</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="200">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT L</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- L END --><!-- M: TEXT 2 -->
<table bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT M</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="10" cellspacing="0" class="table600" width="300">
<tbody>
<tr>
<td valign="top">
<h2 style="color:#004A99;font-size:18px;line-height:18px;margin-top:0;margin-bottom:3px;">
COMPONENT M</h2>
<p style="color:#666666;margin-top:0;font-size:13px;line-height:16px;margin-top:10px;margin-bottom:10px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- M END --></tp:section></td>
</tr>
</tbody>
</table>
<br />
<!-- FOOTER -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#00205B" width="620" align="center" class="table620">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="20" align="left" class="table600pad20">
</table>
<table width="420" border="0" cellspacing="0" cellpadding="20" class="table600pad20">
<tr>
<td align="right"><p style="color:#666666;margin-top:0;font-size:9px;font-weight:bold;line-height:18px;margin-bottom:3px;"><img src="images/cheers.png" alt="" title="" width="64" height="30" style="display:block;" border="0" /></p>
<p style="color:#666666;margin-top:0;font-size:9px;font-weight:bold;line-height:18px;margin-bottom:3px;">
<a href="{{ URL }}/Unsubscribe.aspx?token=<tp:token />" style="color:#FFFFFF" target="_blank" title="">Unsubscribe</a>
</p>
<p style="color:#666666;margin-top:0;font-size:9px;font-weight:bold;line-height:18px;margin-bottom:3px;">
<a href="{{ URL }}/Utilities/Privacy-Policy.aspx" style="color:#FFFFFF;margin-right:10px;" target="_blank" title="">Privacy Policy</a>
<a href="{{ URL }}/Utilities/Terms-and-Conditions.aspx" style="color:#FFFFFF;margin-right:10px;" target="_blank" title="">Terms and Conditions</a>
<a href="http://cheers.org.nz" style="color:#FFFFFF" target="_blank" title="">drinkresponsibly.co.nz</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--end wrapper-->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment