Biosheet: Gallery Showing

[tesscodes]

Information

Hey guys! How about a new bio code? 👀 This bio features a simple version with stats on the left and written bio on the right; as well as a more complex hidden click version, with stats, abilities, relationships, and player info on the right in different panels. Enjoy, and let me know if there are any specific types of codes you'd like to see posted over the next few months! 💖

NAME HERE
INFO

FIELD

INFO

FIELD

INFO

FIELD

INFO

FIELD

INFO

FIELD

ABOUT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu. Vivamus dignissim, massa eget gravida tristique, massa nunc efficitur purus, eu auctor sapien lacus et arcu. Sed laoreet ante at diam luctus tincidunt. Quisque pretium orci sit amet ipsum porttitor, id efficitur felis mattis. Duis eleifend diam quam, a ornare metus eleifend sit amet. Nulla facilisis elit in turpis porttitor, ut fringilla lorem elementum. Donec condimentum nulla quis purus rutrum, eget aliquet nisi efficitur. Quisque sit amet nibh sit amet diam laoreet eleifend. Donec maximus condimentum nunc, a eleifend lorem pulvinar et. Suspendisse molestie dui mauris, et maximus nulla posuere eu. Fusce leo mauris, tempor hendrerit orci non, volutpat vestibulum libero. Ut porta volutpat tortor, ut commodo lorem.

PERSONALITY

Duis non luctus tellus. Phasellus iaculis cursus ligula, vitae rhoncus diam consequat vel. Nunc non odio ac nisl rhoncus pharetra eget sed risus. In a est facilisis, tincidunt tellus vitae, elementum lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tempus leo vel est varius convallis. Curabitur tempor justo nec lobortis congue. Etiam et aliquam turpis. Sed tortor eros, gravida non elementum in, condimentum quis est. In in feugiat arcu. Suspendisse velit est, consequat quis ex feugiat, ullamcorper volutpat diam. Maecenas pulvinar urna enim, vel interdum nunc sollicitudin vel. Sed porttitor tortor et arcu tincidunt pretium. Nunc varius libero nec nulla vehicula efficitur.

Integer posuere ante in ipsum vulputate congue. Pellentesque eu sagittis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet diam venenatis, venenatis lacus quis, blandit elit. Praesent sit amet orci ut elit blandit maximus. Nam sem felis, consequat quis ex id, bibendum efficitur magna. Sed scelerisque et dolor eget faucibus. Maecenas facilisis magna vehicula ex rutrum, sit amet tristique erat rutrum. Aliquam id diam id ligula iaculis accumsan in sed urna. Mauris pharetra lectus id est blandit sodales. Vivamus eu rhoncus enim. Sed viverra orci non dui sollicitudin ultrices. Nam vulputate est ac lacus fermentum, semper scelerisque mi lacinia. Sed ultrices velit sed egestas vulputate. Suspendisse in auctor sem. Praesent vel egestas lectus.

BACKSTORY

Cras vehicula iaculis ipsum, a posuere lectus condimentum sit amet. Quisque faucibus augue quis sapien rhoncus finibus. Suspendisse finibus augue vel mi facilisis venenatis. Pellentesque ac arcu mollis, vehicula nisi vel, pharetra turpis. Pellentesque id nunc at mauris pulvinar rhoncus in in ante. Integer lorem odio, efficitur in mi a, rutrum auctor lectus. Quisque interdum viverra metus. Nunc auctor, ligula scelerisque posuere elementum, enim lorem sollicitudin felis, quis pellentesque mauris metus a nunc. Sed ac dolor ligula. In ut odio sagittis neque molestie ultrices.

Duis non luctus tellus. Phasellus iaculis cursus ligula, vitae rhoncus diam consequat vel. Nunc non odio ac nisl rhoncus pharetra eget sed risus. In a est facilisis, tincidunt tellus vitae, elementum lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tempus leo vel est varius convallis. Curabitur tempor justo nec lobortis congue. Etiam et aliquam turpis. Sed tortor eros, gravida non elementum in, condimentum quis est. In in feugiat arcu. Suspendisse velit est, consequat quis ex feugiat, ullamcorper volutpat diam. Maecenas pulvinar urna enim, vel interdum nunc sollicitudin vel. Sed porttitor tortor et arcu tincidunt pretium. Nunc varius libero nec nulla vehicula efficitur.

Integer posuere ante in ipsum vulputate congue. Pellentesque eu sagittis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet diam venenatis, venenatis lacus quis, blandit elit. Praesent sit amet orci ut elit blandit maximus. Nam sem felis, consequat quis ex id, bibendum efficitur magna. Sed scelerisque et dolor eget faucibus. Maecenas facilisis magna vehicula ex rutrum, sit amet tristique erat rutrum. Aliquam id diam id ligula iaculis accumsan in sed urna. Mauris pharetra lectus id est blandit sodales. Vivamus eu rhoncus enim. Sed viverra orci non dui sollicitudin ultrices. Nam vulputate est ac lacus fermentum, semper scelerisque mi lacinia. Sed ultrices velit sed egestas vulputate. Suspendisse in auctor sem. Praesent vel egestas lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed interdum quam, vel pretium urna. Donec maximus sed metus aliquet laoreet. Sed bibendum nisi turpis, vel scelerisque est auctor tincidunt. Nulla euismod, leo non vehicula gravida, dolor sapien gravida ipsum, vel fermentum elit ipsum id leo. Nulla facilisi. Proin at iaculis sem.

NAME • AGE • TZ • DISCORD#1234 • PB NAME

Coding: Basic

<lj-raw><div style="margin:0 auto;width:950px;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:calibri,sans-serif;font-size:11px;color:#333;"> <!--STATS--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);padding:50px;box-sizing:border-box;"> <!--INNER--> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;"><div style="width:100%;"> <!--IMAGE--> <div style="background:#eee url(STATS_IMG)center;background-size:cover;width:140px;height:175px;margin:0 auto 10px auto;display:block;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:50%;box-sizing:border-box;"></div> <center><b>NAME_HERE</b></center><br> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> </div></div> </div> <!--BIO--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);box-sizing:border-box;padding:50px;"> <!--INNER--> <div style="background:#fff;padding:20px 20px 10px 20px;height:100%;max-height:500px;overflow:auto;line-height:1.5;text-align:justify;box-sizing:border-box;"> <!--ABOUT--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABOUT</legend> ABOUT_INFO </fieldset> <!--PERSONALITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">PERSONALITY</legend> PERSONALITY_INFO </fieldset> <!--BACKSTORY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">BACKSTORY</legend> BACKSTORY_INFO </fieldset> </div> </div> <!--PLAYER INFO--> <div style="width:100%;text-align:right;margin:5px 0 0 0;font-family:times;font-size:8px;letter-spacing:2px;text-transform:uppercase;"> NAME • AGE • TZ • DISCORD#1234 • PB NAME • <a href="https://tessisamess.insanejournal.com/140402.html" style="color:#333;text-decoration:none;">CODING</a> </div> </div></lj-raw>

NAME HERE
INFO

FIELD

INFO

FIELD

INFO

FIELD

INFO

FIELD

INFO

FIELD

ABILITIES

ABILITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu.

ABILITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu.

ABILITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu.

ABILITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu.

RELATIONSHIPS

NAMEHERE
TYPE

NAMEHERE
TYPE

NAMEHERE
TYPE

NAMEHERE
TYPE

NAMEHERE
TYPE

PLAYER INFO NAME • AGE • TZ
DISCORD#1234
PB NAME

• • • •

ABOUT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at lacus fringilla, pretium velit sed, dignissim ante. Etiam ultrices vestibulum lorem, nec tincidunt ipsum ornare ut. Quisque at lectus eget lacus vehicula tristique eu quis arcu. Vivamus dignissim, massa eget gravida tristique, massa nunc efficitur purus, eu auctor sapien lacus et arcu. Sed laoreet ante at diam luctus tincidunt. Quisque pretium orci sit amet ipsum porttitor, id efficitur felis mattis. Duis eleifend diam quam, a ornare metus eleifend sit amet. Nulla facilisis elit in turpis porttitor, ut fringilla lorem elementum. Donec condimentum nulla quis purus rutrum, eget aliquet nisi efficitur. Quisque sit amet nibh sit amet diam laoreet eleifend. Donec maximus condimentum nunc, a eleifend lorem pulvinar et. Suspendisse molestie dui mauris, et maximus nulla posuere eu. Fusce leo mauris, tempor hendrerit orci non, volutpat vestibulum libero. Ut porta volutpat tortor, ut commodo lorem.

PERSONALITY

Duis non luctus tellus. Phasellus iaculis cursus ligula, vitae rhoncus diam consequat vel. Nunc non odio ac nisl rhoncus pharetra eget sed risus. In a est facilisis, tincidunt tellus vitae, elementum lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tempus leo vel est varius convallis. Curabitur tempor justo nec lobortis congue. Etiam et aliquam turpis. Sed tortor eros, gravida non elementum in, condimentum quis est. In in feugiat arcu. Suspendisse velit est, consequat quis ex feugiat, ullamcorper volutpat diam. Maecenas pulvinar urna enim, vel interdum nunc sollicitudin vel. Sed porttitor tortor et arcu tincidunt pretium. Nunc varius libero nec nulla vehicula efficitur.

Integer posuere ante in ipsum vulputate congue. Pellentesque eu sagittis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet diam venenatis, venenatis lacus quis, blandit elit. Praesent sit amet orci ut elit blandit maximus. Nam sem felis, consequat quis ex id, bibendum efficitur magna. Sed scelerisque et dolor eget faucibus. Maecenas facilisis magna vehicula ex rutrum, sit amet tristique erat rutrum. Aliquam id diam id ligula iaculis accumsan in sed urna. Mauris pharetra lectus id est blandit sodales. Vivamus eu rhoncus enim. Sed viverra orci non dui sollicitudin ultrices. Nam vulputate est ac lacus fermentum, semper scelerisque mi lacinia. Sed ultrices velit sed egestas vulputate. Suspendisse in auctor sem. Praesent vel egestas lectus.

BACKSTORY

Cras vehicula iaculis ipsum, a posuere lectus condimentum sit amet. Quisque faucibus augue quis sapien rhoncus finibus. Suspendisse finibus augue vel mi facilisis venenatis. Pellentesque ac arcu mollis, vehicula nisi vel, pharetra turpis. Pellentesque id nunc at mauris pulvinar rhoncus in in ante. Integer lorem odio, efficitur in mi a, rutrum auctor lectus. Quisque interdum viverra metus. Nunc auctor, ligula scelerisque posuere elementum, enim lorem sollicitudin felis, quis pellentesque mauris metus a nunc. Sed ac dolor ligula. In ut odio sagittis neque molestie ultrices.

Duis non luctus tellus. Phasellus iaculis cursus ligula, vitae rhoncus diam consequat vel. Nunc non odio ac nisl rhoncus pharetra eget sed risus. In a est facilisis, tincidunt tellus vitae, elementum lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tempus leo vel est varius convallis. Curabitur tempor justo nec lobortis congue. Etiam et aliquam turpis. Sed tortor eros, gravida non elementum in, condimentum quis est. In in feugiat arcu. Suspendisse velit est, consequat quis ex feugiat, ullamcorper volutpat diam. Maecenas pulvinar urna enim, vel interdum nunc sollicitudin vel. Sed porttitor tortor et arcu tincidunt pretium. Nunc varius libero nec nulla vehicula efficitur.

Integer posuere ante in ipsum vulputate congue. Pellentesque eu sagittis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet diam venenatis, venenatis lacus quis, blandit elit. Praesent sit amet orci ut elit blandit maximus. Nam sem felis, consequat quis ex id, bibendum efficitur magna. Sed scelerisque et dolor eget faucibus. Maecenas facilisis magna vehicula ex rutrum, sit amet tristique erat rutrum. Aliquam id diam id ligula iaculis accumsan in sed urna. Mauris pharetra lectus id est blandit sodales. Vivamus eu rhoncus enim. Sed viverra orci non dui sollicitudin ultrices. Nam vulputate est ac lacus fermentum, semper scelerisque mi lacinia. Sed ultrices velit sed egestas vulputate. Suspendisse in auctor sem. Praesent vel egestas lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed interdum quam, vel pretium urna. Donec maximus sed metus aliquet laoreet. Sed bibendum nisi turpis, vel scelerisque est auctor tincidunt. Nulla euismod, leo non vehicula gravida, dolor sapien gravida ipsum, vel fermentum elit ipsum id leo. Nulla facilisi. Proin at iaculis sem.

Coding: Multi-Panel Sidebar

<lj-raw><div style="margin:0 auto;width:950px;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:calibri,sans-serif;font-size:11px;color:#333;"> <!--STATS--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);padding:50px 50px 0 50px;box-sizing:border-box;"> <div style="height:500px;overflow:hidden;"> <!--STATS--> <a name="stats"></a> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;"><div style="width:100%;"> <!--IMAGE--> <div style="background:#eee url(STATS_IMG)center;background-size:cover;width:140px;height:175px;margin:0 auto 10px auto;display:block;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:50%;box-sizing:border-box;"></div> <center><b>NAME_HERE</b></center><br> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> </div></div> <!--ABILITIES--> <a name="abilities"></a> <div style="background:#fff;padding:30px;height:100%;line-height:1.5;box-sizing:border-box;overflow:auto;"> <center style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;"><b>ABILITIES</b></center> <!--ABILITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:5px 10px 10px 10px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABILITY</legend> ABILITY_INFO </fieldset> </div> <!--RELATIONSHIPS--> <a name="relationships"></a> <div style="background:#fff;padding:30px;height:100%;line-height:1.5;box-sizing:border-box;overflow:auto;"> <center style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;"><b>RELATIONSHIPS</b></center> <!--SHIP--> <fieldset style="width:calc(50% - 15px);border:1px solid rgba(0,0,0,0.1);padding:5px 10px 10px 10px;margin:5px;font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;text-align:center;display:inline-block;box-sizing:border-box;"> <legend><img src="SHIP_ICON" style="height:70px;border:4px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%;box-sizing:border-box;"></legend> NAME<br> TYPE </fieldset> </div> <!--PLAYER INFO--> <a name="player"></a> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;text-align:center;"><div style="width:100%;"> <img src="PLAYER_ICON" style="height:90px;margin:0 auto 10px auto;display:block;border:8px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%;box-sizing:border-box;"> <center><b>PLAYER INFO</b></center> NAME • AGE • TZ<br> DISCORD#1234<br> PB NAME </div></div> </div> <!--LEFT BOTTOM NAV--> <div style="height:50px;display:flex;align-items:center;justify-content:center;line-height:0;font-size:25px;letter-spacing:7px;"> <a href="#stats" title="stats." style="color:#fff;text-decoration:none;">•</a> <a href="#abilities" title="abilities." style="color:#fff;text-decoration:none;">•</a> <a href="#relationships" title="relationships." style="color:#fff;text-decoration:none;">•</a> <a href="#player" title="player info." style="color:#fff;text-decoration:none;">•</a> </div> </div> <!--BIO--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);box-sizing:border-box;padding:50px;"> <!--INNER--> <div style="background:#fff;padding:20px 20px 10px 20px;height:100%;max-height:500px;overflow:auto;line-height:1.5;text-align:justify;box-sizing:border-box;"> <!--ABOUT--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABOUT</legend> ABOUT_INFO </fieldset> <!--PERSONALITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">PERSONALITY</legend> PERSONALITY_INFO </fieldset> <!--BACKSTORY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">BACKSTORY</legend> BACKSTORY_INFO </fieldset> </div> </div> <div style="width:100%;text-align:right;margin:5px 0 0 0;font-family:times;font-size:8px;letter-spacing:2px;text-transform:uppercase;"><a href="https://tessisamess.insanejournal.com/140402.html" style="color:#aaa;text-decoration:none;">CODING</a></div></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BG_IMG - Background border image (both sides)
STATS_IMG - Lefthand image
SHIP_ICON - Relationship icons (multi-panel only)
PLAYER_ICON - Player info icon (multi-panel only)

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 - Body text
times - Headings

Font too small? No worries! Here's your resize guide:
font-size:11px; - Body text
font-size:8px; - Written bio headings
font-size:7px; - Small text

COLORS

#fff

Content background

#333

Body text

#000

"Field" titles; written bio headings

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!