Tessisamess

Information

Hey guys! The 90s bug hit again, so let's have some some bright, fun designs! This CR chart features blurbs and cute little gradient and symbol-based sliders to indicate strength of relationship. If you love this design and want more, you can find a matching biography code on my Patreon for ten bucks, which also gets you all other codes I've posted in that tier! Enjoy! 💖

The Coding

<lj-raw><div style="width:940px;margin:0 auto;display:flex;flex-wrap:wrap;font-family:helvetica,arial,sans-serif;font-size:11px;color:#222;line-height:1.7;text-align:center;"> <!--CHARACTER--> <div style="width:calc(33.3% - 40px);margin:20px;"> <!--IMAGE--> <div style="background:#FF69B4 url(IMG_URL)center;background-size:cover;box-sizing:border-box;height:170px;border:10px solid #FF69B4;box-shadow:1px 1px 0 0 #5EE5C9,2px 2px 0 0 #5EE5C9,3px 3px 0 0 #5EE5C9;margin:0 0 -35px 0;"></div> <!--NAME--> <a href="" style="font-family:arial black;text-transform:lowercase;font-size:32px;letter-spacing:-2px;color:#5EE5C9;text-shadow:1px 1px 0 #BD5EE5,2px 2px 0 #BD5EE5,3px 3px 0 #BD5EE5;transform:rotate(-4deg);display:block;text-decoration:none;"> NAMEHERE </a> <!--RELATIONSHIP TYPE--> <span style="font-family:arial black;font-size:10px;color:#BD5EE5;">RELATIONSHIP</span> <!--RELATIONSHIP METER - CHANGE ALL INSTANCES OF 50% TO MOVE--> <div style="background:linear-gradient(to right,hotpink 50%,#5EE5C9 50%);line-height:0.2;font-size:15px;margin:5px 0 0 0;"> <!--RELATIONSHIP MARKER--> <div style="margin:0 0 0 calc(50% - 3px);text-align:left;color:#fff;text-shadow:1px 1px 0 #BD5EE5,-1px -1px 0 #BD5EE5,-1px 1px 0 #BD5EE5,1px -1px 0 #BD5EE5;">❤</div> </div> <!--RELATIONSHIP INFO - DELETE IF UNNEEDED--> <div style="border:1px dashed #bbb;border-top:none;padding:20px 10px 20px 20px;text-align:justify;"><div style="height:130px;overflow:auto;padding:0 10px 0 0;"> RELATIONSHIP_INFO </div></div> </div> <a href="http://tessisamess.insanejournal.com/" style="width:100%;margin:10px 0 0 0;font-size:8px;letter-spacing:5px;color:#bbb;text-decoration:none;">CODING BY</a></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

IMG_URL - Character image
JOURNAL_URL - Name link

Editing Guide

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

FONTS

arial black - Headings
helvetica,arial,sans-serif - Bulk text

COLORS

#5EE5C9

Title color; image shadow; empty side of meter

#FF69B4

Image border; filled in side of meter

#BD5EE5

Title shadow ; meter marker outline; relationship type

#222

Bulk text

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!