CODE: PANE - an icon-focused minimalist muse list code

[10billionghosts]

Jandelaine

voidsent au

Evanescia

who is aha?

Intern No. 3

is there a hunt??

I needed a very minimalist, quick and easy muse list code that would be matchy to WINDOW for ✨personal reasons✨ so here you go!

There is like, a greater than zero chance that I've functionally just remade a code I made once already. But, don't tell me if I did. Brother IDEK what I have and haven't made anymore. My "scraps" tag has reached dwarves digging too deep levels atp I'm going to summon the balrog of self-plagiarism eventually.

CODE HERE:
<lj-raw><div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:20px;"> <!-- ENTRY ITEMS BELOW THIS POINT --> <!-- [ITEM: name] --> <div style="width:120px;height:112px;display:grid;grid-template-columns:10px 100px 10px;grid-template-rows:80px 20px 12px"> <div style="transform:rotate(30deg);grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:3;border:1px solid #bb9a69;background:transparent"></div> <div style="transform:rotate(-30deg);grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:3;border:1px solid #bb9a69;background:transparent"></div> <!-- [icon] --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:3;border-radius:4px;background:#ccc url('IMG_URL')"></div> <!-- [label] --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:4;grid-row-start:2;height:15px;mix-blend-mode:multiply;background:#cf5e82"></div> <!-- change the background color above, change the linking URL & character name below --> <a href="#URL_HERE" style="transform:rotate(0deg);grid-column-start:1;grid-column-end:4;grid-row-start:2;height:15px;display:flex;justify-content:center;align-items:center;font-size:11px;text-align:center;font-weight:bold;;text-decoration:none;color:#fff;">Character Name</a> <!-- fully optional additional line for a subheader, delete this div if you don't want it! --> <div style="transform:rotate(0deg);grid-column-start:1;grid-column-end:4;grid-row-start:3;grid-row-end:4;display:flex;justify-content:center;align-items:start;font-size:11px;color:#8c103b">sub-header</div> </div> <!-- [ITEM: name] end --> <!-- ENTRY ITEMS ABOVE THIS POINT --> <!-- CREDIT --> <div style="width:100%;padding:5px 0;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT; end --> </div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible!

❣️ It is intended to be used with RP icons, but is coded so that you can plunk any image URL in and it'll adjust.

❣️ Be sure to change IMG_URL and #URL_HERE instances!

❣️ There is some labeling within the code to point out items you may need to change, like the banner color and placeholder text.

❣️ You can, indeed, delete that sub-header text beneath the icon if you don't want it. Just nuke the whole div.

❣️ COLORS:

• #8c103b is the default sub-header text.


• #cf5e82 is the default banner background text.


• #bb9a69 is gold and is the default color for the wireframe decoration; there are two instances of this in the code. Make sure you change both.


• #FFF is white and is the text color for the character name space.

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!