No template template

In this example below you will see how to do a No template template 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 ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>No template template</title>
  
  
  
  
  
</head>

<body>

  <html style="margin: 0">
	<head>
		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,900" rel="stylesheet" />
		<title>Black Friday sale 50% off</title>
		<meta content="width=device-width, initial-scale=1" name="viewport" />
	</head>
	<body>
		<div style="background-color: #FFFFFF; padding: 50;">
			<div style="text-align: center; color: #ffffff; padding: 25px 0 20px 0;">
				<img alt="FlipSnack Logo" src="https://files.snacktools.net.s3.amazonaws.com/snacktools/site/blog/flipsnack/FlipSnack%20Email%20Images/BlackFriday2016/fs_120.png" style="width: 120px text-align: center; color: #ffffff;" /></div>
			<div style="background-color:#FFFFFF; font-family:Roboto, Arial, sans-serif; font-size:15px; line-height:1.5em; font-weight:normal; padding: 10px 80px;  text-align:left">
				<div>
					Hello, {screenname}</div>
        <br>
				<div>
					Now&rsquo;s the time to save big - with <b>50% off</b>&nbsp;all FlipSnack subscription prices. Be quick and get incredible benefits at half price this Black Friday!</div>
				<div>
					By upgrading you will get:<br>
				<ul>
					<li>
						Full access to editor;</li>
					<li>
						Extra storage: remove the 5 flipbook limitation;</li>
					<li>
						Display full flipbooks, up to 500 pages;</li>
					<li>
						Remove the Flipsnack branding.</li>
				</ul>
</div>
			</div>
			<div style="background-color:#FFFFFF; text-align:center; padding: 20px; ">
				<a href="https://www.flipsnack.com/?utm_source=Black-Friday-2016&amp;utm_medium=email&amp;utm_content=Template-3#st-auto-login&amp;user={email}&amp;pass={password}&amp;coupon=FLIPBLACK2016&amp;fs_tags=FS-BlackFriday-Test3" style="font-family: Roboto, Arial, sans-serif; font-size:14px; color: #fff; text-decoration: none; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; background-image: none; background-color:#000000;
    margin: 0 0 10px 0; padding: 9px 30px 9px 30px; border-radius:6px; border: none; ">UPGRADE NOW</a></div>
			<div style="background-color:#FFFFFF; font-family:Roboto, Arial, sans-serif; font-size:15px; line-height:1.5em; font-weight:normal; padding: 0px 80px 50px 80px; text-align:left">
				Best regards,<br />
				The FlipSnack Team</div>
			<div style="font-family:Roboto, Arial, sans serif; font-size:10px; text-align: center; line-height:1.5em; font-weight:normal; color:#686868; padding-top: 25px; ">
				Copyright &copy;FlipSnack, All rights reserved.</div>
			<div style="font-family:Roboto, Arial, sans serif; font-size:10px; text-align: center; line-height:1.5em; font-weight:normal; color:#8b8b8b; ">
				<strong>Our mailing address: 6665 Vernmoor Drive, Troy, MI 48098 - USA</strong></div>
			<div style="font-family:Roboto, Arial, sans serif; text-align:center; font-size:10px; line-height:1.5em; font-weight:normal; color:#686868; padding: 15px 0 15px;">
				You are receiving this email because have registered on FlipSnack | <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>
	</body>
</html>
  
  

</body>

</html>

Comments