PS - Halloween 2017

In this example below you will see how to do a PS - Halloween 2017 with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>PS - Halloween 2017</title>
  
  
  
  
  
</head>

<body>

  <html>
	<head>
		<title>Halloween 2017 - You deserve a treat</title>
	</head>
	<body style="margin: 0px; background-color: #f7f7f7;" bgcolor="#1c0a13;">
   
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #f7f7f7;">
            <tr>
                   <td align="center" style="background-color: #ffffff; " valign="top">
    <div align="center" style="background-color: #ffffff;">
					<img alt="Photosnack logo" src="http://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/Photosnack-Blog/photosnack_logotype.png" style="border-collapse: collapse; border-spacing: 0;  padding: 30px 25px 16px; border: none; max-width: 301px; " /></div>
                     
          <div align="center" style="background-color: #ffdd8d;">
					<img alt="Photosnack header" src="http://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/Photosnack-Blog/halloween-ps-header-image.jpg" style="border-collapse: collapse; border-spacing: 0; width: 100%;" /></div>

     <table cellspacing="0" border="0" cellpadding="0" align="center" style="max-width: 563px; min-width: 240px;" >
        <tr>
            <td style="padding: 0px 50px;">                
                  
				
				<div style="font-family: Roboto, Arial, sans serif; font-weight:bold; color:#300a34; font-size:22px; padding: 20px 0 25px 0; text-align: center;">
					Halloween sale is on!<br>We're cutting prices by 35%</div>
				<div style="font-family:Roboto, Arial, sans serif; font-size:15px; line-height:1.5em; font-weight:normal; color:#6d7073; padding: 0 0 25px 0;">
					Hey there,</div>
				<div style="font-family:Roboto, Arial, sans serif; font-size:15px; line-height:1.5em; font-weight:normal; color:#6d7073; padding: 0 0 10px 0;">In the spirit of Halloween, we’ve cut the prices for all premium subscriptions.  Get the most out of all Snacktools products and save 35% doing so. And no more pesky limitations!</div>
				
				<div style="font-family:Roboto, Arial, sans serif; font-size:15px; line-height:1.5em; font-weight:normal; color:#6d7073; padding:0 0 25px 0;">Upgrade to SNACK BUSINESS and save.</div>
				<div style="text-align: center;">
					<a href="https://www.photosnack.com/photo-slideshow-maker/go-premium/?utm_source=emailTool&utm_medium=email&utm_campaign=Halloween2017&utm_content=email-button&ps_tags=Halloween2017,VIP#st-buy-points&coupon=PHOTOTREAT2017" style=" font-family: Roboto, Arial, sans serif; font-size:15px; color: #FFF; text-decoration: none; font-weight: Regular; text-align: center; cursor: pointer; display: inline-block; background-image: none; background-color: #6a223f; margin: 0 0 10px 0; padding: 12px 42px; border-radius: 1px; border: none; text-transform: uppercase;"><b>Save 35%</b></a></div>
				<div style="font-family:Roboto, Arial, sans serif; font-size:14px; line-height:1.5em; font-weight:normal; color:#6d7073; padding:5px 0 25px 0; text-align: center;">Use promo code <b>PHOTOTREAT2017</b> at checkout    
</div>
				<div style="font-family:Roboto, Arial, sans serif; font-size:15px; line-height:1.5em; font-weight:normal; color:#6d7073; padding:0px 0 25px 0;">Don't forget, the Offer ends on the 31st of October at Midnight! So upgrade now and have a great time using the Snacktools products this Halloween.</div>
				<div style="font-family:Roboto, Arial, sans serif; font-size:15px; line-height:1.5em; font-weight:normal; color:#6d7073; padding: 0 0 52px 0;">
					Have a great Halloween,<br />
					The <b>Photosnack Team</b></div>
      
        </td>
        </tr>
    </table>
       <table cellspacing="0" border="0" cellpadding="0" align="center" width="100%" style="background-color: #f7f7f7;">
        <tr>
            <td>
 
				<div align="center" style="font-family:Roboto, Arial, sans serif; font-size:10px; line-height:1.5em; font-weight:normal; color:#bbbaba; padding: 25px 0 0 0;">
					Copyright &copy; PhotoSnack, All rights reserved.<br />
					<strong>Our mailing address: </strong>6665 Vernmoor Drive, Troy, MI 48098 - USA</div>
				<div align="center" style="font-family:Roboto, Arial, sans serif; font-size:10px; line-height:1.5em; font-weight:normal; color:#bbbaba; padding: 15px 0 15px;">
					You are receiving this email because have registered on PhotoSnack | <a href="http://www.snacktools.com/my-account/unsubscribe.html?email={email}&amp;pass={password}">Unsubscribe</a></div>
				<span style="color:rgb(20, 29, 33); font-family:Roboto, Arial, sans serif; font-size:11px; -webkit-border-horizontal-spacing:1px; -webkit-border-vertical-spacing:1px; ">{counter}</span></div>
		</div>
      </td>
        </tr>
    </table>
       
       </td>
        </tr>
    </table>
      
	</body>
</html>
  
  

</body>

</html>

Comments