Estilos CSS para Contenedores Responsivos en Plantillas de Email

Clase 29 de 36 • Curso de Diseño y Maquetación para Emails

Contenido del curso

Introducción y planeación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Segundo proyecto: Diseño de emails

Tercer proyecto: maquetación de email de promoción en técnica escalable

Cuarto proyecto: maquetación de newsletter en técnica responsive

Cierre

36
Diseño y Maquetación de Emails con Mailchimp
01:06 min

Tomar examen

Resumen

Reto: Termina la plantilla ajustando los estilos de la estructura y comparte tu progreso en la sección de discusiones.

Comentarios

Nestor Mauricio Rojas Rozo

student•

El botón (CTA) es mejor escrito en HTML ya que funciona en todas las bandejas de entrada y que, debido a que es código HTML y no imagen, se visualiza siempre y en cualquier circunstancia.

Francisco Encabo Servián

student•

Sí, totalmente de acuerdo. Hay muchos gestores de correo que por defecto no muestran las imágenes, y otros que te preguntan de alguna forma si quieres que se visualicen después de mostrarte el texto del email. Con lo cual puede que el CTA no se vea en muchos correos. No entiendo por que la profesora tomó la decisión de poner una imagen como botón. Es bastante desalentador.

Sebastián Pascali Pasquale

student•

Me parece que este curso está completamente desactualizado, además de eso no explican las etiquetas de tablas.

Francisco Encabo Servián

student•

La Maquetación de emails es un terreno muy complicado donde hay que tener en cuenta muchos gestores de correo. A veces cada uno tiene algunas reglas propias que debes saber. Espera encontrar eso en este curso. En ningún momento habla de los cambios que ocurren entre Gmail y Outlook, por ejemplo. O sobre ciertos gestores usados en ámbito profesional donde los emails se ven muy mal.... No creo que sea bueno ser tan poco preciso.

Lilia Romero

student•

Coincido contigo. Espero pronto una actualización de este curso. (Por favor Platzi)

Julián Cárdenas

student•

Interesante aporte, la verdad sería interesante entender eso en otro curso a más profundidad

Pablo Villalba

student•

No entiendo porque después de hacer todos los pasos iguales al video, no se ajustan las cajas una a la otra cuando está al ancho máximo...

Jibran Antonio Tannous Puerta

student•

Me está pasando lo mismo y ya no sé que más modificar jaja. He probado muchas cosas pero sigo sin conseguirlo.

Valeria Montiel

student•

Hola me sucedía lo mismo y logre alinearlo gracias al orden que debe llevar las etiquetas, confirma que estén bien alineadas y que concuerden con su respectiva etiqueta de cierre. Espero te funcione.

Henry David Castillo Montoya

student•

Estoy quebrandome la cabeza para lograr esto:

<!DOCTYPE html>
<html lang="es" dir="ltr">
	<head>
		<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Q´Hubo </title>

<style>

* { margin: 0; padding: 0;}

 .contenedor_general {
   height: 1170px;
	 width: 557px;
	 margin: auto;
	 margin-top: 20px;
	 background-color: #ffffff

 }

 .header {
	 position: relative;
	 height: 132px;
	 width: 557px;
	 background-color: #feee00

 }

 .logo {
  position: absolute;
	margin-top: 32px;
	margin-left: 103px;
	height: 68px;
 	width: 350px;
	text-align: center;
	background-color: #0

 }

 .center {
	 margin-top: 13px;
	 height: 30px;
	 width: 124.5px;

}

.center2 {
	margin-top: 5px;
	height: 44px;
	width: 78px;

}


.barra_azul {
	position: relative;
	height: 20px;
	width: 557px;
	background-color: #5ea6e8
}


.contenedor_texto1  {
	  position: absolute;
		margin-top: 5px;
		margin-left: 102px;
	  height: 40px;
	  width: 353px;
		text-align: center;
		font-family: 'Encode Sans Semi Condensed',sans-serif;
    background-color: #0

}


h2  {
  margin-top: 7px;
	color: #ffffff;


}

.Parrafo-Introductorio {

	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 27px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed',sans-serif;
	background-color: #0


}

p {
	color: #696969;
	font-size: 15px;
}


#PruebaDIV_1 {
    box-sizing: border-box;
    height: 299.484px;
    width: 264.984px;
		margin-top: 28px;
    padding: 0px 28px;
		float: left;

}


#PruebaA_2 {

    text-decoration: none solid rgb(0, 123, 255);

}


#Zona_1 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#Zona_2 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#Zona_3 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(250, 91, 135) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}

#Zona_4 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(105, 182, 49) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#PruebaDIV_4 {

    cursor: pointer;

}

#PruebaIMG_7 {

    vertical-align: middle;
    width: 234.984px;
    border-radius: 5px 5px 0 0;

}


#Contenedor_cate_1 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_2 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_3 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_4 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}


#Texto_cat_zona_1 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 75.2969px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_2 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 75.2969px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_3 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 85px;
    background: rgb(250, 91, 135) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_4 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 80px;
    background: rgb(105, 182, 49) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#PruebaDIV_10 {
    padding: 15px;
}


#PruebaH4_11 {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    margin: 0px 0px 8px;

}


.logos_footers {
	position: relative;
	margin-top: 670px;
	height: 70px;
	width: 557px;
	background-color: #0

}

.logo_qhubo2 {
 position: absolute;
 margin-top: 10px;
 height: 55px;
 width: 279px;
 text-align: center;
 background-color: #0


}

.audiencias {
 position: absolute;
 margin-top: 10px;
 margin-left: 278px;
 height: 55px;
 width: 279px;
 text-align: center;
 background-color: #0

}

.separacion {
	height: 2px;
	width: 557px;
	background-color: #eeeeee

}


.Texto_info {

	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 13px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	background-color: #0


}

.Texto_info2 {


	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	font-size: 11px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	background-color: #0


}



</style>

	</head>

	<body>

		<div class="contenedor_general">

			<div class="header">

				<div class="logo">

						<a href="https://www.qhubocali.com">
							<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo_para_mailing.png" alt="Logo qhubo cali" />
						</a>

				</div>

			</div>

			<div class="barra_azul">

				<div class="contenedor_texto1">

				</div>

			</div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/asi-paso/a-dos-instagramers-los-mataron-de-mentiras/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_1">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/A-dos-instagramers-calenos-los-mataron-de-mentiras-final.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_1">
      				<p id="Texto_cat_zona_1">
      					Así pasó
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				A dos instagramers los mataron de mentiras
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/asi-paso/encontraron-la-mascota-de-paola-andrea-pero-de-ella-no-hay-noticias/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_2">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Encontraron-la-mascota-de-Paola-Andrea-pero-de-ella-no-hay-noticias.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_2">
      				<p id="Texto_cat_zona_2">
      					Así pasó
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				¡Encontraron la mascota de Paola Andrea, pero de ella no hay noticias!
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/zona-rosa/gregorio-pernia-confeso-el-origen-de-su-hijo-perdido/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_3">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/diego-torres-hijo-gregorio-pernia-qhubo-cali-955x500.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_3">
      				<p id="Texto_cat_zona_3">
      					Zona rosa
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				Gregorio Pernía confesó el origen de su hijo perdido
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/deportes/encuentran-restos-del-avion-de-emiliano-sala-en-una-playa/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_4">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/01/Encuentran-restos-de-la-avioneta.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_4">
      				<p id="Texto_cat_zona_4">
      					Deportes
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				Encuentran restos del avión de Emiliano Sala en una playa
      			</h4>
      		</div>
      	</div>
      </div>

			<div class="logos_footers">

				<div class="logo_qhubo2">

						<a href="https://www.qhubocali.com" target="_blank">
							<img class="center" src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo-q-footer.png" alt="Logo qhubo cali" />
						</a>

				</div>

				<div class="audiencias">

					<a href="http://www.audiencias.com.co" target="_blank">
						<img class="center2" src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo-audiencias-footer.png" alt="logo_audiencias" />
					</a>

				</div>

			</div>

				<div class="Texto_info">

					<br>Q´hubo Copyright (C) © 2019 <a href="https://www.qhubocali.com/" style="color: #666666; text-decoration: none;" target="_blank">www.qhubocali.com</a> | Cra. 2 No. 24-46 Tel. <a style="color: #666; text-decoration: none;"
							href="tel:+8987000">(572) 8987000</a> Cali - Colombia
				</div>

					<div class="Texto_info2">


						<hr style="height:1px; color:#DFDFDF;"> Usted ha recibido este correo por ser cliente y/o usuario registrado a Q´hubo y o El País y/o alguna de sus marcas. Si desea cancelar la suscripción de este tipo de correos, por favor haga <a href="%%UNSUBSCRIBE%%" style="color: #09C;" target="_blank">click aquí</a>

					</div>



		</div>

	</body>
</html>

Henry David Castillo Montoya

student•

pero solo logro esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--[if !mso]><!-->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!--<![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		@import url('https://fonts.googleapis.com/css?family=Lato');

		@media screen and (max-width: 480px) {
			.two-column .column,
			.three-column .column {
				max-width: 100% !important;
			}
			.two-column img {
				max-width: 100% !important;
			}
			.three-column img {
				max-width: 50% !important;
			}
			*[class="hide"] {display:none !important;}
			*[class="txt-mobile"] {font-size:18px !important; line-height:125% !important; padding-right:20px !important; padding-left:20px !important; }
		}

		@media screen and (min-width: 481px) and (max-width: 640px) {
			.three-column .column {
				max-width: 33% !important;
			}
			.two-column .column {
				max-width: 50% !important;
			}
		}
	</style>
	<!--[if (gte mso 9)|(IE)]>
	<style type="text/css">
		table {border-collapse: collapse !important;}
	</style>
	<![endif]-->
</head>
<body style="margin:0 auto;">
	<table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px;" border="0" cellspacing="0" cellpadding="0" >
	<!-- Header -->
		<!-- logo -->
		<tr>
			<td align="center" bgcolor="#feee00" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" >
				<a href="https://www.qhubocali.com" target="_blank" border="0" style="text-decoration:none;" >
				<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo_para_mailing.png" alt="Logo Q´hubo cali" width="294" border="0" style="max-width:284px;height:auto;display:block;" />
				</a>
			</td>
		</tr>
		<!-- logo -->
	<!-- Fin Header -->
	<!-- Contenido -->

		<!-- separador -->
		<tr>
			<td height="20" bgcolor="#5ea6e8" style="height:20px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td>
		</tr>
		<!-- separador -->

		<!-- categoria -->

		<tr>
			<td class="categoria" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" >
				<table width="15%" border="0" cellspacing="0" cellpadding="0" >

			<tr>

				<td height="10" style="height:10px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px 6px 0px 0px;font-family:'Lato',Arial,sans-serif;font-size:12px;color:#ffffff;text-align:center;" >
					<a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
					Así pasó
					</a>
				</td>

				</table>

			</td>
		</tr>

				<!-- categoria -->

		<tr>
			<!-- 2 columnas) -->
			<td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" >
				<!-- columna izquierda -->
				<table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
							<!-- curso 1 -->
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >


								</tr>

								<tr>
									<!-- curso 1 - imagen -->
									<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
										<a href="https://www.qhubocali.com/asi-paso/a-dos-instagramers-los-mataron-de-mentiras/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/A-dos-instagramers-calenos-los-mataron-de-mentiras-final.png" alt="Curso de Marketing" width="100%"  border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" />
										</a>
									</td>
									<!-- curso 1 - imagen -->
								</tr>
								<tr>
									<!-- curso 1 - texto -->
									<td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" >
										<b>Curso de Email Marketing</b>, aprende a potenciar las campañas de tu empresa y fidelizar a tus clientes.
									</td>
									<!-- curso 1 - texto -->
								</tr>
								<tr>
									<!-- curso 1 - cta -->
									<td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" >
										<a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
										Estudiar ahora
										</a>
									</td>
									<!-- curso 1 - cta -->
								</tr>
							</table>
							<!-- curso 1 -->
						</td>
					</tr>
				</table>
				<!-- columna derecha -->
				<table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
							<!-- curso 2 -->
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >
								<tr>
									<!-- curso 2 - imagen -->
									<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
										<a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/curso-analytics.jpg" alt="Curso Profesional de Google Analytics" width="100%" border="0" style="max-width:280px;height:auto;" />
										</a>
									</td>
									<!-- curso 2 - imagen -->
								</tr>
								<tr>
									<!-- curso 2 - texto -->
									<td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" >
										<b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio web. y algo mas que te voy a enseñae, esto será una prueba para mirar que pasa si hay mucho mas textos de lo previsto

									</td>
									<!-- curso 2 - texto -->
								</tr>
								<tr>
									<!-- curso 2 - cta -->
									<td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" >
										<a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
										Estudiar ahora
										</a>
									</td>
									<!-- curso 2 - cta -->
								</tr>
							</table>
							<!-- curso 2 -->
						</td>
					</tr>
				</table>
			</td>
			<!-- fin 2 columnas -->
</tr>
		<!-- separador -->
		<tr>
			<td height="40" style="height:40px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td>
		</tr>
		<!-- separador -->
	<!-- Footer -->
		<tr>
			<td align="center" bgcolor="#f4f4f4" style="padding-top:30px;padding-right:0;padding-bottom:40px;padding-left:0;" >
				<table width="100%" align="center" bgcolor="#f4f4f4" style="width:100%;max-width:600px;" valign="top" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
							<!-- redes sociales -->
							<table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.facebook.com/platzi" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-facebook.png" width="30" alt="Facebook" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-twitter.png" width="30" alt="Twitter" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-instagram.png" width="30" alt="Instagram" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-youtube.png" width="30" alt="YouTube" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
								</tr>
							</table>
							<!-- redes sociales -->
						</td>
					</tr>
					<!-- info marca -->
					<tr>
						<td align="center" style="padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#1c3643;font-size:16px;text-align:center;">
							Enviado con <span style="color:#98ca3f;font-size:18px;">♥</span> por Platzi
						</td>
					</tr>
					<!-- info marca -->
					<!-- legales -->
					<tr>
						<td align="center" style="padding-top:30px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;">
							Te enviamos este contenido porque haces parte de la comunidad Platzi.
						</td>
					</tr>
					<tr>
						<td align="center" style="padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;" >
							Lamentamos que te vayas, pero puedes <a href="https://platzi.com/contacto/" target="_blank" border="0" style="text-decoration:underline;color:#0a8ecd;">darte de baja aquí</a>.
						</td>
					</tr>
					<!-- legales -->
				</table>
			</td>
		</tr>
	<!-- Fin Footer -->
	</table>
</body>
</html>```

Martha Muñoz

student•

@davidcastillod vi el envío de prueba que me enviaste y está bastante bien, solo son pequeños detalles por ajustar (te responderé en el correo), pero excelente trabajo! :)

Mario Bernal

student•

explicacion al detalle, lo unico que debemos hacer es repetir repetir y repetir, hasta familiarizarnos con las herramientas.

Juan David Cubillos Martinez

student•

Hey, cául es la diferencia de "width" como atributo y "width" dentro de style??

Roger Carlos Ariel Alba

student•

recuerda que hay elementos que te permiten agregar "inline" las especificaciones de CSS mientras que otros los tendrás que agregar por medio de clases. En funcionalidad no hay diferencia, width es width pero si en cuanto a la lectura del CSS que hacen los clientes de correo electronico.

Cesar Moreira

student•

Hola te recomedaría hacer el curso de CSS en Platzi hay varios: https://platzi.com/cursos/html-css/ https://platzi.com/clases/html5-css3/ Y para algo más avanzado https://platzi.com/cursos/css-grid-layout/

Libian María Hernández Gil

student•

Actualización de este curso por favor.
La profesora conoce del tema, pero noto que pudo hacerlo más entendible ó comprensible para desarrollar. A mi modo de ver, es mejor colocar los estilos para movil first y luego si aplicar los medias querys. Opté por hacerlo a mi modo, pero me quedaron muchos vacíos.

Nestor Purihuaman Sanchez

student•

Muy interesante

Alejandro Lopez Ramírez

student•

MI resultado.

![](

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style type="text/css">
        @media screen and (max-width:480 px) {

            .dos-columnas .columna,
            .tres-columnas . columna {
                max-width: 100% !important;
                

            }

            .dos-columnas img {
                max-width: 100% !important;
            }

            .tres-columnas img {
                max-width: 50% !importanr;
                
            }
        }

        @media screen and (min-width:481 px) and (max-width: 640px) {
            .tres-columnas . columna {
                max-width: 33% !important;
                

            }

            .dos-columnas . columna {
                max-width: 50% !important;

            }
        }
    </style>
</head>

<body style="margin: 0 auto">
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#010F3A" style="width: 100%; max-width: 600px;">

<!--Header-->
        <tr>
            <td align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0;">
                <a href="https://www.platzi.com" target="_blank" border="0" style="text-decoration: none">
                    <img src="image/Logo_correo2.png" alt="Platzi - Escuela online en formacion en tecnologia" width="140px" style="width: 140px; height: auto; display: block;">
                </a>
            </td>
        </tr>
<!--Fin Header-->
<!--Contenido-->
<!--Contenido Destacado-->
<!--Saludo-->
        <tr>
            <td heigth=105px width="100%" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 22px" width="100%" height="105px"> Hola *|FNAME|* tenemos cosas nuevas para ti</td>
        </tr>
<!--Fin Saludo-->
<!--Destacado-->
<!--1 columna-->
        <tr>
           <td align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0;">
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; width: 100%; max-width: 600px;">
                    <tr style="padding-top: 0px;" bgcolor="#5069BA">
                        <td>
                            <a href="https://www.platzi.com/cursos/diseno-email" target="_blank" border="0" style="text-decoration: none">
                                <img style=" border: 0; width: 100%; height: auto; display: block" src="image/correo2_imagenContenido.png" alt="Nuevo curso de Diseño y maquetacion de E-mail">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
<!--Fin 1 columna-->
<!--2 columna-->
        <tr>
            <td class="dos-columnas" align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0; text-align: center; font-size: 0px;" >
               <!--columna izquierda-->
                <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">
                    <tr>
                        <td class="columna"  align="center" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;">
                            <table>
                               <tr>
                                   <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo3_analitityc.png" alt="Google Analityc">
                                   </td>
                               </tr>
                               <tr>
                                   <td>Curso de Google Analytics: aprende a como medir el desempeño de tu pagina web y tus E-mails</td>
                               </tr>
                               <tr>
                                    <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo2_cta_buttom.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--fin columna izquierda-->
                 <!--columna Derecha-->
               <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">
                    <tr>
                        <td class="columna"  align="center" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo3_marketing.png" alt="Marketing">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       Curso de Marketing: aprende a como medir hacer campañas efectivas
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo2_cta_buttom.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
<!-- fin 2 columna-->
<!-- 3 columna-->
        <tr>
            <td class="tres-columnas" align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0; text-align: center; font-size: 0px;" >>
               <!-- columna izquierda-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 190px; display: inline-block" align="center" valign="top">                    
                       <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_img_1.png" alt="Siete herramientas de emprendimiento">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                      <br>
                                       Siete herramientas gratuitas para impulsar tu emprendimiento
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- fin columna izquierda-->
               <!-- columna centro-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" valign="top">                     
                       <tr>
                        <td  style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_img2.png" alt="clientes potenciales">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                      ¿Cómo llegar a más clientes potenciales a través del e-mail?
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block; " src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- fin columna centro-->
                <!-- columna derecha-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">                     <tr>
                        <td  style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; max-width: 288px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;">
                            <table>
                               <tr>
                                   <td>
                                   
                                    <img style=" border: 0; width: 100%; height: auto; display: block; padding-top: 5px;" src="image/correo3_img3.png" alt="evitar errores de campañas de e-amil">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       ¿Cómo evitar errores en tus campañas de E-mail marketing?
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block; " src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                
                <!-- fin columna derecha-->
            </td>
        </tr>
<!--Fin 3 columna-->
<!--Fin Destacado-->
<!--cta Principal-->

<!--fin cta Principal-->
<!--Fin Contenido Destacado-->
<!--Fin Contenido-->
<!--Footer-->
        <tr>
            <td>
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; width: 100%; max-width: 600px;" bgcolor="#847C7C">
                    <tr>
                        <td align="center" style="padding-top: 30px; padding-bottom: 30px">
                            <table align="center">
                                <tr>
                                    <td>
                                        <a href="https://www.facebook.com/platzi" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/facebbok.png" alt="Facebook">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://web.whatsapp.com/" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/whatsapp.png" alt="Whatsapp">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/twitter.png" alt="Twitter">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/instagram.png" alt="Intagram">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 12px" width="100%">Enviado con 💚 por Platz</td>
                    </tr>
                    <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 10px" width="100%">Te enviamos este correo por ser parte de la comunidad.
                            Si no quieres recibir mas este contenido darte de <a href="" target="_blank">baja aquí.</a></td>
                    </tr>
                </table>
            </td>
        </tr>
<!--Fin Footer-->

    </table>
</body>

</html>

Martha Muñoz

student•

Buen trabajo! Pero te tengo un reto adicional: no pongas los botones como imágenes, practica haciendo los botones en código, con estilos en línea, y me cuentas cómo te va!

Jorge Isaac Vasquez Sanchez

student•

Hola a todos! ¿Alguien sabe cómo ajustar el contenido de las cajas de cursos para que no se vea el botón de uno más arriba que el otro?

Esto ocurre porque la descripción del primero es más extensa, pero ¿cómo solucionarlo? o más bien, ¿qué es lo mas recomendable para solucionarlo?

Jorge Isaac Vasquez Sanchez

student•

Lo anterior solo me ocurre con un ancho de 557px. Para los demás anchos si se ve bien

Juan Carlos Wilches Niño

student•

y me parece muy incomodo ver el video con parte de la pantalla del c[odigo y no tener todo el panorama de martha

Juan Carlos Wilches Niño

student•

a mi no se me ve ni funciona como le funciona a martha

Cesar Moreira

student•

Juan Carlos Wilches Niño

student•

Algo no me funciona bien con el espacio de los paddings de los botones a 2 columnas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type="text/css"> @media screen and (max-width: 480px) { .two-column .column, .three-column .column { max-width: 100% !important; } .two-column img { max-width: 100% !important; } .three-column img { max-width: 100% !important; } } @media screen and (min-width: 481px) and (max-width: 640px) { .three-column .column { max-width: 33% !important; } .two-column .column { max-width: 50% !important; } } </style> </head> <body style="margin: 0 auto; " bgcolor="#b6b6b6"> <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" align="center" border="0" style="width: 100%; max-width:600px;">

<!--Header-->
<tr>
  <td align="center" style="padding-top:20px;padding-right: 0; padding-bottom:20px; padding-left: 0;">
    <a href="#" target="_blank" rel="noopener noreferrer" border="0" style="text-decoration: none;">
      <img src="images/logo-platzi.png" alt="Logo Platzi" width="127"
        style="max-width: 127px; height: auto; display: block;">
    </a>
  </td>
</tr>
<!--Fin Header-->


<!--Banner Principal-->
<tr>
  <td align="center" style="padding-top:0;padding-right: 0; padding-bottom:20px; padding-left: 0;">
    <a href="#" target="_blank" rel="noopener noreferrer" border="0" style="text-decoration: none;">
      <img src="https://i.imgur.com/y56cDfX.jpg" width="100%" alt="NUEVO Curso principal" border="0"
        style="max-width: 600px; height: auto; display: block;">
    </a>
  </td>
</tr>
<!--Fin Banner Principal-->


<!--Bloque de 2 columnas CURSOS-->

<tr>
  <td class="two-column" align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;">
   
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"    style="width: 100%; max-width:600px; text-align: center; font-size: 0;">
    
      <tr>
        <td>

          <!--curso 2-->
          <table class="column" align="center" border="0" valign="top" width="100%" cellpadding="0" cellspacing="0"
            style="width: 100%; max-width:300px; display:inline-block;">

            <!--Imagen-->
            <tr>
              <td align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;" >
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/curso-analitics.png" width="100%" border="0"
                    style="width: 100%; max-width: 280px; height: auto;" alt="Google Analitycs" srcset="">
                </a>
              </td>
            </tr>
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 20px; padding-right:10px; padding: left 10px; padding-bottom: 10px; font-size: 16px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">

                <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio
                web.
              </td>
            </tr>
            <!--CTA-->
            <tr>
              <td heigth="30"
                style="height: 30px; padding-top: 20px; padding-right:10px; padding: left 10px; padding-bottom: 10px; font-size: 18px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                  Estudiar ahora
                </a>
              </td>
            </tr>
            <!--Fin CTA-->

          </table>
          <!--Fin curso 2-->


             <!--curso 2-->
             <table class="column" align="center" border="0" valign="top" width="100%" cellpadding="0" cellspacing="0"
             style="width: 100%; max-width:300px; display:inline-block;">

             <!--Imagen-->
             <tr>
               <td align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;" >
                 <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                   style="text-decoration: none;">
                   <img src="images/curso-analitics.png" width="100%" border="0"
                     style="width: 100%; max-width: 280px; height: auto;" alt="Google Analitycs" srcset="">
                 </a>
               </td>
             </tr>
             <!--Texto-->
             <tr>
               <td heigth="60"
                 style="height: 60px; padding-top: 20px; padding-right:0; padding-left:0; padding-bottom: 10px; font-size: 16px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">

                 <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio
                 web.
               </td>
             </tr>
             <!--CTA-->
             <tr>
               <td heigth="30"
                 style="height: 30px; padding-top: 10px; padding-right: 0; padding-left: 0; padding-bottom: 10px; background-color:#98ca3f;border-radius: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                 <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                   style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                   Estudiar ahora
                 </a>
               </td>
             </tr>
             <!--Fin CTA-->

           </table>
           <!--Fin curso 2-->
        



        </td>
      </tr>
    </table>
  </td>
</tr>

<!--Fin Bloque de 2 columnas CURSOS-->


<!--Noticias de Blog 3 Columnas-->

<tr>
  <td class="three-column" align="center"
    style="padding-top:20px;padding-right: 0; padding-bottom:20px; padding-left: 0; text-align: center; font-size: 0;">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->

          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->


          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->


        </td>
      </tr>
    </table border="1">
  </td>
</tr>

<!--Fin Noticias de Blog 3 Columnas-->

<!--Footer-->
<tr>
  <td>
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"
      style="background-color: #cccccc; padding-top: 30px;">
      <tbody>
        <tr>
          <td>
            <!-- Inicio Redes Sociales -->
            <table border="0" align="center">
              <tbody>
                <tr>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/zzLfVAO.png" alt="YouTube" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/GAPK0f3.png" alt="Twitter" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/DeeOj8P.png" alt="Instagram" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/o3vR9ZN.png" alt="Facebook" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>

                </tr>
              </tbody>
            </table>
            <!-- Fin Redes Sociales -->
          </td>
        </tr>
        <!-- Inicio Info Marca -->
        <tr>
          <td
            style="padding-top: 20px; padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; text-align: center; color: #545151;">
            Enviado con 💚 Platzi
          </td>
        </tr>
        <!-- Fin Info Marca -->
        <!-- Inicio Legal -->
        <tr>
          <td
            style="padding-bottom: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; text-align: center; color: #545151;">
            Te enviamos este correo por que si, si no le gusta

            <a href="http://" target="_blank" rel="noopener noreferrer">adios</a>!

          </td>
        </tr>
        <!-- Fin Legal -->
      </tbody>
    </table>
  </td>
</tr>

<!--Fin Footer-->

</table> </body> </html>

Jorge Isaac Vasquez Sanchez

student•

A modo de observación, les comento que hay diferencias entre los resultados conseguidos, siguiendo paso a paso las indicaciones de los videos y el archivo responsive.html del tab "Archivos y Enlaces". Por ejemplo, para el caso del contenido a 2 columnas, en el video se indica que se agreguen ciertos estilos a la 2 tabla anidada, mientras que en dicho archivo se le ponen los mismos estilos es a la primera tabla. Como ví que no me quedaba igual al diseño, opté por homologar mi desarrollo a lo que se dice en el archivo subido en "Archivos y Enlaces"

<!-- 2 columnas -->
            <td class="two-columns" align="center" style="padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; text-align:center; font-size:0">
                <!-- col izq -->
                <table class="column" valign="top" width="100%" style="max-width:300px; display: inline-block;" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
                            <!-- Curso 1 -->
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">

Jacinto Del Garanazo

student•

es una cagada, yo también note la diferencia entre ambos archivos

Héctor Daniel Sevilla Sandoval

student•

Hola! Como puedo hacer un cambio de imágenes en responsive. Mi problema es que necesito cambiar un banner cuando esta en mobile y lo estoy haciendo en Mailchimp. El problema es que lo estoy dejando en editable y no me aparece en el editor porque asigne una clase para ocultarlo en mas de 375px. Hay alguna manera que pueda hacer para no editar el codigo del template cada vez que quiera hacer el email?. Muchas gracias

<!DOCTYPE html>
<html lang="es" dir="ltr">
	<head>
		<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

		<title> Q´Hubo </title>

<style>

* { margin: 0; padding: 0;}

 .contenedor_general {
   height: 1170px;
	 width: 557px;
	 margin: auto;
	 margin-top: 20px;
	 background-color: #ffffff

 }

 .header {
	 position: relative;
	 height: 132px;
	 width: 557px;
	 background-color: #feee00

 }

 .logo {
  position: absolute;
	margin-top: 32px;
	margin-left: 103px;
	height: 68px;
 	width: 350px;
	text-align: center;
	background-color: #0

 }

 .center {
	 margin-top: 13px;
	 height: 30px;
	 width: 124.5px;

}

.center2 {
	margin-top: 5px;
	height: 44px;
	width: 78px;

}


.barra_azul {
	position: relative;
	height: 20px;
	width: 557px;
	background-color: #5ea6e8
}


.contenedor_texto1  {
	  position: absolute;
		margin-top: 5px;
		margin-left: 102px;
	  height: 40px;
	  width: 353px;
		text-align: center;
		font-family: 'Encode Sans Semi Condensed',sans-serif;
    background-color: #0

}


h2  {
  margin-top: 7px;
	color: #ffffff;


}

.Parrafo-Introductorio {

	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 27px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed',sans-serif;
	background-color: #0


}

p {
	color: #696969;
	font-size: 15px;
}


#PruebaDIV_1 {
    box-sizing: border-box;
    height: 299.484px;
    width: 264.984px;
		margin-top: 28px;
    padding: 0px 28px;
		float: left;

}


#PruebaA_2 {

    text-decoration: none solid rgb(0, 123, 255);

}


#Zona_1 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#Zona_2 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#Zona_3 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(250, 91, 135) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}

#Zona_4 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(105, 182, 49) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}


#PruebaDIV_4 {

    cursor: pointer;

}

#PruebaIMG_7 {

    vertical-align: middle;
    width: 234.984px;
    border-radius: 5px 5px 0 0;

}


#Contenedor_cate_1 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_2 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_3 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}

#Contenedor_cate_4 {

    position: absolute;
    text-align: center;
    top: 95px;
    width: 234.984px;

}


#Texto_cat_zona_1 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 75.2969px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_2 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 75.2969px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_3 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 85px;
    background: rgb(250, 91, 135) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#Texto_cat_zona_4 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 80px;
    background: rgb(105, 182, 49) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#PruebaDIV_10 {
    padding: 15px;
}


#PruebaH4_11 {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    margin: 0px 0px 8px;

}


.logos_footers {
	position: relative;
	margin-top: 670px;
	height: 70px;
	width: 557px;
	background-color: #0

}

.logo_qhubo2 {
 position: absolute;
 margin-top: 10px;
 height: 55px;
 width: 279px;
 text-align: center;
 background-color: #0


}

.audiencias {
 position: absolute;
 margin-top: 10px;
 margin-left: 278px;
 height: 55px;
 width: 279px;
 text-align: center;
 background-color: #0

}

.separacion {
	height: 2px;
	width: 557px;
	background-color: #eeeeee

}


.Texto_info {

	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 13px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	background-color: #0


}

.Texto_info2 {


	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	font-size: 11px;
	text-align: center;
	font-family: 'Encode Sans Semi Condensed', sans-serif;
	background-color: #0


}



</style>

	</head>

	<body>

		<div class="contenedor_general">

			<div class="header">

				<div class="logo">

						<a href="https://www.qhubocali.com">
							<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo_para_mailing.png" alt="Logo qhubo cali" />
						</a>

				</div>

			</div>

			<div class="barra_azul">

				<div class="contenedor_texto1">

				</div>

			</div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/asi-paso/a-dos-instagramers-los-mataron-de-mentiras/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_1">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/A-dos-instagramers-calenos-los-mataron-de-mentiras-final.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_1">
      				<p id="Texto_cat_zona_1">
      					Así pasó
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				A dos instagramers los mataron de mentiras
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/asi-paso/encontraron-la-mascota-de-paola-andrea-pero-de-ella-no-hay-noticias/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_2">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/Encontraron-la-mascota-de-Paola-Andrea-pero-de-ella-no-hay-noticias.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_2">
      				<p id="Texto_cat_zona_2">
      					Así pasó
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				¡Encontraron la mascota de Paola Andrea, pero de ella no hay noticias!
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/zona-rosa/gregorio-pernia-confeso-el-origen-de-su-hijo-perdido/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_3">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/02/diego-torres-hijo-gregorio-pernia-qhubo-cali-955x500.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_3">
      				<p id="Texto_cat_zona_3">
      					Zona rosa
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				Gregorio Pernía confesó el origen de su hijo perdido
      			</h4>
      		</div>
      	</div>
      </div>

			<div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/deportes/encuentran-restos-del-avion-de-emiliano-sala-en-una-playa/" id="PruebaA_2" display:block; </a>
      	<div id="Zona_4">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/01/Encuentran-restos-de-la-avioneta.png" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="Contenedor_cate_4">
      				<p id="Texto_cat_zona_4">
      					Deportes
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				Encuentran restos del avión de Emiliano Sala en una playa
      			</h4>
      		</div>
      	</div>
      </div>

			<div class="logos_footers">

				<div class="logo_qhubo2">

						<a href="https://www.qhubocali.com" target="_blank">
							<img class="center" src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo-q-footer.png" alt="Logo qhubo cali" />
						</a>

				</div>

				<div class="audiencias">

					<a href="http://www.audiencias.com.co" target="_blank">
						<img class="center2" src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo-audiencias-footer.png" alt="logo_audiencias" />
					</a>

				</div>

			</div>

				<div class="Texto_info">

					<br>Q´hubo Copyright (C) © 2019 <a href="https://www.qhubocali.com/" style="color: #666666; text-decoration: none;" target="_blank">www.qhubocali.com</a> | Cra. 2 No. 24-46 Tel. <a style="color: #666; text-decoration: none;"
							href="tel:+8987000">(572) 8987000</a> Cali - Colombia
				</div>

					<div class="Texto_info2">


						<hr style="height:1px; color:#DFDFDF;"> Usted ha recibido este correo por ser cliente y/o usuario registrado a Q´hubo y o El País y/o alguna de sus marcas. Si desea cancelar la suscripción de este tipo de correos, por favor haga <a href="%%UNSUBSCRIBE%%" style="color: #09C;" target="_blank">click aquí</a>

					</div>



		</div>

	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--[if !mso]><!-->
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!--<![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		@import url('https://fonts.googleapis.com/css?family=Lato');

		@media screen and (max-width: 480px) {
			.two-column .column,
			.three-column .column {
				max-width: 100% !important;
			}
			.two-column img {
				max-width: 100% !important;
			}
			.three-column img {
				max-width: 50% !important;
			}
			*[class="hide"] {display:none !important;}
			*[class="txt-mobile"] {font-size:18px !important; line-height:125% !important; padding-right:20px !important; padding-left:20px !important; }
		}

		@media screen and (min-width: 481px) and (max-width: 640px) {
			.three-column .column {
				max-width: 33% !important;
			}
			.two-column .column {
				max-width: 50% !important;
			}
		}
	</style>
	<!--[if (gte mso 9)|(IE)]>
	<style type="text/css">
		table {border-collapse: collapse !important;}
	</style>
	<![endif]-->
</head>
<body style="margin:0 auto;">
	<table align="center" width="100%" bgcolor="#ffffff" style="max-width:600px;" border="0" cellspacing="0" cellpadding="0" >
	<!-- Header -->
		<!-- logo -->
		<tr>
			<td align="center" bgcolor="#feee00" style="padding-top:20px;padding-right:0;padding-bottom:20px;padding-left:0;" >
				<a href="https://www.qhubocali.com" target="_blank" border="0" style="text-decoration:none;" >
				<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/logo_para_mailing.png" alt="Logo Q´hubo cali" width="294" border="0" style="max-width:284px;height:auto;display:block;" />
				</a>
			</td>
		</tr>
		<!-- logo -->
	<!-- Fin Header -->
	<!-- Contenido -->

		<!-- separador -->
		<tr>
			<td height="20" bgcolor="#5ea6e8" style="height:20px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td>
		</tr>
		<!-- separador -->

		<!-- categoria -->

		<tr>
			<td class="categoria" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" >
				<table width="15%" border="0" cellspacing="0" cellpadding="0" >

			<tr>

				<td height="10" style="height:10px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px 6px 0px 0px;font-family:'Lato',Arial,sans-serif;font-size:12px;color:#ffffff;text-align:center;" >
					<a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
					Así pasó
					</a>
				</td>

				</table>

			</td>
		</tr>

				<!-- categoria -->

		<tr>
			<!-- 2 columnas) -->
			<td class="two-column" align="center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;text-align:center;font-size:0;" >
				<!-- columna izquierda -->
				<table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
							<!-- curso 1 -->
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >


								</tr>

								<tr>
									<!-- curso 1 - imagen -->
									<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
										<a href="https://www.qhubocali.com/asi-paso/a-dos-instagramers-los-mataron-de-mentiras/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="https://www.qhubocali.com/wp-content/uploads/2019/02/A-dos-instagramers-calenos-los-mataron-de-mentiras-final.png" alt="Curso de Marketing" width="100%"  border="0" style="max-width:280px;height:auto; border-radius:5px 5px 0px 0px" />
										</a>
									</td>
									<!-- curso 1 - imagen -->
								</tr>
								<tr>
									<!-- curso 1 - texto -->
									<td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" >
										<b>Curso de Email Marketing</b>, aprende a potenciar las campañas de tu empresa y fidelizar a tus clientes.
									</td>
									<!-- curso 1 - texto -->
								</tr>
								<tr>
									<!-- curso 1 - cta -->
									<td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" >
										<a href="https://platzi.com/cursos/email-marketing/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
										Estudiar ahora
										</a>
									</td>
									<!-- curso 1 - cta -->
								</tr>
							</table>
							<!-- curso 1 -->
						</td>
					</tr>
				</table>
				<!-- columna derecha -->
				<table class="column" width="100%" style="max-width:300px;display:inline-block;" valign="top" border="0" cellspacing="0" cellpadding="0" >
					<tr>
						<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
							<!-- curso 2 -->
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >
								<tr>
									<!-- curso 2 - imagen -->
									<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
										<a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/curso-analytics.jpg" alt="Curso Profesional de Google Analytics" width="100%" border="0" style="max-width:280px;height:auto;" />
										</a>
									</td>
									<!-- curso 2 - imagen -->
								</tr>
								<tr>
									<!-- curso 2 - texto -->
									<td height="60" style="height:60px;padding-top:10px;padding-right:0;padding-bottom:10px;padding-left:0;font-family:'Lato',Arial,sans-serif;font-size:16px;line-height:20px;color:#333333;text-align:left;" >
										<b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio web. y algo mas que te voy a enseñae, esto será una prueba para mirar que pasa si hay mucho mas textos de lo previsto

									</td>
									<!-- curso 2 - texto -->
								</tr>
								<tr>
									<!-- curso 2 - cta -->
									<td height="40" style="height:40px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px;background-color:#98ca37;border-radius:6px;font-family:'Lato',Arial,sans-serif;font-size:18px;color:#ffffff;text-align:center;" >
										<a href="https://platzi.com/cursos/google-analytics/" target="_blank" border="0" style="text-decoration:none;font-family:'Lato',Arial,sans-serif;color:#ffffff;" >
										Estudiar ahora
										</a>
									</td>
									<!-- curso 2 - cta -->
								</tr>
							</table>
							<!-- curso 2 -->
						</td>
					</tr>
				</table>
			</td>
			<!-- fin 2 columnas -->
</tr>
		<!-- separador -->
		<tr>
			<td height="40" style="height:40px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" ></td>
		</tr>
		<!-- separador -->
	<!-- Footer -->
		<tr>
			<td align="center" bgcolor="#f4f4f4" style="padding-top:30px;padding-right:0;padding-bottom:40px;padding-left:0;" >
				<table width="100%" align="center" bgcolor="#f4f4f4" style="width:100%;max-width:600px;" valign="top" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;" >
							<!-- redes sociales -->
							<table align="center" width="100%" style="max-width:200px;;text-align:center;" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.facebook.com/platzi" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-facebook.png" width="30" alt="Facebook" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-twitter.png" width="30" alt="Twitter" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-instagram.png" width="30" alt="Instagram" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
									<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;" >
										<a href="https://www.youtube.com/channel/UC55-mxUj5Nj3niXFReG44OQ" target="_blank" border="0" style="text-decoration:none;" >
										<img src="http://impre.tech/email/news/ic-youtube.png" width="30" alt="YouTube" border="0" style="width:100%;max-width:30px;height:auto;" />
										</a>
									</td>
								</tr>
							</table>
							<!-- redes sociales -->
						</td>
					</tr>
					<!-- info marca -->
					<tr>
						<td align="center" style="padding-top:20px;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#1c3643;font-size:16px;text-align:center;">
							Enviado con <span style="color:#98ca3f;font-size:18px;">♥</span> por Platzi
						</td>
					</tr>
					<!-- info marca -->
					<!-- legales -->
					<tr>
						<td align="center" style="padding-top:30px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;">
							Te enviamos este contenido porque haces parte de la comunidad Platzi.
						</td>
					</tr>
					<tr>
						<td align="center" style="padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;font-family:'Lato',Arial,sans-serif;color:#666666;font-size:14px;text-align:center;" >
							Lamentamos que te vayas, pero puedes <a href="https://platzi.com/contacto/" target="_blank" border="0" style="text-decoration:underline;color:#0a8ecd;">darte de baja aquí</a>.
						</td>
					</tr>
					<!-- legales -->
				</table>
			</td>
		</tr>
	<!-- Fin Footer -->
	</table>
</body>
</html>```

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style type="text/css">
        @media screen and (max-width:480 px) {

            .dos-columnas .columna,
            .tres-columnas . columna {
                max-width: 100% !important;
                

            }

            .dos-columnas img {
                max-width: 100% !important;
            }

            .tres-columnas img {
                max-width: 50% !importanr;
                
            }
        }

        @media screen and (min-width:481 px) and (max-width: 640px) {
            .tres-columnas . columna {
                max-width: 33% !important;
                

            }

            .dos-columnas . columna {
                max-width: 50% !important;

            }
        }
    </style>
</head>

<body style="margin: 0 auto">
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#010F3A" style="width: 100%; max-width: 600px;">

<!--Header-->
        <tr>
            <td align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0;">
                <a href="https://www.platzi.com" target="_blank" border="0" style="text-decoration: none">
                    <img src="image/Logo_correo2.png" alt="Platzi - Escuela online en formacion en tecnologia" width="140px" style="width: 140px; height: auto; display: block;">
                </a>
            </td>
        </tr>
<!--Fin Header-->
<!--Contenido-->
<!--Contenido Destacado-->
<!--Saludo-->
        <tr>
            <td heigth=105px width="100%" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 22px" width="100%" height="105px"> Hola *|FNAME|* tenemos cosas nuevas para ti</td>
        </tr>
<!--Fin Saludo-->
<!--Destacado-->
<!--1 columna-->
        <tr>
           <td align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0;">
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; width: 100%; max-width: 600px;">
                    <tr style="padding-top: 0px;" bgcolor="#5069BA">
                        <td>
                            <a href="https://www.platzi.com/cursos/diseno-email" target="_blank" border="0" style="text-decoration: none">
                                <img style=" border: 0; width: 100%; height: auto; display: block" src="image/correo2_imagenContenido.png" alt="Nuevo curso de Diseño y maquetacion de E-mail">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
<!--Fin 1 columna-->
<!--2 columna-->
        <tr>
            <td class="dos-columnas" align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0; text-align: center; font-size: 0px;" >
               <!--columna izquierda-->
                <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">
                    <tr>
                        <td class="columna"  align="center" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;">
                            <table>
                               <tr>
                                   <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo3_analitityc.png" alt="Google Analityc">
                                   </td>
                               </tr>
                               <tr>
                                   <td>Curso de Google Analytics: aprende a como medir el desempeño de tu pagina web y tus E-mails</td>
                               </tr>
                               <tr>
                                    <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo2_cta_buttom.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--fin columna izquierda-->
                 <!--columna Derecha-->
               <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">
                    <tr>
                        <td class="columna"  align="center" style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo3_marketing.png" alt="Marketing">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       Curso de Marketing: aprende a como medir hacer campañas efectivas
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                       <img style=" border: 0; width: 100%; height: auto; display: block; max-width: 288px" src="image/correo2_cta_buttom.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
<!-- fin 2 columna-->
<!-- 3 columna-->
        <tr>
            <td class="tres-columnas" align="center" style="padding-top: 30px; padding-bottom: 30px; padding-left: 0px; padding-right: 0; text-align: center; font-size: 0px;" >>
               <!-- columna izquierda-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 190px; display: inline-block" align="center" valign="top">                    
                       <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_img_1.png" alt="Siete herramientas de emprendimiento">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                      <br>
                                       Siete herramientas gratuitas para impulsar tu emprendimiento
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- fin columna izquierda-->
               <!-- columna centro-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" valign="top">                     
                       <tr>
                        <td  style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px">
                            <table>
                               <tr>
                                   <td>
                                    <img style=" border: 0; width: 100%; height: auto; display: block;" src="image/correo3_img2.png" alt="clientes potenciales">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                      ¿Cómo llegar a más clientes potenciales a través del e-mail?
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block; " src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- fin columna centro-->
                <!-- columna derecha-->
                    <table class="columna" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; max-width: 200px; display: inline-block" align="center" valign="top">                     <tr>
                        <td  style="font-family:sans-serif; font-style: oblique; color: #FFFFFF;font-size: 12px; max-width: 288px; text-align: center; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;">
                            <table>
                               <tr>
                                   <td>
                                   
                                    <img style=" border: 0; width: 100%; height: auto; display: block; padding-top: 5px;" src="image/correo3_img3.png" alt="evitar errores de campañas de e-amil">
                                   </td>
                               </tr>
                               <tr>
                                   <td>
                                       ¿Cómo evitar errores en tus campañas de E-mail marketing?
                                    </td>
                               </tr>
                               <tr>
                                    <td>
                                      <img style=" border: 0; width: 100%; height: auto; display: block; " src="image/correo3_bta_peque.png" alt="Google Analityc">
                                    </td>
                               </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                
                <!-- fin columna derecha-->
            </td>
        </tr>
<!--Fin 3 columna-->
<!--Fin Destacado-->
<!--cta Principal-->

<!--fin cta Principal-->
<!--Fin Contenido Destacado-->
<!--Fin Contenido-->
<!--Footer-->
        <tr>
            <td>
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 0px; padding-bottom: 0px; width: 100%; max-width: 600px;" bgcolor="#847C7C">
                    <tr>
                        <td align="center" style="padding-top: 30px; padding-bottom: 30px">
                            <table align="center">
                                <tr>
                                    <td>
                                        <a href="https://www.facebook.com/platzi" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/facebbok.png" alt="Facebook">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://web.whatsapp.com/" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/whatsapp.png" alt="Whatsapp">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/twitter.png" alt="Twitter">
                                        </a>
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/platzi/" target="_blank" border="0" style="text-decoration: none">
                                            <img src="image/instagram.png" alt="Intagram">
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 12px" width="100%">Enviado con 💚 por Platz</td>
                    </tr>
                    <tr>
                        <td style="font-family:sans-serif; font-style: oblique; color: #FFFFFF; text-align: center; font-size: 10px" width="100%">Te enviamos este correo por ser parte de la comunidad.
                            Si no quieres recibir mas este contenido darte de <a href="" target="_blank">baja aquí.</a></td>
                    </tr>
                </table>
            </td>
        </tr>
<!--Fin Footer-->

    </table>
</body>

</html>

<!--Header-->
<tr>
  <td align="center" style="padding-top:20px;padding-right: 0; padding-bottom:20px; padding-left: 0;">
    <a href="#" target="_blank" rel="noopener noreferrer" border="0" style="text-decoration: none;">
      <img src="images/logo-platzi.png" alt="Logo Platzi" width="127"
        style="max-width: 127px; height: auto; display: block;">
    </a>
  </td>
</tr>
<!--Fin Header-->


<!--Banner Principal-->
<tr>
  <td align="center" style="padding-top:0;padding-right: 0; padding-bottom:20px; padding-left: 0;">
    <a href="#" target="_blank" rel="noopener noreferrer" border="0" style="text-decoration: none;">
      <img src="https://i.imgur.com/y56cDfX.jpg" width="100%" alt="NUEVO Curso principal" border="0"
        style="max-width: 600px; height: auto; display: block;">
    </a>
  </td>
</tr>
<!--Fin Banner Principal-->


<!--Bloque de 2 columnas CURSOS-->

<tr>
  <td class="two-column" align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;">
   
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"    style="width: 100%; max-width:600px; text-align: center; font-size: 0;">
    
      <tr>
        <td>

          <!--curso 2-->
          <table class="column" align="center" border="0" valign="top" width="100%" cellpadding="0" cellspacing="0"
            style="width: 100%; max-width:300px; display:inline-block;">

            <!--Imagen-->
            <tr>
              <td align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;" >
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/curso-analitics.png" width="100%" border="0"
                    style="width: 100%; max-width: 280px; height: auto;" alt="Google Analitycs" srcset="">
                </a>
              </td>
            </tr>
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 20px; padding-right:10px; padding: left 10px; padding-bottom: 10px; font-size: 16px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">

                <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio
                web.
              </td>
            </tr>
            <!--CTA-->
            <tr>
              <td heigth="30"
                style="height: 30px; padding-top: 20px; padding-right:10px; padding: left 10px; padding-bottom: 10px; font-size: 18px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                  Estudiar ahora
                </a>
              </td>
            </tr>
            <!--Fin CTA-->

          </table>
          <!--Fin curso 2-->


             <!--curso 2-->
             <table class="column" align="center" border="0" valign="top" width="100%" cellpadding="0" cellspacing="0"
             style="width: 100%; max-width:300px; display:inline-block;">

             <!--Imagen-->
             <tr>
               <td align="center" style="padding-top: 0;padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: center; font-size: 0;" >
                 <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                   style="text-decoration: none;">
                   <img src="images/curso-analitics.png" width="100%" border="0"
                     style="width: 100%; max-width: 280px; height: auto;" alt="Google Analitycs" srcset="">
                 </a>
               </td>
             </tr>
             <!--Texto-->
             <tr>
               <td heigth="60"
                 style="height: 60px; padding-top: 20px; padding-right:0; padding-left:0; padding-bottom: 10px; font-size: 16px; line-height: 20px; text-align: left; font-family: Arial, Helvetica, sans-serif;">

                 <b>Curso Profesional de Google Analytics</b>, aprende cómo analizar y medir el desempeño de tu sitio
                 web.
               </td>
             </tr>
             <!--CTA-->
             <tr>
               <td heigth="30"
                 style="height: 30px; padding-top: 10px; padding-right: 0; padding-left: 0; padding-bottom: 10px; background-color:#98ca3f;border-radius: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                 <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                   style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff;">
                   Estudiar ahora
                 </a>
               </td>
             </tr>
             <!--Fin CTA-->

           </table>
           <!--Fin curso 2-->
        



        </td>
      </tr>
    </table>
  </td>
</tr>

<!--Fin Bloque de 2 columnas CURSOS-->


<!--Noticias de Blog 3 Columnas-->

<tr>
  <td class="three-column" align="center"
    style="padding-top:20px;padding-right: 0; padding-bottom:20px; padding-left: 0; text-align: center; font-size: 0;">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->

          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->


          <!--Blog 1-->
          <table class="column" width="100%" valign="top" style="max-width: 200px; display: inline-block;"
            border="0" cellpadding="0" cellspacing="0">
            <!--Imagen-->
            <tr>
              <td>
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none;">
                  <img src="images/Blog-1.png" border="0" width="180" alt="Blog-1"
                    style="max-width: 180px; height: auto;">
                </a>
              </td>
            </tr>
            <!--Fin Imagen-->
            <!--Texto-->
            <tr>
              <td heigth="60"
                style="height: 60px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; font-size: 14px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; ">

                Siete herramientas gratuitas para impulsar tu emprendimiento
              </td>
            </tr>
            <!--Fin Texto-->
            <!--CTA-->
            <tr>
              <td heigth="20"
                style="height: 20px; padding-top: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                <a href="http://" target="_blank" rel="noopener noreferrer" border="0"
                  style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #0a8ecd;">
                  Leer más
                </a>
              </td>
            </tr>
            <!--Fin CTA-->
          </table>
          <!--Fin Blog 1-->


        </td>
      </tr>
    </table border="1">
  </td>
</tr>

<!--Fin Noticias de Blog 3 Columnas-->

<!--Footer-->
<tr>
  <td>
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"
      style="background-color: #cccccc; padding-top: 30px;">
      <tbody>
        <tr>
          <td>
            <!-- Inicio Redes Sociales -->
            <table border="0" align="center">
              <tbody>
                <tr>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/zzLfVAO.png" alt="YouTube" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/GAPK0f3.png" alt="Twitter" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/DeeOj8P.png" alt="Instagram" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>
                  <td style="padding-left: 5px; padding-right: 5px;">
                    <a href="#" target="_blank">
                      <img src="https://i.imgur.com/o3vR9ZN.png" alt="Facebook" border="0" width="30"
                        style="width: 30px; height: auto; display:block;">
                    </a>
                  </td>

                </tr>
              </tbody>
            </table>
            <!-- Fin Redes Sociales -->
          </td>
        </tr>
        <!-- Inicio Info Marca -->
        <tr>
          <td
            style="padding-top: 20px; padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; text-align: center; color: #545151;">
            Enviado con 💚 Platzi
          </td>
        </tr>
        <!-- Fin Info Marca -->
        <!-- Inicio Legal -->
        <tr>
          <td
            style="padding-bottom: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; text-align: center; color: #545151;">
            Te enviamos este correo por que si, si no le gusta

            <a href="http://" target="_blank" rel="noopener noreferrer">adios</a>!

          </td>
        </tr>
        <!-- Fin Legal -->
      </tbody>
    </table>
  </td>
</tr>

<!--Fin Footer-->

<!-- 2 columnas -->
            <td class="two-columns" align="center" style="padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; text-align:center; font-size:0">
                <!-- col izq -->
                <table class="column" valign="top" width="100%" style="max-width:300px; display: inline-block;" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
                            <!-- Curso 1 -->
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">

Estilos CSS para Contenedores Responsivos en Plantillas de Email

Introducción y planeación

Diseño y Maquetación de Emails para Marketing Digital

Ventajas del Email Marketing y Estrategias de Optimización

Tipos de Emails y Estrategias de Marketing Digital

Técnicas de Desarrollo de Emails: Código, Builders y Frameworks

Estrategias de Email Marketing: Optimización y Segmentación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Creación de tu primera campaña en Mailchimp

Diseño de Email de Bienvenida en Mailship

Creación de listas de contactos en Mailchimp

Personalización de Campañas en Mailchimp: Segmentación y Diseño

Envío de Emails de Prueba y Finales en Mailchimp

Análisis de Reportes de Campañas en Mailchimp

Creación de Formularios Modales con Mailship para Suscripciones

Incorporación de Formularios de Suscripción en Landing Pages

Automatización de Correos de Bienvenida en Mailship

Segundo proyecto: Diseño de emails

Diseño de Emails Escalables y Responsivos

Buenas prácticas en diseño de emails para marketing

Diseño y Maquetación de Emails Promocionales en Photoshop

Diseño de Newsletters en Photoshop: Guía de Tres Columnas

Diseño de Emails Responsivos en Photoshop y Preparación para Código

Tercer proyecto: maquetación de email de promoción en técnica escalable

Maquetación de Emails Promocionales Escalables en Photoshop

Buenas prácticas en diseño y maquetación de emails

Creación de Plantillas de Email HTML Compatibles con Todos los Clientes

Inserción de Imágenes y Enlaces en Plantillas de Email HTML

Estilos CSS para Plantillas de Email Escalables

Creación de Campañas Promocionales en Mailchimp

Cuarto proyecto: maquetación de newsletter en técnica responsive

Diseño de Newsletters Responsivos en HTML5

Creación de Newsletter HTML con Imágenes y Links

Media Queries para Diseño Responsive en Email Marketing

Estilos CSS para Contenedores Responsivos en Plantillas de Email

Estilos CSS para Plantillas Responsivas de Email

Técnicas Avanzadas de Responsive Design para Móviles

Incorporación de Web Fonts en Plantillas de Correo Electrónico

Código condicional en correos para compatibilidad con Outlook

Pruebas de Envío de Plantillas Responsive con PutsMail

Estrategias para Integrar Videos en Emails de Forma Efectiva

Cierre

Diseño y Maquetación de Emails con Mailchimp