Email Template Design
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Email Template</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* iOS BLUE LINKS */
.appleBody a {
color: #68440a;
text-decoration: none;
}
.appleFooter a {
color: #999999;
text-decoration: none;
}
/* MOBILE STYLES */
@media screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"] {
width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
td[class="logo"] {
text-align: left;
padding: 20px 0 20px 0 !important;
}
td[class="logo"] img {
margin: 0 auto !important;
}
td[class="mobile-hide"] {
display: none;
}
img[class="mobile-hide"] {
display: none !important;
}
img[class="img-max"] {
max-width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100% !important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="padding"] {
padding: 10px 5% 15px 5% !important;
}
td[class="padding-copy"] {
padding: 10px 5% 10px 5% !important;
text-align: center;
}
td[class="padding-meta"] {
padding: 30px 5% 0px 5% !important;
text-align: center;
}
td[class="no-pad"] {
padding: 0 0 20px 0 !important;
}
td[class="no-padding"] {
padding: 0 !important;
}
td[class="section-padding"] {
padding: 50px 15px 50px 15px !important;
}
td[class="section-padding-bottom-image"] {
padding: 50px 15px 0 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
td[class="mobile-wrapper"] {
padding: 10px 5% 15px 5% !important;
}
table[class="mobile-button-container"] {
margin: 0 auto;
width: 100% !important;
}
a[class="mobile-button"] {
width: 80% !important;
padding: 15px !important;
border: 0 !important;
font-size: 16px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0">
<!-- HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
<tr>
<td bgcolor="#ffffff">
<div align="center" style="padding: 0px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
<!-- LOGO/PREHEADER TEXT -->
<tr>
<td style="padding: 20px 0px 30px 0px" class="logo">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td bgcolor="#ffffff" width="100" >
<a target="_blank">
<img alt="Logo" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9eY1KulsS0wVS5yfl71R6EiMHFUdqL7ter-L8CBGWPPH2Un0kuqqemWrwV6s7EAC0a9xZ9DiwAmvTqBdg9vKnhlxo86vBXensJLLvhwCoHgambDzpoA5NTlaF10VWLMur5GmLMXXfoo6k/"
width="52" height="78" style="display: block;font-family: Helvetica, Arial, sans-serif;color: #666666;font-size: 16px;" border="0" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!-- COMPACT ARTICLE SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
<tr>
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 70px 15px" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="500" style="padding: 0 0 20px 0"
class="responsive-table">
<!-- TITLE -->
<tr>
<td align="left" style="
padding: 0 0 10px 130px;
font-size: 25px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
" class="padding-copy" colspan="2">
E-mail Template
</td>
</tr>
<tr>
<td valign="top" style="padding: 40px 0 0 0" class="mobile-hide">
<a href="http://www.campaignmonitor.com/resources/" target="_blank"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/48935/campaign-monitor-logo.jpg"
alt="Campaign Monitor" width="105" height="105" border="0" style="
display: block;
font-family: Arial;
color: #666666;
font-size: 14px;
width: 105px;
height: 105px;
" /></a>
</td>
<td style="padding: 40px 0 0 0" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #aaaaaa;
" class="padding-meta">
Campaign Monitor Guides
</td>
</tr>
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 22px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
" class="padding-copy">
A fantastic library of information
</td>
</tr>
<tr>
<td align="left" style="
padding: 10px 0 15px 25px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, Arial, sans-serif;
color: #666666;
" class="padding-copy">
Campaign Monitor puts out some amazing resources. These
guides, as well as their Ultimate Guide to CSS, are
constant companions.
</td>
</tr>
<tr>
<td style="padding: 0 0 45px 25px" align="left" class="padding">
<table border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center" style="padding: 0" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0"
class="responsive-table">
<tr>
<td align="center">
<a href="http://www.campaignmonitor.com/resources/"
target="_blank" style="
font-size: 15px;
font-family: Helvetica, Arial,
sans-serif;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background-color: #4fc1e9;
border-top: 10px solid #4fc1e9;
border-bottom: 10px solid #4fc1e9;
border-left: 20px solid #4fc1e9;
border-right: 20px solid #4fc1e9;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
display: inline-block;
" class="mobile-button">Learn More →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 40px 0 0 0" class="mobile-hide">
<a href="https://litmus.com/community" target="_blank"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/48935/litmus-logo.jpg"
alt="Litmus" width="105" height="105" border="0" style="
display: block;
font-family: Arial;
color: #666666;
font-size: 14px;
width: 105px;
height: 105px;
" /></a>
</td>
<td style="padding: 40px 0 0 0" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #aaaaaa;
" class="padding-meta">
Template
</td>
</tr>
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 22px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
" class="padding-copy">
A growing community for email professionals
</td>
</tr>
<tr>
<td align="left" style="
padding: 10px 0 15px 25px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, Arial, sans-serif;
color: #666666;
" class="padding-copy">
Share knowledge, ask code questions, and learn from a
growing library of articles on all things email.
</td>
</tr>
<tr>
<td style="padding: 0 0 45px 25px" align="left" class="padding">
<table border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center" style="padding: 0" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0"
class="responsive-table">
<tr>
<td align="center">
<a href="https://litmus.com/community"
target="_blank" style="
font-size: 15px;
font-family: Helvetica, Arial,
sans-serif;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background-color: #4fc1e9;
border-top: 10px solid #4fc1e9;
border-bottom: 10px solid #4fc1e9;
border-left: 20px solid #4fc1e9;
border-right: 20px solid #4fc1e9;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
display: inline-block;
" class="mobile-button">Learn More →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="padding: 40px 0 0 0" class="mobile-hide">
<a href="http://templates.mailchimp.com" target="_blank"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/48935/mailchimp-logo.jpg"
alt="Freddie!" width="105" height="105" border="0" style="
display: block;
font-family: Arial;
color: #666666;
font-size: 14px;
width: 105px;
height: 105px;
" /></a>
</td>
<td style="padding: 40px 0 0 0" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #aaaaaa;
" class="padding-meta">
MailChimp Template Reference
</td>
</tr>
<tr>
<td align="left" style="
padding: 0 0 5px 25px;
font-size: 22px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
" class="padding-copy">
A stunning introduction to email design and coding
</td>
</tr>
<tr>
<td align="left" style="
padding: 10px 0 15px 25px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, Arial, sans-serif;
color: #666666;
" class="padding-copy">
MailChimp’s Fabio Carneiro unleashes an amazing
resource for learning more about all aspects of email
design.
</td>
</tr>
<tr>
<td style="padding: 0 0 45px 25px" align="left" class="padding">
<table border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0"
class="mobile-button-container">
<tr>
<td align="center" style="padding: 0" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0"
class="responsive-table">
<tr>
<td align="center">
<a href="http://templates.mailchimp.com"
target="_blank" style="
font-size: 15px;
font-family: Helvetica, Arial,
sans-serif;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background-color: #4fc1e9;
border-top: 10px solid #4fc1e9;
border-bottom: 10px solid #4fc1e9;
border-left: 20px solid #4fc1e9;
border-right: 20px solid #4fc1e9;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
display: inline-block;
" class="mobile-button">Learn More →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
<tr>
<td bgcolor="#ffffff" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="padding: 20px 0px 20px 0px">
<!-- UNSUBSCRIBE COPY -->
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center"
class="responsive-table">
<tr>
<td align="center" valign="middle" style="
font-size: 12px;
line-height: 18px;
font-family: Helvetica, Arial, sans-serif;
color: #666666;
">
<span class="appleFooter" style="color: #666666"></span><br /><a class="original-only"
style="color: #666666; text-decoration: none"></a><span
class="original-only" style="
font-family: Arial, sans-serif;
font-size: 12px;
color: #444444;
"> </span>
<a
style="color: #666666; text-decoration: none">
<p class="p3">
©
<strong>
<script>
const d = new Date();
let year = d.getFullYear();
document.write(year);
</script>
html-vs-css.com
</strong>
</p>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
- free email templates for gmail
- create gmail template
- best gmail templates
- gmail invitation templates
- gmail templates free download
- gmail email templates chrome extension
- where are gmail templates stored?
- gmail template with attachment
Business proposal email format Our business proposal email samples and a proposal email template will help you to land that client, project, price change.
Infra project proposal email — Use your proposal emails to clearly outline the proposed work, terms and conditions. Cover all the points to not leave any
- How do you email a business proposal?
- How do I write a professional email template?
- How do you write a business email sample?
- How do you write a project proposal email?
