CODE: DELICIOUS (PROFILE)

[onetouchdonnie]

❝ 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

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.

 

PERSONALITY

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.

coding credit: proverbially

GET THE CODE HERE:

<raw-code><br/> <!-- START THE CODE --> <div style="width: 830px; height: 425px; display: center; margin: auto; padding: 15px; text-align: justify; background-image: url('https://i.imgur.com/Pc9ZHG5.png'); box-shadow:1px 1px 2px 0px #666;"> <!-- CHARACTER NAME & PICTURE START --> <center><div style="width: 240px; height: 380px; font-family: Lucida Grande; font-size: 10pt; color: #050505; padding: 20px; background: transparent; text-align: justify; float: left;"> <center><div style="width: 189px; height: 246px; background-image: url('https://i.imgur.com/RwjcZMa.png'); box-shadow:1px 1px 2px 0px #666;"> <img src="LARGECHARACTERPOFILE" style="width: 161px; height: 216px; margin-top: 15px;"> </div></center> <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> <!-- CHARACTER NAME & PICTURE END --> <!-- NAVIGATION BUTTONS START --> <div style="width: 300px; display: flex; flex-wrap: wrap; font-family: 'Lucida Grande'; font-weight: bold; text-align: center; margin-top: 5px;"> <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="HMDLINKHERE" style="text-decoration: none; color: #b3e1e3;">HMD</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="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> <!-- NAVIGATION BUTTONS END --> <div style="width: 5px;"><!></div> <!-- DETAILS START --> <center><div style="width: 500px; height: 380px; font-family: Lucida Grande; font-size: 10pt; line-height: 19px; color: #050505; background: url('https://i.imgur.com/isiIDwB.png'); float: right; padding: 20px; border: 1px solid #8a7d69; outline: 5px solid #bdb6a9; overflow-y: scroll;"> <!-- HOME START --> <center><div style="width: 490px; height: 370px; text-align: justify;"> <a name="HOME"><span style="font-size: 20px; font-weight: bold;">ABOUT</span></a><br/> <div style="float: left;"> <center><div style="width:90px; height: 113px; background-image: url('https://i.imgur.com/TFA2I4S.png'); box-shadow:1px 1px 2px 0px #666; margin-top: 5px; margin-right: 10px;"> <img src="ABOUTCHARACTERPROFILE" style="width: 76px; height: 98px; margin-top: 8px;"> </div></center> </div> <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> <!-- HOME END --> <!-- APPEARANCE START --> <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> 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.<br/><br/> 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> <!-- APPEARANCE END --> <!-- HISTORY START --> <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> 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.<br/><br/> 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> <!-- HISTORY END --> <!-- PERSONALITY START --> <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> 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.<br/><br/> 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> <!-- PERSONALITY END --> </div> </div> </div></center> <!-- DETAILS END --> <!-- CODE END --> <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.

Comments

[onetouchdonnie]

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?

[whatsmytalentagain]

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.

[onetouchdonnie]

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!

[whatsmytalentagain]

No problem! Have a good night's rest!