-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathEmail_Sample.html
More file actions
121 lines (110 loc) · 6.13 KB
/
Email_Sample.html
File metadata and controls
121 lines (110 loc) · 6.13 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
<html>
<head>
<style>
@MEDIA screen and (MAX-WIDTH: 600px) {
.top {display: table-header-group !important; width: 100% !important;}
.bottom { display: table-footer-group !important; width: 100% !important; }
}
.PromoButton {
border: none;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: lightcyan;
}
</style>
<title>Email Template</title>
</head>
<body align="center" >
<div id="email" style="width:800px; margin: auto; background:white;">
<!--Header-->
<table role="presentation" border="1" width="100%" cellspacing="0">
<tr>
<td bgcolor="#498186" align="center" style="color: #5FA9DC;">
<img alt="placeholder image" src="#" width="400px">
<h1 style="font-size: 52px; margin:0 0 20px 0; font-family:Arial;"> Welcome to my email sample</h1>
</td>
</tr>
</table>
<!--Promotion Module-->
<table class="promotion module" role="presentation" align="center">
<tr> <!--promo text-->
<td class="promotion text" ></td>
<h2>Upcoming promotion information</h2>
<p style="font-size:16px; font-family:Arial">Promotional information</p>
</tr>
<tr>
<td class="promotion button" role="presentation">
<button class="PromoButton" style="color: #26B5A7;">Green</button>
</td>
</tr>
</table>
<!--Column Module-->
<table class="columns" border="1" cellpadding="0px" cellspacing="0" role="presentation" align="center" bgcolor="#DBA22E">
<tr>
<td align="center" valign="top" class="pb24">
<table border="0" cellpadding="10px" cellspacing="0" role="presentation" width="100%">
<td align="left" valign="top" width="40" class="col first collapse">
<td class="top">
<img alt="placeholder" src="#" width="200px" align="left">
</td>
<td class="bottom">
<a class="columnHeading" href="#">
<h2>Heading</h2></a>
<p style="margin:0 0 0 0; font-size:16px; line-height:20px; font-family:Arial">Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan, nisi ut aliquid ex ea connodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillun dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt nollit anin id est laborun.</p>
</td>
</td>
</table>
</td>
</tr>
<tr> <!--middle right column-->
<td align="center" valign="top" class="pb24" dir="rtl">
<table border="0" cellpadding="10px" cellspacing="0" role="presentation" width="100%">
<td align="left" valign="top" width="40" class="col row-end collapse" dir="ltr">
<td class="top">
<img alt="placeholder" src="#" width="200px" align="right">
</td>
<td class="bottom">
<a class="columnHeading" href="#">
<h2>Heading</h2></a>
<p style="margin:0 0 0 0; font-size:16px; line-height:20px; font-family:Arial; text-align: left;">Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan, nisi ut aliquid ex ea connodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillun dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt nollit anin id est laborun.</p>
</td>
</td>
</table>
</td>
</tr>
<tr> <!--bottom right column-->
<td align="center" valign="top" class="pb24">
<table border="0" cellpadding="10px" cellspacing="0" role="presentation" width="100%">
<td align="left" valign="top" width="40" class="col first collapse">
<td class="top">
<img alt="placeholder" src="#" width="200px" align="left">
</td>
<td class="bottom">
<a class="columnHeading" href="#">
<h2>Heading</h2></a>
<p style="margin:0 0 0 0; font-size:16px; line-height:20px; font-family:Arial">Loren ipsun dolor sit anet, consectetur adipisci elit, sed eiusnod tenpor incidunt ut labore et dolore nagna aliqua. Ut enin ad ninin venian, quis nostrun exercitationen ullan corporis suscipit laboriosan, nisi ut aliquid ex ea connodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillun dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt nollit anin id est laborun.</p>
</td>
</td>
</table>
</td>
</tr>
</table>
<!--Footer Module-->
<table role="presentation" border="1" width="100%" cellspacing="0">
<tr class="full-width-background">
<td class="footer-links" bgcolor="#498186" style="padding: 30px 30px;" align="center">
<a href="#">Terms of Service</a> |
<a href="#">Privacy Policy</a>|
<a href="#">Unsubscribe</a>
</td>
</tr>
</table>
</div>
</body>
</html>