Estilos CSS para Contenedores Responsivos en Plantillas de Email

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

Estilos CSS para Contenedores Responsivos en Plantillas de Email

Resumen

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

Henry David Castillo Montoya

Estudiante

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

Estudiante

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

Estudiante

@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! :)

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