Skip to content

Instantly share code, notes, and snippets.

@harrisonde
Created July 29, 2014 17:05
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 harrisonde/ec3770e67d8126b73e30 to your computer and use it in GitHub Desktop.
Save harrisonde/ec3770e67d8126b73e30 to your computer and use it in GitHub Desktop.
ADT Email
<style>
html,body { -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700|Droid+Serif:400,700,400italic,700italic);
@media (max-width: 660px) {
/* @media only screen and (max-device-width: 600px) { */
table.container1[style] { padding: 0; }
table.container1[style] { width: 100% !important; max-width: 600px; }
table.container2[style] { width: 100% !important; max-width: 600px; }
table.container3[style] { width: 100% !important; max-width: 300px; }
table.header1[style] img { width: 100% !important; height: auto !important; }
td.fullWidthImage[style] img { width: 100% !important; height: auto !important; }
}
@media (min-width: 480px) and (max-width: 660px) {
/* @media only screen and (min-device-width: 480px) and (max-device-width: 600px) { */
table.container3[style] { width: 50% !important; max-width: 50% !important; }
}
@media (max-width: 480px) {
/* @media only screen and (max-device-width: 480px) { */
table.columns[style] { width: 100%; !important; }
table.columns[style] td { width: 100% !important; padding: 0 !important; }
table.container3[style] { width: 100% !important; max-width: none !important; float: none !important; clear: both !important; }
table.container3[style] td { padding: 30px !important; }
table.container4[style] { width: 100% !important; max-width: none !important; float: none !important; clear: both !important; }
table.container4[style] td { padding: 30px !important; }
}
</style>
<table class="container1" style="width: 600px; background-color: #e9e9e9;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding: 20px;">
<table class="container2" style="width: 600px; background-color: #e9e9e9; color: #fff; font-family: 'Open Sans', Arial, Helvetica, sans-serif;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="color: #787878; font-family: 'Open Sans', Arial, Helvetica, sans-serif;padding: 0 10px 20px 10px; font-size: 13px; line-height: 18px; font-style: italic; text-align: center;">
A short, precise abstract that serves to preview the contents of the email should be placed here in client software such as Microsoft Outlook or Apple Mail.
</td>
</tr>
</tbody>
</table>
<table class="container2 header1" style="font-family:'Merriweather', Serif; font-size: 20px;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-family: 'Merriweather', Serif; font-size: 20px;">
<img src="banner.jpg" alt="University of New Orleans Alumni & Friends" />
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; font-family: 'Merriweather', Serif; font-size: 14px; font-weight: bold; padding: 0; text-align: center; background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="left" style="color: #fff; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; width: 33%; background-color: #0054C8; padding: 10px;">
February 1, 2014
</td>
<td align="right" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; width: 33%; background-color: #0054C8; padding: 10px;">
<a style="color: #fff; text-decoration: none;" href="target=&amp;pid=279&amp;did=0&amp;tab=0">Visit Our Web Site</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; background-color:#fff;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="left" style="padding: 30px 30px 10px 30px; font-family: 'Merriweather', Serif; font-size: 17px; color: #01355D; font-weight: bold;">
SPOTLIGHT: Newsletter Primary Story
</td>
</tr>
<tr>
<td class="fullWidthImage" style="padding: 0 30px; font-family: 'Merriweather', Serif; font-size: 14px; font-weight: bold; color: #666;">
<img src="mardi-gras.jpg" style="width: 100%; height: auto;" alt="Mardi Gras" />
</td>
</tr>
<tr>
<td align="left" style="padding: 20px 30px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #666; line-height: 18px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
<tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #f9f9f9;">
<tbody>
<tr>
<td style="background-color: #E9E9E9; padding: 10px;">
<table class="container4" cellspacing="0" cellpadding="0" border="0" align="left" style="float: left; width: 33%;">
<tbody>
<tr>
<td style="padding: 10px !important; width: 35px;">
<img src="https://www.unoalumni.com/image/template/wrapButtons-iconProfile.png" />
</td>
<td style="padding: 10px 0 !important;">
<a href="#" style="font-family: 'Merriweather', Serif; font-size: 12px; color: #595959; font-weight: bold; text-transform: uppercase; text-decoration: none;">Profile Update</a>
</td>
</tr>
</tbody>
</table>
<table class="container4" cellspacing="0" cellpadding="0" border="0" align="left" style="float: left; width: 33%;">
<tbody>
<tr>
<td style="padding: 10px !important; width: 35px;">
<img src="https://www.unoalumni.com/image/template/wrapButtons-iconVolunteer.png" />
</td>
<td style="padding: 10px 0 !important;">
<a href="#" style="font-family: 'Merriweather', Serif; font-size: 12px; color: #595959; font-weight: bold; text-transform: uppercase; text-decoration: none;">Get Involved</a>
</td>
</tr>
</tbody>
</table>
<table class="container4" cellspacing="0" cellpadding="0" border="0" align="left" style="float: left; width: 33%;">
<tbody>
<tr>
<td style="padding: 10px !important; width: 35px;">
<img src="https://www.unoalumni.com/image/template/wrapButtons-iconShare.png" />
</td>
<td style="padding: 10px 0 !important;">
<a href="#" style="font-family: 'Merriweather', Serif; font-size: 12px; color: #595959; font-weight: bold; text-transform: uppercase; text-decoration: none;">Share Successes</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="container2 columns" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #ffffff;">
<tbody>
<tr valign="top">
<td style="padding: 20px;">
<table class="container3" cellspacing="0" cellpadding="0" border="0" align="left" style="float: left; width: 50%;">
<tbody>
<tr>
<td class="fullWidthImage" style="font-family: 'Merriweather', Serif; font-size: 12px; font-weight: bold; color: #37849c; padding: 10px;">
<img src="sample-2.jpg" style="width: 100%; height: auto;" alt="" />
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Merriweather', Serif; font-size: 16px; color: #01355D; font-weight: bold; padding: 10px;">
Contrary to popular belief
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #777; padding: 7px 10px; line-height: 16px;">
Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur. <br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
</tbody>
</table>
<table class="container3" cellspacing="0" cellpadding="0" border="0" align="right" style="float: right; width: 50%;">
<tbody>
<tr>
<td class="fullWidthImage" style="font-family: 'Merriweather', Serif; font-size: 12px; font-weight: bold; color: #37849c; padding: 10px;">
<img src="sample-3.jpg" style="width: 100%; height: auto;" alt="" />
</td>
</tr>
<tr>
<td align="left" style="font-family:'Merriweather', Serif; font-size: 16px; color: #01355D; font-weight: bold; padding: 10px;">
From a Lorem Ipsum passage
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #777; padding: 7px 10px; line-height: 16px;">
Going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. <br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="container2 columns" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #0E1D2A;">
<tbody>
<tr>
<td style="padding: 30px;">
<table class="container4" cellspacing="0" cellpadding="0" border="0" align="left" style="float: left; width: 60%;">
<tbody>
<tr>
<td style="padding: 10px; text-align: center; font-family: 'Merriweather', Serif; font-style: italic; color: #fff; font-size: 15px; font-weight: normal;">
UNO Alumni just like you help to make a difference every day.
</td>
</tr>
</tbody>
</table>
<table class="container4" cellspacing="0" cellpadding="0" border="0" align="right" style="float: right; width: 30%;">
<tbody>
<tr>
<td style="padding: 10px; text-align: center;">
<a style="display: inline-block; font-family: 'Merriweather', Serif; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #66aa33; margin: 0; padding: 10px 15px; letter-spacing: .1em; text-transform: uppercase; text-align: center; white-space: nowrap;" href="target=&amp;pid=275&amp;did=0&amp;tab=0">MAKE A GIFT</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #ffffff;">
<tbody>
<tr>
<td align="left" style="font-family: 'Merriweather', Serif; font-size: 14px; color: #01355D; font-weight: bold; padding: 30px 30px 20px;">
This book is a treatise on the theory of ethics, very popular during the Renaissance.
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #8d8981; line-height: 16px; padding: 0 30px 20px 30px;">
<img src="sample-6.jpg" alt="" style="padding:0 0 10px 10px;" align="right"/>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.<br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #8d8981; line-height: 16px; padding: 0 30px 20px 30px;">
<img src="sample-7.jpg" alt="" style="padding:0 0 10px 10px;" align="right"/>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.<br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #8d8981; line-height: 16px; padding: 0 30px 20px 30px;">
<img src="sample-8.jpg" alt="" style="padding:0 0 10px 10px;" align="right"/>
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #ffffff;">
<tbody>
<tr>
<td style="padding: 10px 0;"><hr style="width: 100%; border: none; border-top: 1px solid #E9E9E9;" /></td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; background-color:#fff;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="left" style="font-family: 'Merriweather', Serif; font-size: 20px; color: #01355D; font-weight: bold; padding: 10px 30px;">
Why Do We Use It?
</td>
</tr>
<tr>
<td class="fullWidthImage" style="font-family: 'Merriweather', Serif; font-size: 14px; font-weight: bold; color: #37849c; padding: 0 30px;">
<img src="sample-11.jpg" style="width: 100%; height: auto;" alt="" />
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #8d8981; padding: 20px 30px 30px; line-height: 16px;">
As <a style="color: #787878; text-decoration: none;">Link text</a> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br /><br />
<a href="" style="font-family: 'Merriweather', Serif; color: #787878; font-weight: bold; text-decoration: none; font-size: 13px;">Read More &raquo;</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" align="left" style="width: 600px; background-color: #E9E9E9;">
<tbody>
<tr>
<td style="padding: 30px 50px; text-align: center; font-family: 'Merriweather', Serif; font-style: italic; color: #65686d; font-size: 15px; font-weight: normal;">
Have an idea for a story? Have exciting news you'd like to share?
<span style="font-weight: bold;">Join the conversation.</span><br><br>
<a href="#" style="margin-right: 5px"><img src="social-facebook.png" width="30" height="30" border="0" alt=""></a>
<a href="#" style="margin-right: 5px"><img src="social-twitter.png" width="30" height="30" border="0" alt=""></a>
<a href="#" style="margin-right: 5px"><img src="social-youtube.png" width="30" height="30" border="0" alt=""></a>
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; background-color:#fff;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="center" style="font-family: 'Merriweather', Serif; font-size: 20px; color: #01355D; font-weight: bold; padding: 30px 30px 20px;">
Coming Soon: Upcoming Events
</td>
</tr>
<tr>
<td align="center" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; font-style: italic; color: #666; padding: 10px 30px; line-height: 16px;">
Checkout the following events upcoming on campus. In some cases, Alumni are offered special offers on tickets and reservations to these events.
</td>
</tr>
<tr>
<td align="center" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 13px; color: #003056; padding: 20px 30px; line-height: 16px;">
<strong>Friday, March 17 - 7pm - 10pm</strong><br>
<a href="#" style="color: #003056; text-decoration: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a><br /><br />
<strong>Friday, March 17 - 7pm - 10pm</strong><br>
<a href="#" style="color: #003056; text-decoration: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a><br /><br />
<strong>Friday, March 17 - 7pm - 10pm</strong><br>
<a href="#" style="color: #003056; text-decoration: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a><br /><br />
<strong>Friday, March 17 - 7pm - 10pm</strong><br>
<a href="#" style="color: #003056; text-decoration: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
</td>
</tr>
<tr>
<td align="center" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; color: #01355D; padding: 20px 30px; line-height: 16px;">
<a href="" style="font-family: 'Merriweather', Serif; color: #01355D; font-weight: bold; text-decoration: none; font-size: 13px;">View All Upcoming UNO Alumni Events &raquo;</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #ffffff;">
<tbody>
<tr>
<td style="padding: 10px 0;"><hr style="width: 100%; border: none; border-top: 1px solid #E9E9E9;" /></td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #ffffff;">
<tbody>
<tr>
<td style="color: #787878; font-family: 'Merriweather', Serif; font-size: 12px; line-height: 16px; padding: 10px 30px 20px;">
<span style="font-weight: bold; font-family: 'Merriweather', Serif; font-size: 13px;">Last Word:</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; background-color: #666666;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr valign="top">
<td style="color: #ffffff; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; text-align: center; padding: 10px 10px;">
<a style="color: #ffffff; text-decoration: none;" href="target=&amp;pid=279&amp;did=0&amp;tab=0">Home</a> | <a style="color: #fff; text-decoration: none;" href="target=&amp;pid=259&amp;did=0&amp;tab=0">Contact</a> | <a style="color: #fff; text-decoration: none;" href="target=&amp;pid=219&amp;did=0&amp;tab=0">Privacy Policy</a> | <a style="color: #fff; text-decoration: none;" href="target=&amp;pid=220&amp;did=0&amp;tab=0">Unsubscribe</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; padding:10px 10px; background-color: #e9e9e9;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr valign="top">
<td align="" style="text-align: center; color: #8d8981; font-family: 'Merriweather', Serif; font-size: 11px; line-height: 16px; padding: 20px 0 10px 0;">
<strong>University of New Orleans</strong><br />
12424 Research Parkway, Suite 250, Orlando, FL 32826<br />
Phone: 504.280.2586 | 800.488.2956 | Fax: 504.280.1080<br />
<a style="color: #666; text-decoration: none;" href="mailto:alumni@uno.edu">alumni@uno.edu</a>
</td>
</tr>
<tr valign="top">
<td align="" style="text-align: center; color: #8d8981; font-family: 'Merriweather', Serif; font-size: 11px; line-height: 16px; padding: 10px;">
<a style="display: inline-block; color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; background-color: #66aa33; margin: 0 5px 10px 0; padding: 10px 15px; letter-spacing: .1em; text-transform: uppercase;" href="target=&amp;pid=275&amp;did=0&amp;tab=0">MAKE A GIFT</a>
<a style="display: inline-block; color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; background-color: #002746; margin: 0 0 10px 5px; padding: 10px 15px; letter-spacing: .1em; text-transform: uppercase;" href="target=&amp;pid=473&amp;did=0&amp;tab=0">REGISTER</a>
</td>
</tr>
</tbody>
</table>
<table class="container2" cellspacing="0" cellpadding="0" border="0" style="width: 600px; background-color: #e9e9e9;">
<tbody>
<tr>
<td><hr style="width: 100%; border: none; border-top: 1px solid #ccc;" /></td>
</tr>
</tbody>
</table>
<table class="container2" style="width: 600px; background-color: #e9e9e9;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="" style="text-align: center; width: 50%; color: #666; font-family: 'Merriweather', Serif; font-size: 11px; line-height: 16px; padding: 10px;">
It's easy to <a style="color: #666; text-decoration: none;" href="target=&amp;pid=220&amp;did=0&amp;tab=0">update your Email Preferences</a>. Be sure to add <a style="color: #666; text-decoration: none;" href="mailto:alumni@uno.edu">alumni@uno.edu</a> to your address book or safe senders list so our emails get to your inbox. You may also review our <a style="color: #666; text-decoration: none;" href="target=&amp;pid=219&amp;did=0&amp;tab=0">Privacy Policy</a>.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment