julie-ng/email.html

## email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
  <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
  <title>Test: CSS, to inline or not?</title>

  <style type="text/css">
body {
  margin: 0;
  padding: 0;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

table {
  border-spacing: 0;
}

table td {
  border-collapse: collapse;
}

.ExternalClass {
  width: 100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}

.ReadMsgBody {
  width: 100%;
  background-color: #ebebeb;
}

table {
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}

img {
  -ms-interpolation-mode: bicubic;
}

.yshortcuts a {
  border-bottom: none !important;
}

@media screen and (max-width: 600px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 400px) {
  .container-padding {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.title,
.text-table-1,
.text-td-2,
.text-td,
.headline {
  font-family: Helvetica, sans-serif;
}

.title {
  font-weight: bold;
  font-size: 30px;
}

.headline {
  font-size: 24px;
}

.text-td-2 {
  font-size: 16px;
  line-height: 24px;
}

.text-td {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #ededed !important;
}

.text-table-1 {
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
}

img {
  display: block;
  max-width: 100%;
}

.universe {
  background-color: #000000;
}

@media screen and (max-width: 599px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .title,
  .text-td,
  .text-table-1 td,
  .text-td-2 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
</style>
</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>

<table width="600" border="0" align="center" class="container" style="margin-left:auto;margin-right:auto">
  <tr>
    <td>
      <div class="title">War of the Worlds &lt;div&gt;</div>
      <br>

      <table border="0" class="text-table-1">
        <tr>
          <td>
            In the sudden thud, hiss, and glare of the igniting trees, the panic-stricken crowd seems to have swayed hesitatingly for some moments.  Sparks and burning twigs began to fall into the road, and single leaves like puffs of flame.  Hats and dresses caught fire.  Then came a crying from the common.  There were shrieks and shouts, and suddenly a mounted policeman came galloping through the confusion with his hands clasped over his head, screaming. &lt;table&gt;
          </td>
        </tr>
      </table>

      <br>

      <table border="0">
        <tr>
          <td class="text-td-2">
            "They're coming!" a woman shrieked, and incontinently everyone was turning and pushing at those behind, in order to clear their way to Woking again.  They must have bolted as blindly as a flock of sheep. Where the road grows narrow and black between the high banks the crowd jammed, and a desperate struggle occurred.  All that crowd did not escape; three persons at least, two women and a little boy, were crushed and trampled there, and left to die amid the terror and the darkness. &lt;td&gt;
            <br><br>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<br>

<table width="100%" border="0" align="center" class="universe" style="margin-left:auto;margin-right:auto">
  <tr>
    <td align="center">
      <br><br>
      <img src="https://email-tests-assets.s3.amazonaws.com/no-inline/universe-greg-rakozy.jpg" border="0" alt="Photo by Greg Rakozy (unsplash.com)" width="600" hspace="0" vspace="0">
    </td>
  </tr>
  <tr>
    <td>

    <table width="600" border="0" align="center" class="container" style="margin-left:auto;margin-right:auto">
      <tr>
        <td class="text-td">
          I sat up, strangely perplexed.  For a moment, perhaps, I could not clearly understand how I came there.  My terror had fallen from me like a garment.  My hat had gone, and my collar had burst away from its fastener. A few minutes before, there had only been three real things before me--the immensity of the night and space and nature, my own feebleness and anguish, and the near approach of death. &lt;td&gt;
          <br><br>

          <div class="headline">I must have remained there some time.&lt;div&gt;</div>
          <br>

          Now it was as if something turned over, and the point of view altered abruptly.  There was no sensible transition from one state of mind to the other.  I was immediately the self of every day again--a decent, ordinary citizen.  The silent common, the impulse of my flight, the starting flames, were as if they had been in a dream.  I asked myself had these latter things indeed happened?  I could not credit it.
          <br><br>
        </td>
      </tr>
    </table>

    </td>
  </tr>
</table>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
	<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
	<title>Test: CSS, to inline or not?</title>

	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	}

	table {
	border-spacing: 0;
	}

	table td {
	border-collapse: collapse;
	}

	.ExternalClass {
	width: 100%;
	}

	.ExternalClass,
	.ExternalClass p,
	.ExternalClass span,
	.ExternalClass font,
	.ExternalClass td,
	.ExternalClass div {
	line-height: 100%;
	}

	.ReadMsgBody {
	width: 100%;
	background-color: #ebebeb;
	}

	table {
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
	}

	img {
	-ms-interpolation-mode: bicubic;
	}

	.yshortcuts a {
	border-bottom: none !important;
	}

	@media screen and (max-width: 600px) {
	.container {
	width: 100% !important;
	max-width: 100% !important;
	}
	}
	@media screen and (max-width: 400px) {
	.container-padding {
	padding-left: 10px;
	padding-right: 10px;
	}
	}
	.title,
	.text-table-1,
	.text-td-2,
	.text-td,
	.headline {
	font-family: Helvetica, sans-serif;
	}

	.title {
	font-weight: bold;
	font-size: 30px;
	}

	.headline {
	font-size: 24px;
	}

	.text-td-2 {
	font-size: 16px;
	line-height: 24px;
	}

	.text-td {
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #ededed !important;
	}

	.text-table-1 {
	font-weight: 300;
	font-size: 20px;
	line-height: 30px;
	}

	img {
	display: block;
	max-width: 100%;
	}

	.universe {
	background-color: #000000;
	}

	@media screen and (max-width: 599px) {
	.container {
	width: 100% !important;
	max-width: 100% !important;
	}

	.title,
	.text-td,
	.text-table-1 td,
	.text-td-2 {
	padding-left: 15px;
	padding-right: 15px;
	}
	}
	</style>
	</head>

	<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
	<br>

	<table width="600" border="0" align="center" class="container" style="margin-left:auto;margin-right:auto">
	<tr>
	<td>
	<div class="title">War of the Worlds <div></div>
	<br>

	<table border="0" class="text-table-1">
	<tr>
	<td>
	In the sudden thud, hiss, and glare of the igniting trees, the panic-stricken crowd seems to have swayed hesitatingly for some moments. Sparks and burning twigs began to fall into the road, and single leaves like puffs of flame. Hats and dresses caught fire. Then came a crying from the common. There were shrieks and shouts, and suddenly a mounted policeman came galloping through the confusion with his hands clasped over his head, screaming. <table>
	</td>
	</tr>
	</table>

	<br>

	<table border="0">
	<tr>
	<td class="text-td-2">
	"They're coming!" a woman shrieked, and incontinently everyone was turning and pushing at those behind, in order to clear their way to Woking again. They must have bolted as blindly as a flock of sheep. Where the road grows narrow and black between the high banks the crowd jammed, and a desperate struggle occurred. All that crowd did not escape; three persons at least, two women and a little boy, were crushed and trampled there, and left to die amid the terror and the darkness. <td>
	<br><br>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	</table>

	<br>

	<table width="100%" border="0" align="center" class="universe" style="margin-left:auto;margin-right:auto">
	<tr>
	<td align="center">
	<br><br>
	<img src="https://email-tests-assets.s3.amazonaws.com/no-inline/universe-greg-rakozy.jpg" border="0" alt="Photo by Greg Rakozy (unsplash.com)" width="600" hspace="0" vspace="0">
	</td>
	</tr>
	<tr>
	<td>

	<table width="600" border="0" align="center" class="container" style="margin-left:auto;margin-right:auto">
	<tr>
	<td class="text-td">
	I sat up, strangely perplexed. For a moment, perhaps, I could not clearly understand how I came there. My terror had fallen from me like a garment. My hat had gone, and my collar had burst away from its fastener. A few minutes before, there had only been three real things before me--the immensity of the night and space and nature, my own feebleness and anguish, and the near approach of death. <td>
	<br><br>

	<div class="headline">I must have remained there some time.<div></div>
	<br>

	Now it was as if something turned over, and the point of view altered abruptly. There was no sensible transition from one state of mind to the other. I was immediately the self of every day again--a decent, ordinary citizen. The silent common, the impulse of my flight, the starting flames, were as if they had been in a dream. I asked myself had these latter things indeed happened? I could not credit it.
	<br><br>
	</td>
	</tr>
	</table>

	</td>
	</tr>
	</table>

	</body>
	</html>