-
Notifications
You must be signed in to change notification settings - Fork 0
/
emailing-template-responsive
229 lines (210 loc) · 15.2 KB
/
emailing-template-responsive
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
<!--
emailing-template-responsive.html
Copyright 2019 Domenico Di Nolfo - MDDN <mddn@gmx.it>
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Template mailing WebGate87</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width">
<style type="text/css">
/* Fonts and Content */
body, td { font-family: 'Ubuntu', calibri, arial, sans; font-size:14px; }
body { background-color: #2A374E; margin: 0; padding: 0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
h2 { padding-top:12px; /* Non fonctionnel sous Outlook 2007+ */ color:#00aadc; font-size:22px; }
li { text-decoration: none; }
a { outline: 0; color:#004390; text-decoration: none; }
a:hover, a:active { outline: 0; background-color: #ccc; }
@media only screen and (max-width: 480px) {
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
img { height:auto; }
/*illisible, on passe donc sur 3 lignes */
table[class=w180], td[class=w180], img[class=w180] { width:280px !important; display:block; }
td[class=w20]{ display:none; }
}
</style>
</head>
<body style="margin:0px; padding:0px; -webkit-text-size-adjust:none;">
<!-- Début table principal -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" bgcolor="#5c5c4f">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="w640" width="640" height="10"></td>
</tr>
<tr>
<td align="center" class="lin1" width="640" height="20"><span style="color:#ffffff; font-size:.9em;"><a style="color:#ffffff; font-size:.9em;" href="https://webgate87.wordpress.com/a-propos/">Voir le contenu de ce mail en ligne</a></span></td>
</tr>
<tr>
<td class="w640" width="640" height="10"></td>
</tr>
<!-- entete -->
<tr class="pagetoplogo">
<td class="w640" width="640">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#F2F0F0">
<tbody>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="580" valign="middle" align="left">
<div class="pagetoplogo-content">
<img class="w580" style="text-decoration: none; display: block; color:#476688; font-size:30px;" src="logo.png" alt="Logo WebGate87 - Carré blanc fondu dans un carré noir plus grand" width="482px" height="108px"/>
</div>
</td>
<td class="w30" width="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- separateur horizontal -->
<tr>
<td class="w640" width="640" height="1" bgcolor="#d7d6d6"></td>
</tr>
<!-- contenu -->
<tr class="content">
<td class="w640" class="w640" width="640" bgcolor="#ffffff">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="580">
<!-- une zone de contenu -->
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="w580" width="580">
<h2 style="color:#00aadc; font-size:22px; padding-top:12px;">Porte ouverte sur les Niouze</h2>
<div align="left" class="article-content">
<p>Que se passe-t-il sur la toile</p>
<p>Server side rolling on PHP to <a href="#toPHP">cotton candy tiramisu.</a> Client side become a Web designers to <a href="#toPHP">Cannoli zuccherati é stretto.</a></p>
<p>Lemoncino drops icing granita. Cioccolatini é marmellata con una piccicata di agrume.</p>
</div>
</td>
</tr>
<tr>
<td class="w580" width="580" height="1" bgcolor="#c7c5c5"></td>
</tr>
</tbody>
</table>
<!-- fin zone -->
<!-- une autre zone de contenu -->
<table class="w580" width="580" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="3">
<h2 style="color:#00aadc; font-size:22px; padding-top:12px;">Section scindé sur deux colonnes </h2>
</td>
</tr>
<tr>
<td class="w275" width="275" valign="top">
<div align="left" class="article-content">
<p>Mode liste et déco</p>
<ul>
<li>Hack</li>
<li>the</li>
<li>Web</li>
<li>be</li>
<li>Design</li>
</ul>
</div>
</td>
<td class="w30" width="30" class="w30"></td>
<td class="w275" width="275" valign="top">
<div align="left" class="article-content">
<p>Absolutum dominium actum des republica</p>
</div>
</td>
</tr>
<tr>
<td colspan="3" class="w580" height="1" bgcolor="#c7c5c5"></td>
</tr>
</tbody>
</table>
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td colspan="5">
<h2 style="color:#00aadc; font-size:22px; padding-top:12px;">
Section scindé sur sur 3 colonnes </h2>
</td>
</tr>
<tr>
<td class="w180" width="180" valign="top">
<div align="left" class="article-content">
<p>Hack the Web be Design ! Just su do it !</p>
</div>
</td>
<td class="w20" width="20"></td>
<td class="w180" width="180" valign="top">
<div align="left" class="article-content">
<p><img class="w180" width="180" src="Hack-Sys-Sepia-386x386.png" alt="Image vignette ronde représentant un hacher dissimulé derrière sa capuche face à son écran"/></p>
</div>
</td>
<td class="w20" width="20"></td>
<td class="w180" width="180" valign="top">
<div align="left" class="article-content">
<p>Hack the Web be Design ! Just su do it !</p>
</div>
</td>
</tr>
<tr>
<td colspan="5" class="w580" width="580" height="1" bgcolor="#c7c5c5"></td>
</tr>
</tbody>
</table>
</td>
<td class="w30" class="w30" width="30"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- separateur horizontal de 15px de haut-->
<tr>
<td class="w640" width="640" height="15" bgcolor="#ffffff"></td>
</tr>
<!-- pied de page -->
<tr class="pagebottom">
<td class="w640" width="640">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#c7c4b4">
<tbody>
<tr>
<td colspan="5" height="10"></td>
</tr>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="580" valign="top">
<p align="center" class="pagebottom-content-center">
<span style="color:#292929;">Créé aux petits oignons pour <a href="webgate87.wordpress.com">webgate87.wordpress.com</a></span>
</p>
<p align="center" class="pagebottom-content-center"><span style="color:#292929;">Cet email a été envoyé à <mailto:to@is.fr><span style="font-weight:600;">to@is.fr</span> - <a href="desabonnement.to.com">cliquer ici pour vous désabonner.</a></span>
</p>
</td>
<td class="w30" width="30"></td>
</tr>
<tr>
<td colspan="5" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="w640" width="640" height="60"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>