10billionghosts | code: dart - an application/bio sheet (updated 9/27/2021) (Reply)

basics

full name: content

alias: content

age: content

birthday: content

pronouns: content

field: content

visuals

details

height: ##

build: ##

hair color: xx

eye color: xx

inspo: aesthetic board link

//appearance section other stuff here//

persona

//personality would go here!//

etc //This section can be used in a variety of ways. Add a quick summary of positive/negative traits, list fun facts that didn't fit into the personality otherwise (allergic to mangoes! enneagram type 4! whatever!)//

story

family //put family members here//
//alternatively a decent spot for relationships in general//

history

//put your history down here//

etc

//an extra section to use as you please//

ooc

PLAYER: name . TIMEZONE: time . PB: name . CONTACT: words

UPDATED 9/27/2021: In an effort to ensure mobile compatibility with the bulk of my codes, I have slightly revised this code so that it scales properly on mobile! You should no longer see a horizontal scroll when opening this code on your phone.

I originally published this code on June 26, 2021, but had been sitting on it for a few months. Dart is a simple, clean bio sheet/app form intended to be mobile friendly, prioritizing final readability over fancy extras.

For a full sized live preview, refer to the bottom of this post!

Here's the code:

<lj-raw><center><lj-cut text="APPLICATION"></center><div style="max-width:600px;width:100%;margin:10px auto;">

<div style="max-width:600px;width:100%;display:grid;grid-template-rows:15px;grid-template-columns:repeat(75,1fr);grid-gap:0;"><div style="grid-column-start:1;grid-column-end:63;grid-row-start:1;grid-row-end:2;background:#bbb;"></div><div style="grid-column-start:62;grid-column-end:64;grid-row-start:1;grid-row-end:2;background:#bbb;clip-path: polygon(65% 0%, 100% 50%, 65% 100%, 0% 100%, 0% 0%);"></div><div style="grid-column-start:1;grid-column-end:62;grid-row-start:1;grid-row-end:2;background:#fff;"></div>
<div style="grid-column-start:61;grid-column-end:63;grid-row-start:1;grid-row-end:2;background:#fff;clip-path: polygon(65% 0%, 100% 50%, 65% 100%, 0% 100%, 0% 0%);"></div><div style="grid-column-start:1;grid-column-end:61;grid-row-start:1;grid-row-end:2;background:#bbb;"></div><div style="grid-column-start:60;grid-column-end:62;grid-row-start:1;grid-row-end:2;background:#bbb;clip-path: polygon(65% 0%, 100% 50%, 65% 100%, 0% 100%, 0% 0%);"></div><div style="grid-column-start:1;grid-column-end:60;grid-row-start:1;grid-row-end:2;background:#fff;"></div><div style="grid-column-start:59;grid-column-end:61;grid-row-start:1;grid-row-end:2;background:#fff;clip-path: polygon(65% 0%, 100% 50%, 65% 100%, 0% 100%, 0% 0%);"></div><div style="grid-column-start:1;grid-column-end:59;grid-row-start:1;grid-row-end:2;background:#bbb;"></div><div style="grid-column-start:58;grid-column-end:60;grid-row-start:1;grid-row-end:2;background:#bbb;clip-path: polygon(65% 0%, 100% 50%, 65% 100%, 0% 100%, 0% 0%);"></div><div style="grid-column-start:64;grid-column-end:76;grid-row-start:1;grid-row-end:2;text-align:center;font-family:verdana, arial, sans serif;font-size:12.5px;font-variant:small-caps;font-weight:bold;color:#bbb;line-height:1.1">basics</div></div>

<div style="max-width:600px;width:100%;margin:10px auto;padding:10px;text-align:justify;">
<div style="max-width:220px;width:60%;background:#fff;padding:0 0 40px 0;margin:0 10px 0 0;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;border-radius:3px;float:left;"><div style="max-width:190px;width:100%;padding-bottom:85%;background:#ccc url('PICTURE_URL_HERE')center;background-size:cover;margin:15px auto;"></div></div>
<div style="width:95%;text-align:left;font-family:arial, sans serif;font-size:12.5px;color:#545454;"></lj-raw>
<b style="color:#bbb"> full name:</b> content

<b style="color:#bbb"> alias:</b> content

<b style="color:#bbb"> age:</b> content

<b style="color:#bbb"> birthday:</b> content

<b style="color:#bbb"> pronouns:</b> content

<b style="color:#bbb"> field:</b> content

<lj-raw></div><div style="clear:both;"></div></div>

<div style="max-width:600px;width:100%;margin:10px 10px 10px 5px;padding:10px;text-align:justify;font-family:arial, sans serif;font-size:12.5px;color:#545454;">
<fieldset style="border:1px solid #ddd;margin:0 10px 20px 0;padding:20px;">
<legend style="padding:0 4px;font-size:13px;font-variant:small-caps;font-weight:bold;color:#bbb;">details</legend><div style="width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;">

<div style="margin:6px"><b style="color:#bbb"> height:</b> ##</div>
<div style="margin:6px"><b style="color:#bbb"> build:</b> ##</div>
<div style="margin:6px"><b style="color:#bbb"> hair color:</b> xx</div>
<div style="margin:6px"><b style="color:#bbb"> eye color:</b> xx</div>
<div style="margin:6px"><b style="color:#bbb"> inspo:</b> aesthetic board link</div>

</div></fieldset>

</lj-raw>//appearance section other stuff here//
<lj-raw></div>

<lj-raw>

<fieldset style="border:1px solid #ddd;margin:0 10px 20px 0;padding:20px;">
<legend style="padding:0 4px;font-size:13px;font-variant:small-caps;font-weight:bold;color:#bbb;">etc</legend>
</lj-raw>//This section can be used in a variety of ways. Add a quick summary of positive/negative traits, list fun facts that didn't fit into the personality otherwise (allergic to mangoes! enneagram type 4! whatever!)//<lj-raw></fieldset>

</div>

<div style="max-width:600px;width:100%;margin:10px 10px 10px 5px;padding:10px;text-align:justify;font-family:arial, sans serif;font-size:12.5px;color:#545454;">
<fieldset style="border:1px solid #ddd;margin:0 10px 20px 0;padding:20px;">
<legend style="padding:0 4px;font-size:13px;font-variant:small-caps;font-weight:bold;color:#bbb;">family</legend>
</lj-raw>//put family members here//
//alternatively a decent spot for relationships in general//
<lj-raw></fieldset>
<b style="color:#bbb"> history</b></lj-raw>

//put your history down here//
<lj-raw></div>

<div style="max-width:600px;width:100%;margin:0px 0px 0px 5px;padding:10px;text-align:justify;font-family:arial, sans-serif;font-size:11px;font-variant:small-caps;color:#545454;">PLAYER: name . TIMEZONE: time . PB: name . CONTACT: words</div>

<div style="max-width:650px;width:100%;margin:-5px auto 0;text-align:left;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div>

</div></lj-raw>

HOW TO USE:
❣️ Mind the lj-raw tags!! Keep them in place and be sure to write around them.

❣️ This code is mobile friendly and insanejournal friendly!

❣️ Paste into a new blank post. This form works best behind an LJ-cut, because it's very long, but it should scale to even very narrow layouts.

❣️ Replace PICTURE_URL_HERE with an image URL to fill in the photo! It'll crop and scale appropriately. :)

❣️ hex code #bbb is the main color being used throughout the app, so replace that with any hex code you'd prefer.

❣️ In the code, I've marked off areas where input should go between // and ///.

❣️ You can feel free to customize headers to best fit your own application. In general, feel free to edit this code as you please! I would appreciate credit acknowledging that the base code is mine, however.

❣️ I've got no plans to use this app form myself, so for this code only if you have any requests to customize it or make it more modular, you can pop a comment in this post below and I promise I will do my best to get you a workable customized version of this code. :) Please allow 7 - 10 days for response though!

As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

This code is compatible with InsaneJournal.

basics

full name: content

alias: content

age: content

birthday: content

pronouns: content

field: content

visuals

details

height: ##

build: ##

hair color: xx

eye color: xx

inspo: aesthetic board link

Cupcake ipsum dolor sit amet tiramisu. Soufflé biscuit jelly biscuit. Biscuit gummi bears I love apple pie tiramisu. Marshmallow tiramisu I love chupa chups biscuit chocolate bar.

Chocolate marshmallow oat cake chocolate cake I love ice cream. Chocolate bar I love muffin chocolate cake macaroon chocolate toffee toffee dessert. Sweet roll cookie cupcake sweet roll croissant oat cake oat cake cotton candy.

Fruitcake tiramisu cotton candy dragée chocolate cake I love cheesecake I love cupcake. Gummi bears cotton candy soufflé. Wafer marshmallow danish.

persona

Cupcake ipsum dolor sit amet tart candy. Sweet biscuit halvah I love gummies I love I love cheesecake. Chupa chups oat cake candy canes. Caramels bonbon powder I love candy liquorice sweet roll lemon drops. Tootsie roll cheesecake macaroon biscuit marshmallow croissant. Fruitcake sweet roll sugar plum. Jelly I love cheesecake marshmallow I love cookie. Lollipop biscuit oat cake sugar plum.

Jelly I love fruitcake jelly-o marshmallow halvah brownie. Fruitcake chupa chups chocolate bar jujubes donut candy I love wafer. Gummies I love gummi bears sweet I love I love cotton candy apple pie. Donut sweet roll tiramisu ice cream halvah. Oat cake candy canes tootsie roll I love gingerbread brownie. Halvah I love tiramisu. Chupa chups tiramisu jujubes chocolate cake candy.

Cotton candy cookie I love croissant candy sugar plum muffin. Fruitcake croissant powder croissant icing. I love cupcake I love marzipan jujubes sweet roll I love cake I love. Muffin oat cake wafer cookie chocolate bar. Chocolate bar I love carrot cake. Cake chocolate carrot cake dessert tart.

etc This section can be used in a variety of ways. Add a quick summary of positive/negative traits, list fun facts that didn't fit into the personality otherwise (allergic to mangoes! enneagram type 4! whatever!)

story

family //put family members here//
//alternatively a decent spot for relationships in general//

history
Cupcake ipsum dolor sit amet toffee I love lemon drops. Dragée muffin gingerbread chupa chups macaroon toffee cake soufflé sesame snaps. Marshmallow chocolate pudding lollipop sugar plum. Cake caramels bear claw. Candy jujubes powder tootsie roll toffee biscuit. Gingerbread ice cream jelly beans gummies apple pie icing danish. Pie chocolate bar pudding I love. Ice cream bonbon chocolate cake carrot cake.

Chupa chups I love cake pie. Donut bear claw muffin soufflé I love croissant bear claw. Lollipop wafer candy canes sugar plum cheesecake chupa chups chocolate cake fruitcake. Cotton candy tootsie roll dragée chocolate cake pastry halvah danish. Sugar plum apple pie jujubes topping cotton candy halvah. Pudding dessert bear claw liquorice. Donut biscuit I love tart ice cream apple pie caramels. Fruitcake cheesecake chupa chups candy canes macaroon sweet roll. Sweet chupa chups I love croissant tiramisu gingerbread. Cupcake chupa chups muffin.

Marzipan icing cheesecake bear claw tootsie roll pastry macaroon. Powder powder chupa chups sesame snaps. Lollipop cheesecake cotton candy candy carrot cake marzipan macaroon. Macaroon candy gummi bears I love biscuit carrot cake wafer tootsie roll. Lemon drops dragée I love. Tart carrot cake cotton candy.

etc

Cupcake ipsum dolor sit amet. Tiramisu chocolate cake cheesecake. Donut macaroon pudding. Sweet roll chocolate cake bear claw chocolate cake.

Tart I love jelly-o chupa chups bear claw. Sesame snaps halvah lemon drops tart dessert biscuit wafer I love topping. Bonbon caramels I love ice cream pastry I love dessert tootsie roll. Bear claw jelly beans lemon drops.

ooc

PLAYER: name . TIMEZONE: time . PB: name . CONTACT: words

code

code: dart - an application/bio sheet (updated 9/27/2021)

Post a comment in response: