Whoops, got hyperfixated on updating an old code. DECKED! (reshuffled) is a complete rework of three trading card codes I made back in June 2020 (original post hidden). For the update, the codes have been cleaned up and commented out for ease of use, and the designs, themselves, have been slightly refined.

The cards come in three flavors:

• CCG: a 'collectable card game' card inspired by M:tG.


• IDOL: a card that emphasizes a large main portrait, mimicking the sorts of cards that used to come with movie releases in the 90s.


• MVP: a card inspired by baseball/basketball trading cards.

You NEED the outer wrapper code (the first code below) in order for these codes to work properly. Please be sure to read the HOW TO USE section, as well!

OUTER WRAPPER CODE (get this first):
<lj-cut><lj-raw><div style="max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;line-height:1.5;font-size:12px;font-family:helvetica,arial,sans-serif;"> <!-- POST YOUR CARDS BELOW THIS LINE --> <!-- POST YOUR CARDS ABOVE THIS LINE --> </div> <!-- CREDIT --> <div style="max-width:900px;width:100%;text-align:center;font-size:10px;color:#ddd"><a title="code credit!" href="https://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT --> </lj-raw>

CODE FOR CCG CARD:
<!-- CCG CARD: name --> <div style="box-sizing:border-box;width:250px;height:350px;padding:0 18px;display:grid;grid-template-columns:auto;grid-template-rows:24px 165px 24px 120px 1fr;font-family:times new roman, serif;font-size:12px;border-radius:10px;box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;background:#ccc url('IMG_URL')center;background-size:cover;"> <!-- [card name] --> <div style="grid-row-start:1;grid-row-end:2;padding:5px;line-height:2;padding:1px;"><a href="#URL_HERE" style="text-decoration:none;font-weight:bold;text-shadow:2px 1px 2px #353535;color:#fff;">!!card name here!!</a></div> <!-- [feature image] --> <div style="grid-row-start:2;grid-row-end:3;border:1px solid rgba(79, 79, 79, .9);border-radius:3px;background:#fff url('PORTRAIT_URL')center;background-size:cover;"></div> <!-- [type label] --> <div style="grid-row-start:3;grid-row-end:4;padding:5px 0;font-size:clamp(11px, 1vw, 12px);line-height:1;text-shadow:2px 1px 2px #353535;color:#fff;">!!card type here!!</div> <!-- [description] --> <div style="grid-row-start:4;grid-row-end:5;padding:5px;border:1px solid rgba(79, 79, 79, .4);border-radius:3px;line-height:1.2;font-size:12px;background:#bbb url('IMG_URL3')center;background-size:cover;color:#000;"> </lj-raw>!!your card description here!!<lj-raw> </div></div> <!-- end CCG CARD: name -->

CODE FOR IDOL CARD:
<!-- IDOL CARD: name --> <div style="box-sizing:border-box;width:250px;height:350px;display:grid;grid-template-columns:auto;grid-template-rows:15px 10px 1fr 10px 15px;overflow:hidden;border-radius:10px;font-family:arial, helvetica, sans serif;font-size:10px;box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;background:#ccc url('PORTRAIT_URL')center;background-size:cover;color:#fff;"> <!-- [top bands] --> <div style="grid-row-start:1;grid-row-end:2;background:#aaa url('IMG_URL')center;background-size:cover;"></div> <div style="grid-row-start:2;grid-row-end:3;border-bottom:1px solid rgba(53,53,53,.2);background:#bbb url('IMG_URL')center;background-size:cover;"></div> <!-- [emblem] --> <div style="grid-row-start:3;grid-row-end:4;padding:0 15px 20px;display:grid;grid-template-columns:70px 1fr;grid-template-rows:1fr 20px 40px 10px"> <!-- text banner --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:3;grid-row-end:4;padding:3px 5px;line-height:1.1;text-shadow:1px 0px 2px #353535;clip-path: polygon(0 0, 85% 0%, 100% 100%, 0% 100%);background:#aaa url('IMG_URL')center;background-size:cover;"> </lj-raw><b>CHARACTER NAME</b> subtitle subtitle <lj-raw></div> <!-- link emblem --> <a href="#URL_HERE" style="text-decoration:none;transform:rotate(0deg);grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:5;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border-radius:2px;box-shadow:1px 2px 5px #2b2b2b;font-size:25px;background:#000 url('IMG_URL')center;background-size:cover;color:#fff;">!X!</a> </div> <!-- [bottom bands] --> <div style="grid-row-start:4;grid-row-end:5;padding:5px;border-top:1px solid rgba(53,53,53,.2);background:#bbb url('IMG_URL')center;background-size:cover;"></div> <div style="grid-row-start:5;grid-row-end:6;background:#aaa url('IMG_URL')center;background-size:cover;"></div> </div> <!-- end IDOL CARD: name -->

CODE FOR MVP CARD:
<!-- MVP CARD: name --> <div style="box-sizing:border-box;width:250px;height:350px;display:grid;grid-template-columns:250px;grid-template-rows:175px 175px;overflow:hidden;border-radius:10px;box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;background:#ccc url('IMG_URL')center;background-size:cover;"> <!-- background: upper half circle --> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;border-radius:0 0 50% 50%;background:#ddd url('IMG_URL')center;background-size:cover;"></div> <!-- foreground --> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;padding:40px 45px 10px 45px;display:grid;grid-template-columns:145px 15px 30px;grid-template-rows:245px 31px 30px"> <!-- [portrait] --> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;height:235px;margin-top:15px;border-radius:10px;border:5px solid #e5e0c0;background:#aaa url('PORTRAIT_URL')center;background-size:cover;"></div> <!-- [number] --> <div style="grid-column-start:2;grid-column-end:4;width:40px;grid-row-start:1;grid-row-end:2;height:40px;margin:0 -10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:21px;font-weight:bold;text-align:center;border-radius:50%;background:#e5e0c0;color:#df3733">#</div> <!-- [upper label] --> <div style="box-sizing:border-box;grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:3;height:50px;margin:-15px -10px 0;padding:4px;border-radius:10px;line-height:1.2;text-align:center;background:#e5e0c0;color:#df3733"> </lj-raw><b>CHARACTER NAME</b> <small>subtitle</small><lj-raw></div> <!-- [lower label] --> <div style="grid-column-start:1;grid-column-end:3;width:110px;grid-row-start:3;grid-row-end:4;height:30px;margin:-12px auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border-radius:10px;text-align:center;background:#df3733;color:#e5e0c0">subtitle</div> </div></div> <!-- end MVP CARD: name -->

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible! It is most likely also compatible with InsaneJournal!

❣️ You must use the outer wrapper code for the cards to work correctly. So, grab that first, then post cards into the wrapper where indicated.

❣️ Cards will stack up to three across on the widest mobile displays, they'll shuffle down to one per line on mobile displays.

❣️ All three codes will play nice together out of the box, so if you want to use different kinds at the same time, you can!

❣️ I am being so for real right now, you do NOT have a lot of space for text on any of these cards. Double check that the text you want to use will fit by previewing the code before posting. Brevity is the heart of the ocean or whatever.

❣️ The CCG's info box will auto generate a thin scroll bar if you go over, though.

❣️ The placeholder text PORTRAIT_URL is used on all three cards to denote a space for a featured image.

❣️ Otherwise, you'll find the placeholder text IMG_URL used extensively in all three codes. IMG_URL spaces are generally best suited to low contrast images, patterns, and textures. For example, I used photos of polished gold and green leather on the example IDOL card, and the example CCG card uses a couple of repeating patterns for its two IMG_URL spaces.

❣️ IDOL and CCG come with links built in. Update the placeholder text #URL_HERE to update the link on a card, or remove href="#URL_HERE" entirely to eliminate the linking functionality.

❣️ Because these cards are mainly designed to use images for backgrounds and not flat colors, there's not a LOT of built-in color customization. You can just mess with hex codes if you do want to use colors.

• Remember, color: will change a font color, background: will change the background color of a space, and border: #px solid #hexcode will change the properties of a border.

❣️ That said, MVP does come with some default colors:

• hex code #df3733 is alternately used as a background or a font color.


• hex code #e5e0c0 is a light cream color, used for the border around the portrait, font color, and some backgrounds.

❣️ The original DECKED! card codes were REALLY unoptimized. So I have hidden the original release post, and STRONGLY advise that you update any codes you were using to these updated versions!

❣️ This code contains a credit link. I'd appreciate if you'd left it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!