tesscodes | Biosheet: Io (Reply)

SINGLE PANEL DETAILS

			Character Name
		
			Subitle Line Here
		
			Strength
			⬛⬛⬜⬜⬜

			Constitution
			⬛⬛⬛⬛⬜

			Dexterity
			⬛⬛⬛⬜⬜

			Intelligence
			⬛⬛⬜⬜⬜

			Wisdom
			⬛⬛⬛⬜⬜

			Charisma
			⬛⬛⬛⬛⬛

?
				PLAYER. Name
				TZ. ABC
				CONTACT. Discord#1234

				PB. PB Name
				Code. Tessisamess
			
i
Etiam nisi tellus, tempus non risus nec, consectetur ultricies nibh. Sed vel ipsum tellus. Donec commodo vestibulum metus eget facilisis. Vivamus velit diam, condimentum vel tellus vel, dignissim tristique mi. Praesent rutrum auctor libero vel elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel pellentesque magna, vitae fringilla erat. Pellentesque pretium condimentum diam sed semper. Fusce vitae ante ac ex aliquet vestibulum.

Cras eget placerat ipsum. Nullam urna justo, molestie et libero placerat, porttitor efficitur odio. Mauris dignissim turpis quis egestas sollicitudin. Vestibulum pharetra sem nec efficitur porttitor. In felis metus, sagittis nec volutpat vitae, faucibus id quam. Donec a ipsum eget quam sodales aliquet quis eu est. Phasellus augue leo, suscipit id sem at, ultrices semper arcu. Curabitur maximus mauris sit amet pulvinar commodo. Morbi pulvinar bibendum nibh. Etiam luctus erat a lectus mollis luctus. Morbi vel dapibus justo, quis pretium orci.

Nullam egestas nec sapien id congue. Morbi at vestibulum ante, id pretium odio. Nunc gravida tincidunt cursus. Phasellus sollicitudin ante ac dui efficitur auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras magna ex, viverra eget cursus et, posuere convallis mi. Mauris molestie tortor quis sodales tempor.

Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis. Quisque malesuada ut nisi ut accumsan. Sed et rutrum mauris, sed semper orci. Proin venenatis felis justo, non ultricies mauris dignissim ac. Maecenas sit amet eros orci. Donec finibus, elit vel convallis luctus, nibh lorem pretium lectus, at maximus neque lacus vitae lectus. Quisque egestas rhoncus mi at feugiat. Maecenas ut vestibulum dolor, sed blandit neque. Nam consectetur lorem risus. Aenean mi justo, ultrices non feugiat et, varius quis dui. Aenean vestibulum ultricies nisi, sodales elementum dui pellentesque id. Phasellus viverra, nulla at mollis bibendum, neque libero cursus orci, nec dapibus turpis nulla quis magna. Pellentesque imperdiet elementum lobortis.

In leo augue, semper et blandit ut, tempus nec erat. Morbi quis auctor risus, vitae gravida diam. Nunc mattis euismod maximus. Ut in libero eu eros placerat mollis. Vestibulum at nisi finibus, bibendum ligula sit amet, feugiat sapien. Praesent in mauris a quam porta semper eget vitae lacus. Nunc iaculis lorem vel pharetra imperdiet.

MULTI-PANEL HIDDEN CLICK

			Character Name
		
			Subitle Line Here
		
			Strength
			⬛⬛⬜⬜⬜

			Constitution
			⬛⬛⬛⬛⬜

			Dexterity
			⬛⬛⬛⬜⬜

			Intelligence
			⬛⬛⬜⬜⬜

			Wisdom
			⬛⬛⬛⬜⬜

			Charisma
			⬛⬛⬛⬛⬛

?
				PLAYER. Name
				TZ. ABC
				CONTACT. Discord#1234

				PB. PB Name
				Code. Tessisamess
			
			🏠
			01
			02
			03
			04
		
Etiam nisi tellus, tempus non risus nec, consectetur ultricies nibh. Sed vel ipsum tellus. Donec commodo vestibulum metus eget facilisis. Vivamus velit diam, condimentum vel tellus vel, dignissim tristique mi. Praesent rutrum auctor libero vel elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel pellentesque magna, vitae fringilla erat. Pellentesque pretium condimentum diam sed semper. Fusce vitae ante ac ex aliquet vestibulum.

Cras eget placerat ipsum. Nullam urna justo, molestie et libero placerat, porttitor efficitur odio. Mauris dignissim turpis quis egestas sollicitudin. Vestibulum pharetra sem nec efficitur porttitor. In felis metus, sagittis nec volutpat vitae, faucibus id quam. Donec a ipsum eget quam sodales aliquet quis eu est. Phasellus augue leo, suscipit id sem at, ultrices semper arcu. Curabitur maximus mauris sit amet pulvinar commodo. Morbi pulvinar bibendum nibh. Etiam luctus erat a lectus mollis luctus. Morbi vel dapibus justo, quis pretium orci.

Nullam egestas nec sapien id congue. Morbi at vestibulum ante, id pretium odio. Nunc gravida tincidunt cursus. Phasellus sollicitudin ante ac dui efficitur auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras magna ex, viverra eget cursus et, posuere convallis mi. Mauris molestie tortor quis sodales tempor.

Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis. Quisque malesuada ut nisi ut accumsan. Sed et rutrum mauris, sed semper orci. Proin venenatis felis justo, non ultricies mauris dignissim ac.
			
					[+] Trait
				
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.

					[-] Trait
				
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.

					[+] Trait
				
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.

Skill or Ability
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.
				
Skill or Ability
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.
				
Skill or Ability
					Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.
				
							Character Name
						
							Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.
					
							Character Name
						
							Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.
					
							Character Name
						
							Nam at gravida quam, in placerat arcu. Fusce posuere est sapien, quis ornare tortor vehicula quis.

Information

Hey guys! Today we've got two setups for a bio code, one with a single section that opens and closes on click, and a second, more in-depth version for those of you who need more, with four easily repurposed sections. Default are: About, traits, skills, and relationships. I hope you have fun recoloring this code! Enjoy! ♥

Coding: Single Panel

<lj-raw><div style="width:1000px;height:600px;box-sizing:border-box;margin:0 auto;font-family:monospace;color:#BAD3E7;font-size:13px;text-shadow:1px 1px 0 rgba(0,0,0,0.7);line-height:1.6;border-radius:60px/20px;padding:50px 30px 50px 50px;display:flex;background:#0C4067 url(https://i.imgur.com/p4fsUGE.jpg)center;background-size:cover;">

<div style="width:35%;margin-right:10%;font-size:13px;text-transform:uppercase;">

<img src="SIDE_IMG" style="padding:7px;background:linear-gradient(to right,rgba(255,255,255,0.3),rgba(255,255,255,0.3) 15%,transparent 15%,transparent 85%,rgba(255,255,255,0.3) 85%);max-width:100%;max-height:210px;box-sizing:border-box;border-radius:50px/15px;">

<div style="font-size:25px;background:linear-gradient(to right,rgba(255,255,255,0.3),transparent)left bottom no-repeat;background-size:100% 5px;padding:10px 0 2px 0;">
			TITLE
		</div>
		<div style="font-size:10px;letter-spacing:2px;text-align:right;margin:5px 0 10px 0;">
			SUBTITLE
		</div>

<div style="background:linear-gradient(to bottom,rgba(255,255,255,0.2),transparent);padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;letter-spacing:1px;">

<b style="width:50%">Strength</b>
			<big style="width:50%;text-align:right">⬛⬛⬜⬜⬜</big>

<b style="width:50%">Constitution</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬛⬜</big>

<b style="width:50%">Dexterity</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Intelligence</b>
			<big style="width:50%;text-align:right">⬛⬛⬜⬜⬜</big>

<b style="width:50%">Wisdom</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Charisma</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬛⬛</big>

</div>

<details style="font-size:11px;">
			<summary style="padding:3px 8px;margin:0 10px 0 0;font-size:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);float:left;line-height:1;border-radius:30px/10px;cursor:pointer;"><b style="font-size:15px;">?</b></summary>
			<div style="padding:3px 8px;">
				<b>PLAYER.</b> Name
				<b>TZ.</b> ABC
				<b>CONTACT.</b> Discord#1234<br>
				<b>PB.</b> PB Name
				<b>Code.</b> <a href="http://tessisamess.insanejournal.com/" style="text-decoration:none;color:#BAD3E7;">Tessisamess</a>
			</div>
		</details>

</div>

<details style="width:55%;">
		<summary style="padding:5px 10px;margin:0 20px 0 0;font-size:0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);float:right;line-height:1;border-radius:30px/10px;cursor:pointer;"><b style="font-size:15px;">i</b></summary>

WRITTEN INFORMATION

</div>

</details>

</div></lj-raw>

Coding: Multi-Panel

<div style="width:35%;margin-right:10%;font-size:13px;text-transform:uppercase;">

<b style="width:50%">Strength</b>
			<big style="width:50%;text-align:right">⬛⬛⬜⬜⬜</big>

<b style="width:50%">Constitution</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬛⬜</big>

<b style="width:50%">Dexterity</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Intelligence</b>
			<big style="width:50%;text-align:right">⬛⬛⬜⬜⬜</big>

<b style="width:50%">Wisdom</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬜⬜</big>

<b style="width:50%">Charisma</b>
			<big style="width:50%;text-align:right">⬛⬛⬛⬛⬛</big>

</div>

<div style="width:55%;">

<div style="display:flex;justify-content:flex-end;margin:0 20px 0 0;font-size:12px;line-height:1;">
			<a href="#home" title="home" style="text-decoration:none;color:#BAD3E7;display:block;padding:5px 10px;margin:0 0 0 15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:30px/10px;"><b>🏠</b></a>
			<a href="#one" title="about" style="text-decoration:none;color:#BAD3E7;display:block;padding:5px 10px;margin:0 0 0 15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:30px/10px;"><b>01</b></a>
			<a href="#two" title="traits" style="text-decoration:none;color:#BAD3E7;display:block;padding:5px 10px;margin:0 0 0 15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:30px/10px;"><b>02</b></a>
			<a href="#three" title="skills" style="text-decoration:none;color:#BAD3E7;display:block;padding:5px 10px;margin:0 0 0 15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:30px/10px;"><b>03</b></a>
			<a href="#four" title="relationships" style="text-decoration:none;color:#BAD3E7;display:block;padding:5px 10px;margin:0 0 0 15px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:30px/10px;"><b>04</b></a>
		</div>

<div style="margin:25px 0 0 0;height:460px;overflow:hidden;text-align:justify;">

<a name="home"></a>
			<div style="height:460px;">
			</div>

<a name="one"></a>
			<div style="padding:0 20px 0 0;height:460px;overflow:auto;">

ABOUT INFO

</div>

<a name="two"></a>
			<div style="padding:0 20px 0 0;height:460px;overflow:auto;">

<div style="font-size:13px;background:linear-gradient(to right,rgba(255,255,255,0.3),transparent)left bottom no-repeat;background-size:100%;padding:0 0 0 10px;margin:0 0 5px 0;">
					<b>[+]</b> Trait
				</div>
					Trait info<br><br>

</div>

<a name="three"></a>
			<div style="padding:0 20px 0 0;height:460px;overflow:auto;">

<b>Skill</b>
				<div style="background:linear-gradient(to bottom,rgba(255,255,255,0.3),transparent)left bottom no-repeat;background-size:100%;padding:10px;margin:0 0 20px 0;">
					Skill info
				</div>

</div>

<a name="four"></a>
			<div style="padding:0 20px 0 0;height:460px;overflow:auto;">

<div style="display:flex;font-size:11px;margin:0 0 20px;">
					<img src="ICON_URL" style="padding:7px;background:linear-gradient(to right,rgba(255,255,255,0.3),rgba(255,255,255,0.3) 15%,transparent 15%,transparent 85%,rgba(255,255,255,0.3) 85%);width:90px;height:90px;box-sizing:border-box;border-radius:50px/15px;">
					<div style="width:100%;margin:0 0 0 10px;">
						<div style="font-size:13px;background:linear-gradient(to right,rgba(255,255,255,0.3),transparent)left bottom no-repeat;background-size:100%;padding:0 0 0 10px;margin:15px 0 5px -10px;">
							Character Name
						</div>
							Relationship info
					</div>
				</div>

</div>

</div>
	</div>

</div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

SIDE_IMG - Sidebar picture
TITLE - Sidebar title
SUBTITLE - Sidebar subtitle
ICON_URL - Userpic for relationship (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

monospace - Overall font

IMAGES

https://i.imgur.com/p4fsUGE.jpg - Background image

COLORS

255,255,255 RGBA color format for all white borders and backgrounds

#BAD3E7 All text and links

#0c4067 Container background (if removing background image or using an image with transparency)

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!

Biosheet: Io

SINGLE PANEL DETAILS

MULTI-PANEL HIDDEN CLICK

Information

Coding: Single Panel

Coding: Multi-Panel

Installation Guide

Editing Guide

Terms of Use

Post a comment in response: