Scrolling Playlist

[millennialfalcon]

---

lorem ipsum dolor sit amet
this is line two
line three with a line break

then line four is the start
of a new paragraph

Artist - Song Title

lorem ipsum dolor sit amet
this is line two
line three with a line break

then line four is the start
of a new paragraph

Artist - Song Title

lorem ipsum dolor sit amet
this is line two
line three with a line break

then line four is the start
of a new paragraph

Artist - Song Title

lorem ipsum dolor sit amet
this is line two
line three with a line break

then line four is the start
of a new paragraph
if the lyrics are really long
like
really
really
really
really
really
really
really
really
really
really
really
really
really
really
really
really
really long
as in this example here
then the image block will automatically resize to fit

Artist - Song Title

on spotify   on 8tracks

THE CODE:
<raw-code><center><div style="width:650px;display:flex;font-family:serif;flex-wrap:wrap;margin:0 auto;"> <!--HEADER IMAGE--> <div style="padding:20px;width:100%;height:200px;background:url(HEADER_IMGURL)center;background-size:cover;margin-bottom:10px"> </div> <!--ODD ROW BEGIN--> <!--LEFT IMAGE--> <div style="padding: 20px 0 20px 0;background:url(IMGURL)center; background-size:cover;width:50%;min-height:300px;"> </div> <!--RIGHT LYRICS--> <div style="padding: 20px 0 20px 0;width:50%;margin: auto;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="text-align: right;">Artist - <a href="SONGURL">Song Title</a></div> </div> <!--ODD ROW END--> <!--EVEN ROW BEGIN--> <!--LEFT LYRICS--> <div style="padding: 20px 0 20px 0;width:50%;margin: auto;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="text-align: left;">Artist - <a href="SONGURL">Song Title</a></div> </div> <!--RIGHT IMAGE--> <div style="padding: 20px 0 20px 0;background:url(IMGURL)center; background-size:cover;width:50%;min-height:300px;"> </div> <!--EVEN ROW END--> <!--ODD ROW BEGIN--> <!--LEFT IMAGE--> <div style="padding: 20px 0 20px 0;background:url(IMGURL)center; background-size:cover;width:50%;min-height:300px;"> </div> <!--RIGHT LYRICS--> <div style="padding: 20px 0 20px 0;width:50%;margin: auto;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="text-align: right;">Artist - <a href="SONGURL">Song Title</a></div> </div> <!--ODD ROW END--> <!--EVEN ROW BEGIN--> <!--LEFT LYRICS--> <div style="padding: 20px 0 20px 0;width:50%;margin: auto;"> <center><i>LYRICTEXT<br/><br/></i></center> <div style="text-align: left;">Artist - <a href="SONGURL">Song Title</a></div> </div> <!--RIGHT IMAGE--> <div style="padding: 20px 0 20px 0;background:url(IMGURL)center; background-size:cover;width:50%;min-height:300px;"> </div> <!--EVEN ROW END--> <!--FOOTER--> <div style="padding:20px;width:100%;background-size:cover;margin-bottom:10px;font-family:'sans serif';"><center><img src="https://i.imgur.com/zulXkv1.png" height=15> <a href="SPOTIFY_URL" style="text-decoration:none;">on spotify</a>   <img src="https://i.imgur.com/0THch9W.png" height=15> <a href="8TRACKS_URL" style="text-decoration:none;">on 8tracks</a></center></div> </div></center></raw-code>


FIND AND REPLACE:

• width:650px - Width of the code (you can make it wider or narrower)
  
• HEADER_IMGURL - Your header image
  
• height:200px - Height of the header image (you can make it taller or shorter, image will resize to fit)
  
• IMGURL - Each block image
  
• min-height:300px - Minimum height of each image
  
• LYRICTEXT - Lyrics. Make sure you put a <br/> after each line and a <br/><br/> after each paragraph
  
• Artist - Self explanatory
  
• SONGURL - YouTube link
  
• Song Title - Self explanatory
  
• SPOTIFY_URL - Link to the playlist on Spotify
  
• 8TRACKS_URL - Link to the playlist on 8tracks
  
• You can copy and paste the code between <!--ODD ROW BEGIN--> and <!--ODD ROW END--> to add rows with the image on the left, and the same for <!--EVEN ROW BEGIN--> and <!--EVEN ROW END--> for rows with the image on the right.
  

PLEASE CREDIT: chriscodes