Skip to content

Instantly share code, notes, and snippets.

@themorgantown

themorgantown/hype3.0email.html

Created May 24, 2019 19:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save themorgantown/5e063435c36995f08238976ddc71fc54 to your computer and use it in GitHub Desktop.
Save themorgantown/5e063435c36995f08238976ddc71fc54 to your computer and use it in GitHub Desktop.
Download ZIP
This is a slightly tweaked version with larger fonts and images that reference https://static.tumult.com urls. It also has the unsubscribe link in the footer for Sendy support.
Raw
hype3.0email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width"/>
<title>Introducing Tumult Hype 3 and Hype Professional</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet" type="text/css" />
<style type="text/css">/* RESET ALL THE THINGS */ /* Based on The MailChimp Reset INLINE: Yes. */ /* Client-specific Styles */ #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */ body{ width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes.*/ .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Forces Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */ #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} /* End reset */ /* Some sensible defaults for images Bring inline: Yes. */ img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} a img {border:none;} .image_fix {display:block;} /* Yahoo paragraph fix Bring inline: Yes. */ p {margin: 1em 0;} /* Hotmail header color reset Bring inline: Yes. */ h1, h2, h3, h4, h5, h6 {color: #ffffff;} /* Outlook 07, 10 Padding issue fix Bring inline: No.*/ table td {border-collapse: collapse;} /* Remove spacing around Outlook 07, 10 tables Bring inline: Yes */ table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;border: none !important; } /* Styling your links has become much simpler with the new Yahoo. In fact, it falls in line with the main credo of styling in email and make sure to bring your styles inline. Your link colors will be uniform across clients when brought inline. Bring inline: Yes. */ /* END RESET */
body, html { margin: 0; padding: 0;}
ol li { line-height:21px; }
p {
font-size:15px;
color: #666666;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0px;
padding: 0px;
line-height: 19px;
margin: 0px;
padding: 0px;
}
h2 {
color: #666666;
margin-top:20px;
margin-bottom:8px;
padding:0px;
padding-bottom:5px;
font-size:30px;
line-height:33px;
font-family:'SourceSansPro', 'Source Sans Pro', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-weight:300;
}
td img {display:block;}
.familiarize ol {
margin: 0px;
}
.familiarize ol li {
color: #666666;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height:19px;
}
.familiarize a {
color: #0099cc;
text-decoration: none;
}
/*****************
Desktop clients Narrower than 599
******************/
@media all and (max-width: 599px) and (min-width: 200px) {
table[id=wrap] {
width: 100% !important;
}
}
/*****************
Mobile devices up to the width of the iPhone 5s
*******************/
@media only screen and (min-device-width: 320px) and (max-device-width: 569px) {
table[id=wrap] {
width: 400px !important;
}
body, p {
font-size:18px !important;
line-height:24px !important;
}
h2 {
font-size:35px;
line-height:38px;
font-weight:600;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 590px) {
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Ipad (tablets, smaller screens, etc) */
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 4g styles in here */
}
/* Android targeting */
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
</style>
<!-- Targeting Windows Mobile --><!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]--><!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body style="background-color:#e9e9e9; margin:0px;">
<table cellpadding="0" cellspacing="0" style="background-color:#e9e9e9; margin:0px auto; padding:0px; border-collapse:collapse;" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" id="wrap" style="margin:0px auto; padding:0px; border-collapse:collapse;" width="600">
<tr>
<td style="background: #37373b;">
<a href="http://tumult.com/"><img alt="Tumult" height="65" src="https://tumult.com/hype/emails/Hype%203.0%20Email/logo-tumult.gif" /></a>
<h1 style="font-family: 'SourceSansPro', 'Source Sans Pro', 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'HelveticaNeue', 'Helvetica Neue', Arial, Helvetica, sans-serif;font-weight:300;font-size:45px;color:#dfdddd; line-height:45px;padding-left:35px;"><span style="color:#a3a5a7">Introducing Hype 3 + </span><br>Hype Professional</h1>
<a href="http://tumult.com/hype/"><img style="width:600px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/hero-hype-3-hype-pro.jpg" alt="Tumult Hype 3 Screen Shots"/></a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="background: #ffffff;" width="100%">
<div class="familiarize" style="padding:35px;">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="border-collapse:collapse;">
<tr>
<td width="100%" colspan=2>
<p>We&rsquo;re excited to announce the latest release of our award-winning OS X HTML5 animation builder, <a href="http://tumult.com/hype/">Tumult Hype 3.0</a>! This is a huge milestone release for Hype, and we think you&rsquo;re going to love it.</p>
<h2>Redesigned for OS X Yosemite</h2>
<p>Hype 3 features a striking user interface redesign tailored for OS X Yosemite. We took this opportunity to refine and improve every aspect of the app, from the top down.</p>
<h2>A free update with great new features</h2>
<p>Hype 2 users can update to Hype 3 for free! In addition to a redesigned UI, Hype 3 features 24 new timing functions, independent scene sizes, HTML accessibility improvements, better timeline management, and many bug fixes and performance improvements.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="background: #37373b;">
<h2 style="margin:0px;padding:35px 35px 0px 35px;"><span style="color:#dfdddd">Hype Professional Upgrade</span><br> <span style="color:#a3a5a7">Add powerful features to Hype 3</span></h2>
</td>
</tr>
<tr>
<td bgcolor="#37373b" style="background: #37373b;" width="100%">
<div class="familiarize">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#37373b" style="border-collapse:collapse;">
<tr>
<td align="center" colspan="3" width="100%">
<a href = "https://www.youtube.com/watch?v=lfbO_reb5Xw"><img style="width:600px; margin-top:0px; display:block;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/video-preview-hype-pro.jpg" /></a>
</td>
</tr>
<tr>
<td style="padding:10px 10px 10px 35px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-1.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Responsive Layouts</b><br>
Make layouts based on breakpoints so that your content looks great on all device sizes.
</p>
</td>
<td style="padding:10px 10px 10px 10px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-2.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Physics</b><br>
Animate elements with natural movements and collisions without keyframes or code. Easily control bounce, friction, air drag, and density.
</p>
</td>
<td style="padding:10px 35px 10px 10px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-3.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Symbols</b><br>
Symbols are reusable scenes-within-a-scene and persistent symbols are master content shared across scenes.
</p>
</td>
</tr>
<tr>
<td style="padding:10px 10px 10px 35px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-4.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Grid System</b><br>
A 960 Grid-inspired layout grid system for designing pixel-perfect documents.
</p>
</td>
<td style="padding:10px 10px 10px 10px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-5.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Editable Timing Functions</b><br>
Break free from the standard timing functions and make your own custom timing functions.
</p>
</td>
<td style="padding:10px 35px 10px 10px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-6.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Customizable Interface</b><br>
Rearrange Hype&rsquo;s interface to fit how you work.
</p>
</td>
</tr>
<tr>
<td style="padding:10px 10px 10px 35px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-7.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>OAM Export</b><br>
Embed your Hype creations in popular desktop publishing tools.
</p>
</td>
<td style="padding:10px 10px 10px 10px;"valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-8.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Templates</b><br>
Create and share custom templates that are a starting point for new documents.
</p>
</td>
<td style="padding:10px 35px 10px 10px;" valign="top" width="33%">
<img style="height:45px;width:50px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/icon-9.gif"></img>
<p style="margin-top:6px;color:#bfbfbf">
<b>Dark Theme</b><br>
Choose between the Light UI theme, or the new Professional Dark theme.
</p>
</td>
</tr>
<tr>
<td align="center" width="100%" colspan="3" style="padding:43px 0px 43px 0px;">
<a href="http://tumult.com/hype/pro/">
<p style="color:#bfbfbf;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;"><span style="border:1.5px solid; padding: 8px 30px; border-radius:25px; letter-spacing:3px;">MORE ABOUT HYPE PRO</span></p>
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr bgcolor="#f9f8f8" style="background: #f9f8f8;">
<td width="100%">
<div class="familiarize" style="padding:35px 35px 0px 35px;">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr>
<td width="100%">
<h2 style="margin-top:0px">Update to Hype 3 for free</h2>
<p style="margin-top:6px;">If you purchased Hype 2 from the Mac App Store, follow these steps:
<ol>
<li>Open the App Store by choosing <b>Apple Menu &gt; App Store</b>.</li>
<li>Choose <b>Store &gt; Updates</b>.</li>
<li>Click the Update button associated with Hype 3.</li>
</ol>
</p>
<p style="margin-top:12px;">If you purchased Hype 2 from our Tumult Store or a bundle, follow these steps:
<ol>
<li>Open Hype 2 and choose <b>Hype > Check for Updates</b>.</li>
<li>Install and relaunch when prompted.</li>
</ol>
</p>
</td>
</tr>
<tr>
<td width="100%">
<h2>Purchase Hype Professional today</h2>
<p>Hype Professional is an in-app purchase for owners of Hype 3. Choose <b>Hype &gt; Upgrade to Hype Professional</b> to unlock the power of Hype Professional.</p>
<p style="margin-top:12px;">For new users, the full edition of Hype Professional is also available on the <a href="http://tumult.com/store/">Tumult Store</a>, with education and volume purchase discounts.</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<img style="width:600px;" src="https://tumult.com/hype/emails/Hype%203.0%20Email/how-to-uprage-to-hype-pro.jpg" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="background: #ffffff;" valign="middle" width="100%">
<div class="familiarize" style="padding:35px;">
<p>Hype 3 and Hype Professional are the culmination of months of hard work, and we&rsquo;re incredibly excited to get it in your hands. Hype Professional&rsquo;s new features will help you build even better web pages, infographics, iBooks, ads, app prototypes, and more. We can&rsquo;t wait to see what you create with Hype 3 and Hype Professional!</p>
<p style="padding-top:12px;">Thank you,</p>
<p style="padding-top:6px;">Team Tumult</p>
<p style="margin-top:35px;"><b>P.S.</b> We&rsquo;re a small company and depend on word of mouth from our loyal users to stay in business. If you like Tumult Hype and want to help spread the word, please <a href="https://twitter.com/intent/tweet?text=Sweet,%20@hypeapp%20v3%20and%20Hype%20Pro%20is%20out!%20My%20favorite%20HTML5%20animation/design%20app%20just%20got%20better.%20http://tumult.com/hype/pro/">tweet</a> about Hype 3 + Hype Professional or by <a href="https://bit.ly/HypeApp3">rating us</a> on the Mac App Store. Thanks!</p>
</div>
</td>
</tr>
<tr>
<td align="left" id="footer" style="padding:0 0px 30px 20px; background: #e9e9e9;font-family: 'HelveticaNeue', 'Helvetica Neue', helvetica, arial, sans-serif; font-size: 12px;line-height: 18px; color: #999;" valign="top" width="100%">
<p>
<a href="http://tumult.com/"><img alt="Tumult Inc." class="footer" src="https://static.tumult.com/media/email_footer_gray.gif" style="margin-left:-12px;display:inline;" width="80" /></a><br>
This email was sent to <span style="color:#37373b">[Email]</a>. If you are no longer interested you can <unsubscribe>unsubscribe</unsubscribe> instantly. Read our privacy policy: <a href="http://tumult.com/hype/privacy" style="color:#37373b">tumult.com/hype/privacy</a>.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment