Skip to content

Instantly share code, notes, and snippets.

@imbudhiraja
Last active April 4, 2019 12:43
Show Gist options
  • Save imbudhiraja/7ec1ed58ff953089bfd38479f3bb4e5b to your computer and use it in GitHub Desktop.
Save imbudhiraja/7ec1ed58ff953089bfd38479f3bb4e5b to your computer and use it in GitHub Desktop.
Email Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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.0" />
<title>Mail</title>
<style type="text/css">
#outlook a {
padding: 0;
}
.button {
display: inline-block;
width: 200px;
background-color: #66ccff;
border-radius: 3px;
color: #ffffff;
font-size: 15px;
line-height: 45px;
text-align: center;
text-decoration: none;
}
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
background: #8d8e90;
}
.body-action {
width: 100%;
margin: 30px auto;
padding: 0;
text-align: center;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
a {
color: #9ec459;
text-decoration: none;
text-decoration: none !important;
}
table[class=full] {
width: 100%;
clear: both;
}
@media only screen and (max-width: 640px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #9ec459;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #9ec459 !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 440px !important;
text-align: center !important;
}
td[class=devicewidth] {
width: 440px !important;
text-align: center !important;
}
img[class=devicewidth] {
width: 440px !important;
text-align: center !important;
}
img[class=banner] {
width: 440px !important;
height: 147px !important;
}
table[class=devicewidthinner] {
width: 420px !important;
text-align: center !important;
}
table[class=icontext] {
width: 345px !important;
text-align: center !important;
}
img[class="colimg2"] {
width: 420px !important;
height: 243px !important;
}
table[class="emhide"] {
display: none !important;
}
img[class="logo"] {
width: 440px !important;
height: 90px !important;
}
}
@media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: #9ec459;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: #9ec459 !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {
width: 280px !important;
text-align: center !important;
}
td[class=devicewidth] {
width: 280px !important;
text-align: center !important;
}
img[class=devicewidth] {
width: 280px !important;
text-align: center !important;
}
img[class=banner] {
width: 280px !important;
height: 93px !important;
}
table[class=devicewidthinner] {
width: 260px !important;
text-align: center !important;
}
table[class=icontext] {
width: 186px !important;
text-align: center !important;
}
img[class="colimg2"] {
width: 260px !important;
height: 150px !important;
}
table[class="emhide"] {
display: none !important;
}
img[class="logo"] {
width: 50px !important;
height: 30px !important;
}
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="margin-top:30px;">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth" style="background-color: #66ccff;">
<tbody>
<tr>
<td align="center" style="padding-top: 7px;padding-bottom: 7px;">
<a style="text-decortation:none;" href="#/" target="_blank">
<img src="/images/logo.png" alt="logo" class="logo" style="max-width: 150px;" /></a>
</td>
</tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody>
<tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
<tbody>
<tr>
<td width="100%">
<table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" style="border:1px solid #ccc">
<tbody>
<tr>
<td width="100%" height="20"></td>
</tr>
<tr>
<td>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
<tbody>
<tr>
<td style="font-family: Open Sans,open-sans,sans-serif; font-size:16px;">
Dear {{name}}
<br />
<br />Greetings!
</td>
</tr>
<tr>
<td style="font-family: Open Sans,open-sans,sans-serif; font-size:16px; line-height:22px;">
<br>
<p>Thanks for signing up for Company! We're excited to have you as Company.</p>
<table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div>
<a href="{{url}}" class="button" style="color:#fff" >Verify Email</a>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>If you’re having trouble clicking the button, copy and paste the URL below into your web browser.
</p>
<p><a href="{{url}}">{{url}}</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-family: Open Sans,open-sans,sans-serif; font-size:15px; padding:15px 0 10px; line-height:20px;">
<br />Best Wishes,
<br />Team Manish Budhiraja
<br />
</td>
</tr>
<tr>
<td style="border-bottom:2px #ccc; height:5px; padding:10px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin:5px 0 0px; background-color: #66ccff;">
<tr>
<td style="font-family: Helvetica, arial, sans-serif; color:#000; font-size:14px; padding: 10px 0 2px; line-height:20px;text-align: center;">
Find us on social media:
<br />
<br />
</td>
</tr>
<tr>
<td>
<!-- Social icons -->
<table width="150" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth" style="margin-top: -12px;">
<tbody>
<tr>
<td align="center">
<div class="imgpop">
<a target="_blank" href="#">
<img src="/images/facebook.png" alt="facebook" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
<td align="left" width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td align="center">
<div class="imgpop">
<a target="_blank" href="">
<img src="/images/twitter.png" alt="twitter" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
<td align="left" width="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
<td align="center">
<div class="imgpop">
<a target="_blank" href="">
<img src="/images/instagram.png" alt="instagram" border="0" width="43" height="43" style="display:block; border:none; outline:none; text-decoration:none;">
</a>
</div>
</td>
</tr>
<tr>
<td style="background-color: #66ccff;">
&nbsp;
</td>
</tr>
</tbody>
</table>
<!-- end of Social icons -->
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment