Tessisamess

CODE BY TESSISAMESS
CODE BY TESSISAMESS

Information

Hey guys! I just wanted to do a fun front/back playlist cover mockup for you guys that involves much less image editing for those of you who aren't as inclined towards that skill. Like my move poster mockup, this comes with alternate text styles. Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;max-width:1020px;display:flex;flex-wrap:wrap;justify-content:center;color:#fff;font-family:century gothic,helvetica,sans-serif;line-height:1;padding:5px;border:1px solid #ccc;background:#fff;text-transform:uppercase;"> <!---FRONT COVER---> <div style="background:#222 url(FRONT_COVER)center;background-size:cover;width:500px;height:500px;margin:5px;padding:20px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:flex-end;"><div> <!---STANDARD TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;"> STANDARD </h3> <!---HALF OUTLINE TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;"> Half<b style="color:#fff;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:1px;">Outline</b> </h3> <!---TWO TONE TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;"> TWO <span style="color:#4E778A;">TONE</span> </h3> <!---DESTROYED TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;color:#fff;background:url(https://i.imgur.com/C4pktYz.jpg)center;background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:invert(100%);"> DESTROYED </h3> <!---OUTLINED TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;color:#fff;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:1px;"> OUTLINED </h3> <!---GLOWING TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;color:#fff;-webkit-text-fill-color:#000;-webkit-text-stroke-color:#4E778A;-webkit-text-stroke-width:1.5px;text-shadow:0 0 2px #4E778A, 0 0 10px #4E778A;"> GLOWING </h3> <!---3D TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;color:#4E778A;-webkit-text-fill-color:#000;-webkit-text-stroke-color:#4E778A;-webkit-text-stroke-width:1.5px;text-shadow:1px 1px 0 #4E778A, 2px 2px 0 #4E778A, 3px 3px 0 #4E778A;"> 3DIMENSIONAL </h3> <!---GRADIENT TITLE---> <h3 style="font-size:40px;font-weight:normal;margin:0;color:transparent;-webkit-background-clip:text;background-image:-webkit-linear-gradient(top, #fff 0%, transparent 100%);background-image:linear-gradient(to bottom, #fff 0%, transparent 100%);"> GRADIENT </h3> </div></div> <!---BACK COVER---> <div style="background:#222 url(BACK_COVER)center;background-size:cover;width:500px;height:500px;margin:5px;padding:20px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;"> <div style="font-size:12px;line-height:2;letter-spacing:1.5px;display:flex;justify-content:center;flex-wrap:wrap;"> <!---SONG LIST---> <div style="font-weight:bold;text-align:right;margin:0 10px 0 0;"> Song<br> Song<br> Song<br> </div> <!---ARTIST LIST---> <div> Artist<br> Artist<br> Artist<br> </div> </div> </div> <!---SPOTIFY LINK---> <a href="SPOTIFY_URL" title="Play on Spotify" style="display:inline-block;width:50px;height:50px;background:#fff;border-radius:100%;margin:-45px -5px -5px auto;padding:3px;box-sizing:border-box;"> <img src="https://i.imgur.com/KWVRnSS.png" style="width:100%;"> </a> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

FRONT_COVER - Front cover background image
BACK_COVER - Back cover background image
SPOTIFY_URL - Spotify playlist link

A note: For the demo I actually used the same image for both and just sized and positioned them differently. If you have a large image that you'd like to do this with, what I did with the front cover was set the background size to 220% and positioned it to center. Then, for the back cover, I set the size to 260% and positioned it to center right. That way I had two "matching" images without actually needing two matching images.

Editing Guide

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

DIMENSIONS

1020px - Overall width (this should be your cover width multiplied by two, plus 20px for spacing.)
500px - Each cover's height and width

TITLE POSITION

The title position's default is justify-content:flex-start;align-items:flex-end;, which puts it at the bottom left. The justify spec is for horizontal alignment, and the align spec is for vertical alignment. Check out my flex alignment grid for information on how to align your title in any quadrant of the front cover.

FONTS

century gothic,helvetica,sans-serif - Overall font
font-size:40px; - Title font size
font-size:12px; - Overall font size

IMAGES

https://i.imgur.com/KWVRnSS.png - Spotify icon

COLORS

#fff

Container background and overall text and track listing text

#ccc

Border

#4E778A

Accent color on some alt titles

#000

Secondary color on some alt titles

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!