CR chart

[wiseoldbartender]

Lapis Agapov

Black Order . Family

Daughter, thorn in my side

Blade

Black Order. Friend

Tantruming puppy bastard

Hinoki Ayato

Black Order. Friend

Smarmy little asshole

Ardyn Lucis Caelum

Black Order. Friend

Tricksy son of a bitch

Leon S. Kennedy

Black Order. Friend

Private dick

Kafka

Black Order

Try hard psychopath

Ragna the Bloodedge

Camp 10

Rage filled bitchboy

Sampo Koski

Annoyance

Obnoxious dipshit

Diarmuid ua Duibhne

Friend

Stupid heroic lunatic

Knuckles

Kid.

Punchy little shit

Zhongli

Former Black Order. Friend

TELL YOUR FRIENDS THAT YOU'RE A GOD, FUCKASS

Eunie

Former Black Order. Friend

Obnoxious little shitbird

Sung JinWoo

Black Order. Camp 10. The Boy

I guess he's not so bad

Jusis Albarea

Black Order. Boss

Mental breakdown waiting to happen

Elliot Craig

Black Order

Spunky little twink

Frieren

Camp 10

Unsettling tiny weirdo

Hua Cheng

Friend

Sneakiest motherfucker I know

Veldora Tempest

Friend

Medieval times escapee

Edward Kenway

Friend

Yo ho fucking ho

Fujimaru Ritsuka

Ally

Scrappy little weirdo

code

Comments

New people!

[wiseoldbartender]

LEFT TEXT (RED)
<!-- CARD (left text) - character name; start --> <div style="max-width:350px;width:100%;height:120px;display:grid;grid-template-columns:10px 1fr 120px 35px;grid-template-rows:20px 80px 20px;gap:0;"> <!-- [background] make sure you're adjusting both background values --> <div style="grid-column-start:1;grid-column-end:5;grid-row-start:2;grid-row-end:3;clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);background: linear-gradient(90deg, rgba(255,57,57,1) 0%, rgba(207,0,0,1) 100%);"></div> <!-- [background, end] --> <!-- [portrait] only thing you need to change here is IMG_URL, works best with 100x100 icons --> <div style="grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:4;border-radius:50%;transform: rotate(0);border:10px solid #fff;box-shadow:2px 2px 5px rgba(0,0,0,.5);background:#aaa url('IMG_URL')center;background-size:cover;"></div> <!-- [portrait, end] --> <!-- [label] look for and change !!content between exclamation points!! and update #URL_HERE--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3;padding:10px 7px 5px 5px;transform:rotate(0);text-align:right;"> <div style="width:100%;margin:0 0 2px 0;padding:0;line-height:1;font-size: clamp(14px, 2vw, 15px);font-weight:bold;color:#fff;">!!CHARACTER NAME!!</div> <div style="width:100%;margin:0;padding:0;font-size:clamp(10px, 1vw, 11px);font-style:italic;">TITLE</div> <div style="width:100%;margin:10px 0 0;padding:0;font-size:clamp(11px, 1vw, 12px);"> desciption </div></div> <!-- [label, end] --> </div> <!-- CARD (left text) - character name; end -->

RIGHT TEXT (PINK)
<!-- CARD (right text) - character name; start --> <div style="max-width:350px;width:100%;height:120px;display:grid;grid-template-columns:35px 120px 1fr 10px;grid-template-rows:20px 80px 20px;gap:0;"> <!-- [background] make sure you're adjusting both background values --> <div style="grid-column-start:1;grid-column-end:5;grid-row-start:2;grid-row-end:3;clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%);background: linear-gradient(90deg, rgba(207,93,152,1) 0%, rgba(252,186,223,1) 100%);"></div> <!-- [background, end] --> <!-- [portrait] only thing you need to change here is IMG_URL, works best with 100x100 icons --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:4;border-radius:50%;transform: rotate(0);border:10px solid #fff;box-shadow:-2px 2px 5px rgba(0,0,0,.5);background:#aaa url('IMG_URL')center;background-size:cover;"></div> <!-- [portrait, end] --> <!-- [label] look for and change !!content between exclamation points!! and update #URL_HERE--> <div style="grid-column-start:3;grid-column-end:4;grid-row-start:2;grid-row-end:3;padding:10px 7px 5px 5px;transform:rotate(0);text-align:left;"> <div style="width:100%;margin:0 0 2px 0;padding:0;line-height:1;font-size: clamp(14px, 2vw, 15px);font-weight:bold;color:#fff;">!!CHARACTER NAME!!</div> <div style="width:100%;margin:0;padding:0;font-size:clamp(10px, 1vw, 11px);font-style:italic;">TITLE</div> <div style="width:100%;margin:10px 0 0;padding:0;font-size:clamp(11px, 1vw, 12px);"> desciption </div></div> <!-- [label, end] --> </div> <!-- CARD (right text) - character name; end -->