Skip to content

Instantly share code, notes, and snippets.

View cossssmin's full-sized avatar
💭
⌨

Cosmin Popovici cossssmin

💭
⌨
171 followers · 9 following
View GitHub Profile
@cossssmin
cossssmin / pine-button-filled.html
Last active November 20, 2017 13:34
Pine Button Filled
<!-- Default -->
<table bgcolor="#34BF49" cellpadding="0" cellspacing="0" role="presentation" style="border-radius: 3px;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 0 solid #34BF49; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button label</a>
</th>
</tr>
</table>
<!-- Custom: center-aligned only on mobile -->
@cossssmin
cossssmin / pine-button-outlined.html
Last active November 20, 2017 13:31
Pine Button Outlined
<!-- Default -->
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th>
<a href="http://thememountain.com" style="border: 2px solid #34BF49; border-radius: 3px; color: #34BF49; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button label</a>
</th>
</tr>
</table>
<!-- Custom: Full Width on Mobile -->
@cossssmin
cossssmin / pine-button-pill.html
Created November 20, 2017 12:55
Pine Button Pill
<table bgcolor="#34BF49" cellpadding="0" cellspacing="0" role="presentation" style="border-radius: 50px;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 0 solid #34BF49; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button text</a>
</th>
</tr>
</table>
@cossssmin
cossssmin / pine-button-alignment.html
Created November 20, 2017 13:23
Pine Button Alignment
<!-- Align: Right for Desktops and Tablets -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="640" style="padding: 0 10px;">
<table align="right" bgcolor="#34BF49" cellpadding="0" cellspacing="0" role="presentation" style="border-radius: 3px;">
<tr>
<th>
<a href="http://thememountain.com" style="border: 0 solid #34BF49; color: #FFFFFF; display: inline-block; font-size: 13px; padding: 8px 50px; text-decoration: none;">Button label</a>
</th>
</tr>
@cossssmin
cossssmin / pine-coupon-dashed.html
Last active November 23, 2017 17:53
Pine Coupon Dashed
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px;">
<table cellpadding="10" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" align="center" width="640" style="padding: 0 10px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
</tr>
@cossssmin
cossssmin / pine-coupon-filled.html
Last active November 23, 2017 17:53
Pine Coupon Filled
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col px-sm-2" bgcolor="#008DF6" width="640" style="padding: 30px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col px-sm-1" align="center" width="100%" style="padding: 30px; border: 1px solid #FFFFFF; color: #FFFFFF;">
<div style="font-size: 13px; text-transform: uppercase;">Thanks for signing up!<br>Enjoy</div>
<div style="font-size: 72px; font-weight: 700; line-height: 100%;">$10 OFF</div>
<div class="spacer" style="line-height: 15px;">&nbsp;</div>
<div style="font-size: 20px; letter-spacing: 2px; line-height: 100%; text-transform: uppercase;">Your first order</div>
@cossssmin
cossssmin / pine-coupon-with-image.html
Last active November 23, 2017 17:53
Pine Coupon With Image
<table align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="spacer" height="40" style="line-height: 40px;">&nbsp;</td>
</tr>
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col pb-sm-2" width="310" style="padding: 0 10px;">
<img src="https://picsum.photos/620/620?image=1062" class="align-sm-center" width="310" alt="Coupon Image" style="max-width: 310px; width: 100%;">
@cossssmin
cossssmin / pine-divider-default.html
Last active November 20, 2017 16:12
Pine Divider
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="divider" height="60">
<div style="border-top: 1px solid #EEEEEE; line-height: 0;">&nbsp;</div>
</td>
</tr>
</table>
@cossssmin
cossssmin / pine-feature-columns.html
Last active November 23, 2017 17:53
Pine Feature Columns
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col px-sm-2" align="center" width="290" style="padding: 30px;">
<img src="https://i.imgur.com/XqzhK67.png" width="36" alt="Download" style="max-width: 36px; width: 100%;" />
<h3>Download our app</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</td>
@cossssmin
cossssmin / pine-filled-label.html
Last active January 7, 2018 11:28
Pine Labels
<span style="display: inline-block; padding: 1px 5px; background-color: #2C3E51; border-radius: 3px; color: #FFFFFF; font-size: 90%;">filled label</span>