❝ do you recall how we came to that place? ❞

hey guys! i'm back!

... kind of. i'm still trying to figure out what the posting schedule for this comm will be and it's still up in the air. for now i guess we'll consider this 'when i can' schedule for now.

until then, i hope you enjoy this code! first one using divs and everything! and seriously- fallen london needs a lot more recognition and love, haha.

CHARACTER NAME Quisque vel porta urna. Cras vitae velit accumsan, pulvinar felis et, vulputate lorem.

HMD

VISUALS

PLAYLIST

PROFILE

ABOUT

CHARACTER NAME
NICKNAME
AGE
DOB
STATUS

Character name.
Nickname. Nickname. Nickname.
00.
00-00-00.
Status.

APPEARANCE

Maecenas varius dui diam, vitae rhoncus ipsum vestibulum vitae. Praesent nisi sem, tincidunt vel risus ac, dapibus scelerisque nisi. Nunc ultrices blandit enim, sed varius ligula tincidunt eget. Mauris leo erat, mollis ut ex a, semper ullamcorper odio. Donec consequat, risus nec pellentesque aliquet, massa orci tincidunt dui, non pulvinar est nulla et enim. Suspendisse scelerisque quam id finibus sodales. Fusce leo massa, convallis ut eros vel, congue euismod quam.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper.

Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante.

HISTORY

PERSONALITY

coding credit: proverbially

GET THE CODE HERE:

<raw-code><br/>

<center><span style="font-size: 20px; font-weight: bold;">CHARACTER NAME</span>
<em><small>Quisque vel porta urna. Cras vitae velit accumsan, pulvinar felis et, vulputate lorem.</small></em>
</center>

<div style="width: 100px; background-color: #49777a; border: 1px solid #6eabaf; outline: 1px solid #223d40; box-shadow:0px 2px 2px 0px #666; padding: 5px 6px; margin: 2px;">
<a href="VISUALSLINKHERE" style="text-decoration: none; color: #b3e1e3;">VISUALS</a>
</div>

<div style="width: 100px; background-color: #49777a; border: 1px solid #6eabaf; outline: 1px solid #223d40; box-shadow:0px 2px 2px 0px #666; padding: 5px 6px; margin: 2px;">
<a href="HISTORYLINKHERE" style="text-decoration: none; color: #b3e1e3;">PLAYLIST</a>
</div>

<div style="width: 100px; background-color: #49777a; border: 1px solid #6eabaf; outline: 1px solid #223d40; box-shadow:0px 2px 2px 0px #666; padding: 5px 6px; margin: 2px;">
<a href="PROFILELINKHERE" style="text-decoration: none; color: #b3e1e3;">PROFILE</a>
</div>

</div>
</center>

<a name="HOME"><span style="font-size: 20px; font-weight: bold;">ABOUT</span></a><br/>

<div style="border-bottom: 1px solid #8a7d69; margin-bottom: 10px;"><!></div>
<div style="margin-top: 10px; margin-bottom: 5px; text-align: justify; display: flex; justify-content: space-between;">
<div style="width:70%;">
<b style="color:#050505">CHARACTER NAME</b><br/>
<b style="color:#050505">NICKNAME</b><br/>
<b style="color:#050505">AGE</b><br/>
<b style="color:#050505">DOB</b><br/>
<b style="color:#050505">STATUS</b><br/>
</div>

<div style="width:100%;">
Character name.<br/>
Nickname. Nickname. Nickname.<br/>
00.<br/>
00-00-00.<br/>
Status.<br/><br/>
</div>
</div>

<details>
 <summary style="font-size: 20px; font-weight: bold;">APPEARANCE
<div style="border-bottom: 1px solid #8a7d69; margin-top: 10px; margin-bottom: 15px;"><!></div>
</summary>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus bibendum blandit. Duis scelerisque, magna eget vulputate dapibus, lorem velit mattis metus, sit amet porttitor urna tellus sed ante. Vestibulum euismod odio vitae pellentesque faucibus. Maecenas id quam vitae est convallis varius a eget nisl. Vivamus id molestie lacus, eget blandit mauris. Nulla elementum lorem eget erat commodo semper.<br/><br/>

Donec accumsan nisi eu diam aliquam aliquam. Fusce interdum libero cursus arcu blandit aliquet. Praesent semper mauris eget convallis dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Ut suscipit erat augue, vitae scelerisque est vestibulum a. Quisque quis felis porttitor, scelerisque lorem quis, molestie ante.<br/><br/>

</details>

<details>
 <summary style="font-size: 20px; font-weight: bold;">HISTORY
<div style="border-bottom: 1px solid #8a7d69; margin-top: 10px; margin-bottom: 15px;"><!></div>
</summary>

</details>

<details>
 <summary style="font-size: 20px; font-weight: bold;">PERSONALITY
<div style="border-bottom: 1px solid #8a7d69; margin-top: 10px; margin-bottom: 15px;"><!></div>
</summary>

</details>

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

<div align="right"><small><b><font face="century gothic">coding credit: <user name="proverbially"></font></b></small></div>

</raw-code>

CREDIT & RESOURCES.
— Design inspiration is from Failbetter Games' Fallen London.

UPDATES
— Posted on September 07, 2019.
— Minor code tweak on October 17, 2019, following a bug report. Image links did not work due to accidental use of stylished quotation marks.

KEEP IN MIND
— Please remember to credit me!
— Comments aren't necessary but they mean the world to me.

Flat | Top-Level Comments Only

This is a really lovely code; I've been itching lately for some new bio and nav sheet codes to switch up on some of my RP journals, so this is definitely getting some use from me. :D

Thank you so much! I'm glad you might be able to use this in your journals.

It's a joy to code again and I feel a lot more confident in creating biocodes, now that I'm using divs and more extensive tricks/trips I've been learning since my not-to-little hiatus. Hopefully, more like these come out in the future!

Ugh, love seeing new things from you.

This is super cute and totally easy navigating!

Thank you! I'm very happy with how this turned out since I like to think it's easy to edit and play around with.

Hopefully, I can get the accompanying CR chart out within the next few weeks and get the codeball rolling. :>

Hi! I wanted to use this for a CRAU info page, but when I went to insert the images it gave me a couple of broken images instead. Is there any way to fix this?

Hey there!

I'll do what I can to help you out. May I see your attempt to use the code so I can figure out what happened?

Eheh... Well, funny thing. I figured it out myself.

It turns out the quotation marks used in the code images were really... Something similar? Like, two apostrophes or something? I just switched out the marks and they started working fine.

So, I guess this is more of me alerting you to a bug than anything.

Oh no! It's not a problem at all. I'm glad you were able to figure out what was wrong and bring this to my attention.

I'll update the code to reflect this headsup when I have time tomorrow. It's midnight on my end and I don't trust myself to try and do code updating when sleepy. Thank you so much for coming to me about this and letting me know. I hope you enjoy the use of the code for your character!

No problem! Have a good night's rest!

excited yelling, I love Fallen London/Sunless Sea/Sunless Skies \o/

I'm so happy that you like it! And hello fellow Failbetter Games fan, hello!

I was hoping I could do more codes inspired from this property but I had to dial it back just a bit during codemaking, since I was still cutting my teeth on a lot of things at the time.

But I'm a lot more confident now so, fingers crossed, I can return to this one day! I have so many ideas for certain elements and ideas from the games, haha.

As someone who RPs her Fallen London character, this + the CR chart are such a fantastic find. Even if I wasn't a fan of Failbetter's works, this is some super stylish coding. It looks like things are a little broken now, though, and I was hoping I wasn't too late to perhaps get some troubleshooting tips.

When I preview, things look fine, but in the post proper, the portrait section appears skewed to the left and the HMD/Playlist/etc. buttons are all drifting off the background. The right column now has some horizontal and vertical scrolling, too. It's doing that here in this post too, but if you need me to take some screenshots I'd be more than happy to.

Thanks a bunch!

Hey! I used this over here - thanks so much!

I did have to tweak it a bit to get it to resemble the preview image. Not sure what happened to make the base code look like it currently does, but some small tweaks here and there did the trick. Thank you so much for this great code!

CODE: DELICIOUS (PROFILE)

GET THE CODE HERE:

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject