email-template/clean-email-template.html at main · kennethdenhollander/email-template · GitHub

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
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Clean HTML e-mail Template</title>

        <style>
            body {
                margin: 0;
                background-color: #f8f8ff;
                color: #787878;
                font-family: sans-serif;
                box-sizing: border-box;
                -webkit-font-smoothing: antialiased;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }

            table {
                box-sizing: border-box;
                border-collapse: separate;
                border: 0;
                width: 100%;
            }

            td {
                display: table-cell;
            }

            .brand-logo {
                margin-bottom: 16px;
            }

            .main {
                border-radius: 6px;
                max-width: 640px;
                margin: 48px auto 0;
                padding: 48px;
                background-color: white;
            }

            @media only screen and (max-width: 620px) {
                .main {
                    margin: 16px;
                    padding: 32px;
                }
            }

            hr {
                margin: 32px 0;
                border: 0;
                border-top: 1px solid #f0f0f0;
            }

            /* Typography */
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-top: 0;
                color: black;
                line-height: 1.5;
            }

            p {
                margin-bottom: 16px;
                font-size: 16px;
                font-weight: normal;
                line-height: 1.75;
            }

            a {
                text-decoration: none;
            }

            strong {
                color: #6a6a6a;
            }

            /* Buttons */
            .btn {
                box-sizing: border-box;
                padding: 14px 20px;
                margin-bottom: 16px;
                width: auto;
                border-radius: 32px;
                background-color: #002946;
                color: white;
                text-decoration: none;
            }

            .btn a {
                color: white;
            }

            /* Footer */
            .company-details {
                box-sizing: border-box;
                margin-top: 32px;
                margin-bottom: 8px;
                color: #838383;
                font-size: 14px;
            }

            .componay-contact-link {
                font-size: 14px;
                text-decoration: none;
                color:#1eb0d9;
            }

        </style>
    </head>

    <body>
        <table cellpadding="0" cellspacing="0" class="body">
            <tr>
                <td class="container">
                    <div class="main">
                        <img src="#" class="brand-logo" width="125px">
                        <h1>Lorem ipsum dolor sit amet dolor maecenas iaculis facilisis</h1>
                        <hr>
                        <p>Beste <strong>{{ Name }}</strong>,</p>
                        <p>
                            Lorem ipsum dolor sit amet ornare ipsum lobortis phasellus quis nostra condimentum malesuada inceptos lectus duis senectus ultrices arcu blandit litora leo tortor odio fusce pharetra mauris dui hendrerit platea maximus pellentesque porttitor class consequat facilisis velit ad enim adipiscing turpis urna tristique donec elit metus netus letius eu ut lacinia sodales scelerisque
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet sociosqu semper viverra praesent mi lacus dictumst congue nulla himenaeos volutpat quis elementum vehicula sit commodo ullamcorper per tristique ligula
                        </p>
                        <hr>
                        <h2>Lorem ipsum dolor sit amet netus purus conubia nam curabitur mauris.</h2>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
                            <tbody>
                                <tr>
                                    <td align="left">
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                            <tbody>
                                            <tr>
                                                <td> <a href="https://www.google.com" target="_blank">Lorem ipsum dolor sit</a> </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="company-details">© 2021 <strong>Bedrijfsnaam</strong>, Straatnaam 123, 1234 AB Plaatsnaam</p>
                        <a href="#" class="componay-contact-link">Neem contact op met Bedrijfsnaam</a>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>