Email Temp

In this example below you will see how to do a Email Temp with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jussic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jussic ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Email Temp</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<head>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Newsletter Template</title>
	<style type="text/css">
	/* Forces Hotmail to display emails at full width */
	.ReadMsgBody {
	width: 100%;
	}
	/*Hotmail table centering fix*/
	.ExternalClass {
	width: 100%;
	}
	/* Forces Hotmail/Outlook to display normal line spacing*/
	.ExternalClass * {
	line-height: 100%;
	}
	/*Yahoo paragraph fix*/
	p {
	margin: 1em 0;
	}
	/*This resolves the Outlook 07, 10, and Gmail td padding issue fix*/
	table td {
	border-collapse: collapse;
	}
	/*This resolves the issue when iphone puts links on dates, etc.*/
	.appleLinks {
	color: inherit;
	text-decoration: none;
	}
	.appleLinks a {
	color: inherit;
	text-decoration: none;
	}
    /* Column Drop Layout Pattern CSS */
	@media only screen and (max-width: 450px) {
	    td[class="column"] {
	        display: block;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
	    }
	}
</style>
</head>
<center>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;">
        <!--<img class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;" src =  "http://image.mc.lilly.com/lib/fe9012727d660c7875/m/1/Lilly+Header.png " >  </img>  -->
        <custom type="content" name="Banner"></td>
    </tr>
 <tr>
        <td class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;">
        <custom type="content" name="Main_Message">
<span> 
          <h1 class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;" > <b> Dear [Insert Recipient Name], </b> </h1>
<h2 class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;" > [Update to include language and data that supports why the email content is relevant to the recipient.] </h2>
      
<p class="column" width="600" colspan="2" align="left" valign="top" style="padding: 10px 20px 20px 20px; background: #999; font-family: arial,sans-serif; font-size: 14px; line-height: 18px; color: #000001;" > 
[Update with Image Description]
[Use this area to provide more information and context that will compel the recipient to take action. Consider using bullet points for emphasizing key takeaways.]
Key point #1
Key point #2
Key point #3
</p>
    </td>
    </tr>
  
</table>
<center>

</body>
</html>
  
  

</body>

</html>

Comments