Skip to content

Instantly share code, notes, and snippets.

@adesignl

adesignl/email-responsive.html

Created July 22, 2013 17:25
Show Gist options
  • Save adesignl/6055781 to your computer and use it in GitHub Desktop.
Save adesignl/6055781 to your computer and use it in GitHub Desktop.
Download ZIP
Hubspot Responsive Email
Raw
email-responsive.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Campaign Monitor Newsletter</title>
<style>
a:hover {
text-decoration: underline !important;
}
td.promocell {
color:#ffffff;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0;
padding-top:15px;
padding-bottom:0;
font-weight:normal;
line-height: 1;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
.mobile-only {
display: none;
}
@media only screen and (max-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
table[class="promotable"], td[class="promocell"] {
width: 325px !important;
}
td[class="footershow"] {
width: 300px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
.mobile-only {
display: table-cell;
}
td[class="logocell"] {
padding-top: 15px !important;
padding-left: 15px !important;
width: 300px !important;
}
img[id="screenshot"] {
width: 325px !important;
height: 73px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
</style>
<!--***********************************************************************************************
* Copyright @ 2013 - Bluleadz Inbound Marketing
* 866.995.8720
* ebaum@bluleadz.com
-//////////.
ohyyyyyyyyh/
ohyyyyyyyyh/
ohyyyyyyyyh/
`-s. ohyyyyyyyyd/
`:shd- `///yhyyyyyyyyhs/////:-.`` ```````````````````````````
`/yhhhd- -dhhhhhhhhhhhhhhhhhhhhhhhso-` /++++++++++++++++++++++++o+`
.ohhhhhhd- -dhhhhhhhhhhhhhhhhhhhhhhhhhhy+` ++/////////////////////+o+.
-hdhhhhhhd- -dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh/ +++++++++++++++++++++++o+.
-ohddhhhm- -mhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdo` ++++++++++++++++++++++oo.
.+hdddm- -mdddddddddddddddddddddddddddddddo`+o+++++++++++++++++++oo.
`:ydm- .osshdddddddddmyoooosydddddddddddm-/ssssssssso++++++++ooo.
`-o. odddddddddm/ `:ddddddddddm+````````/oooooooooooo.
omddddddddmo smmmmmmmmmmo :ooooooooooso. `.
/mmmmmmmmmmd: /dmmmmmmmmmm/ -soooooooooso:............ -s+-
.hmmmmmmmmmmmhsssdmmmmmmmmmmmd. -soooooooooossoooooooooooos. -sooo:`
/mmmmmmmmmmmmmmmmmmmmmmmmmmm/ -sssssssssssssssssssssssssss. -ssssso/.
`/dmmmmmmmmmmmmmmmmmmmmmmmd/` -ssssssssssssssssssssssssssss. -ssssssss+`
-ymmmmmmmmmmmmmmmmmmmmds- -ossssssssssssssssssssssssssss. -ssssssss/`
`:shmmmmmmmmmmmmmmmho-` -ssssssssssssssssssssssssssssss. -ssssso/.
`.:+shddddddhys+:. `+oooooooooooooooooooooooooooooo. -ssso:`
``...-...`` ``````````````````````````````` -o+-`
`.`
***********************************************************************************************-->
</head>
<body bgcolor="{{ background_color }}" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:{{ background_color }};-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="{{ background_color }}">
<tr>
<td bgcolor="{{ background_color }}" width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" align="center" class="cell" style="color:#e4e4e4;">
<small style="padding: 20px 0 0 0; display: block;">Having a hard time viewing this email? <a herf="{{ content.absolute_url }}" style="color: #E87223;">Click Here</a> to view it in your browser.</small>
</td>
</tr>
<tr>
<td width="600" class="cell">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="250" bgcolor="{{ background_color }}" class="logocell">
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="20" class="hide"><br class="hide">
{% logo "my_logo" label="My Logo", alt='Sostrin Consulting' %}
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="10" class="hide"><br class="hide">
</td>
<td align="right" width="350" class="hide" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;text-shadow: 0 1px 0 #ffffff;" valign="top" bgcolor="{{ background_color }}">
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="63"><br>
<strong><span style="text-transform:uppercase;"> {{ local_dt|datetimeformat('%M / %Y') }} </span></strong></td>
</tr>
</table>
<table width="600" cellpadding="25" cellspacing="0" border="0" class="promotable">
<tr>
<td bgcolor="#E87223" width="600" colspan=2 class="promocell">
{% header "my_header" label="Email Header", header_tag="h1", value="This Is The Email Header", no_wrapper=True %}
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-233208345-jpg/images/email/email-header.jpg" width="600" height="135" id="screenshot">
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="15" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#E7AC58" nowrap><img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="{{ body_color }}">
<table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="{{ body_color }}" class="">
{% content_attribute "email_body" %}
<p>Hi&nbsp;{{ contact.firstname }},</p>
<p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p>
<p>Use a list to:</p>
<ul>
<li>Explain the value of your offer</li>
<li>Remind the reader what they&rsquo;ll get out of taking action</li>
<li>Show off your skill with bullet points</li>
<li>Make your content easy to scan</li>
</ul>
<p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p>
<p>Now wrap it all up with a pithy little reminder of how much you love them.</p>
<p>Aw. You silver-tongued devil, you.</p>
<p>Sincerely,</p>
<p>Your name</p>
{% end_content_attribute %}
</td>
</tr>
</table>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="15" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#535C73" nowrap><img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="{{ body_color }}">
<table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="{{ body_color }}" class="contentblock">
<h4 class="secondary"><strong>{% text 'header_one' label='Block Header One', value='Block Header One' %}</strong></h4>
{% rich_text 'block_one' label='Text Block One', html='<p>This is where the text should go.</p>', no_wrapper=True %}
</td>
</tr>
</table>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="15" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#B66876" nowrap><img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="{{ body_color }}">
<table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="{{ body_color }}" class="contentblock">
<h4 class="secondary"><strong>{% text 'header_Two' label='Block Header Two', value='Block Header Two' %}</strong></h4>
{% rich_text 'block_two' label='Text Block Two', html='<p>This is where the text should go.</p>', no_wrapper=True %}
</td>
</tr>
</table>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="15" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#E87223" nowrap><img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="5" height="1"></td>
<td width="100%" bgcolor="{{ body_color }}">
<table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="{{ body_color }}" class="contentblock">
<h4 class="secondary"><strong>{% text 'header_Three' label='Block Header Three', value='Block Header Three' %}</strong></h4>
{% rich_text 'block_three' label='Text Block Three', html='<p>This is where the text should go.</p>', no_wrapper=True %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="25" class="divider"><br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="{{ background_color }}">
<tr>
<td>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="30" class="divider"><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" nowrap bgcolor="{{ background_color }}" class="cell">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="380" valign="top" class="footershow">
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="8"><br>
<p style="color:#a6a6a6;font-size:12px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:15px;padding-top:0;padding-bottom:0;line-height:18px;" class="reminder">
You’re receiving this because you’re an awesome {{ site_settings.company_name }} customer or subscribed via <a href="{{ company_domain }}" style="color:#a6a6a6;text-decoration:underline;">our site</a>.</p>
<p style="color:#3ca7dd;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<a style="color: inherit;" href="{{ unsubscribe_link }}"><strong>Edit your subscription</strong></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a style="color: inherit;" href="{{ unsubscribe_link_all }}"><strong>Unsubscribe Instantly</strong></a>
</p>
</td>
<td align="right" width="220" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;text-shadow: 0 1px 0 #ffffff;" valign="top" class="hide">
<table cellpadding="0" cellspacing="0" border="0">
{% widget_block social_sharing "Social Sharing" label='Social Sharing', use_page_url=False %}
{% end_widget_block %}
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="10"><br>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:bold;">
{{ site_settings.company_name }}
</p>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:normal;">
{{ site_settings.company_street_address_1 }}<br>
{{ site_settings.company_street_address_2 }}<br>
{{ site_settings.company_city }},&nbsp;{{ site_settings.company_state }}&nbsp;{{ site_settings.company_zip }},&nbsp;{{ site_settings.company_country }}
</p>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="25" class="divider"><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td align="center" width="375" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;text-shadow: 0 1px 0 #ffffff;" valign="top" class="mobile-only">
<table cellpadding="0" cellspacing="0" border="0">
{% widget_block social_sharing "Social Sharing" label='Social Sharing', use_page_url=False %}
{% end_widget_block %}
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="10"><br>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:bold;">
{{ site_settings.company_name }}
</p>
<p style="color:#b3b3b3;font-size:11px;line-height:15px;font-family:Helvetica,Arial,sans-serif;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;font-weight:normal;">
{{ site_settings.company_street_address_1 }}<br>
{{ site_settings.company_street_address_2 }}<br>
{{ site_settings.company_city }},&nbsp;{{ site_settings.company_state }}&nbsp;{{ site_settings.company_zip }},&nbsp;{{ site_settings.company_country }}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<img border="0" src="http://cdn2.hubspot.net/hub/258034/file-232191384-gif/images/email/spacer.gif" width="1" height="25"><br>
</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