-
Notifications
You must be signed in to change notification settings - Fork 3
/
fixed.html
172 lines (149 loc) · 6.38 KB
/
fixed.html
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
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-US" xml:lang="en-US">
<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"/>
<title>Demo Promotion Email</title>
<style>
/**Global**/
.outer-td { padding: 10px; }
.main { border: 1px solid #000001; padding: 10px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
h1 { font-size: 35px; line-height: 39px; }
h2 { font-size: 18px; line-height: 22px; }
/**Sections**/
.header { padding: 30px; background-color: #58BDC9; color: #ffffff; }
.text-body { padding-top: 34px; padding-left: 15px; }
.promotion-image { padding-top: 10px; padding-bottom: 20px; }
.promotion-image-alt { font-size: 10px; }
.promo-code { background-color: #000001; color: #ffffff; padding: 15px; font-size: 35px; }
.button-td { padding-top: 35px; padding-bottom: 50px; }
.footer { padding: 10px; background-color: #58BDC9; color: #ffffff; }
/**Spacing**/
.pb10 { padding-bottom: 10px; }
/**Colors**/
.red { color: #F61414; }
.white {color: #ffffff; }
</style>
</head>
<body>
<!--The purpose of this code is for demonstration purposes. You are welcome to use it as a starting point.-->
<!--Start Wrapper-->
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="outer-td">
<!--Start Email Container-->
<table class="main" style="width:650px;" align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="650">
<tr>
<td>
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--Header Begins-->
<tr>
<td class="header">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="white" align="center">
<h1>Thank you for signing up!</h1>
</td>
</tr>
<tr>
<td class="white" align="center">
<h2>Below is your 10% off promo code</h2>
</td>
</tr>
</table>
</td>
</tr>
<!--Header Ends-->
<!--Text Body Begins-->
<tr>
<td class="text-body">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="pb10">
Dear <strong class="red">Customer</strong>,
</td>
</tr>
<tr>
<td>
<p>Thank you for joining the Rewards Program!</p>
<p>You have earned your first promo code to enjoy on your next purchase.</p>
<p>Use at any location or online!</p>
</td>
</tr>
</table>
</td>
</tr>
<!--Text Body Ends-->
<!--Promotion Image-->
<tr>
<td class="promotion-image">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<img class="promotion-image-alt" src="https://i.ibb.co/5r1LwTp/body-image.jpg" alt="Promotion Image" width="593" height="400"/>
</td>
</tr>
</table>
</td>
</tr>
<!--Promotion Image Ends-->
<!--Promo Code-->
<tr>
<td>
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 250px" width="250px">
<tr>
<td class="promo-code" align="center">
0 5 0 5 0
</td>
</tr>
</table>
<!-- end table block -->
</td>
</tr>
<!--Promo Code Ends-->
<!--Button-->
<tr>
<td class="button-td">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#placeholder" style="height:50px;v-text-anchor:middle;width:260px;" arcsize="50%" strokecolor="#000001" fillcolor="#F0F0F0">
<w:anchorlock/>
<center style="color:#000000;font-family:sans-serif;font-size:13px;font-weight:bold;">VISIT OUR WEBSITE</center>
</v:roundrect>
<![endif]--><a href="#placeholder"
style="background-color:#F0F0F0;border:1px solid #000001;border-radius:25px;color:#000000;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:260px;-webkit-text-size-adjust:none;mso-hide:all;">VISIT OUR WEBSITE</a></div>
</td>
</tr>
</table>
<!-- end table block -->
</td>
</tr>
<!--Button Ends-->
<!--Footer-->
<tr>
<td class="footer">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="white" align="center">
© 2021 Company, Inc.
</td>
</tr>
</table>
<!-- end table block -->
</td>
</tr>
<!--Footer Ends-->
</table>
</td>
</tr>
</table>
<!--End Email Container-->
</td>
</tr>
</table>
<!--End Wrapper-->
</body>
</html>