Come check out
Awesome Co!

I set up an Awesome Co profile where I can do tons of really awesome stuff! I want you to follow me so you can see it all. Once you join Awesome Co, you'll be able to do all sorts of Awesome stuff too.

Because I've invited you, you can also use the below coupon code to receive a 30% discount on you first months subscription!

User: Jon Doe

30% discount when you sign up now!

You'll be the first to hear about new arrivals, exclusive promotionas, cool collaborations, and the latest in everything.

Enter XLKIJP6887F when you sign up!

Check out some of my latest posts!

Item 1

Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.

Item 2

Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.

Item 3

Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.

Item 4

Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.

Copy Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Narrative Invitation Email</title>
<style type="text/css">

/* Take care of image borders and formatting */

img {
max-width: 600px;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}

a {
border: 0;
outline: none;
}

a img {
border: none;
}

/* General styling */

td, h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
}

td {
font-size: 13px;
line-height: 19px;
text-align: left;
}

body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%;
height: 100%;
color: #37302d;
background: #ffffff;
}

table {
border-collapse: collapse !important;
}

h1, h2, h3, h4 {
padding: 0;
margin: 0;
color: #444444;
font-weight: 400;
line-height: 110%;
}

h1 {
font-size: 35px;
}

h2 {
font-size: 30px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 18px;
font-weight: normal;
}

.important-font {
color: #21BEB4;
font-weight: bold;
}

.hide {
display: none !important;
}

.force-full-width {
width: 100% !important;
}

</style>

<style type="text/css" media="screen">
@media screen {
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

/* Thanks Outlook 2013! */
td, h1, h2, h3 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
}
}
</style>

<style type="text/css" media="only screen and (max-width: 600px)">
/* Mobile styles */
@media only screen and (max-width: 600px) {

table[class="w320"] {
width: 320px !important;
}

table[class="w300"] {
width: 300px !important;
}

table[class="w290"] {
width: 290px !important;
}

td[class="w320"] {
width: 320px !important;
}

td[class~="mobile-padding"] {
padding-left: 14px !important;
padding-right: 14px !important;
}

td[class*="mobile-padding-left"] {
padding-left: 14px !important;
}

td[class*="mobile-padding-right"] {
padding-right: 14px !important;
}

td[class*="mobile-padding-left-only"] {
padding-left: 14px !important;
padding-right: 0 !important;
}

td[class*="mobile-padding-right-only"] {
padding-right: 14px !important;
padding-left: 0 !important;
}

td[class*="mobile-block"] {
display: block !important;
width: 100% !important;
text-align: left !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 15px !important;
}

td[class*="mobile-no-padding-bottom"] {
padding-bottom: 0 !important;
}

td[class~="mobile-center"] {
text-align: center !important;
}

table[class*="mobile-center-block"] {
float: none !important;
margin: 0 auto !important;
}

*[class*="mobile-hide"] {
display: none !important;
width: 0 !important;
height: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}

td[class*="mobile-border"] {
border: 0 !important;
}
}
</style>
</head>
<body class="body" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td align="center" valign="top" bgcolor="#ffffff" width="100%">

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="background:#1f1f1f" width="100%">

<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td valign="top" class="mobile-block mobile-no-padding-bottom mobile-center" width="270" style="background:#1f1f1f;padding:10px 10px 10px 20px;">
<a href="#" style="text-decoration:none;">
<img src="https://www.filepicker.io/api/file/X9R4FqRPaEIS3vMxFXgl" width="142" height="30" alt="Your Logo"/>
</a>
</td>
<td valign="top" class="mobile-block mobile-center" width="270" style="background:#1f1f1f;padding:10px 15px 10px 10px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="#">
<img src="http://keenthemes.com/assets/img/emailtemplate/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="#">
<img src="http://keenthemes.com/assets/img/emailtemplate/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="#">
<img src="http://keenthemes.com/assets/img/emailtemplate/social_googleplus.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="#">
<img src="http://keenthemes.com/assets/img/emailtemplate/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="#">
<img src="http://keenthemes.com/assets/img/emailtemplate/social_rss.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>

</td>
</tr>
<tr>
<td style="border-bottom:1px solid #e7e7e7;">

<center>
<table cellpadding="0" cellspacing="0" width="600" class="w320">
<tr>
<td align="left" class="mobile-padding" style="padding:20px 20px 30px">

<br class="mobile-hide" />

<h1>Come check out<br> Awesome Co!</h1>

<br>
I set up an Awesome Co profile where I can do tons of really awesome stuff! I want you to follow me so you can see it all. Once you join Awesome Co, you'll be able to do all sorts of Awesome stuff too.<br>
<br>
Because I've invited you, you can also use the below coupon code to receive a 30% discount on you first months subscription!<br>

<br>

<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff">
<tr>
<td style="width:130px;background:#D84A38;">
<div>

<a href="#"
style="background-color:#D84A38;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:33px;text-align:center;text-decoration:none;width:130px;-webkit-text-size-adjust:none;">Sign up now!</a>

</div>
</td>
<td width="316" style="background-color:#ffffff; font-size:0; line-height:0;"> </td>
</tr>
</table>
</td>
<td class="mobile-hide" style="padding-top:20px;padding-bottom:0;">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="right" width="220" style="padding-right:20px; vertical-align:middle;">
<table width="94" align="right" cellpadding="0" cellspacing="0">
<tr>
<td style="border:2px solid #000000">
<img src="https://www.filepicker.io/api/file/OqRXT4JuRbmXSgbxccgK" style="display:block" width="90" height="90" alt="profile"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size:12px; padding-top:5px; text-align:center; padding-right:20px">
User: <a style="color:blue;" href="">Jon Doe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>

</td>
</tr>
<tr>
<td valign="top" style="background-color:#f8f8f8;border-bottom:1px solid #e7e7e7;">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="w320" style="height:100%;">
<tr>
<td valign="top" class="mobile-padding" style="padding:20px;">
<h2>30% discount when you sign up now!</h2>
<br>
You'll be the first to hear about new arrivals, exclusive promotionas, cool collaborations, and the latest in everything.
<br><br>
Enter <strong>XLKIJP6887F</strong> when you sign up!<br>
<br>
</td>
</tr>
</table>
</center>

</td>
</tr>
<tr>
<td valign="top" style="background-color:#ffffff;">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="w320" style="height:100%;">
<tr>
<td valign="top" class="mobile-padding" style="padding:20px 20px 30px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:4px 0 16px;">
<h3>Check out some of my latest posts!</h3>
</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="mobile-block">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="mobile-padding-right-only" style="padding:0 13px 0 0">
<a href="#"><img src="https://www.filepicker.io/api/file/UwY648YQTRiCsQnfwjAZ" width="120" height="100" alt="photo"/></a>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:10px 0 7px;">
<h4 class="h4">Item 1</h4>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.
</td>
<td valign="top" class="mobile-padding-left-only" style="padding:0 14px 0 13px">
<a href="#"><img src="https://www.filepicker.io/api/file/OmMM5HJxTGuNz3pcwoEt" width="120" height="100" alt="photo"/></a>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:10px 0 7px;">
<h4 class="h4">Item 2</h4>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.
</td>
</tr>
</table>
</td>

<td class="mobile-block">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="mobile-padding-right-only" style="padding:0 14px 0 13px">
<a href="#"><img src="https://www.filepicker.io/api/file/c1DD5WObTCam6pJqMS4T" width="120" height="100" alt="photo"/></a>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:10px 0 7px;">
<h4 class="h4">Item 3</h4>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.
</td>
<td valign="top" class="mobile-padding-left-only" style="padding:0 0 0 13px">
<a href="#"><img src="https://www.filepicker.io/api/file/gCvsWPniSRWtGnsLfYVw" width="120" height="100" alt="photo"/></a>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:10px 0 7px;">
<h4 class="h4">Item 4</h4>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, ut laoreet elit, sed diam sed ut dolore.
</td>
</tr>
</table>
</td>
</tr>
</table>

</td>
</tr>
</table>
</center>

</td>
</tr>
<tr>
<td style="background-color:#1f1f1f;">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="w320" style="height:100%;color:#ffffff" bgcolor="#1f1f1f" >
<tr>
<td align="right" valign="middle" class="mobile-padding" style="font-size:12px;padding:20px; background-color:#1f1f1f; color:#ffffff; text-align:left; ">
<a style="color:#ffffff;" href="#">Contact Us</a>  |  
<a style="color:#ffffff;" href="#">Facebook</a>  |  
<a style="color:#ffffff;" href="#">Twitter</a>  |  
<a style="color:#ffffff;" href="#">Support</a>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>


Basic Responsive Mail Template


Abstract


Abandoned cart notice - Offer a Discount


Abandoned cart notice - Offer a Discount - red-tan


Abandoned cart notice - Offer a Discount - Blue-Green


Abandoned cart - Dont miss out


Trip News Template


Hello


Come check us out


We Miss You

Come check out Awesome Co!

30% discount when you sign up now!

Check out some of my latest posts!

Item 1

Item 2

Item 3

Item 4

Come check out
Awesome Co!