<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Airport Email Spring 2018 V2 - SpotHero</title>
</head>
<body>
<!DOCTYPE html>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" /><!-- utf-8 works for most cases -->
<meta content="width=device-width" name="viewport" /><!-- Forcing initial-scale shouldn't be necessary -->
<meta content="IE=edge" http-equiv="X-UA-Compatible" /><!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting" /><!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width"/>
<title>SpotHero</title>
<!-- The title tag shows in email notifications, like Android 4.4. --><!-- Web Font / @font-face : BEGIN --><!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. --><!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. --><!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]--><!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ --><!--[if !mso]><!--><!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> --><!--<![endif]--><!-- Web Font / @font-face : END --><!-- CSS Reset -->
<style type="text/css">/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style type="text/css">/* What it does: Hover styles for buttons */
.button-td,
.button-a,
{
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover,
{
background: #002d5b !important;
border-color: #002d5b !important;
}
.link-a:hover {
color: #1dbd71!important;
}
.link-a:visited {
color: #0082ff!important;
}
a {
color:#0082ff;
}
/* Media Queries */
@media only screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
padding-bottom: 5px;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<style type="text/css">.sidebar {
max-width: 25px!important;
}
@media only screen and (max-width: 600px) {
.mobile-txt{
text-align: center!important;
padding-left: 30px!important;
padding-right: 30px!important;
}
.mobile-txt-2{
padding-left: 1em!important;
padding-right: 1em!important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#ebeff2" style="margin: 0px; align-content: center;" width="100%">
<center style="width: 100%; background: #ebeff2; text-align: left;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Book parking for the whole week in 1 easy step. Plan ahead and make your mornings easier!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="margin: auto;" width="600">
<tbody>
<tr>
<td align="center" style="padding-top: 30px; text-align: center"><a href="https://spothero.app.link/Xw0gXV11CL"><img align="center" alt="SpotHero" border="0" class="g-img" src="http://res.cloudinary.com/spothero/image/upload/v1523639029/html-emails/email_assets/airport_email_hero_img_video_top_v4.png" style="width: 100%; max-width: 600px; height: auto; font-family: 'Open Sans', Arial, sans-serif;font-size: 25px;line-height: 30px;color: #ffffff; font-weight: bold;" width="600" /></a>
</td>
</tr>
<tr>
<td align="center" style="text-align: center"><a href="https://spothero.app.link/Xw0gXV11CL"><img align="center" alt="New! Park and Fly" border="0" class="g-img" src="http://res.cloudinary.com/spothero/image/upload/v1523639029/html-emails/email_assets/airport_email_hero_img_middle_v4.gif" style="width: 100%; max-width: 600px; height: auto; font-family: 'Open Sans', Arial, sans-serif;font-size: 25px;line-height: 30px;color: #ffffff; font-weight: bold;" width="600" /></a>
</td>
</tr>
<tr>
<td align="center" style="text-align: center"><a href="https://spothero.app.link/Xw0gXV11CL"><img align="center" alt="Paln your trip today!" border="0" class="g-img" src="http://res.cloudinary.com/spothero/image/upload/v1523639029/html-emails/email_assets/airport_email_hero_img_bottom_v4.png" style="width: 100%; max-width: 600px; height: auto; font-family: 'Open Sans', Arial, sans-serif;font-size: 25px;line-height: 30px;color: #ffffff; font-weight: bold;" width="600" /></a>
</td>
</tr>
<tr>
<td bgcolor="#ebeff2">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr><!-- Sidebar : Begin -->
<td bgcolor="#ebeff2" class="sidebar" style="background-image:url(http://res.cloudinary.com/spothero/image/upload/v1515602083/html-emails/email_assets/sdbar_left_updated.png);background-position:top right;background-repeat:no-repeat;border-collapse:collapse;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:0px;line-height:0px;padding:0;background-size:100% 100%" width="5%">
</td>
<!-- Sidebar : End --><!-- Content : Begin -->
<td bgcolor="#ffffff" style="width: 90%; max-width: 550px!important;">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="mobile-txt" bgcolor="#ffffff" style="padding: 0 40px 10px; text-align: left; font-family:'Open Sans', sans-serif; font-size: 22px; color:#0082ff; font-weight: 100;" >
We’ve totally redesigned airport parking.
<br>
And you’re gonna love it.
</td>
</tr>
<tr>
<td class="mobile-txt" bgcolor="#ffffff" style="padding: 10px 40px 0px; text-align: left; font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100;" width="100%">
We know what it’s like getting to the airport. It’s stressful, and every minute counts. Your priority? Making your flight.
</td>
</tr>
<tr>
<td class="mobile-txt" bgcolor="#ffffff" style="padding: 15px 40px 20px; text-align: left; font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100;" width="100%">
Good news: we can help. Here's just some of what you can expect when you park and fly with SpotHero:
</td>
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding:15px 30px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td valign="top" width="37.5%" class="stack-column-center" style="@media only screen and (max-width: 600px) { display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding-bottom:5px;}">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
<img valign="middle" src="http://res.cloudinary.com/spothero/image/upload/v1523630619/html-emails/email_assets/airport_email_time.png" width="28" alt="alt_text" border="0" class="fluid" style="height: auto; font-family: sans-serif; font-size: 14px; line-height: 20px; color: #555555;">
</td>
</tr>
<tr>
<td align="center" valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 600; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
Shuttle Times & Details
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td valign="top" width="25%" class="stack-column-center" style="@media only screen and (max-width: 600px) { display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding-bottom:5px;}">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
<img valign="middle" src="http://res.cloudinary.com/spothero/image/upload/v1523630620/html-emails/email_assets/airport_email_star_outline.png" width="28" alt="alt_text" border="0" class="fluid" style="height: auto; font-family: sans-serif; font-size: 14px; line-height: 20px; color: #555555;">
</td>
</tr>
<tr>
<td valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 600; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
Spot Ratings
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td valign="top" width="37.5%" class="stack-column-center" style="@media only screen and (max-width: 600px) { display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; padding-bottom:5px;}">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
<img valign="middle" src="http://res.cloudinary.com/spothero/image/upload/v1523631940/html-emails/email_assets/airport_email_airplane.png" width="28" alt="alt_text" border="0" class="fluid" style="height: auto; font-family: sans-serif; font-size: 16px; line-height: 20px; color: #555555;">
</td>
</tr>
<tr>
<td valign="middle" style="font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 600; @media only screen and (max-width: 600px) { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}" class="center-on-narrow">
More Airports Added
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- CTA Button : BEGIN -->
<tr>
<td bgcolor="#ffffff" class="mobile_text" style="padding:10px 40px 30px 40px; text-align: center; font-family:'Open Sans', sans-serif; font-size: 15px; line-height: 26px; color: #002d5b; font-weight: 100;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://spothero.app.link/Xw0gXV11CL" style="height:40px;v-text-anchor:middle;width:400px;" arcsize="50%" stroke="f" fillcolor="#0082ff">
<w:anchorlock/>
<center>
<![endif]--><a href="https://spothero.app.link/Xw0gXV11CL" style="background-color:#0082ff; border-radius: 40px; color: #ffffff; display: inline-block; font-family:'Open Sans', sans-serif; font-size: 20px; font-weight: 100; line-height: 45px; text-align: center; text-decoration: none; width: 80%; -webkit-text-size-adjust: none;">Plan Your Trip</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<!-- CTA Button : END -->
<tr>
<td class="mobile-txt" bgcolor="#ffffff" style="padding: 10px 30px 10px; text-align: center; font-family:'Open Sans', sans-serif; font-size: 18px; line-height: 26px; color: #000000; font-weight: 600;" width="100%">
Check out the new experience!
</td>
</tr>
<tr>
<td class="mobile-txt" bgcolor="#ffffff" style="padding: 0 30px 50px; text-align: center; font-family:'Open Sans', sans-serif; font-size: 14px; line-height: 26px; color: #000000; font-weight: 100;" width="100%">
<a href="##">
<img src="http://res.cloudinary.com/spothero/image/upload/v1523484531/html-emails/email_assets/airport_email_video_screenshot_video.png" width="350" style="max-width: 350px; width: 100%;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<!-- Content : End --><!-- Sidebar : Begin -->
<td bgcolor="#ebeff2" class="sidebar" style="background-image:url(http://res.cloudinary.com/spothero/image/upload/v1515602083/html-emails/email_assets/sdbar_right_updated.png);background-position:top right;background-repeat:no-repeat;border-collapse:collapse;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:0px;line-height:0px;padding:0;background-size:100% 100%" width="5%">
</td>
<!-- Sidebar : End -->
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ebeff2" height="25" style="background-image:url(http://res.cloudinary.com/spothero/image/upload/v1515602083/html-emails/email_assets/bottom_bar_updated.png);background-position:top right;background-repeat:no-repeat;border-collapse:collapse;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:0px;line-height:0px;padding:0;background-size:100% 100%" width="100%">
</td>
</tr>
<!-- Background Image with Text : END -->
</tbody>
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table align="center" aria-hidden="true" bgcolor="#ebeff2" border="0" cellpadding="0" cellspacing="0" class="email-container" role="presentation" style="margin: auto;" width="600">
<tbody>
<!-- 3 Even Columns : BEGIN -->
<tr>
<td align="center" valign="top" style="padding: 20px 0 0 0;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="200">
<tr>
<!-- Column : BEGIN -->
<td width="25%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center">
<a href="${clickthrough('soc_twitter')}" style="text-decoration: none;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">
<img alt="Twitter" border="0" src="http://res.cloudinary.com/spothero/image/upload/v1509555113/html-emails/soc_icon_twitter.png" style="display: block;font-family: 'Open Sans', Arial, sans-serif;font-size: 14px;line-height: 18px;color: #404040;font-weight: bold;border: 0 !important;outline: none !important; max-width:35px;" width="35" />
</a>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="25%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center">
<a href="${clickthrough('soc_youtube')}" style="text-decoration: none;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">
<img alt="YouTube" border="0" src="http://res.cloudinary.com/spothero/image/upload/v1509555113/html-emails/soc_icon_ytube.png" style="display: block; font-family:'Open Sans', Arial, sans-serif;font-size: 14px; line-height: 18px;color: #404040;font-weight: bold;border: 0 !important;outline: none !important; max-width:35px;" width="35" />
</a>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="25%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center">
<a href="${clickthrough('soc_instagram')}" style="text-decoration: none;border-collapse: collapse;mso-line-height-rule: exactly; " target="_blank">
<img alt="Instagram" border="0" src="http://res.cloudinary.com/spothero/image/upload/v1509555113/html-emails/soc_icon_insta.png" style="display: block;font-family: 'Open Sans', Arial, sans-serif;font-size: 14px;line-height: 18px;color: #404040;font-weight: bold;border: 0 !important;outline: none !important; max-width:35px;" width="35" />
</a>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="25%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center">
<a href="${clickthrough('soc_facebook')}" style="text-decoration: none;border-collapse: collapse;mso-line-height-rule: exactly;" target="_blank">
<img alt="Facebook" border="0" src="http://res.cloudinary.com/spothero/image/upload/v1509555113/html-emails/soc_icon_fb.png" style="display: block;font-family: 'Open Sans', Arial, sans-serif;font-size: 14px;line-height: 18px;color: #404040;font-weight: bold;border: 0 !important;outline: none !important; max-width:35px;" width="35" />
</a>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- Address : BEGIN -->
<tr>
<td align="center" class="em_font13" style="border-collapse: collapse;mso-line-height-rule: exactly;color: #5C7996; font-family: 'Open Sans', Arial, sans-serif;font-size: 13px; text-decoration: none; padding: 10px 0 0 0;" valign="top">
<a href="https://www.google.com/maps/place/125+S+Clark+St,+Chicago,+IL+60603/@41.8799664,-87.6326076,17z/data=!3m1!4b1!4m5!3m4!1s0x880e2cbc84e2f65d:0xe3f6cc5a53b0e8e3!8m2!3d41.8799664!4d-87.6304189" style="color: #5C7996; font-family: 'Open Sans', Arial, sans-serif;font-size: 13px; text-decoration: none;">125 S. Clark St. | Chicago, IL 60603</a>
</td>
</tr>
<tr>
<td align="center" class="em_font13" style="border-collapse: collapse;mso-line-height-rule: exactly;color: #5C7996; font-family: 'Open Sans', Arial, sans-serif;font-size: 13px; text-decoration: none; padding: 5px 0 5px 0;" valign="top">
<a href="tel:3215667768" style="border-collapse: collapse;mso-line-height-rule: exactly;color: #5C7996; font-family: 'Open Sans', Arial, sans-serif;font-size: 13px; line-height: 20px; text-decoration: none;">(312) 566-7768</a> <a href="${clickthrough('faq')}" style="color: #5C7996; border-collapse: collapse;mso-line-height-rule: exactly; text-decoration: none;" target="_blank">| FAQ</a>
</td>
</tr>
<!-- Address : END -->
<!-- Unsubscribe : BEGIN -->
<tr>
<td align="center" class="mobile_text-2" style="text-align: center; padding:0; font-family:'Open Sans', sans-serif; font-size: 13px; color: #5C7996 font-weight: 500;">
<a href="${clickthrough('unsubscribe')}" style="font-family:'Open Sans', sans-serif; font-size: 13px; color: #5C7996; font-weight: 500; text-decoration: none; ">Unsubscribe</a>
</td>
</tr>
<!-- Unsubscribe : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="30" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
</tbody>
</table>
<!-- Email Footer : END -->
</center>
</body>
</html>
</body>
</html>
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
