forked from philwareham/responsive-email
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwelcome-mail.html
More file actions
301 lines (211 loc) · 13.3 KB
/
welcome-mail.html
File metadata and controls
301 lines (211 loc) · 13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>*|MC:SUBJECT|*</title>
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<style type="text/css">
/* EMBEDDED CSS
Android Mail doesn't support "class" declarations outside of a media query so use inline CSS as a rule.
More info: Http://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/ */
/****** EMAIL CLIENT BUG FIXES - BEST NOT TO CHANGE THESE ********/
/* Forces Hotmail to display emails at full width. */
.ExternalClass {width:100%;}
/* Forces Hotmail to display normal line spacing. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
/* Resets all body margins and padding to "0" for good measure. */
body {margin:0; padding:0;}
/* Resolves webkit padding issue. */
table {border-spacing:0;}
/* Resolves the Outlook 2007, 2010, and Gmail td padding issue. */
table td {border-collapse:collapse;}
/****** END BUG FIXES ********/
/****** RESETTING DEFAULTS, IT IS BEST TO OVERWRITE THESE STYLES INLINE ********/
/* This sets a clean slate for all clients EXCEPT Gmail.
From there it forces you to do all of your spacing inline during the development process.
Be sure to stick to margins because paragraph padding is not supported by Outlook 2007/2010.
Remember: Hotmail does not support "margin" nor the "margin-top" properties.
Stick to "margin-bottom", "margin-left", "margin-right" in order to control spacing.
It also wise to set the inline top-margin to "0" for consistancy in Gmail for every inline instance
of a paragraph tag. */
p {margin:0; padding:0; margin-bottom:0;}
/* This CSS will overwrite Hotmails default CSS and make your headings appear consistant with Gmail.
From there, you can override with inline CSS if needed. */
h1, h2, h3, h4, h5, h6 {color:#333333; line-height:100%;}
/****** END RESETTING DEFAULTS ********/
/****** EDITABLE STYLES - FOR YOUR TEMPLATE ********/
/* The "body" is defined here for Yahoo Beta because it does not support your body tag. Instead, it will
create a wrapper div around your email and that div will inherit your embedded body styles.
The "#body_style" is defined for AOL because it does not support your embedded body definition nor
your body tag, we will use this class in our wrapper div. */
body, #body_style {width:100% !important; min-height:1000px; color:#444; background:#e0dbcf; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:1.4;}
/* This is the embedded CSS link color for Gmail. This will overwrite Hotmail and Yahoo Beta's
embedded link colors and make it consistent with Gmail. Also use this rule on inline CSS. */
a {color:#114eb1; text-decoration:none;}
/* There is no way to set these inline so you have the option of adding pseudo class definitions here.
They won't work for Gmail or older Lotus Notes but it's a nice addition for all other clients. */
a:link {color:#17BCD2; text-decoration:none;}
a:visited {color:#183082; text-decoration:none;}
a:focus {color:#0066ff !important;}
a:hover {color:#0066ff !important;}
/* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from
linking other numbers that look like, but are not phone numbers. Use these two blocks of code to
"unstyle" any numbers that may be linked. The second block gives you a class ".mobile_link" to apply
with a span tag to the numbers you would like linked and styled.
More info: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/ */
a[href^="tel"], a[href^="sms"] {text-decoration:none; color:#333333; pointer-events:none; cursor:default;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:default; color:#6e5c4f !important; pointer-events:auto; cursor:default;}
/****** MEDIA QUERIES ********/
/* You must use attribute selectors in your media queries to prevent Yahoo from rendering these styles.
We added a yahoo attribute in the body tag to complete this fix.
More info: http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries */
/* Target mobile devices. */
/* @media only screen and (max-device-width: 639px) { */
@media only screen and (max-width: 639px) {
/* Hide elements at smaller screen sizes (!important needed to override inline CSS). */
body[yahoo] .hide {display:none !important;}
/* Adjust table widths at smaller screen sizes. */
body[yahoo] .table {width:320px !important;}
body[yahoo] .innertable {width:280px !important;}
/* Resize hero image at smaller screen sizes. */
body[yahoo] .heroimage {width:280px !important; height:100px !important;}
/* Resize page shadow at smaller screen sizes. */
body[yahoo] .shadow {width:280px !important; height:4px !important;}
/* Collapse footer columns. */
body[yahoo] .footer-left {width:320px !important;}
body[yahoo] .footer-right {width:320px !important;}
body[yahoo] .footer-right img {float:left !important; margin:0 1em 0 0 !important;}
}
/* Target tablet devices. */
/* @media only screen and (min-device-width: 640px) and (max-device-width: 1024px) { */
@media only screen and (min-width: 640px) and (max-width: 1024px) {
}
/*** END EDITABLE STYLES ***/
/****** TEMPORARY - THESE SHOULD BE MOVED INLINE AT END OF YOUR DEVELOPMENT PROCESS ********/
h1 {font-size:26px; line-height:1.2; font-weight:normal; margin-top:0; margin-bottom:0;}
p {margin-top:0; margin-bottom:0;}
img {display:block; border:none; outline:none; text-decoration:none;}
/* Remove spacing around Outlook 07, 10 tables */
table {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
/*** END TEMPORARY ***/
</style>
</head>
<body style="width:100% !important; min-height:1000px; color:#333333; background:#e0dbcf; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:1.4;"
alink="#9d470a" link="#9d470a" bgcolor="#e0dbcf" text="#333333" yahoo="fix">
<!-- You may adjust each of the values above for your template as needed.
We've included the style attribute for Gmail because it does not support embedded CSS and it will convert this body tag to
a div. Since it gets converted to a div, the other body attributes like bgcolor are ignored.
We included body attributes (alink, link, bgcolor and text) for Lotus Notes 6.5 and 7, as these clients do not offer much
support for embedded nor inline CSS.
The "min-height" attribute is set for Gmail and AOL since they will be converting this body tag to a div and we want our
background color to reach the bottom of the page.
The yahoo attribute is added if you are using media queries for mobile devices (see media queries above) -->
<!-- PAGE WRAPPER -->
<div id="body_style" style="background:#f4f5f7">
<!-- Wrapper/Container Table: Use a wrapper table to control the width and the background color consistently of your email. Use this approach instead of setting attributes on the body tag. -->
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width:100% !important; margin:0; padding:0;">
<tr bgcolor="#f4f5f7">
<td>
<!-- Tables are the most common way to format your email consistently. Set your table widths inside cells and in most cases reset cellpadding, cellspacing, and border to zero. Use nested tables as a way to space effectively in your message. -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table"bgcolor="#fff" style="margin-top: 20px;border: 1px dotted #d6d7d8; border-top:1px solid #e6e7e8; margin-bottom:30px;border-radius: 5px 5px 0 0;border-bottom:3px solid #d6d7d8; ">
<!-- HEADER -->
<tr>
<td>
<!-- set a value for bgcolor -->
<table text="#666" width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- header left: logo and link to homepage -->
<td width="320" valign="top" style=" padding: 5px 20px;color: #FFF; border-bottom: 5px solid #FCDF3D; ">
<!-- set an image for header left - must be 320px width (height can be variable) -->
<a href="#" target="_blank" style="color:#CCC; font-weight:bold; font-size: 24px; text-decoration: none;font-style:italic;">3CRUMBS</a>
</td>
<!-- /header left -->
</tr>
</table>
</td>
</tr>
<!-- /HEADER -->
<!-- CONTENT -->
<!-- set a value for bgcolor -->
<tr bgcolor="#ffffff">
<td style="padding-top:20px;">
<!-- hero article -->
<table style="margin-bottom:1em; color:#456;" width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="innertable">
<tr>
<!-- hero article textarea -->
<td>
<table width="100%" cellspacing="0" cellpadding="10" border="0" bgcolor="#ffffff">
<tbody><tr>
<td >
<!-- hero article heading text -->
<h1 style="color:#A5A5AB; margin:1em 0; line-height: 1.2; font-weight: bold; font-style:italic;">Welcome Summer Crumley,</h1>
<div style="margin: 55px 0; clear:left;">
<span style="color: #A8A8AB; margin-right: 20px;margin-bottom: 20px; border-radius: 25px; padding:10px 20px; background: #F4F5F7; float:left; font-size: 24px;">1</span>
<h2 style="color:#456; font-size: 24px; font-weight:normal;margin-bottom:5px;">Instantly find & share cool buys around you!</h2>
<p style="color:#A6A6AB; font-size: 16px">Some call us instagram for local buys</p>
</div>
<div style="margin: 55px 0; clear:left;">
<span style="color: #A8A8AB;margin-right: 20px; margin-bottom: 20px; border-radius: 25px; padding:10px 20px; background: #F4F5F7; float:left; font-size: 24px;">2</span>
<h2 style="color:#456; font-size: 24px; font-weight:normal;margin-bottom:5px;">Crumbup the crumbs you like & share them with your friends.</h2>
<p style="color:#A6A6AB; font-size: 16px"><span style="color:#1e84c4; border-bottom: 1px dotted #1e84c4; font-weight:bold;">Tip</span> Users follow you based on your crumb taste.</p>
</div>
<div style="margin: 55px 0; clear:left;">
<span style="color: #A8A8AB;margin-right: 20px;margin-bottom: 20px; border-radius: 25px; padding:10px 20px; background: #F4F5F7; float:left; font-size: 24px;">3</span>
<h2 style="color:#456; font-size: 24px; font-weight:normal;margin-bottom:5px;">Get instant feedbacks for all your cool buys spotted around you.</h2>
<p style="color:#A6A6AB; font-size: 16px">If you bought it? Share & flaunt it!</p>
</div>
<!-- /hero article heading text -->
<!-- hero article paragraph text -->
<h3 style="color: #bbb; font-style:italic;">Love, <br /> 3Crumbs</h3>
<!-- /hero article paragraph text -->
</td>
</tr>
</tbody></table>
</td>
<!-- /hero article textarea -->
</tr>
</td>
</tr>
<!-- /CONTENT -->
<!-- FOOTER -->
<tr >
<td >
<table text="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:20px; border-top: 1px dotted #E6E7E8; padding-top: 20px;">
<tr>
<td>
<table align="left" text="#333333" width="280" cellpadding="10" cellspacing="0" border="0" class="footer-left" style="font-size: 11px;">
<tr>
<td style="color:#333333;">
<p>
<a href="*|UNSUB|*" target="_blank" style="color:#9ab; text-decoration:none;">Unsubscribe</a></p>
</td>
</tr>
</table>
<table align="right" text="#333333" width="280" cellpadding="10" cellspacing="0" border="0" class="footer-right">
<tr>
<td style="color:#333333;">
<p>
<a href="http://fb.com/3crumbs" target="_blank"><img style="margin-left:1em;" align="right" src="https://s3-ap-southeast-1.amazonaws.com/3crumbs-assets/images/facebook.gif" width="32" height="32" border="0" alt="Facebook" /></a>
<a href="http://twitter.com/3Crumbs" target="_blank"><img style="margin-left:1em;" align="right" src="http://s3-ap-southeast-1.amazonaws.com/3crumbs-assets/images/twitter.gif" width="32" height="32" border="0" alt="Twitter" /></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /FOOTER -->
</table>
</td>
</tr>
</table>
<!-- End of wrapper table -->
</div>
</body>
</html>