Skip to content

Commit 3eefc04

Browse files
leemunroeleemunroe
authored
Merge pull request #41 from leemunroe/develop
Version 2 of simple html email template
2 parents fe8e1f7 + 79ec8a0 commit 3eefc04

File tree

2 files changed

+518
-304
lines changed

2 files changed

+518
-304
lines changed

‎email-inlined.html

Lines changed: 180 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,183 @@
1-
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
2-
<!DOCTYPE html>
3-
<html style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
4-
<head>
5-
<meta name="viewport" content="width=device-width">
6-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7-
<title>Really Simple HTML Email Template</title>
8-
</head>
9-
<body bgcolor="#f6f6f6" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; -webkit-font-smoothing: antialiased; height: 100%; -webkit-text-size-adjust: none; width: 100% !important; margin: 0; padding: 0;">
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width">
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<title>Simple Transactional Email</title>
7+
<style media="all" type="text/css">
8+
@media all {
9+
.btn-primary table td:hover {
10+
background-color: #34495e !important;
11+
}
12+
.btn-primary a:hover {
13+
background-color: #34495e !important;
14+
border-color: #34495e !important;
15+
}
16+
}
17+
18+
@media all {
19+
.btn-secondary a:hover {
20+
border-color: #34495e !important;
21+
color: #34495e !important;
22+
}
23+
}
24+
25+
@media only screen and (max-width: 620px) {
26+
table[class=body] h1 {
27+
font-size: 28px !important;
28+
margin-bottom: 10px !important;
29+
}
30+
table[class=body] h2 {
31+
font-size: 22px !important;
32+
margin-bottom: 10px !important;
33+
}
34+
table[class=body] h3 {
35+
font-size: 16px !important;
36+
margin-bottom: 10px !important;
37+
}
38+
table[class=body] p,
39+
table[class=body] ul,
40+
table[class=body] ol,
41+
table[class=body] td,
42+
table[class=body] span,
43+
table[class=body] a {
44+
font-size: 16px !important;
45+
}
46+
table[class=body] .wrapper,
47+
table[class=body] .article {
48+
padding: 10px !important;
49+
}
50+
table[class=body] .content {
51+
padding: 0 !important;
52+
}
53+
table[class=body] .container {
54+
padding: 0 !important;
55+
width: 100% !important;
56+
}
57+
table[class=body] .header {
58+
margin-bottom: 10px !important;
59+
}
60+
table[class=body] .main {
61+
border-left-width: 0 !important;
62+
border-radius: 0 !important;
63+
border-right-width: 0 !important;
64+
}
65+
table[class=body] .btn table {
66+
width: 100% !important;
67+
}
68+
table[class=body] .btn a {
69+
width: 100% !important;
70+
}
71+
table[class=body] .img-responsive {
72+
height: auto !important;
73+
max-width: 100% !important;
74+
width: auto !important;
75+
}
76+
table[class=body] .alert td {
77+
border-radius: 0 !important;
78+
padding: 10px !important;
79+
}
80+
table[class=body] .span-2,
81+
table[class=body] .span-3 {
82+
max-width: none !important;
83+
width: 100% !important;
84+
}
85+
table[class=body] .receipt {
86+
width: 100% !important;
87+
}
88+
}
89+
90+
@media all {
91+
.ExternalClass {
92+
width: 100%;
93+
}
94+
.ExternalClass,
95+
.ExternalClass p,
96+
.ExternalClass span,
97+
.ExternalClass font,
98+
.ExternalClass td,
99+
.ExternalClass div {
100+
line-height: 100%;
101+
}
102+
.apple-link a {
103+
color: inherit !important;
104+
font-family: inherit !important;
105+
font-size: inherit !important;
106+
font-weight: inherit !important;
107+
line-height: inherit !important;
108+
text-decoration: none !important;
109+
}
110+
}
111+
</style>
112+
</head>
113+
<body class="" style="font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f6f6f6; margin: 0; padding: 0;">
114+
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;" width="100%" bgcolor="#f6f6f6">
115+
<tr>
116+
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
117+
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto !important; max-width: 580px; padding: 10px; width: 580px;" width="580" valign="top">
118+
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
10119

11-
<!-- body -->
12-
<table class="body-wrap" bgcolor="#f6f6f6" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; width: 100%; margin: 0; padding: 20px;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
13-
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;"></td>
14-
<td class="container" bgcolor="#FFFFFF" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; clear: both !important; display: block !important; max-width: 600px !important; Margin: 0 auto; padding: 20px; border: 1px solid #f0f0f0;">
120+
<!-- START CENTERED WHITE CONTAINER -->
121+
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
122+
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #fff; border-radius: 3px;" width="100%">
15123

16-
<!-- content -->
17-
<div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; display: block; max-width: 600px; margin: 0 auto; padding: 0;">
18-
<table style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
19-
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
20-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">Hi there,</p>
21-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">Sometimes all you want is to send a simple HTML email with a basic design.</p>
22-
<h1 style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 36px; line-height: 1.2em; color: #111111; font-weight: 200; margin: 40px 0 10px; padding: 0;">Really simple HTML email template</h1>
23-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">This is a really simple email template. Its sole purpose is to get you to click the button below.</p>
24-
<h2 style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 28px; line-height: 1.2em; color: #111111; font-weight: 200; margin: 40px 0 10px; padding: 0;">How do I use it?</h2>
25-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">All the information you need is on GitHub.</p>
26-
<!-- button -->
27-
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; width: auto !important; Margin: 0 0 10px; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
28-
<td style="font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; line-height: 1.6em; border-radius: 25px; text-align: center; vertical-align: top; background: #348eda; margin: 0; padding: 0;" align="center" bgcolor="#348eda" valign="top">
29-
<a href="https://github.com/leemunroe/html-email-template" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 2; color: #ffffff; border-radius: 25px; display: inline-block; cursor: pointer; font-weight: bold; text-decoration: none; background: #348eda; margin: 0; padding: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px;">View the source and instructions on GitHub</a>
124+
<!-- START MAIN CONTENT AREA -->
125+
<tr>
126+
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
127+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
128+
<tr>
129+
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
130+
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi there,</p>
131+
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
132+
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;" width="100%">
133+
<tbody>
134+
<tr>
135+
<td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
136+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
137+
<tbody>
138+
<tr>
139+
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="http://htmlemail.io" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call To Action</a> </td>
140+
</tr>
141+
</tbody>
142+
</table>
143+
</td>
144+
</tr>
145+
</tbody>
146+
</table>
147+
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">This is a really simple email template. It's sole purpose is to get the recipient to click the button with no distractions.</p>
148+
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Good luck! Hope it works.</p>
149+
</td>
150+
</tr>
151+
</table>
30152
</td>
31-
</tr></table>
32-
<!-- /button --><p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">Feel free to use, copy, modify this email template as you wish.</p>
33-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;">Thanks, have a lovely day.</p>
34-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 0 0 10px; padding: 0;"><a href="http://twitter.com/leemunroe" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; color: #348eda; margin: 0; padding: 0;">Follow @leemunroe on Twitter</a></p>
35-
</td>
36-
</tr></table>
37-
</div>
38-
<!-- /content -->
39-
40-
</td>
41-
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;"></td>
42-
</tr></table>
43-
<!-- /body --><!-- footer --><table class="footer-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; clear: both !important; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
44-
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;"></td>
45-
<td class="container" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; clear: both !important; display: block !important; max-width: 600px !important; margin: 0 auto; padding: 0;">
46-
47-
<!-- content -->
48-
<div class="content" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; display: block; max-width: 600px; margin: 0 auto; padding: 0;">
49-
<table style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; width: 100%; margin: 0; padding: 0;"><tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
50-
<td align="center" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">
51-
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.6em; color: #666666; font-weight: normal; margin: 0 0 10px; padding: 0;">Don't like these annoying emails? <a href="#" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; color: #999999; margin: 0; padding: 0;"><unsubscribe style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;">Unsubscribe</unsubscribe></a>.
52-
</p>
53-
</td>
54-
</tr></table>
55-
</div>
56-
<!-- /content -->
57-
58-
</td>
59-
<td style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.6em; margin: 0; padding: 0;"></td>
60-
</tr></table>
61-
<!-- /footer -->
62-
</body>
63-
</html>
153+
</tr>
154+
155+
<!-- END MAIN CONTENT AREA -->
156+
</table>
157+
158+
<!-- START FOOTER -->
159+
<div class="footer" style="clear: both; padding-top: 10px; text-align: center; width: 100%;">
160+
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
161+
<tr>
162+
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: #999999; text-align: center;" valign="top" align="center">
163+
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
164+
<br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Unsubscribe</a>.
165+
</td>
166+
</tr>
167+
<tr>
168+
<td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-top: 10px; padding-bottom: 10px; font-size: 12px; color: #999999; text-align: center;" valign="top" align="center">
169+
Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.
170+
</td>
171+
</tr>
172+
</table>
173+
</div>
174+
175+
<!-- END FOOTER -->
176+
177+
<!-- END CENTERED WHITE CONTAINER --></div>
178+
</td>
179+
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">&nbsp;</td>
180+
</tr>
181+
</table>
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)