barnettjw/mail.html

## mail.html
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="format-detection" content="telephone=no" />

    <!--[if mso]>
	    <style type="text/css">
            table { border-collapse: collapse;}
	    </style>
    <![endif]-->

    <style>
/* reset */
html,
body,
div table,
tr,
td,
h1,
h2,
ul,
li {
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

body {
   margin: 0;
   background-color: #e0e0e0;
   background: white\0/;
}

/* wrapper styles */
.wrapper {
   width: 100%;
   background-color: #e0e0e0;
   background: white\0/;
}

.wrapper table {
   width: 600px;
   background-color: white;
}

/* general styles */

.header h1 {
   padding: 0;
   margin: 0;
}

.header h2 {
   padding: 0;
   margin: 0;
}

.body p {
   margin: 15px 0;
}

.body p:first-child,
.closing p:first-child {
   padding-top: 20px;
}

.closing p {
   margin: 0;
}

.footer p {
   margin: 3px 0;
}

.footer td {
   padding-bottom: 25px;
}

/* table styles */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

td {
   margin: 0;
   padding: 0 40px;
}

.header table {
   margin-top: 25px;
}

.header td {
   padding-top: 25px;
}

.footer table {
   margin-bottom: 25px;
}

/* typography styles */
a {
   color: #00538b;
   text-decoration: underline;
}

a[href="#"]{
   color: #000;
   text-decoration: none;
}

.body strong {
   color: #00538b;
}

p, h1, h2, h3, h4 {
   line-height: 25px;
   font-family: Arial, San-Serif;
}

.header h1 {
   font-size: 25px;
   font-weight: bold;
   color: #00b0f0;
}

.footer-heading, .header h2 {
   color: #00538b;
   font-weight: bold;
   font-size: 18px;
}
  </style>
</head>
<body>
<table class="wrapper">
   <tr class="header" align="center">
      <td>
         <table>
            <tr>
               <td>
                  <h1>Title message</h1>
                  <h2>a message from IT Dept</h2>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="body" align="center">
      <td>
         <table>
            <tr>
               <td>
                  <p>Content goes here.</p>
                  <p><strong>Go here:</p>
				  <p><a href='https://help.example.com'>intranet page</a></p>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="closing" align="center">
      <td>
         <table>
            <tr>
               <td>
                  <p>Thank you,</p>
                  <p>IT Dept</p>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="footer" align="center">
      <td>
         <table>
            <tr align="center">
               <td>
                  <h4 class="footer-heading">Contacting the IT Dept</h4>
                  <p><strong>Phone: </strong><a href='#'>+1 555-123-4567</a></p>
                  <p><strong>Email: </strong><a href="mailto:help@example.com">help@example.com</a></p>
                  <p><strong>Website: </strong><a href="https://help.example.com">https://help.example.com</a></p>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="format-detection" content="telephone=no" />

	<!--[if mso]>
	<style type="text/css">
	table { border-collapse: collapse;}
	</style>
	<![endif]-->

	<style>
	/* reset */
	html,
	body,
	div table,
	tr,
	td,
	h1,
	h2,
	ul,
	li {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

	body {
	margin: 0;
	background-color: #e0e0e0;
	background: white\0/;
	}

	/* wrapper styles */
	.wrapper {
	width: 100%;
	background-color: #e0e0e0;
	background: white\0/;
	}

	.wrapper table {
	width: 600px;
	background-color: white;
	}

	/* general styles */

	.header h1 {
	padding: 0;
	margin: 0;
	}

	.header h2 {
	padding: 0;
	margin: 0;
	}

	.body p {
	margin: 15px 0;
	}

	.body p:first-child,
	.closing p:first-child {
	padding-top: 20px;
	}

	.closing p {
	margin: 0;
	}

	.footer p {
	margin: 3px 0;
	}

	.footer td {
	padding-bottom: 25px;
	}

	/* table styles */
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	td {
	margin: 0;
	padding: 0 40px;
	}

	.header table {
	margin-top: 25px;
	}

	.header td {
	padding-top: 25px;
	}

	.footer table {
	margin-bottom: 25px;
	}

	/* typography styles */
	a {
	color: #00538b;
	text-decoration: underline;
	}

	a[href="#"]{
	color: #000;
	text-decoration: none;
	}

	.body strong {
	color: #00538b;
	}

	p, h1, h2, h3, h4 {
	line-height: 25px;
	font-family: Arial, San-Serif;
	}

	.header h1 {
	font-size: 25px;
	font-weight: bold;
	color: #00b0f0;
	}

	.footer-heading, .header h2 {
	color: #00538b;
	font-weight: bold;
	font-size: 18px;
	}
	</style>
	</head>
	<body>
	<table class="wrapper">
	<tr class="header" align="center">
	<td>
	<table>
	<tr>
	<td>
	<h1>Title message</h1>
	<h2>a message from IT Dept</h2>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr class="body" align="center">
	<td>
	<table>
	<tr>
	<td>
	<p>Content goes here.</p>
	<p><strong>Go here:</p>
	<p><a href='https://help.example.com'>intranet page</a></p>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr class="closing" align="center">
	<td>
	<table>
	<tr>
	<td>
	<p>Thank you,</p>
	<p>IT Dept</p>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr class="footer" align="center">
	<td>
	<table>
	<tr align="center">
	<td>
	<h4 class="footer-heading">Contacting the IT Dept</h4>
	<p><strong>Phone: </strong><a href='#'>+1 555-123-4567</a></p>
	<p><strong>Email: </strong><a href="mailto:help@example.com">help@example.com</a></p>
	<p><strong>Website: </strong><a href="https://help.example.com">https://help.example.com</a></p>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	</table>

	</html>