Skip to content

Instantly share code, notes, and snippets.

@cossssmin

cossssmin/acorn-pricing-3-col-boxed.html

Last active January 16, 2018 19:22
Show Gist options
  • Save cossssmin/6e83998719cd94412f0922978f5edf18 to your computer and use it in GitHub Desktop.
Save cossssmin/6e83998719cd94412f0922978f5edf18 to your computer and use it in GitHub Desktop.
Download ZIP
Acorn Pricing Table 3 Columns Boxed
Raw
acorn-pricing-3-col-boxed.html
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 24px;">
<div class="spacer" style="line-height: 32px;">&nbsp;</div>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px; line-height: 42px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Starter Edition</div>
<div style="color: #000000; font-size: 42px;"><span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>2.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div>LowFi Sound Quality</div>
<div>Online Listening</div>
<div>Advertising</div>
<div>-</div>
<div>-</div>
<div class="spacer" style="line-height: 32px;">&nbsp;</div>
<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 1px solid #933DED; color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#933DED" style="padding: 32px 0; color: #FFFFFF; font-size: 13px; line-height: 42px;">
<div style="font-size: 16px; font-weight: 700; margin-bottom: 16px;">Premium Edition</div>
<div style="font-size: 42px;"><span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>9.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div>HiFi Sound Quality</div>
<div>Online/Offline Listening</div>
<div>No Advertising</div>
<div>-</div>
<div>-</div>
<div class="spacer" style="line-height: 32px;">&nbsp;</div>
<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 1px solid #FFFFFF; color: #FFFFFF; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="184">
<table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<tr>
<td align="center" style="padding: 32px 0; color: #666666; font-size: 13px; line-height: 42px;">
<div style="color: #000000; font-size: 16px; font-weight: 700; margin-bottom: 16px;">Pro Edition</div>
<div style="color: #000000; font-size: 42px;"><span style="font-size: 16px; mso-text-raise: 75%; vertical-align: text-top;">$</span>19.99</div>
<div style="color: #CCCCCC; font-size: 16px; line-height: 100%; margin-bottom: 16px;">/MO</div>
<div>HiFi Sound Quality</div>
<div>On/Offline Listening</div>
<div>No Advertising</div>
<div>Infinite Song Plays</div>
<div>300K Video Plays</div>
<div class="spacer" style="line-height: 32px;">&nbsp;</div>
<table align="center" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 1px solid #933DED; color: #933DED; display: block; font-size: 13px; padding: 8px 32px; text-decoration: none;">Sign Up</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer" style="line-height: 32px;">&nbsp;</div>
</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment