Doters - Estado de cuenta
Client: Beso by LLYC
HTML mailing
HTML
<title>Estado de cuenta</title>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;700;900&display=swap');
td img {
display: block;
}
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr style="background-color: #ffffff">
<td width="390" align="left"></td>
<td width="110" align="rigth"><a href="https://www.doters.com" target="_blank">
<p style="color:#004951 !important;font-size:14px;font-family:'Arial';line-height: 20px;font-weight:bold;!important;margin:10px 0 5px 0 !important;text-decoration: underline">
Ir a mi cuenta
</p> </a>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td><img src="images/header_estado_de_cuenta.png" width="500" height="auto" id="edc_logo_doters" alt="Doters" /></td>
</tr>
<tr align="center">
<td align="center" style="background-color: #2affac">
<p style="color:#004951 !important;font-size:18px;font-family:'Lexend Deca', 'Arial';line-height: 33px;font-weight:bold;!important;margin:20px 0 20px 0 !important">
¡Échale un ojito a tu estado de cuenta!
</p>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr style="background-color: #ffffff">
<td width="340" align="left"></td>
<td width="160" align="rigth">
<p style="color:#000000 !important;font-size:14px;font-family:'Arial';line-height: 33px;font-weight:bold;!important;margin:10px 0 5px 10px !important">
Periodo Junio 2023
</p>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td width="40"></td>
<td align="left">
<p style="color:#004951 !important;font-size:26px;font-family:'Lexend Deca', 'Arial';line-height: 33px;font-weight:bold;!important;margin:20px 0 0 0 !important">
Hola, XXXX
</p>
<p style="color:#004951 !important;font-size:16px;font-family:'Lexend Deca', 'Arial';line-height: 24px;!important;margin:0 0 20px 0 !important">
Checa los datos más importantes de tu cuenta y lleva el control total de tus <span style="color:#ff008a;font-weight:bold">Puntos Doters</span>.
</p>
</td>
<td width="40"> </td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td width="40" style="border-radius: 10px 0 0 0;background-color: #004951"></td>
<td width="62" style="border-radius: 0;background-color: #004951"><img src="images/dot_verde.png" width="62" height="auto" id="edc_dot_verde" alt="" /></td>
<td width="100" style="border-radius: 0;background-color: #004951"><p style="color:#ffffff !important;font-size:13px;font-family:'Lexend Deca', 'Arial';line-height: 20px;!important;margin:15px 0 15px 0 !important">Nivel Doters:<br><span style="font-size:18px;font-weight:bold">Verde</span></p></td>
<td width="148" style="border-radius: 0;background-color: #004951"></td>
<td width="110" style="border-radius: 0;background-color: #004951"><p style="color:#ffffff !important;font-size:13px;font-family:'Lexend Deca', 'Arial';line-height: 20px;!important;margin:15px 0 15px 0 !important">Número de socio:<br><span style="font-size:18px;font-weight:bold">7110055274</span></p></td>
<td width="40" style="border-radius: 0 10px 0 0;background-color: #004951"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #2affac">
<tr>
<td height="5px" style="background-color: #2affac;margin-bottom: 20px"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td width="20"></td>
<td><img src="images/asset_01.png" width="180" height="auto" id="asset_01" alt="" /></td>
<td align="center"><p style="color:#000000!important;font-size:13px;font-family:'Lexend Deca', 'Arial';line-height: 44px;!important;margin:5px 0 15px 0 !important">Balance total al corte al 26 de Junio 2024<br><span style="font-size:55px;font-weight:bold;color: #004951">50,300</span><br><span style="font-size:26px;font-weight:bold;color: #004951">Puntos Doters</span></p></td>
<td width="20"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td align="center">
<p style="color:#000000 !important;font-size:16px;font-family:'Lexend Deca', 'Arial';line-height: 24px;!important;margin:0 !important">
Puntos para subir de Nivel:
<span style="color:#004951 !important;font-size:20px;line-height: 46px;font-weight:black!important;padding:0 !important">12,000 Puntos Doters</span>
</p>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td width="40" style="border-radius: 5px 0 0 5px;background-color: #F0F2F3"></td>
<td style="border-radius: 0;background-color: #F0F2F3"><p style="color:#000000 !important;font-size:10px;font-family:'Lexend Deca', 'Arial';line-height: 14px;!important;margin: 8px 0 8px 0!important">
El saldo mostrado no incluye tus
<span style="font-weight: bold;padding:0 !important">Puntos Doters pendientes</span>
, estos se verán reflejados en tu siguiente estado de cuenta o consúltalos en nuestra <a href="https://www.doters.com" target="_blank"><span style="color:#004951 !important;text-decoration: underline">App Doters</span></a>.</p></td>
<td width="40" style="border-radius: 0 5px 5px 0;background-color: #F0F2F3;font-weight:black;font-size:12px"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td height="1px" style="background-color: #F0F2F3"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff">
<tr>
<td width="20" style="border-radius: 10px 0 0 10px;background-color: #F0F2F3"></td>
<td width="290" style="border-radius: 0;background-color: #F0F2F3"><p style="color:#004951 !important;font-size:18px;font-family:'Lexend Deca', 'Arial';line-height: 22px !important;font-weight:bold!important;margin:0 !important;padding-top: 20px">
Todas tus compras con tus<br>
Tarjetas de Crédito HSBC VIVA<br>
te dan Puntos Doters.<br><br>
<span style="color:#ff008a !important;font-size:16px !important;line-height: 20px;font-weight:bold!important;margin:10px 0 10px 0 !important">¿Aún no la tienes? </span><span style="color:#004951 !important;font-size:16px !important;line-height: 20px;font-weight: normal!important">Ya te tardaste</span>
</p><br>
<a href="#"><img src="images/cta.png" width="200" height="auto" id="cta" alt="¡Pídela ahora!" /></a><br>
</td>
<td width="180" style="border-radius: 0;background-color: #F0F2F3;padding-top: 30px"><img src="images/asset_02.png" width="180" height="auto" id="asset_02" alt="" /></td>
<td width="10" style="border-radius: 0 10px 10px 0;background-color: #F0F2F3"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td width="10" style="border-radius: 5px 0 0 5px;background-color: #ffffff"></td>
<td style="border-radius: 0;background-color: #ffffff"><p style="color:#969696 !important;font-size:9px;font-family:'Lexend Deca', 'Arial';line-height: 12px;!important;margin: 8px 0 8px 0!important">
Las Tarjetas HSBC-VIVA son operadas por HSBC México. por lo que cualquier queja y/o reclamación deberá dirigirse con este. Consulta <a href="http://www.hsbc.com.mx/tarjetas-de-credito/productos/viva" target="_blank"><span style="color:#1B7CAE !important;text-decoration: underline">http://www.hsbc.com.mx/tarjetas-de-credito/productos/viva</span></a>.</p></td>
<td width="10" style="border-radius: 0 5px 5px 0;background-color: #ffffff;font-weight:black;font-size:12px"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td height="1px" style="background-color: #F0F2F3"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td width="20" style="background-color: #ffffff"></td>
<td width="260" style="background-color: #ffffff"><p style="color:#000000 !important;font-size:18px;font-family:'Lexend Deca', 'Arial';line-height: 22px !important;font-weight:bold!important;margin:0 !important;padding-top: 20px">
¿Cómo ganar Puntos<br>
Doters en Viva?<br><br>
<span style="color:#004951 !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">Recuerda que para ganar tooooodos<br>
tus Puntos Doters debes</span>
<span style="color:#ff008a !important;font-size:14px !important;line-height: 16px;font-weight:bold!important;margin:10px 0 10px 0 !important">iniciar<br>
sesión antes de comprar </span><span style="color:#004951 !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">en<br>
cualquiera de nuestros Aliados.</span>
</p><br>
</td>
<td width="220" style="border-radius: 0;background-color: #ffffff;padding-top: 10px"><a href="#"><img src="images/asset_03.png" width="220" height="auto" id="asset_03" alt="" /></a></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td height="1px" style="background-color: #F0F2F3"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td width="20" style="border-radius: 10px 0 0 10px;background-color: #004951"></td>
<td width="310" style="border-radius: 0;background-color: #004951"><p style="color:#ffffff !important;font-size:18px;font-family:'Lexend Deca', 'Arial';line-height: 22px !important;font-weight:bold!important;margin:0 !important;padding-top: 20px">
¡Descarga la App de Doters!<br><br>
<span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">Conoce todos tus</span>
<span style="color:#2AFFAC !important;font-size:14px !important;line-height: 16px;font-weight:bold!important;margin:10px 0 10px 0 !important">movimientos<span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">,</span> detalle de<br>
transacciones <span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">y</span> balance <span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">de</span> Puntos Doters<span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">,</span><br>
</span><span style="color:#ffffff !important;font-size:14px !important;line-height: 16px;font-weight: normal!important">pícale al botón y descarga nuestra app.</span>
</p><br>
<a href="#"><img src="images/cta_googleplay.png" width="130" height="auto" id="cta_googleplay" alt="" style="float: left" /></a>
<a href="#"><img src="images/cta_appstore.png" width="130" height="auto" id="cta_appstore" alt="" style="float: right;padding-right: 30px" /></a>
</td>
<td width="160" style="border-radius: 0;background-color: #004951;padding-top: 0px"><img src="images/asset_04.png" width="160" height="auto" id="asset_04" alt="" /></td>
<td width="10" style="border-radius: 0 10px 10px 0;background-color: #004951"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td height="1px" style="background-color: #F0F2F3"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td><img src="images/asset_logos.png" width="500" height="auto" id="asset_logos" alt="" /></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<p style="color:#004951 !important;font-size:18px;font-family:'Lexend Deca', 'Arial';line-height: 22px !important;font-weight:bold!important;margin:0 !important;margin: 10px 0 10px 0;text-align: center">doters.com</p>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" style="background-color: #ffffff;margin-bottom: 40px">
<tr>
<td width="106"></td>
<td width="32"> <a href="#"><img src="images/rrss_1.png" width="32" height="auto" id="rrss_1" alt="" /></a></td>
<td width="16"></td>
<td width="32"><a href="#"><img src="images/rrss_2.png" width="32" height="auto" id="rrss_2" alt="" /></a></td>
<td width="16"></td>
<td width="32"><a href="#"><img src="images/rrss_3.png" width="32" height="auto" id="rrss_3" alt="" /></a></td>
<td width="16"></td>
<td width="32"><a href="#"><img src="images/rrss_4.png" width="32" height="auto" id="rrss_4" alt="" /></a></td>
<td width="16"></td>
<td width="32"><a href="#"><img src="images/rrss_5.png" width="32" height="auto" id="rrss_5" alt="" /></a></td>
<td width="16"></td>
<td width="32"><a href="#"><img src="images/rrss_6.png" width="32" height="auto" id="rrss_6" alt="" /></a></td>
<td width="106"></td>
</tr>
</table>