css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="margin: 0; padding: 0">
  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Your monthly glimpse at what you’ve been up to on Spotify</title>
    <style type="text/css">
      @media only screen and (min-device-width: 481px) {div[id="main"] {width: 480px !important;]
    </style>
    <!--[if mso]>
      <style>
        body, table, tr, td, h1, h2, h3, h4, h5, h6, center p, a, span, table.MsoNormalTable {font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !important}
      </style>
    <![endif]-->
  </head>
  
  <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0"
  marginwidth="0" style="-webkit-font-smoothing: antialiased; width: 100% !important; -webkit-text-size-adjust: none; margin: 0; padding: 0">
    <!--TEST-FORM-->
    <!--[if (mso) | (IE)]>
      <table cellpadding="0" cellspacing="0" border="0" valign="top" width="480" align="center">
        <tr>
          <td valign="top" align="left" style=" word-break:normal; border-collapse:collapse; font-family:'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; color:#555555;">
          <![endif]-->
          <table cellpadding="0" cellspacing="0" border="0" valign="top" width="100%" align="center"
          style=" width:100%; max-width:480px;">
            <tr>
              <td valign="top" align="left" style=" word-break:normal; border-collapse:collapse; font-family:'Circular', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; color:#555555;">
                <center>
                  <div id="main">
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <!--[if mso]>
                                <img style="width: 480px; display: block" width="480" src="http://aro.scdn.co/newsletters/63af2f3a30d21b4dfbc8fce85c366a73.jpg"
                                />
                              <![endif]-->
                              <!--[if mso]>
                                <div style="mso-hide: all">
                                <![endif]-->
                                <img class="hero-image-image" src="http://aro.scdn.co/newsletters/63af2f3a30d21b4dfbc8fce85c366a73.jpg"
                                width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                <!--[if mso]>
                                </div>
                              <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/c7b8903013d39375.png?mi_firstTrack=XXXX&mi_firstTrackArtist=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/c7b8903013d39375.png?mi_firstTrack=Epoch&amp;mi_firstTrackArtist=Tycho"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/artist/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/4ab049c78fe0ca1c.png?mi_topArtist1=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/4ab049c78fe0ca1c.png?mi_topArtist1=Chance The Rapper"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/artist/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/b17733e98c7f4bde.png?mi_topArtist2=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/b17733e98c7f4bde.png?mi_topArtist2=Chrome Sparks"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/artist/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/17146d393bad9a1c.png?mi_topArtist3=XXXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/17146d393bad9a1c.png?mi_topArtist3=A$AP Mob"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/artist/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/7abe788d13837574.png?mi_topArtist4=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/7abe788d13837574.png?mi_topArtist4=Baauer"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/artist/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/80d7e53b94fefc47.png?mi_topArtist5=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/80d7e53b94fefc47.png?mi_topArtist5=Bon Iver"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/496b777c0897afb5.png?mi_topTrack=XXXX&mi_toptrackArtist=XXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/496b777c0897afb5.png?mi_topTrack=Deju Vu&amp;mi_toptrackArtist=Post Malone"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/af77ecbc22ac4d0b.png?mi_topTrack2=XXX&mi_toptrackArtist2=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/af77ecbc22ac4d0b.png?mi_topTrack2=TOGETHER&amp;mi_toptrackArtist2=KAYTRANADA"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/cd9910729aa852b2.png?mi_topTrack3=XXXXX&mi_toptrackArtist3=XXXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/cd9910729aa852b2.png?mi_topTrack3=Ride Out&amp;mi_toptrackArtist3=ScHoolboy Q"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/ef25a8faca2e1708.png?mi_topTrack4=XXXXX&mi_toptrackArtist4=XXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/ef25a8faca2e1708.png?mi_topTrack4=Blast&amp;mi_toptrackArtist4=Clams Casino"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/track/" style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://mi.news.spotifymail.com/p/rp/908573ace581ef1e.png?mi_topTrack5=XXXX&mi_toptrackArtist5=XXXXX"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://mi.news.spotifymail.com/p/rp/908573ace581ef1e.png?mi_topTrack5=Huey&amp;mi_toptrackArtist5=Earl Sweatshirt"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="hero-image-root" width="100%" cellpadding="0" cellspacing="0" style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <center style="border: none; margin: 0px; padding: 0px;">
                              <a href="https://open.spotify.com/user/spotify/playlist/"
                              style="border: none; margin: 0px; padding: 0px; text-decoration: none;">
                                <!--[if mso]>
                                  <img style="width: 480px; display: block" width="480" src="http://aro.scdn.co/newsletters/9cd365989e19ce974209afcddd2206b5.jpg"
                                  />
                                <![endif]-->
                                <!--[if mso]>
                                  <div style="mso-hide: all">
                                  <![endif]-->
                                  <img class="hero-image-image" src="http://aro.scdn.co/newsletters/9cd365989e19ce974209afcddd2206b5.jpg"
                                  width="100%" align="center" alt="" style="border: none; padding: 0px; display: block; max-width: 100%; margin: 0px auto; text-align: center; width: 100%;">
                                  <!--[if mso]>
                                  </div>
                                <![endif]-->
                              </a>
                            </center>
                          </td>
                        </tr>
                        <tr class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;">
                          <td class="hero-image-padding" height="0" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 0px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <style style="border: none; margin: 0px; padding: 0px;">
                      .footer-root a.footer-link { color: #6D6D6D; text-decoration: none; font-weight: bold; }
                    </style>
                    <table class="footer-padding-root" width="100%" cellpadding="0" cellspacing="0"
                    style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%;">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr class="footer-padding" height="22" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 22px;">
                          <td colspan="3" class="footer-padding" height="22" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 22px;"></td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="footer-root" width="100%" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7"
                    style="border: none; margin: 0px; border-collapse: collapse; padding: 0px; width: 100%; background-color: rgb(247, 247, 247);">
                      <tbody valign="middle" style="border: none; margin: 0px; padding: 0px;">
                        <tr class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;">
                          <td colspan="3" class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <img class="footer-logo" src="https://aro.spotify.s3.amazonaws.com/newsletter/images/logo_footer.png"
                            width="77" height="23" alt="" style="border: none; margin: 0px; padding: 0px; display: block; max-width: 100%; width: 77px; height: 23px;">
                          </td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;">
                          <td colspan="3" class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <hr bgcolor="#D1D5D9" style="border: none; margin: 0px; padding: 0px; height: 1px; background-color: rgb(209, 213, 217);">
                          </td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr class="footer-top-padding" height="12" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 12px;">
                          <td colspan="3" class="footer-top-padding" height="12" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 12px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td class="font" valign="middle" align="left" style="border: none; margin: 0px; padding: 0px; font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; text-align: left; text-decoration: none; color: rgb(136, 137, 140); font-size: 11px; line-height: 1.65em;">Get Spotify for: &nbsp;
                            <a class="footer-separated-text" href="https://itunes.apple.com/app/spotify-music/id324684580"
                            style="border-style: none solid none none; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 7px 0px 0px; color: rgb(109, 109, 109); font-weight: bold;">iPhone</a>
                            <a class="footer-separated-text" href="https://itunes.apple.com/app/spotify-music/id324684580"
                            style="border-style: none solid; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 7px; color: rgb(109, 109, 109); font-weight: bold;">iPad</a>
                            <a class="footer-separated-text" href="https://play.google.com/store/apps/details?id=com.spotify.music"
                            style="border-style: none solid; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 7px; color: rgb(109, 109, 109); font-weight: bold;">Android</a>
                            <a class="footer-separated-text" href="https://www.spotify.com/download/"
                            style="border-style: none none none solid; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 0px 0px 7px; color: rgb(109, 109, 109); font-weight: bold;">Other</a>
                          </td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr class="footer-top-padding" height="12" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 12px;">
                          <td colspan="3" class="footer-top-padding" height="12" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 12px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td valign="middle" style="border: none; margin: 0px; padding: 0px;">
                            <hr bgcolor="#D1D5D9" style="border: none; margin: 0px; padding: 0px; height: 1px; background-color: rgb(209, 213, 217);">
                          </td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;">
                          <td colspan="3" class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td class="font" valign="middle" align="left" style="border: none; margin: 0px; padding: 0px; font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; text-align: left; text-decoration: none; color: rgb(136, 137, 140); font-size: 11px; line-height: 1.65em;">This message was sent to xxxxxxx@xxxxxxx.xxxx. If you don't want to receive these
                            emails from Spotify in the future, you can <a class="footer-link" href="https://www.spotify.com/accounts/profile"
                            style="border: none; margin: 0px; padding: 0px; font-family: Circular, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-align: left; color: rgb(109, 109, 109); text-decoration: none; font-weight: bold;"
                            align="left">edit your profile</a> or <a class="footer-link" href="#"
                            style="border: none; margin: 0px; padding: 0px; font-family: Circular, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-align: left; color: rgb(109, 109, 109); text-decoration: none; font-weight: bold;"
                            align="left">unsubscribe</a>.</td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr class="footer-middle-padding" height="33" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 33px;">
                          <td colspan="3" class="footer-middle-padding" height="33" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 33px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td class="font font-small" valign="middle" align="left" style="border: none; margin: 0px; padding: 0px; font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; text-align: left; text-decoration: none; color: rgb(136, 137, 140); line-height: 1.65em; font-size: 11px;">
                            <a class="footer-separated-text" href="https://www.spotify.com/legal/end-user-agreement/"
                            style="border-style: none solid none none; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 7px 0px 0px; color: rgb(109, 109, 109); font-weight: bold;">Terms of Use</a>
                            <a class="footer-separated-text" href="https://www.spotify.com/legal/privacy-policy/"
                            style="border-style: none solid; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 7px; color: rgb(109, 109, 109); font-weight: bold;">Privacy Policy</a>
                            <a class="footer-separated-text" href="https://www.spotify.com/about-us/contact/"
                            style="border-style: none none none solid; margin: 0px; text-decoration: none; border-right-width: 1px; border-right-color: rgb(195, 195, 195); border-left-width: 1px; border-left-color: transparent; display: inline-block; padding: 0px 0px 0px 7px; color: rgb(109, 109, 109); font-weight: bold;">Contact Us</a>
                          </td>
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td colspan="3" class="footer-top-padding" height="12" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 12px;"></td>
                        </tr>
                        <tr valign="middle" style="border: none; margin: 0px; padding: 0px;">
                          <td width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
                          <td class="font font-small" valign="middle" align="left" style="border: none; margin: 0px; padding: 0px; font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; text-align: left; text-decoration: none; color: rgb(136, 137, 140); line-height: 1.65em; font-size: 11px;">Spotify USA Inc, 45 W. 18th Street, 7th Floor, New York, NY 10011, USA</td>
                          <td
                          width="6.25%" valign="middle" style="border: none; margin: 0px; padding: 0px; width: 6.25%;"></td>
              </tr>
              <tr height="20" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 20px;">
                <td colspan="3" class="footer-bottom-padding" height="25" valign="middle" style="border: none; margin: 0px; padding: 0px; height: 25px;"></td>
              </tr>
              </tbody>
              </table>
              </div>
              </center>
          </td>
          </tr>
          </table>
          <!--[if (mso) | (IE)]>
            </td>
        </tr>
      </table>
    <![endif]-->
    <style data-ignore-inlining>
      @media print{ #_t { background-image: url('https://jcza7b7l.emltrk.com/jcza7b7l?p&d=xxxxxxx@xxxxxxx.xxxx');}} div.OutlookMessageHeader {background-image:url('https://jcza7b7l.emltrk.com/jcza7b7l?f&d=xxxxxxx@xxxxxxx.xxxx')} table.moz-email-headers-table {background-image:url('https://jcza7b7l.emltrk.com/jcza7b7l?f&d=xxxxxxx@xxxxxxx.xxxx')} blockquote #_t {background-image:url('https://jcza7b7l.emltrk.com/jcza7b7l?f&d=xxxxxxx@xxxxxxx.xxxx')} #MailContainerBody #_t {background-image:url('https://jcza7b7l.emltrk.com/jcza7b7l?f&d=xxxxxxx@xxxxxxx.xxxx')}
    </style>
    <div id="_t"></div>
    <img src="https://jcza7b7l.emltrk.com/jcza7b7l?d=xxxxxxx@xxxxxxx.xxxx" width="1"
    height="1" border="0" />
    <table width="1" height="1" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <img src="http://mi.news.spotifymail.com/p/cp/74672dd11eed2da7/o.gif" width="1"
          height="1" />
        </td>
      </tr>
    </table>
    <img src="http://wl.spotify.com/mpss/o/2gA/8dU/t.209/eguvgjulQImTPyE1W0bBlQ/o.gif"
    alt="" width="1" height="1" border="0" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;"
    />
  </body>

</html>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console