Site Maintenance Email Template

index.html

<div class="esaner-head">
	<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
</div>
<div class="esaner" style="background-color:#ececec;padding:2rem;">
	<div class="content" style="width:85%;max-width:700px;margin:0 auto;">
		<section class="brand" style="background-color:#ececec;padding:0;border:none;margin-bottom:2rem;">
			<img class="logo" style="width:100%;max-width:500px;margin:0 auto;display:block;" src="http://esaner.com/content/uploads/2015/03/esaner-logo.png" />
			<h3 class="client" style="text-align:center;">Client Site: bic-history.org</h3>
		</section>
		<section class="notes" style="background-color:#fff7ca;padding:2rem;border:1px solid #b29f3c;border-radius:0 0 0.75rem 0.75rem;margin-bottom:2rem;">
			<header style="color:#fff;background-color:#1b75bb;display:inline-block;padding:0.75rem;">
				<h2 style="margin:0;"><i class="fas fa-thumbtack"></i> Admin Notes</h2>
			</header>
			<p>December site maintenance complete.</p>

			<p>Your next maintenance is scheduled for on or around Wednesday, January 17.</p>
		</section>
		<section class="backups" style="background-color:#fff7ca;padding:2rem;border:1px solid #b29f3c;border-radius:0 0 0.75rem 0.75rem;margin-bottom:2rem;">
			<header style="color:#fff;background-color:#1b75bb;display:inline-block;padding:0.75rem;">
				<h2 style="margin:0;"><i class="fas fa-hdd"></i> Backups</h2>
			</header>
			<p>The latest complete backup (12/16) was successfully restored.</p>
		</section>
		<section class="updates" style="background-color:#fff7ca;padding:2rem;border:1px solid #b29f3c;border-radius:0 0 0.75rem 0.75rem;margin-bottom:0;">
			<header style="color:#fff;background-color:#1b75bb;display:inline-block;padding:0.75rem;">
				<h2 style="margin:0;"><i class="fas fa-sync-alt"></i> Updates</h2>
			</header>
			<p>All available updates were applied and tested locally and on the staging site before being pushed to the production site.<p>

			<h3>WordPress Core: 1</h3>
			<ul>
				<li>WordPress 4.9.1</li>
			</ul>

			<h3>Themes: 1</h3>
			<ul>
				<li>WP Forge</li>
			</ul>

			<h3>Plugins: 16</h3>
			<ul>
				<li>Contact Form 7</li>
				<li>Restrict Content Pro</li>
				<li>Shield Security (x5)</li>
				<li>Toolset Types</li>
				<li>Toolset Views (x2)</li>
				<li>UpdraftPlus (x4)</li>
				<li>WP Fastest Cache</li>
				<li>Yoast SEO (x2)</li>
			</ul>

			<h3>Total Updates Applied: 17</h3>

			<h3>Total Updates Withheld: 1</h3>
			<ul>
				<li>WP Forge</li>
			</ul>
		</section>
	</div>
</div>

site-maintenance-email-template.markdown

Site Maintenance Email Template

A Pen by Eric Saner on CodePen.

License.

style.scss

.esaner {
	background-color: #ececec;
	padding: 2rem;
}

.esaner .content {
	width: 85%;
	max-width: 700px;
	margin: 0 auto;
}

.esaner section {
	background-color: #fff7ca; //fff1a4;
	padding: 2rem;
	border: 1px solid #b29f3c;
	border-radius: 0 0 0.75rem 0.75rem;
	margin-bottom: 2rem;
}

.esaner section.brand {
	background-color: #ececec;
	border: none;
	padding: 0;
}

.esaner section:last-child {
	margin-bottom: 0;
}
	
.esaner .client {
	text-align: center;
}
	
.esaner .logo {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	display: block;
}

.esaner header {
	color: #fff;
	background-color: #1b75bb;
	display: inline-block;
	padding: 0.75rem;
}

.esaner h2 {
	//color: #2199e8;
	margin: 0;
}

@media screen and (max-width: 500px) {
	.esaner, .esaner section {
		padding: 1rem;
	}
}

@media screen and (max-width: 700px) {
	.esaner .content {
		width: 100%;
	}
}