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

Plantilla de correo electrónico responsiva

Rasetz answered on January 11, 2023 Popularity 1/10 Helpfulness 1/10

answer Plantilla de correo electrónico responsiva

Plantilla de correo electrónico responsiva

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 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Jan 11 2023

Rasetz

0 Answers Avg Quality 2/10

Plantilla de correo electrónico responsiva

Contents

More Related Answers

Plantilla de correo electrónico responsiva

Grepper

Documentation

Social

Legal

Contact

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