10billionghosts | live preview & code: '98 BIOSHEET, a biosheet made with '98

BASICS

DIMI EVERCREECH

typical gryffindor with something to prove walks line between hero and villain

FULL NAME

Damon Emery Evercreech

ALIAS

Dimi

BIRTH DATE

Apr 4 (Aries)

AGE

PRONOUNS

answer

FIELD

answer

FIELD

answer

FIELD

answer

LOOKS

This APPEARANCE subsection was made from 98's base TEXT subsection. I enjoy writing a short paragraph or two about a character's appearance, so this section is formatted with that in mind. If this appearance subsection code isn't doing it for you, I suggest subbing this section out for one of the MOODBOARD sections from the base code.

Even if you do decide to replace this appearance section with a mood board, you can still copy paste the APPEARANCE DETAILS part below from the code and post it beneath the moodboard to keep that info.

HEIGHT

5'10"

BUILD

athletic

EYES

blue

HAIR

auburn, wavy

PERSONA

LIKES: list, list, list, list, list
DISLIKES: list, list, list, list

This is totally just the base TEXT subsection with no further modifications. Super simple! The TEXT subsection does come with that little horizontal divide code pre-styled.

Bear claw ice cream sweet jelly beans marshmallow tart jujubes wafer. Sesame snaps pastry sugar plum cheesecake croissant candy. Pudding cheesecake fruitcake croissant jelly beans gummi bears. Shortbread chocolate cake shortbread powder apple pie shortbread wafer cotton candy shortbread.

HISTORY

PARENT 1 mom/dad words words words words words

PARENT 2 blah/blah words words words

SIBLING blah words words words words words

History is another simple TEXT subsection with minimal additional styling. The call out box on the right is a space to list a character's family members.

Donut bonbon danish sesame snaps powder apple pie chupa chups. Pastry ice cream tootsie roll caramels fruitcake. Cheesecake sugar plum pudding oat cake muffin cake gummi bears tootsie roll jelly beans. Chocolate cake muffin macaroon powder pie tart jelly beans.

Cookie marzipan carrot cake cookie dessert gummies chocolate jelly-o. Icing fruitcake shortbread lollipop halvah. Liquorice pastry lemon drops croissant soufflé candy canes jelly tiramisu. Jelly beans marshmallow apple pie muffin dragée jelly-o biscuit chocolate.

SCHOOL

In the code, this subsection is labeled MISC CARD, and can easily be removed entirely, replaced with a different subsection, or customized for skills, abilities, or magical powers. In this example, we're using it as a SCHOOL section for your typical magical academy game, but the base code for this section is generic and can be used for any sort of informational list: powers, pets, wanted lines, etc.

YEAR: senior

HOUSE: coppertale

CLASSES:

CLASS #1

Each of these "CLASS" boxes could easily be changed into individual skills or magical powers for a non-school game. In the base code for this template, this particular subsection has been made more generic so you can better customize it. :)

CLASS #2

Each of these class cards is pretty easy to pick out. Just copy paste more as you need them, or delete any you don't want!

CLASS #3

Shortbread liquorice sugar plum sugar plum marshmallow bonbon brownie. Bonbon icing candy canes topping sugar plum toffee liquorice. Sweet roll jelly toffee danish sesame snaps.

PLAYER NAME . PB NAME . TZ . CONTACT . (CODE)

This is a biosheet made with the '98 MODULAR CODE set. The example uses a colourlovers pattern by yoksel & cameo. If you don't want to make any tweaks and would just like to reuse this example, I've included a full base code for this biosheet below.

'98 draws inspiration from the nested table designs that were popular on the web 1997 - 2000, and is intended to be an all-purpose code to style up just about any entry you might need for a journal or game. THIS CODE IS JUST THE BIOSHEET, and if you'd like to get other codes from this set or see more examples of how it can be used, head over to the '98 MODULAR CODE hub entry. Otherwise, let's get to the base code for this biosheet.

HERE IS THE BASE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">BASICS</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;">

<div style="max-width:538px;width:100%;height:200px;display:grid;grid-column-template:repeat(7, 1fr);grid-row-template:repeat(5, 1fr);gap:10px">

<div style="grid-column-start:1;grid-column-end:7;grid-row-start:4;margin:-20px 0 0;text-align:center;"><div style="line-height:1;font-size:30px;font-weight:bold;text-shadow:-2px -2px #fff;color:#6f48bd;">CHARACTER NAME</div>

<div style="max-width:269px;width:50%;min-width:200px;margin:-5px auto 0;font-size:10px;">!! concept line, quote, song lyric, or short summary here!!</div>
<div style="width:50%;margin:10px auto 0;border-bottom:1px dotted #6f48bd;"></div></div>

</div>

<div style="width:100%;margin:0 auto 20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;">

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">FULL NAME</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">character name</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">ALIAS</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">nicknames</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">BIRTH DATE</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">00/00/0000</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">PRONOUNS</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">FIELD</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

</div>

</div></div>

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">LOOKS</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;"><div style="width:95%;margin:20px auto;clear:both;display:table;">

<div style="width:100%;min-width:100px;margin:20px auto 0;padding:10px;display:flex;flex-wrap:wrap;justify-content:space around;gap:10px;">

<div style="width:20%;min-width:100px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">HEIGHT</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">00"</div></div>

<div style="width:20%;min-width:100px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">BUILD</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

<div style="width:20%;min-width:100px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">EYES</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

<div style="width:20%;min-width:100px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">HAIR</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

</div></div></div></div>

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">PERSONA</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;"><div style="width:95%;margin:20px auto;clear:both;display:table;"></lj-raw>YOUR TEXT HERE! HI THERE! WANT TO GET RID OF THAT HORIZONTAL DIVIDE BELOW THIS TEXT? JUST DELETE THAT THE LJ-RAW AND /LJ-RAW TAGS AND EVERYTHING BETWEEN THEM. PLEASE BE MINDFUL OF ALL OTHER LJ-RAW TAGS IN THIS CODE!

<lj-raw>
<div style="width:50%;margin:5px auto 0;border-bottom:1px dotted #6f48bd;"></div>
</lj-raw>

YOUR TEXT HERE! THIS TEXT COMES AFTER THE HORIZONTAL DIVIDE.

<lj-raw></div></div></div>

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">HISTORY</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;"><div style="width:95%;margin:20px auto;clear:both;display:table;">

<div style="width:40%;padding:10px;margin:5px 0 5px 15px;background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;display:inline-block;float:right;">
</lj-raw>TYPE YOUR FAMILY SECTION INFO HERE<lj-raw>
</div>

</lj-raw>YOUR TEXT HERE FOR HISTORY!<lj-raw></div></div></div>

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">SCHOOL</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;"><div style="width:95%;margin:20px auto;clear:both;display:table;"></lj-raw>YOUR TEXT HERE, IF YOU WANT.<lj-raw>

<div style="margin:0;padding:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px 0;">

<div style="width:100%;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">ITEM #2</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:10px;">Each of these class cards is pretty easy to pick out. Just copy paste more as you need them, or delete any you don't want!</div></div>

</div></div></div></div>

</div></div>

<div style="max-width:650px;margin:0 auto;padding:2px 10px 5px;line-height:1;font-family:arial, helvetica, sans serif;font-size:10px;text-align:center;color:#6f48bd;"><b>PLAYER NAME</b> . <b>PB NAME</b> . <b>TZ</b> . <b>CONTACT</b> . <a title="by 10billionghosts" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;font-weight:bold;color:#6f48bd;">(CODE)</a></div>
</lj-raw>

HOW TO USE:

❣️ Mind the lj-raw tags!

❣️ This code is mobile friendly and insanejournal friendly!

❣️ This code is designed to be used with a seamless, tiling background. You will want to replace IMG_URL_TILING_BACKGROUND with the URL of whatever tiling background you'd like. I've added some tips for finding/using tiling backgrounds to the very bottom of this HOW TO list.

❣️ The as-is code comes with 4 images -- 3 mood board images at the top, and 1 appearance section portrait. Look for IMG_URL and IMG_URL_CHARACTER PORTRAIT to replace this text.

❣️ hex code #4e3188 is the code for the outer border and background. It shows up twice in this code. I recommend picking a color that is the base color of your repeating background. There are tons of ways to eyedropper that hex code -- firefox comes with an eyedropper tool out of the box (File > More Tools > Eyedropper).

❣️ hex code #6f48bd is your main accent color, and shows up most prominently in the headers of each subsection. It's used a TON in this layout. Make sure you find-replace every instance of this hex code when customizing this code. I suggest using a color that compliments the seamless background but stands out from it, as well.

❣️ rgba(111, 72, 189, .6) is also your main accent color. It's '#6f48bd' just represented a different way and set to 60% opacity (that's what the .6 is). To change this value, plug your main accent color's hex code into a color picker, then copy just the three numbers in whatever rgb(##, ##, ##) generates. Then back in the code, find and replace '111, 72, 189' with those three numbers.

❣️ hex code #301666 is the base font color for body text. It is declared once at the very top of the code. Change this to change the color of most of the text. I recommend using either #000 for black or a color that is a very dark version of your main accent color.

❣️ hex code #fff is just white. That's your header text, body backgrounds, etc.

❣️ Don't forget to fill out the OOC information at the bottom!

❣️ '98 is a fully modular set. Each subsection is clearly marked by comments in the code. Any subsection can be replaced with any other subsection, and they can all be reordered as you see fit! Don't be afraid to customize this code!

❣️ I don't ordinarily include a credit in my code, but this one does have one at the very bottom. I'd love if you kept it in there, but you can delete it if you want. NBD.

❣️ TIPS FOR TILING BACKGROUNDS:

Hey, first and foremost, be chill and don't steal a tiling background. Do your research and make sure that whatever tiling background you're using is free to use, and credit the maker if they want credit!

Next up, when you hotlink your tiling background, do it from a reliable source that you've uploaded yourself. Use imgur, tumblr, or your own space. Don't hotlink from the creator's site, and for completely different reasons, don't hotlink from pinterest unless you don't care if the background winds up a little blurry.

Alright, now that the cop shit is out of the way, where do you get repeating patterns?
- Colourlovers is a go-to resource, but after coming under new ownership, it appears the site is broken and has been left to languish with no fixes. While there won't be any NEW patterns, necessarily, there's a wealth of older ones, still.
- The irreplaceable tessisamess on IJ has provided a repeating pattern directory, as well as a general list of image resources they use.
- Seamless-Patterns on Tumblr has more complex patterns that work well with this code. This tumblr is an aggregator, so remember to follow the source so you know who to credit!
- You can make your own patterns with a free app like canva even if you don't have access to procreate/photoshop/etc.
- DON'T use pinterest to find seamless backgrounds unless you love suffering. Not only does pinterest compress images, a real source can be borderline impossible to find, and there's like a 90% chance that a "seamless" background you found on pinterest is absolutely not seamless at all.
- While sites like Spoonflower obviously feature products that use seamless designs, any image you lift from that site isn't going to be seamless. Images from custom fabric/product shops are typically cropped in a way that disrupts the seamless tiling.

Want to change the scaling on your tiling background? At the top of the code, after 'background:#4e3188 url('IMG_URL_TILING_BACKGROUND')center;' you can add background-size:###%; and change the ### to a number value to adjust how big or small the background scales.

❣️ Extremely big thanks to

thisismanx who was consistently harassed to test this code because her phone screen is tinier than mine and trying to make shit mobile compatible is a chore.

I love to see what people have done with my code, so drop me a comment with a link if you're using any of the '98 code set in a way you think is neat! If you're feeling generous, you can also donate to my ko-fi! I'm a freelancer, and while I will always provide free codes, we live in end-stage capitalist hell, so $$ is a big motivator.

This code is compatible with insanejournal.