Tessisamess

F

FULLNAME HERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper viverra hendrerit. Morbi a odio vitae justo fermentum lacinia dapibus nec metus. Suspendisse mollis, urna eget condimentum sodales, tellus risus consectetur eros, id convallis dolor arcu in purus. Proin a odio in diam rhoncus venenatis ac a nisl. Phasellus tincidunt elementum augue, et vehicula nisl pulvinar a. Suspendisse sit amet pellentesque orci.

JOURNAL ABOUT CONTACT

CODING

Information

Hey guys! Some hidden info cards that could be used for character rosters, available characters, relationships, locations, etc.! There are two versions, one for a single card in an entry, and one for multiple inline cards; enjoy! 💖

Coding: Single

<lj-raw><details style="width:300px;height:400px;margin:0 auto 5px auto;background:#eee url(BACKGROUND_IMG)center;background-size:cover;border:1px solid #ddd;font-family:calibri,sans-serif;font-size:11px;color:#111;line-height:1.2;box-sizing:border-box;"> <!--HEADER--> <summary style="background:#fff;height:50px;cursor:pointer;outline:none;font-size:0;display:flex;align-items:center;padding:0 10px;color:#C57875;text-transform:uppercase;"> <!--INITIAL--> <div style="width:40px;height:calc(40px - 5px);font-size:23px;background:#C57875;clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);padding:1.5px;box-sizing:border-box;"><div style="width:100%;height:100%;background:#fff;clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);display:flex;align-items:center;justify-content:center;"> C </div></div> <div style="margin:0 0 0 10px;font-size:21px;letter-spacing:1px;"> CHARACTER </div> </summary> <!--HIDDEN CONTENT--> <div style="height:calc(400px - 50px - 2px);background:rgba(255,255,255,0.8);padding:30px;text-align:center;overflow:auto;box-sizing:border-box;"> <!--IMAGE--> <div style="background:url(GIF_URL)center top;background-size:cover;border:4px solid #C57875;height:100px;margin:0 0 20px 0;"> </div> FREETEXT_INFO <!--NAVIGATION--> <div style="margin:20px 0 0 0;letter-spacing:1px;text-transform:uppercase;"> <a href="URL1" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">JOURNAL</a> <a href="URL2" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">ABOUT</a> <a href="URL3" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">CONTACT</a> </div> </div> </details><center><a href="http://tessisamess.insanejournal.com/133437.html" style="letter-spacing:3px;font-size:8px;color:#999;text-decoration:none;">CODING</a></center></lj-raw>

Coding: MULTIPLE

<lj-raw><div style="display:flex;justify-content:center;flex-wrap:wrap;font-family:calibri,sans-serif;font-size:11px;color:#111;line-height:1.2;"> <!--CHARACTER--> <details style="width:300px;height:400px;margin:10px;background:#eee url(BACKGROUND_IMG)center;background-size:cover;border:1px solid #ddd;box-sizing:border-box;"> <!--HEADER--> <summary style="background:#fff;height:50px;cursor:pointer;outline:none;font-size:0;display:flex;align-items:center;padding:0 10px;color:#C57875;text-transform:uppercase;"> <!--INITIAL--> <div style="width:40px;height:calc(40px - 5px);font-size:23px;background:#C57875;clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);padding:1.5px;box-sizing:border-box;"><div style="width:100%;height:100%;background:#fff;clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);display:flex;align-items:center;justify-content:center;"> C </div></div> <div style="margin:0 0 0 10px;font-size:21px;letter-spacing:1px;"> CHARACTER </div> </summary> <!--HIDDEN CONTENT--> <div style="height:calc(400px - 50px - 2px);background:rgba(255,255,255,0.8);padding:30px;text-align:center;overflow:auto;box-sizing:border-box;"> <!--IMAGE--> <div style="background:url(GIF_URL)center;background-size:cover;border:4px solid #C57875;height:100px;margin:0 0 20px 0;"> </div> FREETEXT_INFO <!--NAVIGATION--> <div style="margin:20px 0 0 0;letter-spacing:1px;text-transform:uppercase;"> <a href="URL1" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">JOURNAL</a> <a href="URL2" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">ABOUT</a> <a href="URL3" style="border:1px solid #C57875;color:#C57875;text-decoration:none;margin:0 4px;padding:0 5px;">CONTACT</a> </div> </div> </details> <a href="https://tessisamess.insanejournal.com/133205.html" style="width:100%;text-align:center;margin:5px auto 0 auto;letter-spacing:3px;font-size:9px;color:#999;text-decoration:none;">CODING</a></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BACKGROUND_IMG - Card background
GIF_URL - Inset image
URL1 through URL3 - Links

Editing Guide

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

FONTS

calibri,sans-serif - All text

DIMENSIONS

300px - Card width
400px - Card height

50px - Header height
40px - Hexagon width and height

30px - Freetext padding
20px - Freetext margin

COLORS

rgba(255,255,255,0.8)

Hidden content background

#fff

Header background

#ddd

Border

#C57875

Accent color

#111

Body 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!