Midnights-Style Covers

[shipping]

Introduction:

I've been seeing a lot of Midnights edits lately and I thought it would make a nice HTML code for people to use for muselists, CR charts, or just for fun. Some notes:

• I tested this on chrome, firefox, safari and chrome for iOS. It will work for mobile use but it does display a bit tightly in order to help preserve the aspect ratio, so I don't recommend it if you're a heavy mobile user.
• The code expects you to have Helvetica installed. It will display in Verdana and then default sans serif if you don't have Verdana, but it is meant to display best with Helvetica.
• Links will work and be in the same gradient by default.

Multiple cover wrapper:

In order to get multiple covers to display side by side, like for a CR chart or muselist, all you need to do is wrap individual album codes in the following code. It will display 2 covers side by side on desktop at most full screens but display them in a line on mobile or on a small window.

If you only want to display one album cover, then skip this step and go onto the following one. <div style="display: flex; justify-content: center;flex-wrap: wrap; gap: 10px;"> <!--COVER CODES GO HERE--> </div>

Barnes

You gotta warm up and I haven't danced since 1943.

Rogers

When the mob and the press
and the whole world tell you to move,
your job is to plant yourself
like a tree beside the river of truth,
and tell the whole world —
“No, you move.”

Romanoff

Love is for children; I owe him a debt.

Individual cover code:

Replace the following capitalized items: COLOR1 (2 instances), COLOR2 (2 instances), NAME (1 instance), TRACKLIST (1 instance), BACKGROUNDURL (1 instance)
<div style="display: grid;grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 1.25fr 0.75fr 2fr;grid-column-gap: 0px;grid-row-gap: 0px; width: 450px; min-width: 400px; height: 450px; min-height: 400px; background: #ece8e5"> <div style=" grid-area: 1 / 2 / 2 / 4; align-self: end; justify-self: bottom; font-size: 40px;font-family: helvetica, verdana, sans serif; font-weight: 800;background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em;text-align:left; ">NAME</div> <div style="grid-area: 1 / 1 / 4 / 2; align-self: end; justify-self: left; font-family: helvetica, verdana, sans serif;font-size: 11px;font-weight: 600; background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 15px; line-height: 95%; text-align: left;">TRACKLIST</div> <div style="grid-area: 2 / 2 / 4 / 4; background: url(BACKGROUNDURL) center center; background-size: cover;"></div></div>

Wilson

What would be the point of all the pain and sacrifice if I wasn't willing to stand up and keep fighting?

Credit:

Please remember to include a credit at the bottom so other people can find this code!
<div style="text-align: right;"><small>code by <user name="shipping"></small></div>