<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <title>Email Title</title>
<style>
.ExternalClass * {
		  line-height: 100%;
} 

table {
		  border-collapse: collapse;
}

.apple-link-white a{
		  color:#eeeeee;
		  text-decoration:none;
}

.apple-link-black a{
		  color:#000;
		  text-decoration:none;
}
  

@media screen and (max-width: 600px) {	
	  table[class="outer"]{
		    width:100%;!important;
	  }
}  
</style>
</head>
<body>
<!--[if mso]>
<v:shapetype id="triangle" path="m,l21600,,10800,21600xe" xmlns:v="urn:schemas-microsoft-com:vml"/>
<![endif]-->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#42a7bc" >
 <tr>
  <td>
	    <table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" > <tr>
        	<td height="200">
            <span style="color:#eeeeee; font-size:60px; font-family:arial;">
              content in here
            </span>
        </td>
	      </tr>
    </table>
  </td>
 </tr>    
</table>
  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#3da276" >
 <tr>
  <td>
	    <table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td align="center">
            <div style="height:0px; width:0; border-top: 20px solid #42a7bc;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 0;
    mso-hide:all;">
    </div>
<!--[if mso]>
<v:shape type="#triangle" style="width:80px;height:20px;mso-position-horizontal:center;" fillcolor="#42a7bc" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><o:lock selection="t"/></v:shape>
<![endif]-->
          </td>
        </tr>
        <tr>
        	<td height="200" align="right">
            <span style="color:#eeeeee; font-size:60px; font-family:arial;">
              content in here
            </span>
        </td>
	      </tr>
    </table>
  </td>
 </tr>    
</table>  
  
  <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" >
 <tr>
  <td>
	    <table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td align="center">
            <div style="height:0px; width:0; border-top: 20px solid #3da276;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 0;
    mso-hide:all;">
    </div>
<!--[if mso]>
<v:shape type="#triangle" style="width:80px;height:20px;mso-position-horizontal:center;" fillcolor="#3da276" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><o:lock selection="t"/></v:shape>
<![endif]-->
          </td>
        </tr>
        <tr>
        	<td height="200">
            <span style="color:#eeeeee; font-size:60px; font-family:arial;">
              content in here
            </span>
        </td>
	      </tr>
    </table>
  </td>
 </tr>    
</table>    
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.