├── .gitignore
├── LICENSE
├── README.md
├── ecommerce-1
    ├── img
    │   ├── facebook-black.png
    │   ├── instagram-black.png
    │   ├── logo-black.png
    │   ├── t-shirt-1.png
    │   ├── t-shirt-2.png
    │   └── twitter-black.png
    └── index.html
├── ecommerce-2
    ├── img
    │   ├── facebook-white.png
    │   ├── instagram-white.png
    │   ├── logo-white.png
    │   ├── mbp-13-space.png
    │   └── twitter-white.png
    └── index.html
├── logo.png
├── newsletter-1
    ├── img
    │   ├── facebook-black.png
    │   ├── instagram-black.png
    │   ├── jefferson-santos-9SoCnyQmkzI-unsplash.jpg
    │   ├── juja-han-HU-uL54pfQI-unsplash.jpg
    │   ├── logo-black.png
    │   ├── simon-migaj-Yui5vfKHuzs-unsplash.jpg
    │   └── twitter-black.png
    └── index.html
├── newsletter-2
    ├── img
    │   ├── image-1_4uTLQvKKDM.jpg
    │   ├── image-2_xrXaXBWvnF.jpg
    │   ├── image-3_Iln5CnmNRr.jpg
    │   ├── image-4_pfbvqZT6H5.png
    │   ├── image-5_fZXP7Ynf08.jpg
    │   ├── image-6_wsuhE80FqA.jpg
    │   └── image-7_CrXym8CtMl.jpg
    └── index.html
├── preview.gif
├── request-reset-password-1
    ├── img
    │   ├── facebook-black.png
    │   ├── instagram-black.png
    │   ├── logo-black.png
    │   └── twitter-black.png
    └── index.html
└── request-reset-password-2
    ├── img
        ├── facebook-black.png
        ├── image-1_zG0nGXG3eY.jpg
        ├── image-2_iY8r501u0W.jpg
        ├── instagram-black.png
        ├── logo-black.png
        └── twitter-black.png
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019-present Anton Reshetov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="./logo.png" width="150px">
 3 | </p>
 4 | <h2 align="center">HTML Email Templates by MySigMail Card</h2>
 5 | <p align="center">
 6 |   <img src="./preview.gif">
 7 | </p>
 8 | <p align="center">
 9 |   Website - <a href="https://mysigmail.com/card?github-html-templates">https://mysigmail.com/card</a> | Twitter - <a href="https://twitter.com/mysigmail">@mysigmail</a>
10 | </p>
11 | 
12 | ## About MySigMail Card
13 | 
14 | MySigMail Card is a free drag & drop builder helps users create email templates intuitively and very quickly. No need to register or create an account.
15 | 
16 | **Features:**
17 | 
18 |  - 50+ pre-designed components in categories: Menu, Header, Content, Feature, Call to action, E-Commerce, Footer
19 |  - Content editing in components
20 |  - Uploading external images
21 |  - Live preview
22 |  - Project management
23 |  - Support email clients: the templates have been tested to render across major email clients, with support on popular web, desktop and mobile platform
24 | 
25 | **Support Email Clients:**
26 | 
27 | - iOS Mail App
28 | - macOS Mail App
29 | - Android Mail Apps (Gmail / Outlook)
30 | - Browser Mail Apps
31 | - Outlook 2007-2019
32 | - Outlook.com
33 | - Office 365
34 | - AOL
35 | 
36 | Feel free to use HTML templates as you want.
37 | If you liked HTML templates or builder please share it with your friends or mention us on your socials.
38 | 


--------------------------------------------------------------------------------
/ecommerce-1/img/facebook-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/facebook-black.png


--------------------------------------------------------------------------------
/ecommerce-1/img/instagram-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/instagram-black.png


--------------------------------------------------------------------------------
/ecommerce-1/img/logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/logo-black.png


--------------------------------------------------------------------------------
/ecommerce-1/img/t-shirt-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/t-shirt-1.png


--------------------------------------------------------------------------------
/ecommerce-1/img/t-shirt-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/t-shirt-2.png


--------------------------------------------------------------------------------
/ecommerce-1/img/twitter-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-1/img/twitter-black.png


--------------------------------------------------------------------------------
/ecommerce-1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       .gmail-fix {
 73 |         display: none !important;
 74 |       }
 75 | 
 76 |       .sm-right {
 77 |         text-align: right;
 78 |         margin-left: auto;
 79 |       }
 80 | 
 81 |       .sm-center {
 82 |         text-align: center;
 83 |       }
 84 | 
 85 |       .sm-padding-left-30 {
 86 |         padding-left: 30px;
 87 |       }
 88 | 
 89 |       .sm-padding-right-20 {
 90 |         padding-right: 20px;
 91 |       }
 92 | 
 93 |       .post-col-left {
 94 |         padding-right: 10px;
 95 |       }
 96 | 
 97 |       .post-col-right {
 98 |         padding-left: 10px;
 99 |       }
100 | 
101 |       .sm-col-25 {
102 |         width: 25%;
103 |       }
104 | 
105 |       .sm-col-33 {
106 |         width: 33%;
107 |       }
108 | 
109 |       .sm-col-50 {
110 |         width: 50%;
111 |       }
112 | 
113 |       @media screen and (max-width:620px) {
114 |         table.template-container {
115 |           width: 320px !important;
116 |           margin: 0 auto;
117 |           white-space: normal;
118 |         }
119 | 
120 |         .xs-col {
121 |           width: 100% !important;
122 |         }
123 | 
124 |         .xs-spacing {
125 |           margin: 10px 0 !important;
126 |         }
127 | 
128 |         .xs-mb-10 {
129 |           margin-bottom: 10px;
130 |         }
131 | 
132 |         .xs-mb-20 {
133 |           margin-bottom: 20px;
134 |         }
135 | 
136 |         .xs-center {
137 |           text-align: center;
138 |         }
139 | 
140 |         .xs-table-center {
141 |           text-align: center;
142 |           margin: 0 auto;
143 |         }
144 | 
145 |         .sm-padding-left-30 {
146 |           padding-left: 0;
147 |         }
148 | 
149 |         .sm-padding-right-20 {
150 |           padding-right: 0;
151 |         }
152 | 
153 |         .post-col-left {
154 |           padding-right: 0;
155 |         }
156 | 
157 |         .post-col-right {
158 |           padding-left: 0;
159 |         }
160 |       }
161 |     </style>
162 |     <!--[if gte mso 9]>
163 |     <style type="text/css">
164 |         .pc-font {
165 |             font-family: Helvetica, Arial, sans-serif !important;
166 |         }
167 |         .mso-col-100 {
168 |           width: 100% !important;
169 |         }
170 |     </style>
171 |     <![endif]-->
172 |   </head>
173 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
174 | 
175 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
176 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">The short summary text that follows the subject line when viewing an email from the inbox. Also known as the Johnson Box or Preview text.</span>
177 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
178 |       <tbody>
179 |         <tr>
180 |           <td style="vertical-align: top;">
181 |             <!--[if gte mso 9]>
182 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
183 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
184 |         </v:background>
185 |         <![endif]-->
186 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
187 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
188 |               <tbody>
189 |                 <tr>
190 |                   <td class="template__inner">
191 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
192 |                       <tbody class="components__item" draggable="false">
193 |                         <tr>
194 |                           <td>
195 |                             <!-- START COMPONENT: CONTENT 5 -->
196 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-5" style="width: 100%; border-collapse: collapse;">
197 |                               <tr>
198 |                                 <td style="padding: 30px 35px 15px; background-color: rgb(255, 255, 255); border-radius: 5px;">
199 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
200 |                                     <tbody>
201 |                                       <tr>
202 |                                         <td align="center">
203 |                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="font-size: 24px;"><b>New Arrival</b></span><br></p>
204 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
205 |                                         </td>
206 |                                       </tr>
207 |                                     </tbody>
208 |                                   </table>
209 |                                 </td>
210 |                               </tr>
211 |                             </table><!-- END COMPONENT: CONTENT 5 -->
212 |                           </td>
213 |                         </tr>
214 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
215 |                           &nbsp;
216 |                         </tr>
217 |                       </tbody>
218 |                       <tbody class="components__item">
219 |                         <tr>
220 |                           <td>
221 |                             <!-- START COMPONENT: E-COMMERCE 2 -->
222 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component ecommerce-2" style="width: 100%; border-collapse: collapse;">
223 |                               <tr>
224 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
225 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
226 |                                     <tbody>
227 |                                       <tr>
228 |                                         <td align="right">
229 |                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
230 |                                             <span style="font-size: 14px; color: rgb(59, 175, 252);">
231 |               <a href="https://example.com">See all ➝
232 |             </a></span><a href="https://example.com">
233 |                                             </a></p>
234 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
235 |                                         </td>
236 |                                       </tr>
237 |                                     </tbody>
238 |                                   </table>
239 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper wrapper__row" style="width: 100%;">
240 |                                     <tbody>
241 |                                       <tr>
242 |                                         <td>
243 |                                           <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" role="presentation"><tr><td valign="top" align="center" width="50%"><![endif]-->
244 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper xs-col mso-col-100 sm-col-50" style="float: left; padding: 0px 10px;">
245 |                                             <tbody>
246 |                                               <tr>
247 |                                                 <td class="sm-center">
248 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="display: inline-table; vertical-align: top; width: 100%;">
249 |                                                     <tbody>
250 |                                                       <tr>
251 |                                                         <td align="center" class=""><a href="https://example.com">
252 |                                                             <!--[if gte mso 9]><img src="img/t-shirt-1.png" width="245" height="245" alt="Some alt"><![endif]-->
253 |                                                             <!--[if !gte mso 9]><!--><img width="245" src="img/t-shirt-1.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 245px;">
254 |                                                             <!--<![endif]--></a></td>
255 |                                                       </tr>
256 |                                                     </tbody>
257 |                                                   </table>
258 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
259 |                                                     <tbody>
260 |                                                       <tr>
261 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
262 |                                                           &nbsp;
263 |                                                         </td>
264 |                                                       </tr>
265 |                                                     </tbody>
266 |                                                   </table>
267 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
268 |                                                     <tbody>
269 |                                                       <tr>
270 |                                                         <td align="center">
271 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
272 |                                                             <span style="color: rgb(132, 137, 196);">New series</span>
273 |                                                           </p>
274 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
275 |                                                             <b>
276 |                                                               <span style="font-size: 24px;">Extended Shirt</span>
277 |                                                             </b>
278 |                                                           </p>
279 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
280 |                                                             <span style="color: rgb(170, 170, 170);">Hip Hop Basic Longline T-Shirt.</span>
281 |                                                           </p>
282 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
283 |                                                             <b>
284 |                                                               <span style="color: rgb(105, 193, 66); font-size: 24px;">$24.99</span>
285 |                                                             </b>
286 |                                                           </p>
287 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
288 |                                                         </td>
289 |                                                       </tr>
290 |                                                     </tbody>
291 |                                                   </table>
292 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
293 |                                                     <tbody>
294 |                                                       <tr>
295 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
296 |                                                           &nbsp;
297 |                                                         </td>
298 |                                                       </tr>
299 |                                                     </tbody>
300 |                                                   </table>
301 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" align="center" style="display: inline-table;">
302 |                                                     <tbody>
303 |                                                       <tr>
304 |                                                         <td valign="top" style="padding: 5px;">
305 |                                                           <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
306 |                                                             <tbody>
307 |                                                               <tr>
308 |                                                                 <td style="background-color: rgb(64, 158, 255); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">Buy Now</span></a></td>
309 |                                                               </tr>
310 |                                                             </tbody>
311 |                                                           </table>
312 |                                                         </td>
313 |                                                       </tr>
314 |                                                     </tbody>
315 |                                                   </table>
316 |                                                 </td>
317 |                                               </tr>
318 |                                             </tbody>
319 |                                           </table>
320 |                                           <!--[if (gte mso 9)|(IE)]></td><td valign="top" align="center" width="50%"><![endif]-->
321 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper xs-col mso-col-100 sm-col-50" style="float: left; padding: 0px 10px;">
322 |                                             <tbody>
323 |                                               <tr>
324 |                                                 <td class="sm-center">
325 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="display: inline-table; vertical-align: top; width: 100%;">
326 |                                                     <tbody>
327 |                                                       <tr>
328 |                                                         <td align="center" class=""><a href="https://example.com">
329 |                                                             <!--[if gte mso 9]><img src="img/t-shirt-2.png" width="245" height="245" alt="Some alt"><![endif]-->
330 |                                                             <!--[if !gte mso 9]><!--><img width="245" src="img/t-shirt-2.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 245px;">
331 |                                                             <!--<![endif]--></a></td>
332 |                                                       </tr>
333 |                                                     </tbody>
334 |                                                   </table>
335 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
336 |                                                     <tbody>
337 |                                                       <tr>
338 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
339 |                                                           &nbsp;
340 |                                                         </td>
341 |                                                       </tr>
342 |                                                     </tbody>
343 |                                                   </table>
344 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
345 |                                                     <tbody>
346 |                                                       <tr>
347 |                                                         <td align="center">
348 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
349 |                                                             <span style="color: rgb(132, 137, 196);">New series</span>
350 |                                                           </p>
351 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
352 |                                                             <b>
353 |                                                               <span style="font-size: 24px;">Extended Shirt</span>
354 |                                                             </b>
355 |                                                           </p>
356 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
357 |                                                             <span style="color: rgb(170, 170, 170);">Hip Hop Basic Longline T-Shirt.</span>
358 |                                                           </p>
359 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
360 |                                                             <b>
361 |                                                               <span style="color: rgb(105, 193, 66); font-size: 24px;">$24.99</span>
362 |                                                             </b>
363 |                                                           </p>
364 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
365 |                                                         </td>
366 |                                                       </tr>
367 |                                                     </tbody>
368 |                                                   </table>
369 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
370 |                                                     <tbody>
371 |                                                       <tr>
372 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
373 |                                                           &nbsp;
374 |                                                         </td>
375 |                                                       </tr>
376 |                                                     </tbody>
377 |                                                   </table>
378 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" align="center" style="display: inline-table;">
379 |                                                     <tbody>
380 |                                                       <tr>
381 |                                                         <td valign="top" style="padding: 5px;">
382 |                                                           <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
383 |                                                             <tbody>
384 |                                                               <tr>
385 |                                                                 <td style="background-color: rgb(64, 158, 255); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">Buy Now</span></a></td>
386 |                                                               </tr>
387 |                                                             </tbody>
388 |                                                           </table>
389 |                                                         </td>
390 |                                                       </tr>
391 |                                                     </tbody>
392 |                                                   </table>
393 |                                                 </td>
394 |                                               </tr>
395 |                                             </tbody>
396 |                                           </table>
397 |                                           <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
398 |                                         </td>
399 |                                       </tr>
400 |                                     </tbody>
401 |                                   </table>
402 |                                 </td>
403 |                               </tr>
404 |                             </table><!-- END COMPONENT: E-COMMERCE 2 -->
405 |                           </td>
406 |                         </tr>
407 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
408 |                           &nbsp;
409 |                         </tr>
410 |                       </tbody>
411 |                       <tbody class="components__item">
412 |                         <tr>
413 |                           <td>
414 |                             <!-- START COMPONENT: FOOTER 3 -->
415 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-3" style="width: 100%; border-collapse: collapse;">
416 |                               <tr>
417 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
418 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col xs-col xs-center" style="width: 100%; margin: 0px;">
419 |                                     <tbody>
420 |                                       <tr>
421 |                                         <td align="center">
422 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper">
423 |                                             <tbody>
424 |                                               <tr>
425 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/facebook-black.png" width="16" alt="Some alt"></td>
426 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/twitter-black.png" width="16" alt="Some alt"></td>
427 |                                                 <td style="padding-top: 3px;"><img src="img/instagram-black.png" width="16" alt="Some alt"></td>
428 |                                               </tr>
429 |                                             </tbody>
430 |                                           </table>
431 |                                         </td>
432 |                                       </tr>
433 |                                     </tbody>
434 |                                   </table>
435 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
436 |                                     <tbody>
437 |                                       <tr>
438 |                                         <td height="25" style="font-size: 1px; line-height: 1px;">
439 |                                           &nbsp;
440 |                                         </td>
441 |                                       </tr>
442 |                                     </tbody>
443 |                                   </table>
444 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; vertical-align: top; width: 100%;">
445 |                                     <tbody>
446 |                                       <tr>
447 |                                         <td align="center" class=""><a href="https://example.com">
448 |                                             <!--[if gte mso 9]><img src="img/logo-black.png" width="110" height="25" alt="Some alt"><![endif]-->
449 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/logo-black.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
450 |                                             <!--<![endif]--></a></td>
451 |                                       </tr>
452 |                                     </tbody>
453 |                                   </table>
454 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
455 |                                     <tbody>
456 |                                       <tr>
457 |                                         <td height="20" style="font-size: 1px; line-height: 1px;">
458 |                                           &nbsp;
459 |                                         </td>
460 |                                       </tr>
461 |                                     </tbody>
462 |                                   </table>
463 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" class="sm-col xs-col" style="white-space: normal; border-collapse: collapse; width: 100%;">
464 |                                     <tbody>
465 |                                       <tr>
466 |                                         <td align="center">
467 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
468 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170)">500 Howard Street San Francisco, CA 94105<br>
469 |               <u>
470 |               <a href="https://example.com" style="color: rgb(170, 170, 170);">hello@example.com</a>
471 |               </u>
472 |             </span>
473 |                                           </p>
474 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
475 |                                         </td>
476 |                                       </tr>
477 |                                     </tbody>
478 |                                   </table>
479 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
480 |                                     <tbody>
481 |                                       <tr>
482 |                                         <td align="center">
483 |                                           <table cellpadding="0" cellspacing="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; padding-top: 2px;">
484 |                                             <tbody>
485 |                                               <tr>
486 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Update preferences</a></td>
487 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Unsubscribe</a></td>
488 |                                                 <td style="padding-right: 0px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Policies</a></td>
489 |                                               </tr>
490 |                                             </tbody>
491 |                                           </table>
492 |                                         </td>
493 |                                       </tr>
494 |                                     </tbody>
495 |                                   </table>
496 |                                 </td>
497 |                               </tr>
498 |                             </table><!-- END COMPONENT: FOOTER 3 -->
499 |                           </td>
500 |                         </tr>
501 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
502 |                           &nbsp;
503 |                         </tr>
504 |                       </tbody>
505 |                     </table>
506 |                   </td>
507 |                 </tr>
508 |               </tbody>
509 |             </table>
510 |             <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
511 |           </td>
512 |         </tr>
513 |       </tbody>
514 |     </table>
515 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
516 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
517 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
518 |   </body>
519 | 
520 | </html>


--------------------------------------------------------------------------------
/ecommerce-2/img/facebook-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-2/img/facebook-white.png


--------------------------------------------------------------------------------
/ecommerce-2/img/instagram-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-2/img/instagram-white.png


--------------------------------------------------------------------------------
/ecommerce-2/img/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-2/img/logo-white.png


--------------------------------------------------------------------------------
/ecommerce-2/img/mbp-13-space.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-2/img/mbp-13-space.png


--------------------------------------------------------------------------------
/ecommerce-2/img/twitter-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/ecommerce-2/img/twitter-white.png


--------------------------------------------------------------------------------
/ecommerce-2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       .gmail-fix {
 73 |         display: none !important;
 74 |       }
 75 | 
 76 |       .sm-right {
 77 |         text-align: right;
 78 |         margin-left: auto;
 79 |       }
 80 | 
 81 |       .sm-center {
 82 |         text-align: center;
 83 |       }
 84 | 
 85 |       .sm-padding-left-30 {
 86 |         padding-left: 30px;
 87 |       }
 88 | 
 89 |       .sm-padding-right-20 {
 90 |         padding-right: 20px;
 91 |       }
 92 | 
 93 |       .post-col-left {
 94 |         padding-right: 10px;
 95 |       }
 96 | 
 97 |       .post-col-right {
 98 |         padding-left: 10px;
 99 |       }
100 | 
101 |       .sm-col-25 {
102 |         width: 25%;
103 |       }
104 | 
105 |       .sm-col-33 {
106 |         width: 33%;
107 |       }
108 | 
109 |       .sm-col-50 {
110 |         width: 50%;
111 |       }
112 | 
113 |       @media screen and (max-width:620px) {
114 |         table.template-container {
115 |           width: 320px !important;
116 |           margin: 0 auto;
117 |           white-space: normal;
118 |         }
119 | 
120 |         .xs-col {
121 |           width: 100% !important;
122 |         }
123 | 
124 |         .xs-spacing {
125 |           margin: 10px 0 !important;
126 |         }
127 | 
128 |         .xs-mb-10 {
129 |           margin-bottom: 10px;
130 |         }
131 | 
132 |         .xs-mb-20 {
133 |           margin-bottom: 20px;
134 |         }
135 | 
136 |         .xs-center {
137 |           text-align: center;
138 |         }
139 | 
140 |         .xs-table-center {
141 |           text-align: center;
142 |           margin: 0 auto;
143 |         }
144 | 
145 |         .sm-padding-left-30 {
146 |           padding-left: 0;
147 |         }
148 | 
149 |         .sm-padding-right-20 {
150 |           padding-right: 0;
151 |         }
152 | 
153 |         .post-col-left {
154 |           padding-right: 0;
155 |         }
156 | 
157 |         .post-col-right {
158 |           padding-left: 0;
159 |         }
160 |       }
161 |     </style>
162 |     <!--[if gte mso 9]>
163 |     <style type="text/css">
164 |         .pc-font {
165 |             font-family: Helvetica, Arial, sans-serif !important;
166 |         }
167 |         .mso-col-100 {
168 |           width: 100% !important;
169 |         }
170 |     </style>
171 |     <![endif]-->
172 |   </head>
173 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
174 | 
175 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
176 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
177 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
178 |       <tbody>
179 |         <tr>
180 |           <td style="vertical-align: top;">
181 |             <!--[if gte mso 9]>
182 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
183 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
184 |         </v:background>
185 |         <![endif]-->
186 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
187 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
188 |               <tbody>
189 |                 <tr>
190 |                   <td class="template__inner">
191 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
192 |                       <tbody class="components__item">
193 |                         <tr>
194 |                           <td>
195 |                             <!-- START COMPONENT: MENU 3 -->
196 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component menu-3" style="width: 100%; border-collapse: collapse;">
197 |                               <tr>
198 |                                 <td style="padding: 30px 35px; background-color: rgb(34, 34, 34); border-radius: 5px;">
199 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="442" valign="middle"><![endif]-->
200 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center xs-mb-20" style="display: inline-table; vertical-align: top; float: left; width: 442px;">
201 |                                     <tbody>
202 |                                       <tr>
203 |                                         <td align="" class=""><a href="https://example.com">
204 |                                             <!--[if gte mso 9]><img src="img/logo-white.png" width="110" height="25" alt="Some alt"><![endif]-->
205 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/logo-white.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
206 |                                             <!--<![endif]--></a></td>
207 |                                       </tr>
208 |                                     </tbody>
209 |                                   </table>
210 |                                   <!--[if (gte mso 9)|(IE)]></td><td width="0" valign="middle"><![endif]-->
211 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col xs-col xs-center" style="margin: 0px;">
212 |                                     <tbody>
213 |                                       <tr>
214 |                                         <td align="center">
215 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper">
216 |                                             <tbody>
217 |                                               <tr>
218 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/facebook-white.png" width="16" alt="Some alt"></td>
219 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/twitter-white.png" width="16" alt="Some alt"></td>
220 |                                                 <td style="padding-top: 3px;"><img src="img/instagram-white.png" width="16" alt="Some alt"></td>
221 |                                               </tr>
222 |                                             </tbody>
223 |                                           </table>
224 |                                         </td>
225 |                                       </tr>
226 |                                     </tbody>
227 |                                   </table>
228 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
229 |                                 </td>
230 |                               </tr>
231 |                             </table><!-- END COMPONENT: MENU 3 -->
232 |                           </td>
233 |                         </tr>
234 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
235 |                           &nbsp;
236 |                         </tr>
237 |                       </tbody>
238 |                       <tbody class="components__item">
239 |                         <tr>
240 |                           <td>
241 |                             <!-- START COMPONENT: CALL TO ACTION 1 -->
242 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component cta-1" style="width: 100%; border-collapse: collapse;">
243 |                               <tr>
244 |                                 <td style="padding: 0px; background-color: rgb(34, 34, 34); background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 5px;">
245 |                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
246 |                                     <tbody>
247 |                                       <tr>
248 |                                         <td style="background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 5px;">
249 |                                           <!--[if gte mso 9]>
250 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 551px">
251 |         <v:fill type="frame" src="" color="#222222" />
252 |         <v:textbox null inset="35px,0,35px,0">
253 |       <![endif]-->
254 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
255 |                                             <tbody>
256 |                                               <tr>
257 |                                                 <!--[if gte mso 9]><td style="padding:30px 0 0px 0"><![endif]-->
258 |                                                 <!--[if !gte mso 9]><!-->
259 |                                                 <td style="padding: 30px 35px 0px;">
260 |                                                   <!--<![endif]-->
261 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
262 |                                                     <tbody>
263 |                                                       <tr>
264 |                                                         <td align="center">
265 |                                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
266 |                                                             <span>New series</span>
267 |                                                           </p>
268 |                                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
269 |                                                             <b>
270 |                                                               <span style="font-size: 32px;">
271 |               Unheard of Power
272 |               </span>
273 |                                                             </b>
274 |                                                           </p>
275 |                                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
276 |                                                             <span style="color: rgb(170, 170, 170);">With our latest model of laptop,<br>you'll get the most amazing features<br>in your professional work.</span>
277 |                                                           </p>
278 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
279 |                                                         </td>
280 |                                                       </tr>
281 |                                                     </tbody>
282 |                                                   </table>
283 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
284 |                                                     <tbody>
285 |                                                       <tr>
286 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
287 |                                                           &nbsp;
288 |                                                         </td>
289 |                                                       </tr>
290 |                                                     </tbody>
291 |                                                   </table>
292 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
293 |                                                     <tbody>
294 |                                                       <tr>
295 |                                                         <td align="center">
296 |                                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="display: inline-table;">
297 |                                                             <tbody>
298 |                                                               <tr>
299 |                                                                 <td valign="top" style="padding: 5px;">
300 |                                                                   <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
301 |                                                                     <tbody>
302 |                                                                       <tr>
303 |                                                                         <td style="background-color: rgb(64, 158, 255); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">Buy Now</span></a></td>
304 |                                                                       </tr>
305 |                                                                     </tbody>
306 |                                                                   </table>
307 |                                                                 </td>
308 |                                                               </tr>
309 |                                                             </tbody>
310 |                                                           </table>
311 |                                                         </td>
312 |                                                       </tr>
313 |                                                     </tbody>
314 |                                                   </table>
315 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; vertical-align: top; width: 100%;">
316 |                                                     <tbody>
317 |                                                       <tr>
318 |                                                         <td align="center" class=""><a href="https://example.com">
319 |                                                             <!--[if gte mso 9]><img src="img/mbp-13-space.png" width="530" height="291" alt="Some alt"><![endif]-->
320 |                                                             <!--[if !gte mso 9]><!--><img width="530" src="img/mbp-13-space.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 530px;">
321 |                                                             <!--<![endif]--></a></td>
322 |                                                       </tr>
323 |                                                     </tbody>
324 |                                                   </table>
325 |                                                 </td>
326 |                                               </tr>
327 |                                             </tbody>
328 |                                           </table>
329 |                                           <!--[if gte mso 9]>
330 |         </v:textbox>
331 |       </v:rect>
332 |       <![endif]-->
333 |                                         </td>
334 |                                       </tr>
335 |                                     </tbody>
336 |                                   </table>
337 |                                 </td>
338 |                               </tr>
339 |                             </table><!-- END COMPONENT: CALL TO ACTION 1 -->
340 |                           </td>
341 |                         </tr>
342 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
343 |                           &nbsp;
344 |                         </tr>
345 |                       </tbody>
346 |                       <tbody class="components__item">
347 |                         <tr>
348 |                           <td>
349 |                             <!-- START COMPONENT: FOOTER 1 -->
350 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-1" style="width: 100%; border-collapse: collapse;">
351 |                               <tr>
352 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
353 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
354 |                                     <tbody>
355 |                                       <tr>
356 |                                         <td align="center">
357 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
358 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170)">500 Howard Street<br>San Francisco, CA 94105</span>
359 |                                           </p>
360 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
361 |                                         </td>
362 |                                       </tr>
363 |                                     </tbody>
364 |                                   </table>
365 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
366 |                                     <tbody>
367 |                                       <tr>
368 |                                         <td align="center">
369 |                                           <table cellpadding="0" cellspacing="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; padding-top: 2px;">
370 |                                             <tbody>
371 |                                               <tr>
372 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Update preferences</a></td>
373 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Unsubscribe</a></td>
374 |                                                 <td style="padding-right: 0px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Policies</a></td>
375 |                                               </tr>
376 |                                             </tbody>
377 |                                           </table>
378 |                                         </td>
379 |                                       </tr>
380 |                                     </tbody>
381 |                                   </table>
382 |                                 </td>
383 |                               </tr>
384 |                             </table><!-- END COMPONENT: FOOTER 1 -->
385 |                           </td>
386 |                         </tr>
387 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
388 |                           &nbsp;
389 |                         </tr>
390 |                       </tbody>
391 |                     </table>
392 |                   </td>
393 |                 </tr>
394 |               </tbody>
395 |             </table>
396 |             <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
397 |           </td>
398 |         </tr>
399 |       </tbody>
400 |     </table>
401 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
402 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
403 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
404 |   </body>
405 | 
406 | </html>


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/logo.png


--------------------------------------------------------------------------------
/newsletter-1/img/facebook-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/facebook-black.png


--------------------------------------------------------------------------------
/newsletter-1/img/instagram-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/instagram-black.png


--------------------------------------------------------------------------------
/newsletter-1/img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg


--------------------------------------------------------------------------------
/newsletter-1/img/juja-han-HU-uL54pfQI-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/juja-han-HU-uL54pfQI-unsplash.jpg


--------------------------------------------------------------------------------
/newsletter-1/img/logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/logo-black.png


--------------------------------------------------------------------------------
/newsletter-1/img/simon-migaj-Yui5vfKHuzs-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/simon-migaj-Yui5vfKHuzs-unsplash.jpg


--------------------------------------------------------------------------------
/newsletter-1/img/twitter-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-1/img/twitter-black.png


--------------------------------------------------------------------------------
/newsletter-1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       .gmail-fix {
 73 |         display: none !important;
 74 |       }
 75 | 
 76 |       .sm-right {
 77 |         text-align: right;
 78 |         margin-left: auto;
 79 |       }
 80 | 
 81 |       .sm-center {
 82 |         text-align: center;
 83 |       }
 84 | 
 85 |       .sm-padding-left-30 {
 86 |         padding-left: 30px;
 87 |       }
 88 | 
 89 |       .sm-padding-right-20 {
 90 |         padding-right: 20px;
 91 |       }
 92 | 
 93 |       .post-col-left {
 94 |         padding-right: 10px;
 95 |       }
 96 | 
 97 |       .post-col-right {
 98 |         padding-left: 10px;
 99 |       }
100 | 
101 |       .sm-col-25 {
102 |         width: 25%;
103 |       }
104 | 
105 |       .sm-col-33 {
106 |         width: 33%;
107 |       }
108 | 
109 |       .sm-col-50 {
110 |         width: 50%;
111 |       }
112 | 
113 |       @media screen and (max-width:620px) {
114 |         table.template-container {
115 |           width: 320px !important;
116 |           margin: 0 auto;
117 |           white-space: normal;
118 |         }
119 | 
120 |         .xs-col {
121 |           width: 100% !important;
122 |         }
123 | 
124 |         .xs-spacing {
125 |           margin: 10px 0 !important;
126 |         }
127 | 
128 |         .xs-mb-10 {
129 |           margin-bottom: 10px;
130 |         }
131 | 
132 |         .xs-mb-20 {
133 |           margin-bottom: 20px;
134 |         }
135 | 
136 |         .xs-center {
137 |           text-align: center;
138 |         }
139 | 
140 |         .xs-table-center {
141 |           text-align: center;
142 |           margin: 0 auto;
143 |         }
144 | 
145 |         .sm-padding-left-30 {
146 |           padding-left: 0;
147 |         }
148 | 
149 |         .sm-padding-right-20 {
150 |           padding-right: 0;
151 |         }
152 | 
153 |         .post-col-left {
154 |           padding-right: 0;
155 |         }
156 | 
157 |         .post-col-right {
158 |           padding-left: 0;
159 |         }
160 |       }
161 |     </style>
162 |     <!--[if gte mso 9]>
163 |     <style type="text/css">
164 |         .pc-font {
165 |             font-family: Helvetica, Arial, sans-serif !important;
166 |         }
167 |         .mso-col-100 {
168 |           width: 100% !important;
169 |         }
170 |     </style>
171 |     <![endif]-->
172 |   </head>
173 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
174 | 
175 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
176 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">The short summary text that follows the subject line when viewing an email from the inbox. Also known as the Johnson Box or Preview text.</span>
177 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
178 |       <tbody>
179 |         <tr>
180 |           <td style="vertical-align: top;">
181 |             <!--[if gte mso 9]>
182 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
183 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
184 |         </v:background>
185 |         <![endif]-->
186 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
187 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
188 |               <tbody>
189 |                 <tr>
190 |                   <td class="template__inner">
191 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
192 |                       <tbody class="components__item">
193 |                         <tr>
194 |                           <td>
195 |                             <!-- START COMPONENT: MENU 3 -->
196 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component menu-3" style="width: 100%; border-collapse: collapse;">
197 |                               <tr>
198 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
199 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="442" valign="middle"><![endif]-->
200 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center xs-mb-20" style="display: inline-table; vertical-align: top; float: left; width: 442px;">
201 |                                     <tbody>
202 |                                       <tr>
203 |                                         <td align="" class=""><a href="https://example.com">
204 |                                             <!--[if gte mso 9]><img src="img/logo-black.png" width="110" height="25" alt="Some alt"><![endif]-->
205 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/logo-black.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
206 |                                             <!--<![endif]--></a></td>
207 |                                       </tr>
208 |                                     </tbody>
209 |                                   </table>
210 |                                   <!--[if (gte mso 9)|(IE)]></td><td width="0" valign="middle"><![endif]-->
211 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col xs-col xs-center" style="margin: 0px;">
212 |                                     <tbody>
213 |                                       <tr>
214 |                                         <td align="center">
215 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper">
216 |                                             <tbody>
217 |                                               <tr>
218 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/facebook-black.png" width="16" alt="Some alt"></td>
219 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/twitter-black.png" width="16" alt="Some alt"></td>
220 |                                                 <td style="padding-top: 3px;"><img src="img/instagram-black.png" width="16" alt="Some alt"></td>
221 |                                               </tr>
222 |                                             </tbody>
223 |                                           </table>
224 |                                         </td>
225 |                                       </tr>
226 |                                     </tbody>
227 |                                   </table>
228 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
229 |                                 </td>
230 |                               </tr>
231 |                             </table><!-- END COMPONENT: MENU 3 -->
232 |                           </td>
233 |                         </tr>
234 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
235 |                           &nbsp;
236 |                         </tr>
237 |                       </tbody>
238 |                       <tbody class="components__item">
239 |                         <tr>
240 |                           <td>
241 |                             <!-- START COMPONENT: CONTENT 1 -->
242 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-1" style="width: 100%; border-collapse: collapse;">
243 |                               <tr>
244 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
245 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
246 |                                     <tbody>
247 |                                       <tr>
248 |                                         <td align="center">
249 |                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
250 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170) ">12 July '19</span>
251 |                                           </p>
252 |                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
253 |                                             <b>
254 |                                               <span style="font-size: 24px;">Is There a Perfect Time of<br>Day to Meditate?</span>
255 |                                             </b>
256 |                                           </p>
257 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
258 |                                         </td>
259 |                                       </tr>
260 |                                     </tbody>
261 |                                   </table>
262 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col" style="display: inline-table; vertical-align: top; width: 100%;">
263 |                                     <tbody>
264 |                                       <tr>
265 |                                         <td align="center" class=""><a href="https://example.com">
266 |                                             <!--[if gte mso 9]><img src="img/simon-migaj-Yui5vfKHuzs-unsplash.jpg" width="530" height="335" alt="Some alt"><![endif]-->
267 |                                             <!--[if !gte mso 9]><!--><img width="530" src="img/simon-migaj-Yui5vfKHuzs-unsplash.jpg" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 530px;">
268 |                                             <!--<![endif]--></a></td>
269 |                                       </tr>
270 |                                     </tbody>
271 |                                   </table>
272 |                                 </td>
273 |                               </tr>
274 |                             </table><!-- END COMPONENT: CONTENT 1 -->
275 |                           </td>
276 |                         </tr>
277 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
278 |                           &nbsp;
279 |                         </tr>
280 |                       </tbody>
281 |                       <tbody class="components__item">
282 |                         <tr>
283 |                           <td>
284 |                             <!-- START COMPONENT: CONTENT 2 -->
285 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-2" style="width: 100%; border-collapse: collapse;">
286 |                               <tr>
287 |                                 <td style="padding: 30px 35px 25px; background-color: rgb(255, 255, 255); border-radius: 5px;">
288 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper wrapper__row" style="width: 100%;">
289 |                                     <tbody>
290 |                                       <tr>
291 |                                         <td>
292 |                                           <!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" align="center" role="presentation"><tr><td valign="top"><![endif]-->
293 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col-50 xs-col sm-center xs-center mso-col-100 xs-mb-20" style="float: left;">
294 |                                             <tbody>
295 |                                               <tr>
296 |                                                 <td class="post-col-left">
297 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
298 |                                                     <tbody>
299 |                                                       <tr>
300 |                                                         <td align="left">
301 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
302 |                                                             <span style="font-size: 14px; color: rgb(170, 170, 170) ">12 July '19</span>
303 |                                                           </p>
304 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
305 |                                                             <span style="font-size: 24px;">
306 |                       <b>How Music Affects Your Productivity</b>
307 |                     </span>
308 |                                                           </p>
309 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
310 |                                                         </td>
311 |                                                       </tr>
312 |                                                     </tbody>
313 |                                                   </table>
314 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; border-radius: 3px; vertical-align: middle; height: 200px;">
315 |                                                     <tbody>
316 |                                                       <tr>
317 |                                                         <td style="background-image: url(&quot;img/juja-han-HU-uL54pfQI-unsplash.jpg&quot;); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px;">
318 |                                                           <!--[if gte mso 9]>
319 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 255px; height: 200px">
320 |         <v:fill type="frame" src="img/juja-han-HU-uL54pfQI-unsplash.jpg" color="#FFFFFF" />
321 |         <v:textbox null inset="0,0,0,0">
322 |       <![endif]-->
323 |                                                           <!--[if gte mso 9]>
324 |         </v:textbox>
325 |       </v:rect>
326 |       <![endif]-->
327 |                                                         </td>
328 |                                                       </tr>
329 |                                                     </tbody>
330 |                                                   </table>
331 |                                                 </td>
332 |                                               </tr>
333 |                                             </tbody>
334 |                                           </table>
335 |                                           <!--[if (gte mso 9)|(IE)]></td><td valign="top"><![endif]-->
336 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col-50 xs-col sm-center xs-center mso-col-100 xs-mb-20" style="float: left;">
337 |                                             <tbody>
338 |                                               <tr>
339 |                                                 <td class="post-col-right">
340 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
341 |                                                     <tbody>
342 |                                                       <tr>
343 |                                                         <td align="left">
344 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
345 |                                                             <span style="font-size: 14px; color: rgb(170, 170, 170)">12 July '19</span>
346 |                                                           </p>
347 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
348 |                                                             <span style="font-size: 24px;">
349 |                       <b>Background Music for Coding</b>
350 |                     </span>
351 |                                                           </p>
352 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
353 |                                                         </td>
354 |                                                       </tr>
355 |                                                     </tbody>
356 |                                                   </table>
357 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; border-radius: 3px; vertical-align: middle; height: 200px;">
358 |                                                     <tbody>
359 |                                                       <tr>
360 |                                                         <td style="background-image: url(&quot;img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg&quot;); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px;">
361 |                                                           <!--[if gte mso 9]>
362 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 255px; height: 200px">
363 |         <v:fill type="frame" src="img/jefferson-santos-9SoCnyQmkzI-unsplash.jpg" color="#FFFFFF" />
364 |         <v:textbox null inset="0,0,0,0">
365 |       <![endif]-->
366 |                                                           <!--[if gte mso 9]>
367 |         </v:textbox>
368 |       </v:rect>
369 |       <![endif]-->
370 |                                                         </td>
371 |                                                       </tr>
372 |                                                     </tbody>
373 |                                                   </table>
374 |                                                 </td>
375 |                                               </tr>
376 |                                             </tbody>
377 |                                           </table>
378 |                                           <!--[if (gte mso 9)|(IE)]></td><td valign="top"><![endif]-->
379 |                                           <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
380 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
381 |                                             <tbody>
382 |                                               <tr>
383 |                                                 <td height="10" style="font-size: 1px; line-height: 1px;">
384 |                                                   &nbsp;
385 |                                                 </td>
386 |                                               </tr>
387 |                                             </tbody>
388 |                                           </table>
389 |                                         </td>
390 |                                       </tr>
391 |                                     </tbody>
392 |                                   </table>
393 |                                 </td>
394 |                               </tr>
395 |                             </table><!-- END COMPONENT: CONTENT 2 -->
396 |                           </td>
397 |                         </tr>
398 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
399 |                           &nbsp;
400 |                         </tr>
401 |                       </tbody>
402 |                       <tbody class="components__item">
403 |                         <tr>
404 |                           <td>
405 |                             <!-- START COMPONENT: FOOTER 1 -->
406 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-1" style="width: 100%; border-collapse: collapse;">
407 |                               <tr>
408 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
409 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
410 |                                     <tbody>
411 |                                       <tr>
412 |                                         <td align="center">
413 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
414 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170)">500 Howard Street<br>San Francisco, CA 94105</span>
415 |                                           </p>
416 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
417 |                                         </td>
418 |                                       </tr>
419 |                                     </tbody>
420 |                                   </table>
421 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
422 |                                     <tbody>
423 |                                       <tr>
424 |                                         <td align="center">
425 |                                           <table cellpadding="0" cellspacing="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; padding-top: 2px;">
426 |                                             <tbody>
427 |                                               <tr>
428 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Update preferences</a></td>
429 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Unsubscribe</a></td>
430 |                                                 <td style="padding-right: 0px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Policies</a></td>
431 |                                               </tr>
432 |                                             </tbody>
433 |                                           </table>
434 |                                         </td>
435 |                                       </tr>
436 |                                     </tbody>
437 |                                   </table>
438 |                                 </td>
439 |                               </tr>
440 |                             </table><!-- END COMPONENT: FOOTER 1 -->
441 |                           </td>
442 |                         </tr>
443 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
444 |                           &nbsp;
445 |                         </tr>
446 |                       </tbody>
447 |                     </table>
448 |                   </td>
449 |                 </tr>
450 |               </tbody>
451 |             </table>
452 |             <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
453 |           </td>
454 |         </tr>
455 |       </tbody>
456 |     </table>
457 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
458 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
459 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
460 |   </body>
461 | 
462 | </html>


--------------------------------------------------------------------------------
/newsletter-2/img/image-1_4uTLQvKKDM.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-1_4uTLQvKKDM.jpg


--------------------------------------------------------------------------------
/newsletter-2/img/image-2_xrXaXBWvnF.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-2_xrXaXBWvnF.jpg


--------------------------------------------------------------------------------
/newsletter-2/img/image-3_Iln5CnmNRr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-3_Iln5CnmNRr.jpg


--------------------------------------------------------------------------------
/newsletter-2/img/image-4_pfbvqZT6H5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-4_pfbvqZT6H5.png


--------------------------------------------------------------------------------
/newsletter-2/img/image-5_fZXP7Ynf08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-5_fZXP7Ynf08.jpg


--------------------------------------------------------------------------------
/newsletter-2/img/image-6_wsuhE80FqA.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-6_wsuhE80FqA.jpg


--------------------------------------------------------------------------------
/newsletter-2/img/image-7_CrXym8CtMl.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/newsletter-2/img/image-7_CrXym8CtMl.jpg


--------------------------------------------------------------------------------
/newsletter-2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       .gmail-fix {
 73 |         display: none !important;
 74 |       }
 75 | 
 76 |       .sm-right {
 77 |         text-align: right;
 78 |         margin-left: auto;
 79 |       }
 80 | 
 81 |       .sm-center {
 82 |         text-align: center;
 83 |       }
 84 | 
 85 |       .sm-padding-left-30 {
 86 |         padding-left: 30px;
 87 |       }
 88 | 
 89 |       .sm-padding-right-20 {
 90 |         padding-right: 20px;
 91 |       }
 92 | 
 93 |       .post-col-left {
 94 |         padding-right: 10px;
 95 |       }
 96 | 
 97 |       .post-col-right {
 98 |         padding-left: 10px;
 99 |       }
100 | 
101 |       .sm-col-25 {
102 |         width: 25%;
103 |       }
104 | 
105 |       .sm-col-33 {
106 |         width: 33%;
107 |       }
108 | 
109 |       .sm-col-50 {
110 |         width: 50%;
111 |       }
112 | 
113 |       @media screen and (max-width:620px) {
114 |         table.template-container {
115 |           width: 320px !important;
116 |           margin: 0 auto;
117 |           white-space: normal;
118 |         }
119 | 
120 |         .xs-col {
121 |           width: 100% !important;
122 |         }
123 | 
124 |         .xs-spacing {
125 |           margin: 10px 0 !important;
126 |         }
127 | 
128 |         .xs-mb-10 {
129 |           margin-bottom: 10px;
130 |         }
131 | 
132 |         .xs-mb-20 {
133 |           margin-bottom: 20px;
134 |         }
135 | 
136 |         .xs-center {
137 |           text-align: center;
138 |         }
139 | 
140 |         .xs-table-center {
141 |           text-align: center;
142 |           margin: 0 auto;
143 |         }
144 | 
145 |         .xs-padding-lr-0 {
146 |           padding-left: 0 !important;
147 |           padding-right: 0 !important;
148 |         }
149 | 
150 |         .sm-padding-left-30 {
151 |           padding-left: 0;
152 |         }
153 | 
154 |         .sm-padding-right-20 {
155 |           padding-right: 0;
156 |         }
157 | 
158 |         .post-col-left {
159 |           padding-right: 0;
160 |         }
161 | 
162 |         .post-col-right {
163 |           padding-left: 0;
164 |         }
165 |       }
166 |     </style>
167 |     <!--[if gte mso 9]>
168 |     <style type="text/css">
169 |         .pc-font {
170 |             font-family: Helvetica, Arial, sans-serif !important;
171 |         }
172 |         .mso-col-100 {
173 |           width: 100% !important;
174 |         }
175 |     </style>
176 |     <![endif]-->
177 |   </head>
178 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
179 | 
180 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
181 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">The short summary text that follows the subject line when viewing an email from the inbox. Also known as the Johnson Box or Preview text.</span>
182 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
183 |       <tbody>
184 |         <tr>
185 |           <td style="vertical-align: top;">
186 |             <!--[if gte mso 9]>
187 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
188 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
189 |         </v:background>
190 |         <![endif]-->
191 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
192 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
193 |               <tbody>
194 |                 <tr>
195 |                   <td class="template__inner">
196 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
197 |                       <tbody class="components__item">
198 |                         <tr>
199 |                           <td>
200 |                             <!-- START COMPONENT: MENU 4 -->
201 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component menu-4" style="width: 100%; border-collapse: collapse;">
202 |                               <tr>
203 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 0px;">
204 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="320" valign="middle"><![endif]-->
205 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-mb-20" style="display: inline-table; vertical-align: top; float: left; width: 320px;">
206 |                                     <tbody>
207 |                                       <tr>
208 |                                         <td align="" class="sm-right xs-center"><a href="https://example.com">
209 |                                             <!--[if gte mso 9]><img src="img/image-4_pfbvqZT6H5.png" width="110" height="25" alt="Some alt"><![endif]-->
210 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/image-4_pfbvqZT6H5.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
211 |                                             <!--<![endif]--></a></td>
212 |                                       </tr>
213 |                                     </tbody>
214 |                                   </table>
215 |                                   <!--[if (gte mso 9)|(IE)]></td><td width="210" valign="middle"><![endif]-->
216 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
217 |                                 </td>
218 |                               </tr>
219 |                             </table><!-- END COMPONENT: MENU 4 -->
220 |                           </td>
221 |                         </tr>
222 |                       </tbody>
223 |                       <tbody class="components__item">
224 |                         <tr>
225 |                           <td>
226 |                             <!-- START COMPONENT: CALL TO ACTION 2 -->
227 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component cta-2" style="width: 100%; border-collapse: collapse;">
228 |                               <tr>
229 |                                 <td style="padding: 0px; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 0px;">
230 |                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
231 |                                     <tbody>
232 |                                       <tr>
233 |                                         <td style="background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 5px;">
234 |                                           <!--[if gte mso 9]>
235 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 706px">
236 |         <v:fill type="frame" src="" color="#FFFFFF" />
237 |         <v:textbox null inset="0px,0,0px,0">
238 |       <![endif]-->
239 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
240 |                                             <tbody>
241 |                                               <tr>
242 |                                                 <!--[if gte mso 9]><td style="padding:0px 0 25px 0"><![endif]-->
243 |                                                 <!--[if !gte mso 9]><!-->
244 |                                                 <td style="padding: 0px 0px 25px;">
245 |                                                   <!--<![endif]-->
246 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="display: inline-table; vertical-align: top; width: 100%;">
247 |                                                     <tbody>
248 |                                                       <tr>
249 |                                                         <td align="center" class=""><a href="https://example.com">
250 |                                                             <!--[if gte mso 9]><img src="https://images.unsplash.com/photo-1417577097439-425fb7dec05e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=60" width="600" height="338" alt="Some alt"><![endif]-->
251 |                                                             <!--[if !gte mso 9]><!--><img width="600" src="https://images.unsplash.com/photo-1417577097439-425fb7dec05e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=60" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 600px;">
252 |                                                             <!--<![endif]--></a></td>
253 |                                                       </tr>
254 |                                                     </tbody>
255 |                                                   </table>
256 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
257 |                                                     <tbody>
258 |                                                       <tr>
259 |                                                         <td height="50" style="font-size: 1px; line-height: 1px;">
260 |                                                           &nbsp;
261 |                                                         </td>
262 |                                                       </tr>
263 |                                                     </tbody>
264 |                                                   </table>
265 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
266 |                                                     <tbody>
267 |                                                       <tr>
268 |                                                         <td align="center">
269 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;"><b><span style="font-size: 32px; line-height: 1.2;">Video Stock:<br>Your New Secret Weapon<br>in Galaxy</span></b></p>
270 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;"><span style="color: rgb(170, 170, 170);">Whether you're production on a small marketing budget or setting<br>your film in a galaxy far, far away, stock footage can help you tell your most<br>compelling store.</span></p>
271 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
272 |                                                         </td>
273 |                                                       </tr>
274 |                                                     </tbody>
275 |                                                   </table>
276 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
277 |                                                     <tbody>
278 |                                                       <tr>
279 |                                                         <td height="20" style="font-size: 1px; line-height: 1px;">
280 |                                                           &nbsp;
281 |                                                         </td>
282 |                                                       </tr>
283 |                                                     </tbody>
284 |                                                   </table>
285 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
286 |                                                     <tbody>
287 |                                                       <tr>
288 |                                                         <td align="center">
289 |                                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="display: inline-table;">
290 |                                                             <tbody>
291 |                                                               <tr>
292 |                                                                 <td valign="top" style="padding: 5px;">
293 |                                                                   <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
294 |                                                                     <tbody>
295 |                                                                       <tr>
296 |                                                                         <td style="background-color: rgb(64, 158, 255); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">See what's possible</span></a></td>
297 |                                                                       </tr>
298 |                                                                     </tbody>
299 |                                                                   </table>
300 |                                                                 </td>
301 |                                                               </tr>
302 |                                                             </tbody>
303 |                                                           </table>
304 |                                                         </td>
305 |                                                       </tr>
306 |                                                     </tbody>
307 |                                                   </table>
308 |                                                 </td>
309 |                                               </tr>
310 |                                             </tbody>
311 |                                           </table>
312 |                                           <!--[if gte mso 9]>
313 |         </v:textbox>
314 |       </v:rect>
315 |       <![endif]-->
316 |                                         </td>
317 |                                       </tr>
318 |                                     </tbody>
319 |                                   </table>
320 |                                 </td>
321 |                               </tr>
322 |                             </table><!-- END COMPONENT: CALL TO ACTION 2 -->
323 |                           </td>
324 |                         </tr>
325 |                       </tbody>
326 |                       <tbody class="components__item">
327 |                         <tr>
328 |                           <td>
329 |                             <!-- START COMPONENT: CONTENT 9 -->
330 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-9" style="width: 100%; border-collapse: collapse;">
331 |                               <tr>
332 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 0px;">
333 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
334 |                                     <tbody>
335 |                                       <tr>
336 |                                         <td>
337 |                                           <!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" align="center" role="presentation"><tr><td valign="top"><![endif]-->
338 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col-50 xs-col mso-col-100" style="float: left;">
339 |                                             <tbody>
340 |                                               <tr>
341 |                                                 <td>
342 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; border-radius: 3px; vertical-align: middle; height: 200px;">
343 |                                                     <tbody>
344 |                                                       <tr>
345 |                                                         <td style="background-image: url(&quot;https://images.unsplash.com/photo-1532456164788-984c62717cf8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60&quot;); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px;">
346 |                                                           <!--[if gte mso 9]>
347 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 255px; height: 200px">
348 |         <v:fill type="frame" src="https://images.unsplash.com/photo-1532456164788-984c62717cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" color="#FFFFFF" />
349 |         <v:textbox null inset="0,0,0,0">
350 |       <![endif]-->
351 |                                                           <!--[if gte mso 9]>
352 |         </v:textbox>
353 |       </v:rect>
354 |       <![endif]-->
355 |                                                         </td>
356 |                                                       </tr>
357 |                                                     </tbody>
358 |                                                   </table>
359 |                                                 </td>
360 |                                               </tr>
361 |                                             </tbody>
362 |                                           </table>
363 |                                           <!--[if (gte mso 9)|(IE)]></td><td valign="top"><![endif]-->
364 |                                           <table cellpadding="0" cellspacing="0" role="presentation" border="0" class="xs-col mso-col-100" style="white-space: normal; border-collapse: collapse;">
365 |                                             <tbody>
366 |                                               <tr>
367 |                                                 <td align="left" class="xs-padding-lr-0" style="padding: 10px 0px 10px 20px;">
368 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
369 |                                                     <span style="font-size: 14px; color: rgb(170, 170, 170); line-height: 1.5em;">12 July '19</span>
370 |                                                   </p>
371 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;"><b><span><span style="font-size: 24px; line-height: 1.2;">Pocket Vlogging</span></span><br></b></p>
372 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;">
373 |                                                     <span style="color: rgb(170, 170, 170);">Editing video is hard, that’s a fact. Let alone doing a video blog or “vlog” for Youtube</span>
374 |                                                   </p>
375 |                                                   <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
376 |                                                 </td>
377 |                                               </tr>
378 |                                             </tbody>
379 |                                           </table>
380 |                                           <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
381 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
382 |                                             <tbody>
383 |                                               <tr>
384 |                                                 <td height="20" style="font-size: 1px; line-height: 1px;">
385 |                                                   &nbsp;
386 |                                                 </td>
387 |                                               </tr>
388 |                                             </tbody>
389 |                                           </table>
390 |                                         </td>
391 |                                       </tr>
392 |                                     </tbody>
393 |                                   </table>
394 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
395 |                                     <tbody>
396 |                                       <tr>
397 |                                         <td>
398 |                                           <table cellpadding="0" cellspacing="0" role="presentation" border="0" class="xs-col sm-col-50 mso-col-100" style="white-space: normal; border-collapse: collapse; float: left;">
399 |                                             <tbody>
400 |                                               <tr>
401 |                                                 <td align="left" class="xs-padding-lr-0" style="padding: 10px 20px 10px 0px;">
402 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
403 |                                                     <span style="font-size: 14px; color: rgb(170, 170, 170); line-height: 1.5em;">12 July '19</span>
404 |                                                   </p>
405 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="font-size: 24px; font-weight: 700; line-height: 1.2;">How to become a pro video maker</span></p>
406 |                                                   <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;">
407 |                                                     <span style="color: rgb(170, 170, 170);">On average, each video is under two minutes in length, which easily achieves</span>
408 |                                                   </p>
409 |                                                   <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
410 |                                                 </td>
411 |                                               </tr>
412 |                                             </tbody>
413 |                                           </table>
414 |                                           <!--[if (gte mso 9)|(IE)]></td><td valign="top"><![endif]-->
415 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col-50 xs-col mso-col-100">
416 |                                             <tbody>
417 |                                               <tr>
418 |                                                 <td>
419 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; border-radius: 3px; vertical-align: middle; height: 200px;">
420 |                                                     <tbody>
421 |                                                       <tr>
422 |                                                         <td style="background-image: url(&quot;https://images.unsplash.com/photo-1528109966604-5a6a4a964e8d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60&quot;); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px;">
423 |                                                           <!--[if gte mso 9]>
424 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 255px; height: 200px">
425 |         <v:fill type="frame" src="https://images.unsplash.com/photo-1528109966604-5a6a4a964e8d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" color="#FFFFFF" />
426 |         <v:textbox null inset="0,0,0,0">
427 |       <![endif]-->
428 |                                                           <!--[if gte mso 9]>
429 |         </v:textbox>
430 |       </v:rect>
431 |       <![endif]-->
432 |                                                         </td>
433 |                                                       </tr>
434 |                                                     </tbody>
435 |                                                   </table>
436 |                                                 </td>
437 |                                               </tr>
438 |                                             </tbody>
439 |                                           </table>
440 |                                           <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
441 |                                         </td>
442 |                                       </tr>
443 |                                     </tbody>
444 |                                   </table>
445 |                                 </td>
446 |                               </tr>
447 |                             </table><!-- END COMPONENT: CONTENT 9 -->
448 |                           </td>
449 |                         </tr>
450 |                       </tbody>
451 |                       <tbody class="components__item">
452 |                         <tr>
453 |                           <td>
454 |                             <!-- START COMPONENT: FOOTER 1 -->
455 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-1" style="width: 100%; border-collapse: collapse;">
456 |                               <tr>
457 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 0px;">
458 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
459 |                                     <tbody>
460 |                                       <tr>
461 |                                         <td align="center">
462 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
463 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170); line-height: 1.5em;">500 Howard Street<br>San Francisco, CA 94105</span>
464 |                                           </p>
465 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
466 |                                         </td>
467 |                                       </tr>
468 |                                     </tbody>
469 |                                   </table>
470 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
471 |                                     <tbody>
472 |                                       <tr>
473 |                                         <td align="center">
474 |                                           <table cellpadding="0" cellspacing="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; padding-top: 2px;">
475 |                                             <tbody>
476 |                                               <tr>
477 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Update preferences</a></td>
478 |                                                 <td style="padding-right: 10px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Unsubscribe</a></td>
479 |                                                 <td style="padding-right: 0px;"><a href="https://example.com" style="text-decoration: none; vertical-align: middle; color: rgb(34, 34, 34); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Policies</a></td>
480 |                                               </tr>
481 |                                             </tbody>
482 |                                           </table>
483 |                                         </td>
484 |                                       </tr>
485 |                                     </tbody>
486 |                                   </table>
487 |                                 </td>
488 |                               </tr>
489 |                             </table><!-- END COMPONENT: FOOTER 1 -->
490 |                           </td>
491 |                         </tr>
492 |                       </tbody>
493 |                     </table>
494 |                   </td>
495 |                 </tr>
496 |               </tbody>
497 |             </table>
498 |             <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
499 |           </td>
500 |         </tr>
501 |       </tbody>
502 |     </table>
503 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
504 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
505 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
506 |   </body>
507 | 
508 | </html>


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/preview.gif


--------------------------------------------------------------------------------
/request-reset-password-1/img/facebook-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-1/img/facebook-black.png


--------------------------------------------------------------------------------
/request-reset-password-1/img/instagram-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-1/img/instagram-black.png


--------------------------------------------------------------------------------
/request-reset-password-1/img/logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-1/img/logo-black.png


--------------------------------------------------------------------------------
/request-reset-password-1/img/twitter-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-1/img/twitter-black.png


--------------------------------------------------------------------------------
/request-reset-password-1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       .gmail-fix {
 73 |         display: none !important;
 74 |       }
 75 | 
 76 |       .sm-right {
 77 |         text-align: right;
 78 |         margin-left: auto;
 79 |       }
 80 | 
 81 |       .sm-center {
 82 |         text-align: center;
 83 |       }
 84 | 
 85 |       .sm-padding-left-30 {
 86 |         padding-left: 30px;
 87 |       }
 88 | 
 89 |       .sm-padding-right-20 {
 90 |         padding-right: 20px;
 91 |       }
 92 | 
 93 |       .post-col-left {
 94 |         padding-right: 10px;
 95 |       }
 96 | 
 97 |       .post-col-right {
 98 |         padding-left: 10px;
 99 |       }
100 | 
101 |       .sm-col-25 {
102 |         width: 25%;
103 |       }
104 | 
105 |       .sm-col-33 {
106 |         width: 33%;
107 |       }
108 | 
109 |       .sm-col-50 {
110 |         width: 50%;
111 |       }
112 | 
113 |       @media screen and (max-width:620px) {
114 |         table.template-container {
115 |           width: 320px !important;
116 |           margin: 0 auto;
117 |           white-space: normal;
118 |         }
119 | 
120 |         .xs-col {
121 |           width: 100% !important;
122 |         }
123 | 
124 |         .xs-spacing {
125 |           margin: 10px 0 !important;
126 |         }
127 | 
128 |         .xs-mb-10 {
129 |           margin-bottom: 10px;
130 |         }
131 | 
132 |         .xs-mb-20 {
133 |           margin-bottom: 20px;
134 |         }
135 | 
136 |         .xs-center {
137 |           text-align: center;
138 |         }
139 | 
140 |         .xs-table-center {
141 |           text-align: center;
142 |           margin: 0 auto;
143 |         }
144 | 
145 |         .sm-padding-left-30 {
146 |           padding-left: 0;
147 |         }
148 | 
149 |         .sm-padding-right-20 {
150 |           padding-right: 0;
151 |         }
152 | 
153 |         .post-col-left {
154 |           padding-right: 0;
155 |         }
156 | 
157 |         .post-col-right {
158 |           padding-left: 0;
159 |         }
160 |       }
161 |     </style>
162 |     <!--[if gte mso 9]>
163 |     <style type="text/css">
164 |         .pc-font {
165 |             font-family: Helvetica, Arial, sans-serif !important;
166 |         }
167 |         .mso-col-100 {
168 |           width: 100% !important;
169 |         }
170 |     </style>
171 |     <![endif]-->
172 |   </head>
173 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
174 | 
175 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
176 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">The short summary text that follows the subject line when viewing an email from the inbox. Also known as the Johnson Box or Preview text.</span>
177 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
178 |       <tbody>
179 |         <tr>
180 |           <td style="vertical-align: top;">
181 |             <!--[if gte mso 9]>
182 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
183 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
184 |         </v:background>
185 |         <![endif]-->
186 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
187 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
188 |               <tbody>
189 |                 <tr>
190 |                   <td class="template__inner">
191 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
192 |                       <tbody class="components__item">
193 |                         <tr>
194 |                           <td>
195 |                             <!-- START COMPONENT: MENU 1 -->
196 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component menu-1" style="width: 100%; border-collapse: collapse;">
197 |                               <tr>
198 |                                 <td style="padding: 30px 35px; background-color: rgb(245, 245, 245); border-radius: 5px;">
199 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="372" valign="middle"><![endif]-->
200 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center xs-mb-20" style="display: inline-table; vertical-align: top; float: left; width: 372px;">
201 |                                     <tbody>
202 |                                       <tr>
203 |                                         <td align="" class=""><a href="https://example.com">
204 |                                             <!--[if gte mso 9]><img src="img/logo-black.png" width="110" height="25" alt="Some alt"><![endif]-->
205 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/logo-black.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
206 |                                             <!--<![endif]--></a></td>
207 |                                       </tr>
208 |                                     </tbody>
209 |                                   </table>
210 |                                   <!--[if (gte mso 9)|(IE)]></td><td width="0" valign="middle"><![endif]-->
211 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
212 |                                 </td>
213 |                               </tr>
214 |                             </table><!-- END COMPONENT: MENU 1 -->
215 |                           </td>
216 |                         </tr>
217 |                         <tr height="10" class="card-spacing" style="font-size: 0px;">
218 |                           &nbsp;
219 |                         </tr>
220 |                       </tbody>
221 |                       <tbody class="components__item" draggable="false">
222 |                         <tr>
223 |                           <td>
224 |                             <!-- START COMPONENT: HEADER 4 -->
225 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component" name="header-4" style="width: 100%; border-collapse: collapse;">
226 |                               <tr>
227 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 5px;">
228 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="600px" valign="middle"><![endif]-->
229 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
230 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
231 |                                     <tbody>
232 |                                       <tr>
233 |                                         <td align="left">
234 |                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span><span><b><span style="font-size: 24px;">Reset your password</span></b></span>
235 |     </span></p>
236 |     <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="color: rgb(170, 170, 170);">Need to reset your password? No problem! Just click the button bellow and you'll be on your way. If you did not make this request, please ignore this email</span></p>
237 |     <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
238 |     </td>
239 |     </tr>
240 |     </tbody>
241 |     </table>
242 |     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
243 |       <tbody>
244 |         <tr>
245 |           <td height="20" style="font-size: 1px; line-height: 1px;">
246 |             &nbsp;
247 |           </td>
248 |         </tr>
249 |       </tbody>
250 |     </table>
251 |     <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
252 |       <tbody>
253 |         <tr>
254 |           <td align="center">
255 |             <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="display: inline-table;">
256 |               <tbody>
257 |                 <tr>
258 |                   <td valign="top" style="padding: 5px;">
259 |                     <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
260 |                       <tbody>
261 |                         <tr>
262 |                           <td style="background-color: rgb(64, 158, 255); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;" draggable="false"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">RESET YOUT PASSSWORD</span></a></td>
263 |                         </tr>
264 |                       </tbody>
265 |                     </table>
266 |                   </td>
267 |                 </tr>
268 |               </tbody>
269 |             </table>
270 |           </td>
271 |         </tr>
272 |       </tbody>
273 |     </table>
274 |     </td>
275 |     </tr>
276 |     </table><!-- END COMPONENT: HEADER 4 -->
277 |     </td>
278 |     </tr>
279 |     <tr height="10" class="card-spacing" style="font-size: 0px;">
280 |       &nbsp;
281 |     </tr>
282 |     </tbody>
283 |     <tbody class="components__item" draggable="false">
284 |       <tr>
285 |         <td>
286 |           <!-- START COMPONENT: FOOTER 3 -->
287 |           <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-3" style="width: 100%; border-collapse: collapse;">
288 |             <tr>
289 |               <td style="padding: 30px 35px; background-color: rgb(245, 245, 245); border-radius: 5px;">
290 |                 <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col xs-col xs-center" style="width: 100%; margin: 0px;">
291 |                   <tbody>
292 |                     <tr>
293 |                       <td align="center">
294 |                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper">
295 |                           <tbody>
296 |                             <tr>
297 |                               <td style="padding-top: 3px; padding-right: 20px;"><img src="img/facebook-black.png" width="16" alt="Some alt" draggable="false"></td>
298 |                               <td style="padding-top: 3px; padding-right: 20px;"><img src="img/twitter-black.png" width="16" alt="Some alt" draggable="false"></td>
299 |                               <td style="padding-top: 3px;"><img src="img/instagram-black.png" width="16" alt="Some alt" draggable="false"></td>
300 |                             </tr>
301 |                           </tbody>
302 |                         </table>
303 |                       </td>
304 |                     </tr>
305 |                   </tbody>
306 |                 </table>
307 |                 <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
308 |                   <tbody>
309 |                     <tr>
310 |                       <td height="25" style="font-size: 1px; line-height: 1px;">
311 |                         &nbsp;
312 |                       </td>
313 |                     </tr>
314 |                   </tbody>
315 |                 </table>
316 |                 <table cellpadding="0" cellspacing="0" role="presentation" border="0" class="sm-col xs-col" style="white-space: normal; border-collapse: collapse; width: 100%;">
317 |                   <tbody>
318 |                     <tr>
319 |                       <td align="center">
320 |                         <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
321 |                           <span style="font-size: 14px; color: rgb(170, 170, 170)">500 Howard Street San Francisco, CA 94105<br>
322 |               <u>
323 |               <a href="https://example.com" style="color: rgb(170, 170, 170);" draggable="false">hello@example.com</a>
324 |               </u>
325 |             </span>
326 |                         </p>
327 |                         <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
328 |                       </td>
329 |                     </tr>
330 |                   </tbody>
331 |                 </table>
332 |                 <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
333 |                   <tbody>
334 |                     <tr></tr>
335 |                   </tbody>
336 |                 </table>
337 |               </td>
338 |             </tr>
339 |           </table><!-- END COMPONENT: FOOTER 3 -->
340 |         </td>
341 |       </tr>
342 |       <tr height="10" class="card-spacing" style="font-size: 0px;">
343 |         &nbsp;
344 |       </tr>
345 |     </tbody>
346 |     </table>
347 |     </td>
348 |     </tr>
349 |     </tbody>
350 |     </table>
351 |     <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
352 |     </td>
353 |     </tr>
354 |     </tbody>
355 |     </table>
356 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
357 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
358 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
359 |   </body>
360 | 
361 | </html>


--------------------------------------------------------------------------------
/request-reset-password-2/img/facebook-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/facebook-black.png


--------------------------------------------------------------------------------
/request-reset-password-2/img/image-1_zG0nGXG3eY.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/image-1_zG0nGXG3eY.jpg


--------------------------------------------------------------------------------
/request-reset-password-2/img/image-2_iY8r501u0W.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/image-2_iY8r501u0W.jpg


--------------------------------------------------------------------------------
/request-reset-password-2/img/instagram-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/instagram-black.png


--------------------------------------------------------------------------------
/request-reset-password-2/img/logo-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/logo-black.png


--------------------------------------------------------------------------------
/request-reset-password-2/img/twitter-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mysigmail/html-email-templates/91d643e4b40ff1e6bf8bdab1469f3539659f1b6e/request-reset-password-2/img/twitter-black.png


--------------------------------------------------------------------------------
/request-reset-password-2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 |   <head>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <!--[if !mso]><!-->
  7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |     <!--<![endif]-->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 |     <meta name="format-detection" content="telephone=no">
 11 |     <meta name="x-apple-disable-message-reformatting">
 12 |     <title></title>
 13 |     <style>
 14 |       body {
 15 |         margin: 0;
 16 |         padding: 0;
 17 |         width: 100% !important;
 18 |       }
 19 | 
 20 |       a {
 21 |         color: inherit;
 22 |       }
 23 | 
 24 |       a[x-apple-data-detectors] {
 25 |         color: inherit !important;
 26 |         text-decoration: none !important;
 27 |       }
 28 | 
 29 |       img {
 30 |         border: 0;
 31 |         outline: none;
 32 |         line-height: 100%;
 33 |         text-decoration: none;
 34 |         -ms-interpolation-mode: bicubic;
 35 |       }
 36 | 
 37 |       table,
 38 |       td {
 39 |         mso-table-lspace: 0;
 40 |         mso-table-rspace: 0;
 41 |       }
 42 | 
 43 |       table,
 44 |       tr,
 45 |       td {
 46 |         border-collapse: collapse;
 47 |       }
 48 | 
 49 |       table.template-container {
 50 |         width: 600px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 | 
 55 |       body,
 56 |       td,
 57 |       th,
 58 |       p,
 59 |       div,
 60 |       li,
 61 |       a,
 62 |       span {
 63 |         -webkit-text-size-adjust: 100%;
 64 |         -ms-text-size-adjust: 100%;
 65 |         mso-line-height-rule: exactly;
 66 |       }
 67 | 
 68 |       p:first-of-type {
 69 |         margin-top: 0 !important;
 70 |       }
 71 | 
 72 |       p {
 73 |         margin-top: 0;
 74 |         margin-bottom: 10px;
 75 |       }
 76 | 
 77 |       p+p {
 78 |         margin-top: 10px;
 79 |       }
 80 | 
 81 |       .gmail-fix {
 82 |         display: none !important;
 83 |       }
 84 | 
 85 |       .sm-right {
 86 |         text-align: right;
 87 |         margin-left: auto;
 88 |       }
 89 | 
 90 |       .sm-center {
 91 |         text-align: center;
 92 |       }
 93 | 
 94 |       .sm-padding-left-30 {
 95 |         padding-left: 30px;
 96 |       }
 97 | 
 98 |       .sm-padding-right-20 {
 99 |         padding-right: 20px;
100 |       }
101 | 
102 |       .post-col-left {
103 |         padding-right: 10px;
104 |       }
105 | 
106 |       .post-col-right {
107 |         padding-left: 10px;
108 |       }
109 | 
110 |       .sm-col-25 {
111 |         width: 25%;
112 |       }
113 | 
114 |       .sm-col-33 {
115 |         width: 33%;
116 |       }
117 | 
118 |       .sm-col-50 {
119 |         width: 50%;
120 |       }
121 | 
122 |       @media screen and (max-width:620px) {
123 |         table.template-container {
124 |           width: 320px !important;
125 |           margin: 0 auto;
126 |           white-space: normal;
127 |         }
128 | 
129 |         .xs-col {
130 |           width: 100% !important;
131 |         }
132 | 
133 |         .xs-spacing {
134 |           margin: 10px 0 !important;
135 |         }
136 | 
137 |         .xs-mb-10 {
138 |           margin-bottom: 10px;
139 |         }
140 | 
141 |         .xs-mb-20 {
142 |           margin-bottom: 20px;
143 |         }
144 | 
145 |         .xs-center {
146 |           text-align: center;
147 |         }
148 | 
149 |         .xs-table-center {
150 |           text-align: center;
151 |           margin: 0 auto;
152 |         }
153 | 
154 |         .xs-padding-lr-0 {
155 |           padding-left: 0 !important;
156 |           padding-right: 0 !important;
157 |         }
158 | 
159 |         .sm-padding-left-30 {
160 |           padding-left: 0;
161 |         }
162 | 
163 |         .sm-padding-right-20 {
164 |           padding-right: 0;
165 |         }
166 | 
167 |         .post-col-left {
168 |           padding-right: 0;
169 |         }
170 | 
171 |         .post-col-right {
172 |           padding-left: 0;
173 |         }
174 |       }
175 |     </style>
176 |     <!--[if gte mso 9]>
177 |     <style type="text/css">
178 |         .pc-font {
179 |             font-family: Helvetica, Arial, sans-serif !important;
180 |         }
181 |         .mso-col-100 {
182 |           width: 100% !important;
183 |         }
184 |     </style>
185 |     <![endif]-->
186 |   </head>
187 |   <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
188 | 
189 |   <body style="width: 100% !important; margin: 0; padding: 0; mso-line-height-rule: exactly; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color: #F5F5F5; background-image: url(''); background-position: center; background-repeat: no-repeat; background-size: cover">
190 |     <span style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">The short summary text that follows the subject line when viewing an email from the inbox. Also known as the Johnson Box or Preview text.</span>
191 |     <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-body" style="padding: 50px 0px; table-layout: fixed;">
192 |       <tbody>
193 |         <tr>
194 |           <td style="vertical-align: top;">
195 |             <!--[if gte mso 9]>
196 |         <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
197 |             <v:fill type="tile" src="" color="#F5F5F5"></v:fill>
198 |         </v:background>
199 |         <![endif]-->
200 |             <!--[if (gte mso 9)|(IE)]><table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="620" align="center" valign="top"><![endif]-->
201 |             <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="template-container" style="border-collapse: collapse;">
202 |               <tbody>
203 |                 <tr>
204 |                   <td class="template__inner">
205 |                     <table class="components" cellpadding="0" cellspasing="0" role="presentation" style="border-collapse: collapse; width: 100%;">
206 |                       <tbody class="components__item">
207 |                         <tr>
208 |                           <td>
209 |                             <!-- START COMPONENT: CONTENT 5 -->
210 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-5" style="width: 100%; border-collapse: collapse;">
211 |                               <tr>
212 |                                 <td style="padding: 15px 35px 5px; background-color: rgb(0, 0, 0); border-radius: 0px;">
213 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
214 |                                     <tbody>
215 |                                       <tr>
216 |                                         <td align="center">
217 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="font-size: 12px; line-height: 1.5em;"><strong>Reset Your Password</strong></span></p>
218 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
219 |                                         </td>
220 |                                       </tr>
221 |                                     </tbody>
222 |                                   </table>
223 |                                 </td>
224 |                               </tr>
225 |                             </table><!-- END COMPONENT: CONTENT 5 -->
226 |                           </td>
227 |                         </tr>
228 |                       </tbody>
229 |                       <tbody class="components__item">
230 |                         <tr>
231 |                           <td>
232 |                             <!-- START COMPONENT: HEADER 2 -->
233 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component header-2" style="width: 100%; border-collapse: collapse;">
234 |                               <tr>
235 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 0px;">
236 |                                   <!--[if (gte mso 9)|(IE)]><table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr><td width="372" valign="middle"><![endif]-->
237 |                                   <!--[if (gte mso 9)|(IE)]></td><td width="0" valign="middle"><![endif]-->
238 |                                   <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
239 |                                   <table cellpadding="0" cellspacing="0" role="presentation" class=" xs-col xs-center" style="width: 100%; border-radius: 3px;">
240 |                                     <tbody>
241 |                                       <tr>
242 |                                         <td style="background-image: url(&quot;https://images.unsplash.com/photo-1482887843465-b75f64e09f66?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=900&amp;q=60&quot;); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px;">
243 |                                           <!--[if gte mso 9]>
244 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 530px; height: 198px">
245 |         <v:fill type="frame" src="https://images.unsplash.com/photo-1482887843465-b75f64e09f66?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60" color="#FFFFFF" />
246 |         <v:textbox null inset="0,0,0,0">
247 |       <![endif]-->
248 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
249 |                                             <tbody>
250 |                                               <tr>
251 |                                                 <td height="50" style="font-size: 1px; line-height: 1px;">
252 |                                                   &nbsp;
253 |                                                 </td>
254 |                                               </tr>
255 |                                             </tbody>
256 |                                           </table>
257 |                                           <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
258 |                                             <tbody>
259 |                                               <tr>
260 |                                                 <td align="center">
261 |                                                   <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="font-size: 37px; line-height: 1.2;"><strong><u>RESET YOUR<br>PASSWORD</u></strong></span></p>
262 |                                                   <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
263 |                                                 </td>
264 |                                               </tr>
265 |                                             </tbody>
266 |                                           </table>
267 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
268 |                                             <tbody>
269 |                                               <tr>
270 |                                                 <td height="50" style="font-size: 1px; line-height: 1px;">
271 |                                                   &nbsp;
272 |                                                 </td>
273 |                                               </tr>
274 |                                             </tbody>
275 |                                           </table>
276 |                                           <!--[if gte mso 9]>
277 |         </v:textbox>
278 |       </v:rect>
279 |       <![endif]-->
280 |                                         </td>
281 |                                       </tr>
282 |                                     </tbody>
283 |                                   </table>
284 |                                 </td>
285 |                               </tr>
286 |                             </table><!-- END COMPONENT: HEADER 2 -->
287 |                           </td>
288 |                         </tr>
289 |                       </tbody>
290 |                       <tbody class="components__item">
291 |                         <tr>
292 |                           <td>
293 |                             <!-- START COMPONENT: CALL TO ACTION 3 -->
294 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component cta-3" style="width: 100%; border-collapse: collapse;">
295 |                               <tr>
296 |                                 <td style="padding: 0px; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 0px;">
297 |                                   <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
298 |                                     <tbody>
299 |                                       <tr>
300 |                                         <td style="background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 5px;">
301 |                                           <!--[if gte mso 9]>
302 |       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 178px">
303 |         <v:fill type="frame" src="" color="#FFFFFF" />
304 |         <v:textbox null inset="35px,0,35px,0">
305 |       <![endif]-->
306 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
307 |                                             <tbody>
308 |                                               <tr>
309 |                                                 <!--[if gte mso 9]><td style="padding:35px 0 30px 0"><![endif]-->
310 |                                                 <!--[if !gte mso 9]><!-->
311 |                                                 <td style="padding: 35px 35px 30px;">
312 |                                                   <!--<![endif]-->
313 |                                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
314 |                                                     <tbody>
315 |                                                       <tr>
316 |                                                         <td align="center">
317 |                                                           <p style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5em;">Visit this link to set a new password<br>for your account</p>
318 |                                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
319 |                                                         </td>
320 |                                                       </tr>
321 |                                                     </tbody>
322 |                                                   </table>
323 |                                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
324 |                                                     <tbody>
325 |                                                       <tr>
326 |                                                         <td align="center">
327 |                                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="display: inline-table;">
328 |                                                             <tbody>
329 |                                                               <tr>
330 |                                                                 <td valign="top" style="padding: 5px;">
331 |                                                                   <table cellpadding="0" cellspacing="0" role="presentation" class="button" style="position: relative; display: inline-table;">
332 |                                                                     <tbody>
333 |                                                                       <tr>
334 |                                                                         <td style="background-color: rgb(0, 0, 0); border-radius: 3px; font-size: 14px; font-weight: 600; padding: 14px 20px; color: rgb(255, 255, 255);"><a href="https://example.com" style="text-decoration: none; line-height: 16px;"><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: rgb(255, 255, 255);">- RESET PASSWORD -</span></a></td>
335 |                                                                       </tr>
336 |                                                                     </tbody>
337 |                                                                   </table>
338 |                                                                 </td>
339 |                                                               </tr>
340 |                                                             </tbody>
341 |                                                           </table>
342 |                                                         </td>
343 |                                                       </tr>
344 |                                                     </tbody>
345 |                                                   </table>
346 |                                                 </td>
347 |                                               </tr>
348 |                                             </tbody>
349 |                                           </table>
350 |                                           <!--[if gte mso 9]>
351 |         </v:textbox>
352 |       </v:rect>
353 |       <![endif]-->
354 |                                         </td>
355 |                                       </tr>
356 |                                     </tbody>
357 |                                   </table>
358 |                                 </td>
359 |                               </tr>
360 |                             </table><!-- END COMPONENT: CALL TO ACTION 3 -->
361 |                           </td>
362 |                         </tr>
363 |                       </tbody>
364 |                       <tbody class="components__item">
365 |                         <tr>
366 |                           <td>
367 |                             <!-- START COMPONENT: FOOTER 3 -->
368 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component footer-3" style="width: 100%; border-collapse: collapse;">
369 |                               <tr>
370 |                                 <td style="padding: 30px 35px; background-color: rgb(255, 255, 255); border-radius: 0px;">
371 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper sm-col xs-col xs-center" style="width: 100%; margin: 0px;">
372 |                                     <tbody>
373 |                                       <tr>
374 |                                         <td align="center">
375 |                                           <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper">
376 |                                             <tbody>
377 |                                               <tr>
378 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/facebook-black.png" width="16" alt="Some alt"></td>
379 |                                                 <td style="padding-top: 3px; padding-right: 20px;"><img src="img/twitter-black.png" width="16" alt="Some alt"></td>
380 |                                                 <td style="padding-top: 3px;"><img src="img/instagram-black.png" width="16" alt="Some alt"></td>
381 |                                               </tr>
382 |                                             </tbody>
383 |                                           </table>
384 |                                         </td>
385 |                                       </tr>
386 |                                     </tbody>
387 |                                   </table>
388 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
389 |                                     <tbody>
390 |                                       <tr>
391 |                                         <td height="25" style="font-size: 1px; line-height: 1px;">
392 |                                           &nbsp;
393 |                                         </td>
394 |                                       </tr>
395 |                                     </tbody>
396 |                                   </table>
397 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="sm-col xs-col xs-center" style="display: inline-table; vertical-align: top; width: 100%;">
398 |                                     <tbody>
399 |                                       <tr>
400 |                                         <td align="center" class=""><a href="https://example.com">
401 |                                             <!--[if gte mso 9]><img src="img/logo-black.png" width="110" height="25" alt="Some alt"><![endif]-->
402 |                                             <!--[if !gte mso 9]><!--><img width="110" src="img/logo-black.png" alt="Some alt" style="vertical-align: top; max-width: 100%; width: 110px;">
403 |                                             <!--<![endif]--></a></td>
404 |                                       </tr>
405 |                                     </tbody>
406 |                                   </table>
407 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-collapse: collapse;">
408 |                                     <tbody>
409 |                                       <tr>
410 |                                         <td height="20" style="font-size: 1px; line-height: 1px;">
411 |                                           &nbsp;
412 |                                         </td>
413 |                                       </tr>
414 |                                     </tbody>
415 |                                   </table>
416 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" class="sm-col xs-col" style="white-space: normal; border-collapse: collapse; width: 100%;">
417 |                                     <tbody>
418 |                                       <tr>
419 |                                         <td align="center">
420 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
421 |                                             <span style="font-size: 14px; color: rgb(170, 170, 170); line-height: 1.5em;">500 Howard Street San Francisco, CA 94105<br>
422 |               <u>
423 |               <a href="https://example.com" style="color: rgb(170, 170, 170);">hello@example.com</a>
424 |               </u>
425 |             </span>
426 |                                           </p>
427 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
428 |                                         </td>
429 |                                       </tr>
430 |                                     </tbody>
431 |                                   </table>
432 |                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" class="wrapper" style="width: 100%;">
433 |                                     <tbody>
434 |                                       <tr></tr>
435 |                                     </tbody>
436 |                                   </table>
437 |                                 </td>
438 |                               </tr>
439 |                             </table><!-- END COMPONENT: FOOTER 3 -->
440 |                           </td>
441 |                         </tr>
442 |                       </tbody>
443 |                       <tbody class="components__item">
444 |                         <tr>
445 |                           <td>
446 |                             <!-- START COMPONENT: CONTENT 5 -->
447 |                             <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="component content-5" style="width: 100%; border-collapse: collapse;">
448 |                               <tr>
449 |                                 <td style="padding: 30px 35px 15px; background-color: rgb(0, 0, 0); border-radius: 0px;">
450 |                                   <table cellpadding="0" cellspacing="0" role="presentation" border="0" style="white-space: normal; border-collapse: collapse; width: 100%;">
451 |                                     <tbody>
452 |                                       <tr>
453 |                                         <td align="center">
454 |                                           <p style="color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><span style="font-size: 12px; line-height: 1.5em;">Copyright ©2019 MySigMail</span></p>
455 |                                           <!--[if gte mso 12]><p style="font-size: 0px; line-height: 0px; mso-line-height-rule:exactly;">&nbsp;</p><![endif]-->
456 |                                         </td>
457 |                                       </tr>
458 |                                     </tbody>
459 |                                   </table>
460 |                                 </td>
461 |                               </tr>
462 |                             </table><!-- END COMPONENT: CONTENT 5 -->
463 |                           </td>
464 |                         </tr>
465 |                       </tbody>
466 |                     </table>
467 |                   </td>
468 |                 </tr>
469 |               </tbody>
470 |             </table>
471 |             <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
472 |           </td>
473 |         </tr>
474 |       </tbody>
475 |     </table>
476 |     <div class="gmail-fix" style="white-space: nowrap; font: 15px courier; line-height: 0;">&nbsp; &nbsp; &nbsp; &nbsp;
477 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
478 |       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
479 |   </body>
480 | 
481 | </html>


--------------------------------------------------------------------------------