Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

ABOUT PERSONALITY ABILITIES BACKSTORY CODING

ABOUT

Character Name

NAME

AGE

Gender

GENDER

0'0"

HEIGHT

Body type

BUILD

Hair color

HAIR

Eye color

EYES

FIRST IMPRESSIONS

Proin rutrum pharetra velit eu rhoncus. Pellentesque consequat turpis a ipsum interdum imperdiet. Vivamus fringilla augue eros, a semper erat maximus vel. Nunc nisl augue, consequat eget ultricies a, vulputate at leo. Maecenas ante turpis, egestas in velit id, placerat sodales metus. Nam fringilla dictum enim quis iaculis. Donec et sapien, at accumsan urna.

PERSONALITY

TRAIT

Quisque viverra urna a nibh rhoncus, eget iaculis lacus luctus. Praesent scelerisque eu nulla id condimentum. Donec vestibulum eros ante, nec ornare diam faucibus at.

TRAIT

Quisque viverra urna a nibh rhoncus, eget iaculis lacus luctus. Praesent scelerisque eu nulla id condimentum. Donec vestibulum eros ante, nec ornare diam faucibus at.

ABILITIES

ABILITY

Quisque viverra urna a nibh rhoncus, eget iaculis lacus luctus. Praesent scelerisque eu nulla id condimentum. Donec vestibulum eros ante, nec ornare diam faucibus at.

ABILITY

Quisque viverra urna a nibh rhoncus, eget iaculis lacus luctus. Praesent scelerisque eu nulla id condimentum. Donec vestibulum eros ante, nec ornare diam faucibus at.

ABILITY

BACKSTORY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin elementum risus, blandit dapibus massa elementum at. Suspendisse vehicula metus enim, sed pellentesque quam tincidunt vel. Curabitur vel luctus ante. Vestibulum eros dui, scelerisque ut volutpat sed, mattis at mauris. Phasellus rutrum auctor lorem, lacinia suscipit massa luctus sit amet. Quisque aliquam lorem non tellus blandit maximus. Morbi consectetur orci at purus porta, eu sagittis justo ultrices. Etiam ac facilisis lorem. Etiam varius et est at semper. Mauris nec consequat magna. Morbi tristique ullamcorper tempus. Integer eget nunc tortor. Pellentesque urna eros, sollicitudin sollicitudin laoreet ac, malesuada non ex. Morbi a magna dictum urna sollicitudin vulputate. Integer faucibus facilisis lacus id consequat. Vestibulum et dolor non dui tempus dictum consectetur ac libero.

Etiam finibus, libero id lacinia feugiat, tellus arcu suscipit nulla, vel auctor dolor lorem ac enim. Pellentesque purus tellus, bibendum eget lorem non, consectetur mattis arcu. Praesent et nibh at nunc dapibus maximus quis vel tortor. Integer ultricies congue tellus ut varius. Quisque viverra urna a nibh rhoncus, eget iaculis lacus luctus. Praesent scelerisque eu nulla id condimentum. Donec vestibulum eros ante, nec ornare diam faucibus at.

Proin rutrum pharetra velit eu rhoncus. Pellentesque consequat turpis a ipsum interdum imperdiet. Vivamus fringilla augue eros, a semper erat maximus vel. Nunc nisl augue, consequat eget ultricies a, vulputate at leo. Maecenas ante turpis, egestas in velit id, placerat sodales metus. Nam fringilla dictum enim quis iaculis. Donec et pellentesque sapien, at accumsan urna.

Praesent id posuere arcu. Vivamus congue lobortis justo id rhoncus. Etiam justo nisi, maximus id tristique non, ultricies ac eros. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod, massa quis auctor bibendum, odio diam varius ipsum, eget mattis arcu elit sollicitudin turpis. Vestibulum molestie luctus velit, vel feugiat neque accumsan vitae. Aliquam condimentum, leo ac facilisis luctus, orci justo feugiat lacus, et aliquam erat augue non nibh. Praesent congue augue sit amet tempor placerat.

Sed varius justo nisl, ut egestas erat posuere in. Suspendisse maximus nibh vitae augue molestie consequat. Nullam quis sapien nec tellus accumsan suscipit. Donec maximus magna non malesuada eleifend. Duis ipsum mauris, maximus nec justo nec, eleifend condimentum lacus. Etiam metus urna, molestie nec risus ut, commodo aliquam quam. Integer elementum lectus non feugiat congue. Ut feugiat purus mauris, at pretium lectus malesuada ut. Quisque sodales augue velit. Aenean ut nibh pulvinar, tincidunt ipsum eget, rhoncus lacus. Aliquam facilisis luctus rutrum. Curabitur nulla nibh, ornare non magna sit amet, bibendum faucibus nisi. Curabitur cursus, ante at consequat ullamcorper, est metus feugiat leo, ut convallis felis enim sed eros.

Information

Hey guys! After making this code with the intention of posting it on Patreon, I ended up changing my mind and thought it would be fun to tie it in with this month's Patreon layout of the same name; March Layout: Suspiration + Splash Page instead. If you're into it, please consider subscribing to grab the matching layout! Enjoy! 💖

The Coding

<lj-raw><div style="width:650px;margin:10px auto 0 auto;display:flex;font-family:calibri,sans-serif;font-size:12px;color:#222;line-height:1;text-align:justify;">

<div style="width:200px;positon:relative;z-index:2;">

<div style="background:#ddd url(LG_IMG)center;background-size:cover;transform:rotate(1deg);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);height:calc(200px * 1.5);"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-8px auto 0 auto;"></div>

<div style="background:#ddd url(SM_IMG)center;background-size:cover;transform:rotate(-5deg);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);height:calc(200px / 1.2);width:calc(200px / 1.2);margin:-32px 0 0 0;"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-8px auto 0 auto;">	</div>

<div style="background:url(https://cdn.discordapp.com/attachments/851970510397112340/961385696592035910/paper.png)center;background-size:cover;height:calc(200px / 1.6);width:calc(200px / 1.6);margin:-27px 5px 0 0;padding:10px;box-sizing:border-box;position:relative;float:right;"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-18px auto 8px auto;">

<div style="height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;line-height:2;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;">
				<a href="#1" style="display:block;color:#111;text-decoration:none;">ABOUT</a>
				<a href="#2" style="display:block;color:#111;text-decoration:none;">PERSONALITY</a>
				<a href="#3" style="display:block;color:#111;text-decoration:none;">ABILITIES</a>
				<a href="#4" style="display:block;color:#111;text-decoration:none;">BACKSTORY</a>
				<a href="https://tessisamess.insanejournal.com/143468.html" style="display:block;color:#111;text-decoration:none;">CODING</a>
			</div>

</div>

<div style="width:calc(100% - 200px);margin:10px 0 0 -10px;height:550px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,0.1);">

<a name="1"></a>
		<div style="height:100%;padding:25px 15px 25px 25px;box-sizing:border-box;">

<div style="height:25px;text-align:center;background:#fff;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:4px;color:#000;padding:0 10px 0 0;">ABOUT</div>

<div style="height:calc(100% - 25px);overflow:auto;line-height:1.5;padding:0 15px 0 0;">

<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;padding:8px 0 0 0;">

<div style="width:calc(50% - 10px);background:#ddd url(ABOUT_IMG)center;background-size:cover;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);box-sizing:border-box;"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-8px auto 0 auto;"></div>

<div style="width:calc(50% - 10px);">

INFO
						<div style="text-align:right;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;border-top:1px solid rgba(0,0,0,0.1);">FIELD</div>

</div>

<div style="font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;">FIRST IMPRESSIONS</div>
				<div style="margin:5px 0 20px 10px;padding:0 0 0 10px;border-left:2px solid rgba(0,0,0,0.1);">

IMPRESSIONS_INFO

</div>

<a name="2"></a>
		<div style="height:100%;padding:25px 15px 25px 25px;box-sizing:border-box;">

<div style="height:calc(100% - 25px);overflow:auto;line-height:1.5;padding:0 15px 0 0;">

<div style="font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;">TRAIT</div>
				<div style="margin:5px 0 20px 10px;padding:0 0 0 10px;border-left:2px solid rgba(0,0,0,0.1);">
					TRAIT_INFO
				</div>

</div>

<a name="3"></a>
		<div style="height:100%;padding:25px 15px 25px 25px;box-sizing:border-box;">

<div style="height:calc(100% - 25px);overflow:auto;line-height:1.5;padding:0 15px 0 0;">

<div style="font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;">ABILITY</div>
				<div style="margin:5px 0 20px 10px;padding:0 0 0 10px;border-left:2px solid rgba(0,0,0,0.1);">
					ABILITY_INFO
				</div>

</div>

<a name="4"></a>
		<div style="height:100%;padding:25px 15px 25px 25px;box-sizing:border-box;">

<div style="height:calc(100% - 25px);overflow:auto;line-height:1.5;padding:0 15px 0 0;">

<div style="width:40%;height:calc(550px / 2.7);background:#ddd url(RIGHT_FLOAT_IMG)center;background-size:cover;transform:rotate(1deg);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);box-sizing:border-box;margin:8px 0 0 15px;float:right;"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-8px auto 0 auto;"></div>

BACKSTORY_INFO<br><br>

<div style="width:40%;height:calc(550px / 2.7);background:#ddd url(LEFT_FLOAT_IMG)center;background-size:cover;transform:rotate(-1deg);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);box-sizing:border-box;margin:8px 15px 0 0;float:left;"><img src="https://i.imgur.com/90yg3V1.png" style="display:block;margin:-8px auto 0 auto;"></div>

BACKSTORY_INFO

</div>

</div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

LG_IMG - Large sidebar image
SM_IMG - Small sidebar image
ABOUT_IMG - About image
RIGHT_FLOAT_IMG - Righthand backstory image (repeat as needed; can be added to other sections)
LEFT_FLOAT_IMG - Lefthand backstory image (repeat as needed; can be added to other sections)

Editing Guide

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

DIMENSIONS

650px - Container width
200px - Sidebar width
550px - Content height
25px - Padding

FONTS

calibri,sans-serif - Body text
times,serif - Headings

COLORS

#fff Container background

#222 Body text

#111 Sidebar links

#000 Section headings

rgba(0,0,0,0.1) Borders

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!

Tags: codes, codes: biosheet

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Biosheet: Suspiration

Information

The Coding

Installation Guide

Editing Guide

Terms of Use

Comments