Breaking News: Grepper is joining You.com. Read the official announcement!

Email responsive template

Rasetz answered on September 11, 2022 Popularity 9/10 Helpfulness 5/10

answer Email responsive template

related Email resposive template

Email responsive template

Comment

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="x-apple-disable-message-reformatting">
	<title></title>
	<!--[if mso]>
	<noscript>
		<xml>
			<o:OfficeDocumentSettings>
				<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
	</noscript>
	<![endif]-->
	<style>
		table, td, div, h1, p {font-family: Arial, sans-serif;}
	</style>
</head>
<body style="margin:0;padding:0;">
	<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
		<tr>
			<td align="center" style="padding:0;">
				<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
					<tr>
						<td align="center" style="padding:40px 0 30px 0;background:#70bbd9;">
							<img src="https://assets.codepen.io/210284/h1.png" alt="" width="300" style="height:auto;display:block;" />
						</td>
					</tr>				
					<tr>
						<td style="padding:30px;background:#ee4c50;">
							<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;font-size:9px;font-family:Arial,sans-serif;">
								<tr>
									<td style="padding:0;width:50%;" align="left">
										<p style="margin:0;font-size:14px;line-height:16px;font-family:Arial,sans-serif;color:#ffffff;">
											&reg; Someone, Somewhere 2021<br/><a href="http://www.example.com" style="color:#ffffff;text-decoration:underline;">Unsubscribe</a>
										</p>
									</td>
									<td style="padding:0;width:50%;" align="right">
										<table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;">
											<tr>
												<td style="padding:0 0 0 10px;width:38px;">
													<a href="http://www.twitter.com/" style="color:#ffffff;"><img src="https://assets.codepen.io/210284/tw_1.png" alt="Twitter" width="38" style="height:auto;display:block;border:0;" /></a>
												</td>
												<td style="padding:0 0 0 10px;width:38px;">
													<a href="http://www.facebook.com/" style="color:#ffffff;"><img src="https://assets.codepen.io/210284/fb_1.png" alt="Facebook" width="38" style="height:auto;display:block;border:0;" /></a>
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

Popularity 9/10 Helpfulness 5/10 Language html

Source: webdesign.tutsplus.com

Tags: email html responsive

Link to this answer
Share Copy Link

Contributed on Sep 11 2022

Rasetz

0 Answers Avg Quality 2/10

Closely Related Answers

Email resposive template

Comment

<!DOCTYPE html>
<html>
	<head>
		<title>Plantilla de Correo Electrónico</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			/* Estilos Generales */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
/* Estilos del Contenido del Correo */
.container {
	background: #f1f1f1;
	padding: 10px;
	width: 100%;
}
/* Estilos de la Cabecera */
header {
	background: #333;
	padding: 10px;
	width: 100%;
}
header h1 {
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}
/* Estilos del Cuerpo */
.body {
	background: #fff;
	padding: 10px;
	width: 100%;
	text-align: center;
}
.body p {
	text-align: center;
	color: #333;
	font-size: 16px;
}
.body ul {
	text-align: center;
    list-style-position: inside;

    padding: 10px 0 10px 0;
}
/* Estilos del Pie */
footer {
	background: #333;
	padding: 10px;
	width: 100%;
}
footer p {
	text-align: center;
	color: #fff;
	font-size: 16px;
}
/* Estilos Responsive */
@media only screen and (max-width: 600px) {
	.container {
		background: #f1f1f1;
		padding: 10px;
		width: 100%;
	}
	/* Estilos de la Cabecera */
	header {
		background: #333;
		padding: 10px;
		width: 100%;
	}
	header h1 {
		text-align: center;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	/* Estilos del Cuerpo */
	.body {
		background: #fff;
		padding: 10px;
		width: 100%;
	}
	.body p {
		text-align: center;
		color: #333;
		font-size: 12px;
	}
	/* Estilos del Pie */
	footer {
		background: #333;
		padding: 10px;
		width: 100%;
	}
	footer p {
		text-align: center;
		color: #fff;
		font-size: 12px;
	}
}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Título del Correo</h1>
			</header>
			<div class="body">
                <p>Hola <b>Nombre de Usuario</b>, se ha levantado un ticket de soporte para tu solicitud con los siguientes detalles:</p>
                <ul>
                    <li><b>Fecha de Levantamiento:</b> Fecha de Levantamiento</li>
                    <li><b>Código del Ticket:</b> Código del Ticket</li>
                </ul>
                <p>Para ver el progreso del ticket, haz clic en el siguiente enlace: <a href="#">Link al Ticket</a></p>
                <p>Atentamente,<br>Equipo de Soporte</p>
            </div>
			<footer>
				<p>Copyright &copy; 2020. Todos los Derechos Reservados.</p>
			</footer>
		</div>
	</body>
</html>

Popularity 8/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: email html

Link to this answer
Share Copy Link

Contributed on Jan 11 2023

Rasetz

0 Answers Avg Quality 2/10

Email responsive template

Contents

More Related Answers

Email responsive template

Closely Related Answers

Email resposive template

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.