Skip to content

Instantly share code, notes, and snippets.

@scneptune

scneptune/gist:7207612

Last active December 26, 2015 20:19
Show Gist options
  • Save scneptune/7207612 to your computer and use it in GitHub Desktop.
Save scneptune/7207612 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.erb
<!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, initial-scale=1.0"/>
<title>Oh, hello, Mexico.</title>
<style type="text/css">
/* 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;
background-color: #202126!important;
color: #f2f2f2!important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.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%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {
margin: 20px auto;
padding: 0;
max-width: 100%!important;
line-height: 1.25 !important;
}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0 0 20px; line-height: 1.5; }
.motto, .headertext, .date { color: #606067!important; margin-top: 0!important; margin-bottom: 0!important;
}
.headertext {
margin-left: 10px;
}
.motto, .date {
font-size: 14px;
}
.motto .space{
margin-bottom: 0px;
padding-left: 20px;
}
.middle { border-top: 1px solid #606067;}
.headline-cap { width: 400px; }
h3.headline, .sponsor-logo { padding: 0 15px; }
.top-left, .sponsor-logo-box { margin-bottom: 10px; }
.sponsor-logo-box { border-bottom: 1px solid #606067; }
.socialicon {}
.footer {border-top: 1px solid #606067;}
h1, h2, h3, h4, h5, h6 {}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #686870 !important;}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important; /* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
}
h2.headertext {
font-size: 60px;
}
h2.headline {
font-size: 42px;
font-weight: 400;
}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table.container { max-width: 650px; margin: 0 auto;}
a {color: #6ac2b8!important;}
/* Or to go the gold star route...
a:link { color: orange; }
a:visited { color: blue; }
a:hover { color: green; }
*/
/* NOTE: To properly use @media queries and play nice with yahoo mail, use attribute selectors in place of class, id declarations.
table[class=classname]
Read more: http://www.campaignmonitor.com/blog/post/3457/media-query-issues-in-yahoo-mail-mobile-email/
*/
@media only screen and (max-width: 590px) {
table.responsive {
width: 300px!important;
margin-bottom: 30px!important;
}
/* this if for hidding extra space in mobile modes*/
.fakespace {
margin: 0!important;
width: 0!important;
height: 0!important;
padding: 0!important;
}
.sponsor-logo {
margin: 0 auto;
}
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #6ac2b8!important; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #6ac2b8!important; /* or whatever your want */
pointer-events: auto;
cursor: default;
}
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #6ac2b8; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #6ac2b8 !important;
pointer-events: auto;
cursor: default;
}
}
</style>
</head>
<body>
<div style="background-color: #202126!important; padding: 10px!important">
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="background-color: #202126!important; margin-left: auto; margin-right: auto;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="responsive container">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="left" class="top-left">
<tr>
<td valign="bottom">
<table cellpadding="0" cellspacing="0" border="0" class="lkheader responsive" align="left" valign="bottom">
<tr>
<td colspan="5"><a href="http://www.loyalkaspar.com/" title="Loyal Kaspar Home"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/logov2.png" class="icon-logo image_fix"/></a></td>
</tr>
<tr>
<td width="20"><a target="_blank" href="https://twitter.com/loyalkaspar" title="Loyal Kaspar Twitter"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/twitter.png" class="icon-twitter image_fix socialicon"/></a></td>
<td width="20"><a target="_blank" href="http://www.linkedin.com/company/loyalkaspar" title="Loyal Kaspar LinkedIn"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/linkedin.png" class="icon-linkedin image_fix socialicon"/></a></td>
<td width="20"><a target="_blank" href="https://vimeo.com/loyalkaspar/" title="Loyal Kaspar Vimeo"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/vimeo.png" class="icon-vimeo image_fix socialicon"/></a></td>
<td width="20"><a href="https://www.facebook.com/loyalkaspar" target="_blank" title="Loyal Kaspar Facebook"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/facebook.png" class="icon-facebook image_fix socialicon"/></a></td>
<td width="20"><a target="_blank" href="http://instagram.com/loyalkaspar" title="Loyal Kaspar Instagram"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/instagram.png" class="icon-instagram image_fix socialicon"/></a></td>
</tr>
</table>
<table width="315" height="136" cellpadding="0" cellspacing="0" border="0" class=" top-middle responsive" align="right" valign="bottom" style="color: #606067!important;">
<tr>
<td class="fakespace" valign="bottom">
<p >&nbsp;</p>
</td>
</tr>
<tr>
<td style="padding-left: 20px!important;" valign="bottom">
<p class="motto space" style="margin: 0px!important; " valign="bottom"> We are an entertainment branding agency.</p>
<p class="motto space" style="margin: 0px!important;" valign="bottom"> We connect brands to consumers through strategic insight and creative ingenuity. </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100" height="140" cellpadding="0" cellspacing="0" border="0" align="right" class="top-right responsive" style="color: #606067!important;">
<tr>
<td colspan="1" width="30" class="fakespace"><p style="width: 50px;">&nbsp;</p></td>
<td width="90" style="text-align: right;">
<table cellpadding="0" cellspacing="0" border="0" align="left" style="border-left: 4px solid #606067!important;" >
<tr valign="top" style="text-align: right;">
<td >
<p class="headertext" style="margin-left: 10px; margin-top: 0px; margin-bottom: 0px;">Issue</p><h2 class="headertext" style="font-size: 60px; margin-left: 10px; margin-top: 0px; margin-bottom: 0px;">02</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" valign="bottom" style="text-align: right;"><p class="date" style="margin-bottom: 2px; margin-top: 0;">October 29, 2013</p></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="middle responsive" style="color: #fff!important; border-top: 1px solid #606067;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" class="responsive sponsor-logo-box" align="left" style="border-bottom: 1px solid #606067;">
<tr>
<td>
<a href="http://www.promaxbda.org/events/current-events/2013-latam-mexico-city"><img alt="PromaxBDA" title="Our Partner PromaxBDA" src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/promaxbda_F_grey.png" class="image_fix sponsor-logo" /></a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="responsive headline-cap" align="right">
<tr>
<td class="fakespace">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<h2 class="headline" style="color: #f2f2f2; font-size: 42px; text-align: center; margin: 0!important; font-weight: 400; ">Oh, hello, Mexico.</h2>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="responsive subhead" align="left">
<tr>
<td colspan="2">
<h4 class="subheading" style="font-size: 18px; font-weight: 400; ">LK's Beat Baudenbacher speaks on the importance of branding in today's attention-challenged economy</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="article responsive" style="color: #fff!important;">
<tr>
<td>
<table cellpadding="5" cellspacing="0" border="0" class="responsive presentation-images" align="left">
<tr><td><a href="http://www.loyalkaspar.com/"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/beat_baudenbaucher.jpg" class="img-1 image_fix" title="Beat Baudenbacher" style=" margin-left: -4px;"></a><!-- this is super bad practice but i'm doing this because i dont have the psd to recut them --></td></tr>
<tr><td><a href="http://www.loyalkaspar.com/"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/posters.jpg" class="img-2 image_fix" title="Posters"></a></td></tr>
<tr><td><a href="http://www.loyalkaspar.com/"><img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/World_Econ_forum.jpg" class="img-3 image_fix" title="World Econ Forum"></a></td></tr>
</table>
<table cellpadding="5" cellspacing="10" border="0" class="responsive">
<tr>
<td style="color: #f2f2f2;">
<p>On October 29th, our CCO/Partner Beat Baudenbacher will be speaking at the PromaxBDA LATAM Conference in Mexico City on The Attentional Mind: Branding & Design In A World Of Limited Attention.</p>
<p>Beat recently presented on the same topic at the 2013 World Economic Forum in the People’s Republic of China, speaking to an audience of multinational business leaders and CEOs about the importance of branding and design in today's attention-challenged economy. Deemed as one of the most insightful sessions of the Forum, PromaxBDA invited Beat for a reprise for its conference in Mexico City.</p>
<p>Our work at loyalkaspar centers on the belief that design is storytelling that transcends borders and languages. In the right context, design helps us make sense of the world -- and it helps us solve problems. In his presentation, Beat will discuss how brands can connect effectively with people in this extremely noisy world by communicating with clarity, personality and purpose.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="footer responsive" style="color: #606067!important;">
<tr>
<td class="fakespace">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="300" class="ny-add responsive" align="left">
<tr>
<td>
<img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/ny-loc.png" title="New York" class="new-york">
</td>
<td>
<p class="motto" style="margin-bottom: 0!important;">13 Crosby St., Suite 402</p>
<p class="motto" style="margin-bottom: 0!important;">New York, NY 10013 </p>
<a href="tel:1-212-343-1037" style="color: #6ac2b8!important;"><span class="mobile_link" >212.343.1037</span></a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300" class="la-add responsive" align="right" >
<tr>
<td>
<img src="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/la-loc.png" title="Los Angeles" class="los-angeles">
</td>
<td>
<p class="motto" style="margin-bottom: 0!important;">8259 Melrose Avenue </p>
<p class="motto" style="margin-bottom: 0!important;"> Los Angeles, CA 90046 </p>
<a href="tel:1-323-272-4847" style="color: #6ac2b8!important;"><span class="mobile_link">323.272.4847</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="addendum responsive">
<tr>
<td class="fakespace">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<p class="mobile_link" style="text-align: center; color: #6ac2b8!important;"> <a href="http://www.loyalkaspar.com/promotion/newsletter/10-25-13/email.html" title=" View on the Web" style="color: #6ac2b8!important;">Having trouble viewing this email? View it on the web </a> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</div>
<!-- End of wrapper table -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment