Playlist: Duo

[tesscodes]

Information

Hey guys! I'm not sure how "back" I am yet, but I had a fun idea while I was browsing spotify, so here's a playlist cover with four versions. The texture and repeating text background on the manga-inspired versions are editable. Enjoy! 💖

Character Name! Subtitle

CODE

Coding: Color Block

<lj-raw><article style="width:500px;margin:0 auto;"><a href="PLAYLIST_URL" style="display:block;text-decoration:none;line-height:1;height:500px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box;"> <!--IMAGES--> <section style="margin:10% 0 0 0;background:#eee;height:60%;display:flex;justify-content:flex-end;padding:0 20px 0 0;"> <div style="background:#fff url(IMG_1)center;background-size:cover;width:30%;"></div> <div style="background:#fff url(IMG_2)center;background-size:cover;width:30%;"></div> </section> <!--TITLES--> <section style="padding:15px;font-family:calibri,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:5px;color:#111;display:flex;align-items:center;"> <b style="font-size:21px;color:#222;letter-spacing:2px;margin:0 5px 0 0;">TITLE_HERE</b> SUBTITLE_HERE </section> </a></article><div style="width:500px;margin:3px auto 0 auto;text-align:right;font-size:8px;letter-spacing:3px;"><a href="https://tessisamess.insanejournal.com/160017.html" style="color:#999;text-decoration:none;">CODE</a></div></lj-raw>

Playlist Title Character Name

CODE

Coding: Background Image

<lj-raw><article style="width:500px;margin:0 auto;"><a href="PLAYLIST_URL" style="display:block;text-decoration:none;line-height:1;height:500px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box;"> <!--IMAGES--> <section style="background:url(BG_IMG)center;background-size:cover;margin:10% 0 0 0;height:60%;"><div style="background:rgba(0,0,0,0.6);height:100%;display:flex;justify-content:flex-end;padding:0 20px 0 0;"> <div style="background:#fff url(IMG_1)center;background-size:cover;width:30%;"></div> <div style="background:#fff url(IMG_2)center;background-size:cover;width:30%;"></div> </div></section> <!--TITLES--> <section style="padding:15px;font-family:calibri,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:5px;color:#111;display:flex;align-items:center;"> <b style="font-size:21px;color:#222;letter-spacing:2px;margin:0 5px 0 0;">TITLE_HERE</b> SUBTITLE_HERE </section> </a></article><div style="width:500px;margin:3px auto 0 auto;text-align:right;font-size:8px;letter-spacing:3px;"><a href="https://tessisamess.insanejournal.com/160017.html" style="color:#999;text-decoration:none;">CODE</a></div></lj-raw>

サウンドトラック Subtitle

CODE

Coding: Manga

<lj-raw><article style="width:500px;margin:0 auto;"><a href="PLAYLIST_URL" style="display:block;text-decoration:none;line-height:1;height:500px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box;"> <!--IMAGES--> <section style="margin:10% 0 0 0;background-image:radial-gradient(rgba(0,0,0,0.15) 1px,transparent 1px),radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px);background-color:#e8e8e8;background-size:3px 3px;height:60%;display:flex;justify-content:flex-end;padding:0 15px 0 0;"> <div style="background:#eee url(IMG_1)center;background-size:cover;width:30%;margin:10px 5px;border:6px solid #fff;outline:1px solid #333;outline-offset:-1px;box-sizing:border-box;"></div> <div style="background:#eee url(IMG_2)center;background-size:cover;width:30%;margin:10px 5px;border:6px solid #fff;outline:1px solid #333;outline-offset:-1px;box-sizing:border-box;"></div> </section> <!--TITLES--> <section style="padding:15px;font-family:calibri,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:5px;color:#111;display:flex;align-items:center;"> <b style="font-size:21px;color:#222;letter-spacing:2px;margin:0 5px 0 0;">TITLE_HERE</b> SUBTITLE_HERE </section> </a></article><div style="width:500px;margin:3px auto 0 auto;text-align:right;font-size:8px;letter-spacing:3px;"><a href="https://tessisamess.insanejournal.com/160017.html" style="color:#999;text-decoration:none;">CODE</a></div></lj-raw>

私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れたバラ私は壊れ

サウンドトラック Subtitle

CODE

Coding: Manga Repeat

<lj-raw><article style="width:500px;margin:0 auto;"><a href="PLAYLIST_URL" style="display:block;text-decoration:none;line-height:1;height:500px;background:#fff;border:1px solid rgba(0,0,0,0.1);box-sizing:border-box;overflow:hidden;"> <div style="width:730px;height:900px;margin:-200px 0 -700px -100px;transform:rotate(-45deg);color:rgba(0,0,0,0.1);font-size:30px;font-weight:bold;">REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED. REPEATING BACKGROUND TEXT. JUST COPY PASTE AS MANY TIMES AS NEEDED UNTIL THE BACKGROUND OF THE CONTAINER IS FILLED.</div> <!--IMAGES--> <section style="margin:10% 0 0 0;background-image:radial-gradient(rgba(0,0,0,0.15) 1px,transparent 1px),radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px);background-color:#e8e8e8;background-size:3px 3px;height:60%;display:flex;justify-content:flex-end;padding:0 15px 0 0;position:relative;z-index:2;"> <div style="background:#eee url(IMG_1)center;background-size:cover;width:30%;margin:10px 5px;border:6px solid #fff;outline:1px solid #333;outline-offset:-1px;box-sizing:border-box;"></div> <div style="background:#eee url(IMG_2)center;background-size:cover;width:30%;margin:10px 5px;border:6px solid #fff;outline:1px solid #333;outline-offset:-1px;box-sizing:border-box;"></div> </section> <!--TITLES--> <section style="padding:15px;font-family:calibri,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:5px;color:#111;display:flex;align-items:center;position:relative;"> <b style="font-size:21px;color:#222;letter-spacing:2px;margin:0 5px 0 0;">TITLE_HERE</b> SUBTITLE_HERE </section> </a></article><div style="width:500px;margin:3px auto 0 auto;text-align:right;font-size:8px;letter-spacing:3px;"><a href="https://tessisamess.insanejournal.com/160017.html" style="color:#999;text-decoration:none;">CODE</a></div></lj-raw>

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

DIMENSIONS

500px - Playlist width and height
60% - Image container height
10% - Image container top margin
30% - Image width
20px - Images right padding

FONTS

calibri,sans-serif - Titles font
21px - Subtitle size
14px - Title size

COLORS

#fff

Container background

#eee

Image container background (Color Block version only)

#e8e8e8

Image container background (Manga versions only)

#333

Image border (Manga versions only)

#222

Title text

#111

Subtitle text

rgba(0,0,0,0.15)

Image container background pattern (Manga versions only)

rgba(0,0,0,0.1)

Container border; repeating background text (Manga Repeat version only)

rgba(0,0,0,0.6)

Background image overlay (Background Image version only); change to rgba(255,255,255,0.6) for a white overlay

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!