-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathresponsive_email.html
132 lines (121 loc) · 9.19 KB
/
responsive_email.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email title</title>
<meta name="format-detection" content="telephone=no" /> <!-- Turn off the phone number detection on IOS / Kikapcsoljuk az IOS-n a telefonszám detektálást -->
<meta name="viewport" content="width=320" /> <!-- Set viewport to 320px / Beállítuk, hogy a megjelenítést 320px szélességben végezze a kliens -->
<style type="text/css">
/* If the screen less then 640px, than these rules are applied */
/* Ha a megjelenítő 640px szélesség alatt van, akkor az alábbi két szabály lesz érvényben */
@media screen and (max-width: 640px){
.kozepre{float: none !important; margin: 8px auto !important;}
.keskenyebbre{width: 320px;}
}
</style>
</head>
<body style="margin-top:0; margin-bottom:0; margin-right:0; margin-left:0; min-width:320px;">
<!--[if mso]>
<center>
<table><tr><td width="640">
<![endif]-->
<div style="max-width:640px; margin: 10px auto;" class="keskenyebbre">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#e8e8e8">
<p style="text-align:left; margin: 10px; font-size: 18px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</td>
</tr>
</table>
</div>
<div style="max-width:640px; margin: 0 auto;">
<!--[if mso]><table width="640" cellspacing="0" cellpadding="0"><tr><td width="320"><![endif]-->
<div style="width:320px; float: left; height: 200px;" class="kozepre">
<img src="http://www.dynamicart.hu/blog/images/stories/cikkekhez/responsive-web-design-example.jpg" alt="reszponziv-email-template" width="320" height="200" style="outline:none; padding:0px; margin:0px; border: 0px;" />
</div>
<!--[if mso]></td><td width="320"><![endif]-->
<div style="width:320px; float: left; height: 200px;" class="kozepre">
<table width="320" height="200" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#a8a8a8">
<p style="text-align:left; font-size:16px; color:#ffffff; font-weight:normal; margin:20px; padding: 0px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<div style="clear: both;"></div>
</div>
<div style="max-width:640px; margin: 20px auto;" class="keskenyebbre">
<p style="margin:0px 0px 0px 8px; font-size:18px; font-weight:bold; color:#c6373d; line-height:24px; vertical-align:middle;">Lorem ipsum dolor sit amet</p>
<p style="text-align:left; font-size:14px; color:#565656; font-weight:normal; margin:20px 8px; padding:0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p style="font-size:18px; font-weight:bold; color:#c6373d; margin:0px 0px 0px 8px; line-height:24px; vertical-align:middle;">Lorem ipsum dolor sit amet</p>
<p style="text-align:left; font-size:14px; color:#565656; font-weight:normal; margin:20px 8px; padding:0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div style="max-width:640px; margin: 0 auto;">
<!--[if mso]><table width="640" cellspacing="0" cellpadding="0"><tr><td width="320"><![endif]-->
<div style="width:305px; float: left; min-height: 205px; margin: 8px 7.5px; padding: 0px;" class="kozepre">
<table width="305" style="min-height: 205px; margin: 0px;" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="limegreen"><p style="text-align:center; font-size:28px; color:#ffffff; font-weight:bold; margin:25px 0px 0px 0px; padding:0;">Lorem ipsum</p></td>
</tr>
<tr>
<td bgcolor="limegreen"><p style="text-align:left; font-size:13px; color:#ffffff; font-weight:normal; margin:10px 15px 35px 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></td>
</tr>
</table>
</div>
<!--[if mso]></td><td width="320"><![endif]-->
<div style="width:305px; float: left; min-height: 205px; margin: 8px 7.5px; padding: 0px;" class="kozepre">
<table width="305" style="min-height: 205px; margin: 0px;" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="red"><p style="text-align:center; font-size:28px; color:#ffffff; font-weight:bold; margin:25px 0px 0px 0px; padding:0;">Lorem ipsum</p></td>
</tr>
<tr>
<td bgcolor="red"><p style="text-align:left; font-size:13px; color:#ffffff; font-weight:normal; margin:10px 15px 35px 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
<div style="clear: both;"></div>
</div>
<div style="max-width:640px; margin: 0 auto;">
<!--[if mso]><center><![endif]-->
<div style="width:305px; min-height: 205px; padding: 0px; margin: 8px auto;">
<table width="305" style="min-height: 205px; margin: 0px;" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#e8e8e8"><p style="text-align:center; font-size:28px; color:#000000; font-weight:bold; margin:25px 0px 0px 0px; padding:0;">Lorem ipsum</p></td>
</tr>
<tr>
<td bgcolor="#e8e8e8"><p style="text-align:left; font-size:13px; color:#000000; font-weight:normal; margin:10px 15px 35px 10px; padding:0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></td>
</tr>
</table>
</div>
<!--[if mso]></center><![endif]-->
</div>
<div style="max-width:640px; margin: 0 auto;" class="keskenyebbre">
<p style="color:#565656; font-family:Verdana, Arial, Tahoma, sans-serif; font-size:14px; font-weight:normal; text-decoration:none; margin:30px 0px 30px 20px; text-align:center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div style="background-color: #e8e8e8; height: 60px;">
<div style="max-width:640px; margin: 0 auto; padding: 0px; text-align: center;">
<table width="100%" height="60" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#e8e8e8" valign="middle">
<p style="font-size: 18px; padding: 0px; margin: 0px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</td>
</tr>
</table>
</div>
</div>
<div style="max-width:640px; margin: 0 auto;" class="keskenyebbre">
<p style="font-size:11px; text-decoration:none; font-weight:normal; color:#565656; margin-top: 10px; padding: 0px; text-align:center; line-height:17px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</body>
</html>