Tessisamess

Information

Hey guys! I made this for myself the other day and couldn't resist sharing; it just came out so cute!! This code is easily resized with just one pixel measurement to replace, with calculations and percentages resizing the rest of the code with scaling preserved. 💖 Enjoy!

Coding: Single

<lj-raw><div style="margin:0 auto;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;height:400px;width:calc(400px + (400px / 2));"> <!---RECORD---> <a href="SPOTIFY_URL" title="Listen" style="margin:0 0 0 calc((400px / 2.1) / -1);width:calc(400px - 10px);height:calc(100% - 10px);border-radius:100%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#151515 0,#151515 2px,#000 2px,#000 5px);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);transform:rotate(30deg);filter:grayscale(50%);"> <!---RECORD LABEL---> <div style="width:35%;height:35%;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#999 url(COVER_URL)center;background-size:200%;"> <div style="width:10px;height:10px;border-radius:100%;background:#fff;box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.3);"> </div> </div> </a> <!---ALBUM SLEEVE---> <div style="width:400px;height:100%;background:#444 url(COVER_URL)center;background-size:cover;position:relative;box-shadow:5px 0 5px 0 rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;"> <!---ALBUM TITLE---> <div style="background:#000;padding:3px 10px 3px 12px;font-family:monospace;color:#fff;font-size:10px;letter-spacing:2px;"> TITLE_HERE </div> </div> </div> <div style="margin:3px auto 0 auto;width:calc(400px + (400px / 2));font-size:7px;letter-spacing:2px;font-family:monospace;"><a href="http://tessisamess.insanejournal.com/" style="text-decoration:none;color:#aaa;">CODE BY</a></div></lj-raw>

Coding: Multiple

<lj-raw><div style="display:flex;flex-wrap:wrap;justify-content:center;font-family:monospace;color:#fff;font-size:10px;letter-spacing:2px;"> <!--RECORD & SLEEVE--> <div style="margin:10px;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;height:400px;width:calc(400px + (400px / 2));"> <!---RECORD---> <a href="SPOTIFY_URL" title="Listen" style="margin:0 0 0 calc((400px / 2.1) / -1);width:calc(400px - 10px);height:calc(100% - 10px);border-radius:100%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#151515 0,#151515 2px,#000 2px,#000 5px);box-shadow:0 0 3px 1px rgba(0,0,0,0.3);transform:rotate(30deg);filter:grayscale(50%);"> <!---RECORD LABEL---> <div style="width:35%;height:35%;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#999 url(COVER_URL)center;background-size:200%;"> <div style="width:10px;height:10px;border-radius:100%;background:#fff;box-shadow:inset 1px 1px 3px 0 rgba(0,0,0,0.3);"> </div> </div> </a> <!---ALBUM SLEEVE---> <div style="width:400px;height:100%;background:#444 url(COVER_URL)center;background-size:cover;position:relative;box-shadow:5px 0 5px 0 rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;"> <!---ALBUM TITLE---> <div style="background:#000;padding:3px 10px 3px 12px;"> TITLE_HERE </div> </div> </div> <!--PASTE NEW RECORD--> </div><div style="margin:3px auto 0 auto;width:100%;text-align:center;font-size:9px;letter-spacing:4px;font-family:monospace;"><a href="http://tessisamess.insanejournal.com/" style="text-decoration:none;color:#aaa;">CODING BY</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!

TO RESIZE

In Notepad (or similar) run Replace All on 400px and the math will do the rest!

FONT STYLING

font-family:monospace;color:#fff;font-size:10px;letter-spacing:2px;

PLACEHOLDERS

COVER_URL - Cover image and record label image
SPOTIFY_URL - Playlist link
TITLE_HERE - Album cover title

COLORS

#fff

Cover title text

#000

Cover title background

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!