-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (117 loc) · 6.09 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meu e-mail marketing!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>
</head>
<body style="margin:0;padding:0;font-family: helvetica;"><!-- resetando as definições do navegador e colocando uma fonte global -->
<table width="600" align="center" cellpadding="0" cellspacing="0"><!--Alinhando a estrutura da tabela e tirando o espaçamento interno dela, definindo a largura fixa como 600px -->
<tr>
<td style="padding:20px 0 20px 0;" bgcolor="#2d2f3a" align="center"><!--como background-image não funciona no padrão e-mail marketing precisamos usar o bgcolor -->
<img style="display:block;" alt="Imagem" src="logo.png" /><!-- se faz necessário para que o e-mail mkt seja validado no site W3C validator colocar o atributo alt para descrever a img -->
</td>
</tr>
<tr>
<td style="padding:20px 20px 20px 20px;"><!-- para usar o padding precisamos difinir valores para as 4 propriedades. padding: top right bottom left; -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="border-bottom:2px solid #ccc;padding:30px 0 30px 0;">
<span style="color:#888;font-size:22px;">Olá Guilherme,</span>
<p style="color:#888;font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur, nisi vel luctus porttitor, ligula mi dignissim justo, eleifend iaculis quam tellus ac orci. Sed ornare eu mi gravida rhoncus. Maecenas ultrices pretium neque. Nullam eleifend arcu varius, suscipit lectus non.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr><!-- nova linha!! -->
<td style="padding:20px 20px 20px 20px;"><!-- Criando o contexto da nova sessão -->
<table width="100%" cellpadding="0" cellspacing="0"><!-- Esse novo elemento terá um contexto de 560px(100%) de largura, por conta do padding aplicado na msm acima, todos novos elemento abaixo seram guiados por isso, para criarmos colunas fazendo com que elas fiquem na msm linha. -->
<tr><!-- a linha q vai agrupar as colunas -->
<td width="250"><!--Criando uma coluna -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img alt="Imagem" style="display:block;" src="img.png" />
</td>
</tr>
<tr>
<td style="padding:10px 0 10px 0;color:#666;font-size:15px;line-height:21px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur, nisi vel luctus porttitor, orneque. Nullam eleifend arcu varius, suscipit lectus non.
</td>
</tr>
</table>
</td><!-- primeira coluna -->
<td width="60"></td><!-- Espaço entre as colunas -->
<td valign="top" width="250"><!-- Outra coluna -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img alt="Imagem" style="display:block;" src="img.png" />
</td>
</tr>
<tr>
<td style="padding:10px 0 10px 0;color:#666;font-size:15px;line-height:21px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur, nisi vel luctus porttitor, orneque. Nullam eleifend arcu varius, suscipit lectus non.
</td>
</tr>
</table>
</td><!-- segunda coluna -->
</tr><!-- linha q agrupa as 2 colunas -->
</table><!-- tabela q serviu de estrutura e conexto -->
</td><!-- elemento q deu o contexto da nova sessão -->
</tr><!-- linha geral -->
<tr><!-- nova linha!!! feita apenas para mostra q se copiarmos uma das linhas elas ficam se comportam da msm forma, replicadas. copia da linha de cima -->
<td style="padding:20px 20px 20px 20px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="250">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img alt="Imagem" style="display:block;" src="img.png" />
</td>
</tr>
<tr>
<td style="padding:10px 0 10px 0;color:#666;font-size:15px;line-height:21px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur, nisi vel luctus porttitor, orneque. Nullam eleifend arcu varius, suscipit lectus non.
</td>
</tr>
</table>
</td>
<td width="60"></td>
<td width="250">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img alt="Imagem" style="display:block;" src="img.png" />
</td>
</tr>
<tr>
<td style="padding:10px 0 10px 0;color:#666;font-size:15px;line-height:21px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consectetur, nisi vel luctus porttitor, orneque. Nullam eleifend arcu varius, suscipit lectus non.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- copia -->
<tr><!-- nova linha!!!! o footer do nosso template básico -->
<td style="padding:15px 10px 15px 10px;" bgcolor="#dfdedf"><!-- contexto de 570px -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="480" style="color:#666;font-size:13px;" align="left">Todos os direitos reservados</td>
<td style="font-size:12px;" width="70" align="left"><a style="color:#666" target="_blank" href="http://www.dankicode.com">Link1</a></td>
<td style="font-size:12px;" width="30" align="left"><a style="color:#666" target="_blank" href="http://www.dankicode.com">Website</a></td>
</tr><!-- abrigando todos esses elementos em uma msm linha, essa. -->
</table>
</td>
</tr>
</table><!-- fechando a tag da estrutura do template -->
</body>
</html>