Skip to content

Instantly share code, notes, and snippets.

@websmith

websmith/bold.html

Created June 1, 2017 17:56
Show Gist options
  • Save websmith/8a0f8f68bcb32797d7f8b8384d6ef066 to your computer and use it in GitHub Desktop.
Save websmith/8a0f8f68bcb32797d7f8b8384d6ef066 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bold.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Camp Gladiator</title>
<!-- Web Font / @font-face : BEGIN -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,900" rel="stylesheet" type="text/css">
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
font-family: 'Raleway', sans-serif;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode: bicubic;
}
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
img.g-img+div {
display: none !important;
}
.button-link {
text-decoration: none !important;
}
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- Progressive Enhancements -->
<style>
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
</style>
</head>
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; 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: 'Raleway', sans-serif;">
Be BOLD! - Camp Gladiator
</div>
<!-- Visually Hidden Preheader Text : END -->
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div style="max-width: 600px; margin: auto;" class="email-container">
<!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr>
<td style="padding: 20px 0; text-align: center">
<a href="http://campgladiator.com" target="_blank">
<img src="https://s3.amazonaws.com/cgcdn/images/cg-full-logo-01.png" alt="Camp Gladiator Logo" width="274" height="69" style="text-align: center">
</a>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="20" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td bgcolor="#f6f6f6" height="2" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<div style="color:#99999a; font-family: 'Raleway', sans-serif; font-weight: 700; min-width:auto !important; font-size:12px; line-height:18px; text-align:center; letter-spacing:1px">
<a href="http://campgladiator.com/about/" target="_blank" style="color:#99999a; text-decoration:none"><span style="color:#99999a; text-decoration:none"><strong>ABOUT</strong></span></a> &nbsp;&nbsp;
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<a href="http://campgladiator.com/camp-gladiator-regions/" target="_blank" style="color:#99999a; text-decoration:none"><span style="color:#99999a; text-decoration:none"><strong>LOCATIONS</strong></span></a> &nbsp;&nbsp;
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<a href="http://campgladiator.com/bold/" target="_blank" style="color:#99999a; text-decoration:none"><span style="color:#99999a; text-decoration:none"><strong>BOLD</strong></span></a> &nbsp;&nbsp;
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<a href="https://account.campgladiator.com/#/store/list" target="_blank" style="color:#99999a; text-decoration:none"><span style="color:#99999a; text-decoration:none"><strong>STORE</strong></span></a>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/bold-header.jpg" aria-hidden="true" width="600"
height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff" style="background: url('https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/mission.jpg') top center;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; font-family: 'Raleway', sans-serif; font-size: 15px; line-height: 20px; color: #171717;">
<p><b>Our mission is to positively impact the physical fitness and ultimately the lives of as many people as possible.</b></p>
<p>This wouldn’t be possible without YOU - our CG community. This summer, we're asking you
to partner with us and share your free Camp code with a new Camper friend.</p>
<p><b>Together, let's impact as many lives as possible!</b></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#343433">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-family: 'Raleway', sans-serif; font-weight: 900; padding: 20px; line-height: 20px; color: #ffffff; text-align: center;">
<h1 style="text-transform: uppercase; letter-spacing: 2px;">Get Started</h1>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #c8102e; text-align: center;" class="button-td">
<a href="https://happycamper.campgladiator.com/share?code=<?php echo $data["code"]; ?>&userID=<?php echo $data["userID"]; ?>" style="background: #c8102e; border: 15px solid #c8102e; text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; font-size: 16px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;"
class="button-a">
<span style="color:#ffffff;" class="button-link">&nbsp;&nbsp;&nbsp;&nbsp;Share Your Code&nbsp;&nbsp;&nbsp;&nbsp;</span>
</a>
</td>
</tr>
</table>
<h4><?php echo $data["code"]; ?><h4>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/prizes.jpg" aria-hidden="true" width="600" height=""
alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/double-points.jpg" aria-hidden="true" width="600"
height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#aaabab" height="100%" valign="top" width="100%">
<table role="presentation" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:560px;">
<tr>
<td valign="top" width="50%" style="padding: 10px;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;">
<tr>
<td style="font-family: 'Raleway', sans-serif; text-align: left; font-size: 13px; line-height: 20px; color: #ffffff; padding: 10px 10px 0;">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/camp-checkins-title.jpg" style="display: block; margin: auto; max-width: 100%;">
<p style="font-size: 18px; line-height: 30px; letter-spacing: 1px; text-transform: uppercase;">Challenge yourself to attend camp on the double, it's worth it!!</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" style="padding: 10px;">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;">
<tr>
<td style="font-family: 'Raleway', sans-serif; text-align: left; font-size: 13px; line-height: 20px; color: #ffffff; padding: 10px 10px 0;">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/friend-referrals-title.jpg" style="display: block; margin: auto; max-width: 100%;">
<ol style="padding-left: 0; margin-top: 28px;">
<li>BOLD campers get Camp code redeemed</li>
<li>New Camper friend goes BOLD</li>
<li>Double friend referral points in your account</li>
</ol>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Two Even Columns : END -->
<!-- Hero Image, Flush : BEGIN -->
<tr>
<!-- BOLD IMAGE -->
<?php if($data["boldLevel"] == "BOLD"): ?>
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/bold.png" aria-hidden="true" width="600" height=""
alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
<?php elseif($data["boldLevel"] == "SILVER"): ?>
<!-- SILVER IMAGE -->
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/silver.png" aria-hidden="true" width="600" height=""
alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
<?php elseif($data["boldLevel"] == "GOLD"): ?>
<!-- GOLD IMAGE -->
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/gold.png" aria-hidden="true" width="600" height=""
alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
<?php elseif($data["boldLevel"] == "ELITE"): ?>
<!-- ELITE IMAGE -->
<td bgcolor="#ffffff">
<img src="https://s3.amazonaws.com/cgcdn/images/emails/happy-camper-2017/elite.png" aria-hidden="true" width="600" height=""
alt="alt_text" border="0" align="center" style="width: 100%; max-width: 600px; height: auto; background: #dddddd; font-size: 15px; line-height: 20px; color: #555555;"
class="g-img">
</td>
<?php endif; ?>
</tr>
<!-- Hero Image, Flush : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" aria-hidden="true" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" width="100%"
style="max-width: 680px;">
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="15" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td bgcolor="#f6f6f6" height="2" class="border" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<div class="hide-for-mobile">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
</div>
<a href="http://campgladiator.com/" target="_blank">
<img src="https://s3.amazonaws.com/cgcdn/emails/cg-gray-logo.jpg" border="0" width="239" style="max-width:239px" height="50"
alt="Camg Gladiator Logo">
</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="30" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
<!-- Socials -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:0pt; line-height:0pt; text-align:center" width="52">
<a href="https://www.facebook.com/CampGladiator/" target="_blank"><img src="https://s3.amazonaws.com/cgcdn/emails/facebook.jpg" border="0" width="37" style="max-width:37px"
height="37" alt="Facebook icon"></a>
</td>
<td style="font-size:0pt; line-height:0pt; text-align:center" width="52">
<a href="https://www.instagram.com/campgladiator/" target="_blank"><img src="https://s3.amazonaws.com/cgcdn/emails/instagram.jpg" border="0" width="37"
style="max-width:37px" height="37" alt="Instagram icon"></a>
</td>
<td style="font-size:0pt; line-height:0pt; text-align:center" width="52">
<a href="https://www.youtube.com/user/CampGladiator" target="_blank"><img src="https://s3.amazonaws.com/cgcdn/emails/youtube.jpg" border="0" width="37" style="max-width:37px"
height="37" alt="Youtube icon"></a>
</td>
<td style="font-size:0pt; line-height:0pt; text-align:center" width="52">
<a href="https://twitter.com/campgladiator" target="_blank"><img src="https://s3.amazonaws.com/cgcdn/emails/twitter.jpg" border="0" width="37" style="max-width:37px"
height="37" alt="Twitter icon"></a>
</td>
<td style="font-size:0pt; line-height:0pt; text-align:center" width="52">
<a href="https://www.pinterest.com/campgladiator/" target="_blank"><img src="https://s3.amazonaws.com/cgcdn/emails/pinterest.jpg" border="0" width="37"
style="max-width:37px" height="37" alt="Pinterest icon"></a>
</td>
</tr>
</table>
<!-- END Socials -->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top;" valign="top" width="350">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align: center;">
<div style="font-family: 'Raleway', sans-serif; color:#535353; text-align: center; min-width:auto !important; font-size:12px; line-height:21px;">
2017 CG Nation, L.L.C. &copy; and &trade;<span class="mobile-block"></span> All rights reserved.<br>
<a href="http://campgladiator.com" style="color: #c8102e;">campGladiator.com</a>&nbsp;&nbsp;&#149;&nbsp;&nbsp;
<a href="http://campgladiator.com/contact-us/" style="color: #c8102e;">Contact Us</a>
<br>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">
<tr>
<td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment