Remember Santeria by Sublime?Email template
HTML19.94 Kb
<!DOCTYPE html>
<html lang="en" style="margin: 0; padding: 0; height: 100%; width: 100%;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>Remember Santeria by Sublime?</title>
<style type="text/css">
.tiny-prose :first-child {
margin-top: 0
}
.tiny-prose ul,
.tiny-prose ol {
list-style-position: outside;
padding: 0 0 0 1rem;
}
.tiny-prose ul li p,
.tiny-prose ol li p {
margin-top: .25em;
margin-bottom: .25em
}
.tiny-prose li p {
margin: .25em 0 .25em 0;
}
.tiny-prose li p:first-child {
margin-top: 0;
}
.tiny-prose li p:last-child {
margin-bottom: 0;
}
.tiny-prose ul {
list-style-type: disc;
}
.tiny-prose ol {
list-style-type: decimal;
}
.tiny-prose ul ul,
.tiny-prose ol ul {
list-style-type: circle;
}
.tiny-prose ol ol,
.tiny-prose ul ol {
list-style-type: lower-roman;
}
</style>
<style type="text/css">
* {
margin: 0px;
text-decoration: none;
color: currentColor;
}
table,
tbody,
tr,
td {
line-height: 1;
}
</style>
<style type="text/css">
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyeMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyfMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dthjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc2dphjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdthjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTch9thjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTc69thjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcB9xhjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcPtxhjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTcWdxhjZ-Ek-7MeA.ttf) format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCM3FwrK3iLTcvneQg7Ca725JhhKnNqk4j1ebLhAm8SrXTccNxhjZ-Ek-7MeA.ttf) format('truetype');
}
</style>
</head>
<body style="margin: 0; padding: 0; height: 100%; width: 100%; color:rgb(85,85,85);font-family:Inter;background:radial-gradient(circle, #ffffffff 0%, #ffffffff 100%);">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;text-align:center;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="center" valign="top">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;max-width:480px;position:relative;text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="left" valign="top">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;background:radial-gradient(circle, #ffffffff 0%, #ffffffff 100%);text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="left" valign="top">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;background:radial-gradient(circle, #1A2656 0%, #1A2656 100%);text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="left" valign="top">
<td><img style="vertical-align:middle;width:100%;position:static;object-fit:scale-down;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://pagenflow-files.s3.us-east-1.amazonaws.com/media-c9b5b40d0eab-785b3cf1c20ba7f14edd483cb80aa43e.gif" alt="Image" width="auto" height="auto" loading="eager" /></td>
</tr>
<tr align="left" valign="top">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;padding-top:24px;padding-left:24px;padding-right:24px;padding-bottom:48px;background:radial-gradient(circle, #1A2656 0%, #1A2656 100%);text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="left" valign="top">
<td><span class="tiny-prose" style="position:relative;text-align:center;vertical-align:initial;box-sizing:border-box;display:block;">
<p><span style="color: rgb(255, 255, 255); font-size: 16px; line-height: 24px">Your Time Capsule is a new personalized playlist, packed with iconic tracks to take you back in time. Enjoy 2 hours of the most memorable tracks from your teenage years, like </span><span style="color: #ffffffff; font-size: 16px; line-height: 24px">Santeria </span><span style="color: rgb(255, 255, 255); font-size: 16px; line-height: 24px">by </span><span style="color: #F037A5; font-size: 16px; line-height: 24px">Sublime</span><span style="color: rgb(255, 255, 255); font-size: 16px; line-height: 24px"> and </span><span style="color: #F037A5; font-size: 16px; line-height: 24px">Black Hole Sun</span><span style="color: rgb(255, 255, 255); font-size: 16px; line-height: 24px"> by </span><span style="color: #F037A5; font-size: 16px; line-height: 24px">Soundgarden</span><span style="color: rgb(255, 255, 255); font-size: 16px; line-height: 24px">, and more.</span></p>
</span></td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;text-align:center;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr style="display:block;" align="center" valign="middle">
<td><a style="color:#ffffffff;display:block;font-size:14px;position:relative;font-weight:500;padding-top:14px;padding-left:64px;padding-right:64px;padding-bottom:14px;text-transform:uppercase;background-color:#D9D9D9;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;background:radial-gradient(circle, #F037A5 0%, #F037A5 100%);text-align:center;vertical-align:middle;box-sizing:border-box;" href="#">Listen now</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr align="left" valign="top">
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;padding-top:36px;padding-left:24px;padding-right:24px;padding-bottom:36px;background:radial-gradient(circle, #F7F7F7 0%, #F7F7F7 100%);text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr align="left" valign="top">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;text-align:left;vertical-align:top;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr style="display:block;" align="left" valign="top">
<td style="width:auto;"><img style="vertical-align:middle;width:77px;position:static;object-fit:scale-down;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" src="https://pagenflow-files.s3.us-east-1.amazonaws.com/media-21fd11ac4665-logo-footer-1-.png" alt="Image" width="auto" height="auto" loading="eager" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td style="display:block;width:100%;">
<span style="width:100%;height:1px;position:relative;margin-top:0px;margin-bottom:0px;background:radial-gradient(circle, #d1d5d9 0%, #d1d5d9 100%);text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;"></span>
</td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td><span class="tiny-prose" style="position:relative;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;">
<p><span style="color: rgb(136, 137, 140); font-size: 11px; line-height: 24px">This message was sent to {{support_email}}. If you have questions or complaints, please </span><a target="_blank" rel="noopener noreferrer nofollow" data-disable-nprogress="true" href="https://support.spotify.com/uk/article/contact-us/"><span style="color: rgb(136, 137, 140); font-weight: 600; font-size: 11px; line-height: 24px">contact us</span></a><span style="color: rgb(136, 137, 140); font-size: 11px; line-height: 24px">.</span></p>
</span></td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;text-align:left;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr style="display:block;" align="left" valign="middle">
<td style="width:auto;"><span style="color:#88898c;font-size:11px;position:relative;text-align:left;font-weight:400;line-height:16px;white-space:pre-line;vertical-align:initial;box-sizing:border-box;display:block;">Get Spotify for:</span></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://apps.apple.com/us/app/spotify-music-and-podcasts/id324684580" target="_blank">iPhone</a></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://apps.apple.com/us/app/spotify-music-and-podcasts/id324684580" target="_blank">iPad</a></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://play.google.com/store/apps/details?id=com.spotify.music&hl=en" target="_blank">Android</a></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://www.spotify.com/de-en/download/windows/" target="_blank">Windows</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td style="display:block;width:100%;">
<span style="width:100%;height:1px;position:relative;margin-top:0px;margin-bottom:0px;background:radial-gradient(circle, #d1d5d9 0%, #d1d5d9 100%);text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;"></span>
</td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;display:table;position:relative;text-align:left;vertical-align:middle;box-sizing:border-box;table-layout:fixed;">
<tbody>
<tr style="display:block;" align="left" valign="middle">
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://www.spotify.com/legal" target="_blank">Terms of use</a></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><span style="color:#c3c3c3;font-size:16px;position:relative;text-align:left;font-weight:300;line-height:24px;white-space:pre-line;vertical-align:initial;box-sizing:border-box;display:block;">|</span></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://www.spotify.com/legal/privacy-policy/" target="_blank">Privicy policy</a></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><span style="color:#c3c3c3;font-size:16px;position:relative;text-align:left;font-weight:300;line-height:24px;white-space:pre-line;vertical-align:initial;box-sizing:border-box;display:block;">|</span></td>
<td style="width:8px;min-width:8px;"></td>
<td style="width:auto;"><a style="color:#88898c;font-size:11px;position:relative;font-weight:700;line-height:16px;text-align:initial;vertical-align:initial;box-sizing:border-box;display:block;" href="https://support.spotify.com/uk/article/contact-us/" target="_blank">Contact us</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height:24px;min-height:24px;"></tr>
<tr align="left" valign="top">
<td><span style="color:#88898c;font-size:11px;position:relative;text-align:left;font-weight:400;line-height:24px;white-space:pre-line;vertical-align:initial;box-sizing:border-box;display:block;">Spotify USA Inc, 4 World Trade Center, 150 Greenwich Street, 62nd Floor, New York, NY 10007, USA</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>Share
CloneDisclaimer
This email template was created using Pagenflow's email template builder. Please note that Spotify as an entity was not involved in the creation, design, or distribution of this template.
Compatible with multiple email service providers
Proton mail
Zoho mail
Gmail
Yahoo mail
Microsoft outlookTake a lookNo signup required
Powerful HTML Email Template builder
Tired of designing and coding emails from scratch? Pagenflow's HTML templates help business owners streamline workflows, boost conversions, and elevate email marketing effortlessly.
Effortless No-Code Email Creation
Pagenflow is a fully no-code Spotify email template builder designed for simplicity and efficiency. With its visually intuitive interface, you can create stunning emails without any technical expertise. Whether you're a beginner or a seasoned marketer, Pagenflow makes email design and development effortless.
Drag, Drop, Done: Build Emails in Minutes
Build emails faster with Pagenflow's drag-and-drop editor. Choose from hundreds of pre-made email modules and essential components, such as buttons, images, and text blocks. Simply drag, drop, and customize to create professional emails in minutes—no coding required.
Flawless Responsive Emails for Every Device
Ensure your emails look perfect on any screen with Pagenflow's built-in, pre-made Spotify responsive email templates. Use our mobile controllers to fine-tune how your templates appear on mobile devices, delivering a seamless experience for every recipient.
20x Faster Email Production
Accelerate your email design process by 20x with Pagenflow. Our Spotify HTML email templates are optimized for speed, allowing you to focus on strategic email marketing tasks while saving valuable time. Say goodbye to tedious design work and hello to efficiency.
Custom Layouts for Wrapped Templates
Design versatile and structured email layouts with Pagenflow's advanced wrapper tools. Create custom wrappers for your Spotify templates to ensure a consistent and polished look across all your campaigns. Perfect for multi-section emails or complex designs.
On-Brand Emails, Every Time
Maintain consistent branding across all your emails with Pagenflow's customizable branding tools. Easily add your logo, brand colors, and fonts to ensure every email aligns with your brand identity, creating a cohesive and professional look.
How to Edit Spotify Email Template in a Few Simple Steps
Follow these steps to clone, customize, and export your email template using our free email template builder. Whether you're updating content, changing designs, or exporting the final result, this guide will walk you through the process.
Step 1
Clone the Email Template
Start by cloning the email template you want to edit. Cloning creates a duplicate of the original template, allowing you to make changes without affecting the original design.
This step ensures you have a fresh copy to work with, preserving the original template for future use.
Step 2
Update the Template Content
Once you've cloned the template, update its content to suit your needs. This includes changing text, images, buttons, and other elements.
- Use the drag-and-drop editor to modify text blocks, replace images, or add new elements like buttons or dividers.
- Customize the content to match your message, such as updating headlines, body text, or call-to-action buttons.
This step allows you to tailor the template to your specific campaign or purpose.
Step 3
Customize the Design
After updating the content, customize the design of the template to align with your brand or preferences.
- Change colors, fonts, and spacing to match your brand's style guide.
- Adjust the layout by resizing sections, rearranging elements, or adding new design components.
- Use the real-time preview feature to see how your changes look as you make them.
This step ensures your template is visually appealing and consistent with your brand identity.
Step 4
Test the Template
Before finalizing your template, test it to ensure it looks great across different devices and email clients.
- Use the “Preview” feature to see how the template renders on desktop, tablet, and mobile devices.
- Send a test email to yourself or your team to check for any formatting issues or errors.
This step helps you catch and fix any issues before sending the email to your audience.
Step 5
Export the Template
Once you're satisfied with your customized template, export it for use in your email campaigns.
This step finalizes your template and makes it ready for use in your campaigns.
