Tessisamess

Information

Hey guys! It's sci-fi month, which means all free and Patreon-exclusive codes are going to be looking towards the future, with lots of gradients, non-standard shapes, overlays, and slick designs for a high-tech look! Kicking off the month, based on poll results indicating high demand, we've got a cast list!

These cast cards default to support any size image, whether you want icons, gifs, or your own custom shape, so don't worry—your image preference will fit with no editing needed! My only recommendation is that you use the same dimensions for all entries to avoid mismatched card lengths, but that's up to you! Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;font-family:monospace;font-size:10px;color:#BAD3E7;letter-spacing:1px;text-align:center;text-transform:uppercase;"> <!---SECTION HEADER---> <div style="width:100%;margin:0 0 10px 0;font-size:45px;letter-spacing:-4px;font-family:arial black;color:transparent;-webkit-background-clip:text;background-image:-webkit-linear-gradient(top, #BAD3E7 0%, #0c4067 100%);background-image:linear-gradient(to bottom, #BAD3E7 0%, #0c4067 100%);"> <b>Section Title</b> </div> <!---CHARACTER CARD---> <div style="width:230px;margin:10px;padding:2px;background:#5198CD;-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);"><div style="background:#0C4067;background:-moz-linear-gradient(top, #0C4067 0%, #041A2F 100%);background:-webkit-linear-gradient(top, #0C4067 0%,#041A2F 100%);background:linear-gradient(to bottom, #0C4067 0%,#041A2F 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0C4067', endColorstr='#041A2F',GradientType=0);-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);box-sizing:border-box;padding:30px;"> <img src="IMG_URL" style="max-width:100%;border-radius:30%;padding:5px;border:1px solid #296A9E;box-sizing:border-box;"> <div style="padding:10px 0;font-size:15px;letter-spacing:0;font-family:arial black;"><b> CHARACTER_NAME </b></div> <a href="BIO_URL" style="border:1px solid #296A9E;color:#fff;text-decoration:none;display:block;padding:5px;margin:0 0 5px 0;-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);">BIOGRAPHY</a> <a href="CONTACT_URL" style="border:1px solid #296A9E;color:#fff;text-decoration:none;display:block;padding:5px;margin:0 0 5px 0;-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);">CONTACT</a> <a href="IC_URL" style="border:1px solid #296A9E;color:#fff;text-decoration:none;display:block;padding:5px;margin:0 0 5px 0;-webkit-clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);clip-path:polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);">IC TAG</a> <div style="font-size:9px;color:rgba(255,255,255,0.6);"> <b>PB</b> PB_NAME </div> </div></div> <!---FOOTER - DO NOT REMOVE---> <a href="http://tessisamess.insanejournal.com/" style="width:100%;margin:25px 0 0 0;border-top:1px solid #BAD3E7;text-align:right;color:transparent;-webkit-background-clip:text;background-image:-webkit-linear-gradient(top, #BAD3E7 0%, #0c4067 100%);background-image:linear-gradient(to bottom, #BAD3E7 0%, #0c4067 100%);"> CODE BY </a> </div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

Section Title - First section title or overall cast header; dealer's choice! (Or delete if unneeded!)

IMG_URL - Character image
CHARACTER_NAME - Character name
BIO_URL - Bio/app link
CONTACT_URL - Dropbox link
IC_URL - IC tag link
PB_NAME - PB name

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

DIMENSIONS

max-width:1100px; - Overall container width
width:230px; - Each card width
max-width:100%; - Each card image

FONTS

monospace - Overall font
arial black - Section and name header font

COLORS

rgba(255,255,255,0.6)

PB name text

#fff

Link text

#bad3e7

Overall text; section title: top of text gradient

#5198cd

Card border

#296a9e

Link border

#0c4067

Card background: Top of gradient; section title: bottom of text gradient

#041a2f

Card background: Bottom of gradient

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!