Skip to content

Instantly share code, notes, and snippets.

@erickolivares

erickolivares/email-notification.html

Last active July 25, 2019 21:29
Show Gist options
  • Save erickolivares/b537cf79c22ae97d5685bcac95c8a66e to your computer and use it in GitHub Desktop.
Save erickolivares/b537cf79c22ae97d5685bcac95c8a66e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
email-notification.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Personal Email</title>
<style>
body{
background-color:#CCCCCC;
}
a:hover {
text-decoration: underline !important;
}
td.header{
text-indent: 25px;
}
td.header img {
margin:40px 0;
}
td.contentblock h4 {
color:#364156 !important;
font-size:16px;
line-height:24px;
font-weight: initial;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
}
.cell.header a {
display: inline-block;
}
h3 {
color:#FFAE33 !important;
font-size:16px;
line-height:24px;
font-weight: initial;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:20px;
padding-bottom:0;
display: inline;
font-weight: bold;
margin: 0;
}
.btn{
background-color:#F65279;
color:#fff;
text-decoration: none;
padding: 8px 10px;
display: inline-block;
margin-top: 0px;
font-family:'Verdana',Helvetica,Arial,sans-serif;
}
td a {
color:#424242;
}
td.contentblock p {
color:#3c3c3c;
font-size:15px;
line-height:27px;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock .dm-chat {
color:#757575;
font-size:15px;
line-height:27px;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
vertical-align:top;
padding-top:0;
padding-bottom:0;
text-decoration:none;
font-weight:normal;
}
td.contentblock .dm-chat a {
text-decoration:none;
color:#757575 !important;
}
td.contentblock img {
color:#757575;
margin-right: 5px;
margin-top:0;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.footer p {
color:#777777;
font-size: 10px;
line-height: 15px;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:5px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.authorimg {
padding: 10px 10px 20px 50px;
}
td.authorblock{
padding-top: 20px;
vertical-align: top;
}
td.authorblock a {
color:#F65279 !important;
}
td.authorblock strong {
color:#F65279;
}
td.authorblock h4 {
margin-bottom: 0px;
color:#364156 !important;
font-size:16px;
line-height:24px;
font-style: bold;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
padding-top:0;
padding-bottom:0;
}
td.authorblock p.author {
color:rgba(5, 32, 72, 0.5);
font-size: 15px;
line-height:24px;
font-family:'Verdana',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:5px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.cell{
padding:0;
}
@media only screen and (max-device-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 360px !important;
}
td.authorimg,
td.authorblock{
display: block;
width:100%;
padding-left: 50px !important;
}
td.authorimg {
padding-bottom:0px !important;
}
td.authorblock{
padding-bottom:10px !important;
}
td[class="cell"] img.header {
width: 300px !important;
height: auto !important;
}
}
</style>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width: 100% !important;-webkit-text-size-adjust: none;background-color: #CCCCCC;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="100%" height="20">
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" class="cell" border="0" style="border-width: 1px;border-style: solid;border-color: #E0DFDF;padding: 0;" bgcolor="#ffffff">
<table width="600" cellspacing="0" border="0" class="table" style="border-bottom-width: 1px; border-bottom-style: solid; border-color: #E0DFDF">
<tr>
<td width="100%" border="0" class="cell header" style="text-indent: 25px;padding: 0;">
<a href="http://app.itsmobo.com" style="color: #424242;display: inline-block;">
<img src="images/mobo-logo.png" border="0" width="124" height="38" align="center" style="line-height: 0;margin: 40px 0;">
</a>
</td>
</tr>
<tr>
<td width="100%" border="0">
<table cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="45" class="authorimg" style="padding: 10px 10px 20px 50px;">
<img src="images/avatar.png" alt="nis frome" width="45" height="45">
</td>
<td class="contentblock authorblock" style="padding-top: 20px;vertical-align: top;">
<h4 style="font-size: 16px;line-height: 24px;font-weight: initial;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 0px;padding-top: 0;padding-bottom: 0;font-style: bold;color: #364156 !important;"><strong style="color: #F65279;">Jasmine</strong> just posted on <a herf="" style="color: #F65279 !important;">Childcare</a></h4>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" border="0" class="cell" style="padding: 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td class="contentblock" style="padding: 0px 50px 50px 50px;">
<p style="color: #3c3c3c;font-size: 15px;line-height: 27px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 12px;padding-top: 0;padding-bottom: 0;font-weight: normal;">Quisque rutrum. In hac habitasse platea dictumst. Donec id justo. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis.</p>
<p class="dm-chat" style="color: #757575;font-size: 15px;line-height: 27px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 12px;padding-top: 0;padding-bottom: 0;font-weight: normal;vertical-align: top;text-decoration: none;"><a href="%%Direct Message User%%" style="color: #757575 !important;text-decoration: none;"><img src="images/chat.png" style="color: #757575;margin-right: 5px;margin-top: 0;padding-top: 0;padding-bottom: 0;font-weight: normal;">Send Private Message</a></p>
<a href="%%Link TO POST%%" class="btn" style="color: #fff;background-color: #F65279;text-decoration: none;padding: 8px 10px;display: inline-block;margin-top: 0px;font-family: 'Verdana',Helvetica,Arial,sans-serif;">View or Reply</a>
<br><br>
<h3 style="font-size: 16px;line-height: 24px;font-weight: bold;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 10px;padding-top: 20px;padding-bottom: 0;display: inline;margin: 0;color: #FFAE33 !important;">News from the motherboard!&nbsp;</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" cellpadding="20" cellspacing="0" border="0" class="table">
<tr>
<td width="100%" border="0">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="footer" style="text-align: center" border="0">
<p style="color: #777777;font-size: 10px;line-height: 15px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 5px;padding-top: 0;padding-bottom: 0;font-weight: normal;">Los Angeles, CA 90034 USA</p>
<p style="color: #777777;font-size: 10px;line-height: 15px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 5px;padding-top: 0;padding-bottom: 0;font-weight: normal;">You receive this email because you are subscribed to Notifications.</p>
<p style="color: #777777;font-size: 10px;line-height: 15px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 5px;padding-top: 0;padding-bottom: 0;font-weight: normal;"><a href="%%unsubscribe%%" style="color: #424242;">Unsubscribe from all future emails</a></p>
<p style="color: #777777;font-size: 10px;line-height: 15px;font-family: 'Verdana',Helvetica,Arial,sans-serif;margin-top: 0;margin-bottom: 5px;padding-top: 0;padding-bottom: 0;font-weight: normal;">Ⓒ2019 Mobo</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" border="0" class="cell" style="padding: 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="100%" height="40" border="0" class="cell" style="padding: 0;">
&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment