• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed ๐šƒ๐™ท๐™ด ๐™พ๐™ป๐™ณ ๐š‚๐šƒ๐š„๐™ณ๐™ธ๐™พ

๐’๐”๐๐…๐‹๐Ž๐–๐„๐‘
SUNFLOWER

name here
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div]
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div][/div]
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div][/div]
[/div]
ABOUT HER
โœฟ Name:
โœฟ Nickname:
โœฟ Age | Gender:
โœฟ Sexuality:
โœฟ Date of Birth:
โœฟ Zodiac:
โœฟ Local or Tourist:
โœฟ Height:
โœฟ Weight:
โœฟ Body
โœฟ Eyes:
โœฟ Hair:
โœฟ Scars | Body Mod:
โœฟ Faceclaim:
PERSONA
โœฟ Likes:
โœฟ Dislikes:
โœฟ Fears | Phobias:

Hello all! As you can see, I changed my username! It is now "crucially" ! However, because all of my codes still have "crucialstar" on them, I'm going to use "crucialstar" and "crucially" interchangably as the code credit! Feel free to change the credit to "crucially" on the codes you've used if you like, but it's not necessary! This area has hidden scrolls and so does the "biography" area! This code is definitely mobile friendly and most of all, which is very fun . . . but I also added in the cursor code! Yay! If you lovelies have any questions using this code, let me know! I'd be happy to help!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae odio vestibulum, consequat sapien nec, sollicitudin leo. Mauris malesuada justo a sem aliquam, eu tempor ex ornare. Nulla at nisi ultricies, iaculis ligula eu, accumsan metus. Fusce non laoreet ante. Curabitur sit amet fringilla lorem. Nullam rhoncus venenatis sem sit amet euismod. Praesent malesuada velit cursus massa cursus, eu accumsan purus consectetur.

Nunc consectetur orci eu magna hendrerit tincidunt. Duis vitae ex purus. Suspendisse felis dui, maximus ut lobortis feugiat, volutpat a mi. Praesent vel velit ut elit imperdiet molestie vitae vitae metus. Mauris interdum vitae lorem et ornare. Ut posuere lectus et nulla tempus iaculis. Aliquam sagittis ex at quam mattis rutrum. Nullam vestibulum tristique purus, id tempor magna pulvinar a. Suspendisse ultricies arcu tellus, id ultricies libero ornare et. Morbi eget lectus in metus tristique convallis vitae sed est.

Pellentesque scelerisque nulla a porttitor mollis. Aenean a congue neque, nec finibus risus. Nunc viverra gravida est, in ornare magna cursus et. Quisque justo nisi, fringilla pellentesque ligula non, sodales placerat nisi. Praesent rhoncus dolor vel mollis viverra. Quisque imperdiet luctus libero. Ut dignissim nunc at odio rhoncus, id sodales leo porttitor. Aliquam urna eros, varius fermentum elementum at, auctor non mi. Aenean tempor massa ac dolor suscipit commodo. Proin sed felis vel turpis pulvinar vulputate ut in diam.

Praesent quis felis in purus mollis convallis. Nam lacinia congue tincidunt. Nullam in mauris pretium, pellentesque enim pretium, pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat massa massa, eu dignissim arcu dictum sit amet. Nam at elit velit. Vestibulum pulvinar neque ut tortor iaculis, nec convallis leo ornare. Integer sit amet mi quis nunc efficitur maximus. Integer aliquet erat justo, vitae molestie magna sollicitudin a. Nulla id elit quam. In molestie arcu pellentesque interdum auctor. Nulla risus erat, feugiat ac sapien ut, interdum lacinia justo. Fusce rhoncus vitae nisi et ultricies.

BIOGRAPHY

โœฟ Brief Description:
โœฟ Other:
โœฟ Family:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae odio vestibulum, consequat sapien nec, sollicitudin leo. Mauris malesuada justo a sem aliquam, eu tempor ex ornare. Nulla at nisi ultricies, iaculis ligula eu, accumsan metus. Fusce non laoreet ante. Curabitur sit amet fringilla lorem. Nullam rhoncus venenatis sem sit amet euismod. Praesent malesuada velit cursus massa cursus, eu accumsan purus consectetur.

Nunc consectetur orci eu magna hendrerit tincidunt. Duis vitae ex purus. Suspendisse felis dui, maximus ut lobortis feugiat, volutpat a mi. Praesent vel velit ut elit imperdiet molestie vitae vitae metus. Mauris interdum vitae lorem et ornare. Ut posuere lectus et nulla tempus iaculis. Aliquam sagittis ex at quam mattis rutrum. Nullam vestibulum tristique purus, id tempor magna pulvinar a. Suspendisse ultricies arcu tellus, id ultricies libero ornare et. Morbi eget lectus in metus tristique convallis vitae sed est.

Pellentesque scelerisque nulla a porttitor mollis. Aenean a congue neque, nec finibus risus. Nunc viverra gravida est, in ornare magna cursus et. Quisque justo nisi, fringilla pellentesque ligula non, sodales placerat nisi. Praesent rhoncus dolor vel mollis viverra. Quisque imperdiet luctus libero. Ut dignissim nunc at odio rhoncus, id sodales leo porttitor. Aliquam urna eros, varius fermentum elementum at, auctor non mi. Aenean tempor massa ac dolor suscipit commodo. Proin sed felis vel turpis pulvinar vulputate ut in diam.

Praesent quis felis in purus mollis convallis. Nam lacinia congue tincidunt. Nullam in mauris pretium, pellentesque enim pretium, pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat massa massa, eu dignissim arcu dictum sit amet. Nam at elit velit. Vestibulum pulvinar neque ut tortor iaculis, nec convallis leo ornare. Integer sit amet mi quis nunc efficitur maximus. Integer aliquet erat justo, vitae molestie magna sollicitudin a. Nulla id elit quam. In molestie arcu pellentesque interdum auctor. Nulla risus erat, feugiat ac sapien ut, interdum lacinia justo. Fusce rhoncus vitae nisi et ultricies.
[/div][/div]
codedbycrucially| hover over pictures | live preview: x | pastebin: x
 
Last edited:
๐’๐Ž๐‹๐€๐‘๐ˆ๐’
SOLARIS

name here
"quote here"
x
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div]
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div][/div]
x
[/div]
Hello, lovelies ! I made a matching in-character code with "sunflower" ! I changed the background of the code and fixed a little here and there in regards to the cursor! I hope you lovelies enjoy this simple code! Don't forget that you can change the word when you hover over the photos !

P.S. If you lovelies are looking as to how to obtain this code, please feel free to click on the "pastebin" x symbol ! I placed the code on this website since it's easier to copy and paste into RPN's post box than quoting this post and getting the code that way! If you need any help at all, don't hesitate to send a message!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae odio vestibulum, consequat sapien nec, sollicitudin leo. Mauris malesuada justo a sem aliquam, eu tempor ex ornare. Nulla at nisi ultricies, iaculis ligula eu, accumsan metus. Fusce non laoreet ante. Curabitur sit amet fringilla lorem. Nullam rhoncus venenatis sem sit amet euismod. Praesent malesuada velit cursus massa cursus, eu accumsan purus consectetur.

Nunc consectetur orci eu magna hendrerit tincidunt. Duis vitae ex purus. Suspendisse felis dui, maximus ut lobortis feugiat, volutpat a mi. Praesent vel velit ut elit imperdiet molestie vitae vitae metus. Mauris interdum vitae lorem et ornare. Ut posuere lectus et nulla tempus iaculis. Aliquam sagittis ex at quam mattis rutrum. Nullam vestibulum tristique purus, id tempor magna pulvinar a. Suspendisse ultricies arcu tellus, id ultricies libero ornare et. Morbi eget lectus in metus tristique convallis vitae sed est.

Pellentesque scelerisque nulla a porttitor mollis. Aenean a congue neque, nec finibus risus. Nunc viverra gravida est, in ornare magna cursus et. Quisque justo nisi, fringilla pellentesque ligula non, sodales placerat nisi. Praesent rhoncus dolor vel mollis viverra. Quisque imperdiet luctus libero. Ut dignissim nunc at odio rhoncus, id sodales leo porttitor. Aliquam urna eros, varius fermentum elementum at, auctor non mi. Aenean tempor massa ac dolor suscipit commodo. Proin sed felis vel turpis pulvinar vulputate ut in diam.

Praesent quis felis in purus mollis convallis. Nam lacinia congue tincidunt. Nullam in mauris pretium, pellentesque enim pretium, pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat massa massa, eu dignissim arcu dictum sit amet. Nam at elit velit. Vestibulum pulvinar neque ut tortor iaculis, nec convallis leo ornare. Integer sit amet mi quis nunc efficitur maximus. Integer aliquet erat justo, vitae molestie magna sollicitudin a. Nulla id elit quam. In molestie arcu pellentesque interdum auctor. Nulla risus erat, feugiat ac sapien ut, interdum lacinia justo. Fusce rhoncus vitae nisi et ultricies.

[/div][/div]
codedbycrucially | hover over photo | pastebin: x | live preview: x
 
SIMPLICITY

Name Here
300x300
Name:
Nickname:
Age:
Title:
Face Claim:
Appearance:
Clothing:


Aenean posuere ullamcorper elit ac aliquam. Proin eget ex tortor. Integer elementum, eros sit amet interdum aliquet, dolor nunc venenatis felis, sit amet sodales lorem orci quis massa. Aliquam ligula mauris, suscipit nec arcu et, ornare eleifend ante. Sed eleifend id odio vel rutrum. Morbi aliquet, massa a pharetra maximus, ante risus pretium nisl, quis finibus velit dui nec erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id libero augue. Etiam egestas enim in ex scelerisque posuere. Quisque et tempus mi. Morbi id libero augue. Etiam egestas enim in ex scelerisque posuere. Quisque et tempus mi. Aenean scelerisque rhoncus metus id imperdiet. Ut non sem et nulla tempor egestas eu ut nulla. Vivamus vel lectus nibh. Nunc iaculis tincidunt orci, malesuada vehicula ipsum pretium eu. Sed accumsan ligula ac orci vulputate mattis. Proin quis sagittis dui. Sed elementum varius egestas.

Prance along on top of the garden fence, annoy the neighbor's dog and make it bark mew, intently sniff hand, for walk on car leaving trail of paw prints on hood and windshield ask for petting ask to be pet then attack owners hand. Pretend you want to go out but then don't swat turds around the house and adventure always shake treat bag. Sleep on keyboard stare at ceiling light meowing chowing and wowing yet sniff catnip and act crazy so cat snacks, yet under the bed, yet stare out the window. Climb leg the cat was chasing the mouse so pooping rainbow while flying in a toasted bread costume in space for cough furball into food bowl then scratch owner for a new one. Ears back wide eyed claws in your leg yet hack meowwww for spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. Licks paws stuff and things or sweet beast mew so i like frogs and 0 gravity and i hate cucumber pls dont throw it at me. Purr for no reason no, you can't close the door, i haven't decided whether or not i wanna go out yet bathe private parts with tongue then lick owner's face sleep on my human's head proudly present butt to human yet allways wanting food. Kitten is playing with dead mouse stinky cat spread kitty litter all over house, and stuff and things why use post when this sofa is here. Go into a room to decide you didn't want to be in there anyway eat from dog's food for licks your face yet meow all night yet ask to be pet then attack owners hand for scoot butt on the rug. Meow all night having their mate disturbing sleeping humans cat mojo , lick left leg for ninety minutes, still dirty and hack chill on the couch table for chew iPad power cord. Chew the plant make muffins pushes butt to face so annoy the old grumpy cat, start a fight and then retreat to wash when i lose meow in empty rooms.

Demand to have some of whatever the human is cooking, then sniff the offering and walk away use lap as chair, but kitty scratches couch bad kitty cereal boxes make for five star accommodation so i shredded your linens for you. Rub face on owner and sometimes switches in french and say "miaou" just because well why not human give me attention meow, and i shredded your linens for you, and damn that dog . Chew the plant. Pounce on unsuspecting person. What a cat-ass-trophy! munch, munch, chomp, chomp yet hiiiiiiiiii feed me now.

Personality:
Biography:
Relationships:

Note:
hi hi ! so here I am, updating my code thread and I thought to add this lovely minimalistic and simplistic code here as well! this is for all of you lovelies who are just starting out in coding and/or just want something less coded! this code can be used for both a character sheet and in character code! for example, the top scroll bar can have your "location, mood, etc." and this scroll bar can be your in character text! if not, you're more than welcome to play with the code and turn it into a character sheet ( as seen in this code with the forms ). have fun and hope you like it!

Aenean posuere ullamcorper elit ac aliquam. Proin eget ex tortor. Integer elementum, eros sit amet interdum aliquet, dolor nunc venenatis felis, sit amet sodales lorem orci quis massa. Aliquam ligula mauris, suscipit nec arcu et, ornare eleifend ante. Sed eleifend id odio vel rutrum. Morbi aliquet, massa a pharetra maximus, ante risus pretium nisl, quis finibus velit dui nec erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id libero augue. Etiam egestas enim in ex scelerisque posuere. Quisque et tempus mi. Morbi id libero augue. Etiam egestas enim in ex scelerisque posuere. Quisque et tempus mi. Aenean scelerisque rhoncus metus id imperdiet. Ut non sem et nulla tempor egestas eu ut nulla. Vivamus vel lectus nibh. Nunc iaculis tincidunt orci, malesuada vehicula ipsum pretium eu. Sed accumsan ligula ac orci vulputate mattis. Proin quis sagittis dui. Sed elementum varius egestas.

Prance along on top of the garden fence, annoy the neighbor's dog and make it bark mew, intently sniff hand, for walk on car leaving trail of paw prints on hood and windshield ask for petting ask to be pet then attack owners hand. Pretend you want to go out but then don't swat turds around the house and adventure always shake treat bag. Sleep on keyboard stare at ceiling light meowing chowing and wowing yet sniff catnip and act crazy so cat snacks, yet under the bed, yet stare out the window. Climb leg the cat was chasing the mouse so pooping rainbow while flying in a toasted bread costume in space for cough furball into food bowl then scratch owner for a new one. Ears back wide eyed claws in your leg yet hack meowwww for spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. Licks paws stuff and things or sweet beast mew so i like frogs and 0 gravity and i hate cucumber pls dont throw it at me. Purr for no reason no, you can't close the door, i haven't decided whether or not i wanna go out yet bathe private parts with tongue then lick owner's face sleep on my human's head proudly present butt to human yet allways wanting food. Kitten is playing with dead mouse stinky cat spread kitty litter all over house, and stuff and things why use post when this sofa is here. Go into a room to decide you didn't want to be in there anyway eat from dog's food for licks your face yet meow all night yet ask to be pet then attack owners hand for scoot butt on the rug. Meow all night having their mate disturbing sleeping humans cat mojo , lick left leg for ninety minutes, still dirty and hack chill on the couch table for chew iPad power cord. Chew the plant make muffins pushes butt to face so annoy the old grumpy cat, start a fight and then retreat to wash when i lose meow in empty rooms.
360x186

360x186

"quote here"

codedbycrucialstar | pastebin: x

Such lovely codes that you have here. c: Mind if I use this one, please? I'll most certainly be back for one of those in-character codes, too.

Keep up the fantastic work. โ™ฅ
 
aaaahh! thank you so much Reigning King Reigning King ! your words made my night! i definitely will and thank you for enjoying them ! if you need any help with any of the codes, do let me know ! and feel free to use any and all of 'em ! โ™ก
 
aaaahh! thank you so much Reigning King Reigning King ! your words made my night! i definitely will and thank you for enjoying them ! if you need any help with any of the codes, do let me know ! and feel free to use any and all of 'em ! โ™ก

oh, wow!! glad to have made your night and i'll be sure to let you know if I do need help c:
 
deer deer
can you please lemme know what i did wrong here? i'd surely appreciate it. c:


Chandler Michaels

Andre%20Hamann.jpg
"So our next person is from the high school sweethearts couple. Let's see what he has to say! Shall we?"

"And here is the lovely chandler michaels!"

"Welcome to 'Love in Paradise'. So tell us a bit about yourself? Let's start with your full name, age and where you are from"

"Hello there, Chandler Benjamin Michaels here. I am twenty-six years of age and is from Orange Beach, California."

"Okay. Now that we have a view of who you are. Let's focus on love! Tell me what do you go for?"
"Sorry, ladies but I am homosexual and I like men. Not little boys but men. I am looking for a man that's genuine, intelligent and not stuck in a child's body."

"Perhaps a bit dull, since we all have eyes. But how you describe your own physique?"
"Well, as you can see, I am pretty in shape and athletic. But I do have hazel green eyes, dirty blonde hair with raven-colored roots and my skin complexion is a little bit sunkissed because I love being in the sun and outdoors too much. I also have this beard of mine, which I keep lined up, just like my hair. Oh! I'm also tall, standing about six foot two inches tall and my weight is one-hundred and eighty-two pounds. My body is also loaded with tattoos especially my arms."

"So what are your strong points?"
"I'd say that I am pretty intelligent. I'm both beauty and brains so, I am the whole package. I love History, Science and some Math. I was a bit of a nerd in high school, just look at my transcripts. I am also ambitious and bold, so whatever I want, I go for it by any means necessary. I also stand up against anyone that tries to get in my way of just about anything. Lastly, I'm adventurous. Like, I'll go anywhere as long as theirs something that I like to do there. I do have a bucket list of places to go and things to do before I leave Earth."

"Oh splendid. Yet every one has a bit darker side right?"
"I do have a quick temper, not even going to lie. But only when rumors or unnecessary drama starts that involves me or someone I care about. I can also be a bit emotional, which I just want to get away from everyone and everything and be by myself. I can be a loner when my emotions spiral out of control but that hardly ever happens."

"Haha, we are all human after all. So what do you like to do?"

"I like to chill out by the pool, surf, workout, play video games and just party or have a good time, you know? I mean, I am a pretty fun and outdoorsy guy."

"Wonderful! Now what are your petpeeves?"
"I hate dislike it when some chews with their mouth open or smack on their food. It bothers me to my core and I just get up and walk away from them, usually. People who lie also bothers me. Like dude, just tell the truth and it will set you free, I promise."

"Good! One last general question before we get to the juicy stuff. What are you currently doing and where do you see yourself in the furture?"
"Well, I am currently a surfing instructor and a physical trainer. I see myself finally using my criminal law degree and becoming a lawyer but that's not for some time."

"Ha, yes. So why did you come here? What do you wish to find here?"
"Well my friends signed me up because they have gotten tired of me third-wheeling them, I guess. So, I'm here looking for love or just whatever I can get out of this experience."

"Well thank you for your time, chandler michaels. Is there anything else you'd like to share?"
"I think that I covered enough information here so, I'm good. Plus, I really, really gotta pee."
RqunO2j.gif

PJiFXB2.gif

"You have to remember that reality shows captures your worst moments."

codedbycrucialstar



 
of course! , Reigning King Reigning King
may I ask if you turned of Rich Text Editor [ RTE ]? usually, when you start playing around with code, turning off RTE is best since codes can duplicate and it can get wonky! it may have been a duplicated tag that caused it to happen or the tag wasn't closed ! can you send me the code through PMs? i can check it out and help fix it! โ™ก
 

of course! , Reigning King Reigning King
may I ask if you turned of Rich Text Editor [ RTE ]? usually, when you start playing around with code, turning off RTE is best since codes can duplicate and it can get wonky! it may have been a duplicated tag that caused it to happen or the tag wasn't closed ! can you send me the code through PMs? i can check it out and help fix it! โ™ก

fixed it. unseen duplicate tag. should have known but thanks for that. c:
while i am here, i'll be using your bubbly in-character code, too. thanks again.
 
SUNFLOWER

name here

[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div]
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div][/div]
[class=picture] position: relative; display: inline-block; width: auto; height: auto; margin: auto; [/class] [class=text] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; border-radius: 100%; [/class] [class name=text state=hover] opacity: 1; transition: 0.5s; [/class] [div class=picture] [div class=text]
WORD
[/div][/div]
[/div]
ABOUT HER
โœฟ Name:
โœฟ Nickname:
โœฟ Age | Gender:
โœฟ Sexuality:
โœฟ Date of Birth:
โœฟ Zodiac:
โœฟ Local or Tourist:
โœฟ Height:
โœฟ Weight:
โœฟ Body
โœฟ Eyes:
โœฟ Hair:
โœฟ Scars | Body Mod:
โœฟ Faceclaim:
PERSONA
โœฟ Likes:
โœฟ Dislikes:
โœฟ Fears | Phobias:

Hello all! As you can see, I changed my username! It is now "crucially" ! However, because all of my codes still have "crucialstar" on them, I'm going to use "crucialstar" and "crucially" interchangably as the code credit! Feel free to change the credit to "crucially" on the codes you've used if you like, but it's not necessary! This area has hidden scrolls and so does the "biography" area! This code is definitely mobile friendly and most of all, which is very fun . . . but I also added in the cursor code! Yay! If you lovelies have any questions using this code, let me know! I'd be happy to help!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae odio vestibulum, consequat sapien nec, sollicitudin leo. Mauris malesuada justo a sem aliquam, eu tempor ex ornare. Nulla at nisi ultricies, iaculis ligula eu, accumsan metus. Fusce non laoreet ante. Curabitur sit amet fringilla lorem. Nullam rhoncus venenatis sem sit amet euismod. Praesent malesuada velit cursus massa cursus, eu accumsan purus consectetur.

Nunc consectetur orci eu magna hendrerit tincidunt. Duis vitae ex purus. Suspendisse felis dui, maximus ut lobortis feugiat, volutpat a mi. Praesent vel velit ut elit imperdiet molestie vitae vitae metus. Mauris interdum vitae lorem et ornare. Ut posuere lectus et nulla tempus iaculis. Aliquam sagittis ex at quam mattis rutrum. Nullam vestibulum tristique purus, id tempor magna pulvinar a. Suspendisse ultricies arcu tellus, id ultricies libero ornare et. Morbi eget lectus in metus tristique convallis vitae sed est.

Pellentesque scelerisque nulla a porttitor mollis. Aenean a congue neque, nec finibus risus. Nunc viverra gravida est, in ornare magna cursus et. Quisque justo nisi, fringilla pellentesque ligula non, sodales placerat nisi. Praesent rhoncus dolor vel mollis viverra. Quisque imperdiet luctus libero. Ut dignissim nunc at odio rhoncus, id sodales leo porttitor. Aliquam urna eros, varius fermentum elementum at, auctor non mi. Aenean tempor massa ac dolor suscipit commodo. Proin sed felis vel turpis pulvinar vulputate ut in diam.

Praesent quis felis in purus mollis convallis. Nam lacinia congue tincidunt. Nullam in mauris pretium, pellentesque enim pretium, pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat massa massa, eu dignissim arcu dictum sit amet. Nam at elit velit. Vestibulum pulvinar neque ut tortor iaculis, nec convallis leo ornare. Integer sit amet mi quis nunc efficitur maximus. Integer aliquet erat justo, vitae molestie magna sollicitudin a. Nulla id elit quam. In molestie arcu pellentesque interdum auctor. Nulla risus erat, feugiat ac sapien ut, interdum lacinia justo. Fusce rhoncus vitae nisi et ultricies.

BIOGRAPHY

โœฟ Brief Description:
โœฟ Other:
โœฟ Family:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae odio vestibulum, consequat sapien nec, sollicitudin leo. Mauris malesuada justo a sem aliquam, eu tempor ex ornare. Nulla at nisi ultricies, iaculis ligula eu, accumsan metus. Fusce non laoreet ante. Curabitur sit amet fringilla lorem. Nullam rhoncus venenatis sem sit amet euismod. Praesent malesuada velit cursus massa cursus, eu accumsan purus consectetur.

Nunc consectetur orci eu magna hendrerit tincidunt. Duis vitae ex purus. Suspendisse felis dui, maximus ut lobortis feugiat, volutpat a mi. Praesent vel velit ut elit imperdiet molestie vitae vitae metus. Mauris interdum vitae lorem et ornare. Ut posuere lectus et nulla tempus iaculis. Aliquam sagittis ex at quam mattis rutrum. Nullam vestibulum tristique purus, id tempor magna pulvinar a. Suspendisse ultricies arcu tellus, id ultricies libero ornare et. Morbi eget lectus in metus tristique convallis vitae sed est.

Pellentesque scelerisque nulla a porttitor mollis. Aenean a congue neque, nec finibus risus. Nunc viverra gravida est, in ornare magna cursus et. Quisque justo nisi, fringilla pellentesque ligula non, sodales placerat nisi. Praesent rhoncus dolor vel mollis viverra. Quisque imperdiet luctus libero. Ut dignissim nunc at odio rhoncus, id sodales leo porttitor. Aliquam urna eros, varius fermentum elementum at, auctor non mi. Aenean tempor massa ac dolor suscipit commodo. Proin sed felis vel turpis pulvinar vulputate ut in diam.

Praesent quis felis in purus mollis convallis. Nam lacinia congue tincidunt. Nullam in mauris pretium, pellentesque enim pretium, pulvinar diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat massa massa, eu dignissim arcu dictum sit amet. Nam at elit velit. Vestibulum pulvinar neque ut tortor iaculis, nec convallis leo ornare. Integer sit amet mi quis nunc efficitur maximus. Integer aliquet erat justo, vitae molestie magna sollicitudin a. Nulla id elit quam. In molestie arcu pellentesque interdum auctor. Nulla risus erat, feugiat ac sapien ut, interdum lacinia justo. Fusce rhoncus vitae nisi et ultricies.
[/div][/div]
codedbycrucially| hover over pictures | live preview: x | pastebin: x
This is beautiful!
 
aaaah! thank you so much lovelies! i should have another code posted up soon once i finish with this character sheet posted. thank you for the support, encouragement, and compliments! it means so much! โ™ก
 
๐Œ๐€๐„๐’๐“๐‘๐Ž


famiglia moretti

we were children thrust into war and once it ends, what will we become? you may not be interested in war, but it is interested in you. this is your destruction, this is your birth.

'fearless child, broken boy, tell me what itโ€™s like to burn. donโ€™t worry mother, your daughter is a soldier as sheโ€™s always been half goddess, half hell'.
โ€”Luna

about
/ / . BASIC INFORMATION;
Name:
Age:
Gender:
Sexuality:
Ethnicity:
Occupation:

/ / . APPEARANCE;
Faceclaim:
Height:
Eye Color:
Hair Color:
Distinguishing Features:
Markings:
persona
"SHE WAS CHAOS&BEAUTY INTERTWINED"
Hello lovelies! The circular photo is 120x120 in width and height! I left the quotes and everything as is on this character sheet code so that way you can see how it looks together as a whole! All boxes have hidden scrolls! I hope you guys enjoy this code!

"A TORNADO OF ROSES FROM DIVINE"
Likes:
Dislikes:
Quirks:
Fears:

history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.
other
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

relationships
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae

gallery
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu nisl nunc mi ipsum faucibus vitae aliquet. Viverra tellus in hac habitasse platea dictumst vestibulum. Habitant morbi tristique senectus et netus et malesuada fames ac. Donec massa sapien faucibus et molestie. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Lectus sit amet est placerat. Amet risus nullam eget felis. Risus in hendrerit gravida rutrum. Facilisi morbi tempus iaculis urna id volutpat lacus. Egestas dui id ornare arcu odio ut sem nulla. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae


codedbycrucially | hidden scroll | pastebin: xx | live preview: xx
 
Last edited:
your latest character sheet looks wonderful! nice work c:
 
๐‡๐˜๐€๐‚๐ˆ๐๐“๐‡
name here
role here
Hello lovelies! It's been awhile since I've updated this coding thread! That being said, here's a code that I used in my Hocus Pocus roleplay! This section doesn't have a hidden scroll so the word count shouldn't exceed 58 words or the alignment may be a lil' off!

"Quote here if you'd like!"​
There is hidden scroll in this section! The picture on the left has a size of 180px width and 120px height! I kept the pictures there just because I really love this faceclaim and I just think it matches the code in general really well! The pastebin raw code will have a placeholder image! I hope you lovelies enjoy this code as much as I had !

Please note: If you click the pastebin link, it'll take you to the raw code! You can copy the entire code and paste it back on RPN in your private workshop and etc.


[class=tabs] margin-top: -47px; line-height: 1; position: relative; margin-left: auto; margin-right: auto; margin-bottom: auto; text-align: center; min-width: 100%; [/class] [class=tab] background-color: white; color: black; box-sizing: border-box; border: 1px solid black; cursor: pointer; display: inline-block; padding: 10px 0; width: 30%; font-family: 'Lato'; text-transform: uppercase; [/class] [class name=tab state=hover] cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; transition: 0.15s;[/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} persona) (show tabsContentVee) if (eq ${currentTab} herstory) (show tabsContentFinally) if (eq ${currentTab} miscellaneous) (show tabsContentDoes) [/script] [div class=tabs][div class=tab style=" margin: auto;"]persona
[div class=tab style="margin-left: 30px; margin-right: auto; margin-top: auto; margin-right: auto;"]herstory
[div class=tab style="margin-left: 30px; margin-right: auto; margin-top: auto; margin-right: auto;"]miscellaneous[/div][/div] [div class="tabsContent tabsContentVee"]
Ah ! Also, if you like the "live preview" version better and would like me to make a raw code for it / send you the code for that specific style, let me know and I can send it to you for sure! The picture on the left is 169px in width and 250px in height!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
[/div] [div class="tabsContent tabsContentFinally" style="display: none;"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
[/div] [div class="tabsContent tabsContentDoes" style="display: none;"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac nisi et nunc rutrum porta at vitae lorem. Praesent vulputate ante quis fringilla condimentum. Curabitur laoreet lacinia lectus at viverra. Sed velit dui, porttitor sodales lorem porta, lacinia iaculis ipsum. Quisque quis nisl ut orci aliquet auctor sed nec erat. Ut vitae luctus felis. Cras sollicitudin nisi eu purus aliquet lobortis quis quis tortor. Cras eleifend tortor justo, ut vestibulum ante mollis quis. Cras malesuada quis diam at hendrerit. Aenean sit amet enim lectus. Curabitur arcu tellus, ornare sit amet lectus sed, interdum dictum ipsum. Ut fringilla pretium sem, ornare pulvinar velit volutpat sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus sapien, molestie in aliquam id, cursus vitae arcu. Vestibulum sagittis nulla in imperdiet aliquet. Sed eget dui ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mattis dolor, ut semper nulla. Etiam malesuada semper odio fringilla volutpat. In hac habitasse platea dictumst. Aliquam erat orci, egestas eget placerat quis, facilisis vitae metus. Aenean feugiat euismod bibendum. Duis quis hendrerit leo. In tempus interdum orci sit amet aliquet. Suspendisse auctor non metus accumsan scelerisque. Praesent egestas, metus a semper mollis, nunc ligula convallis nibh, vitae accumsan massa nibh a enim. Cras venenatis eget quam et consectetur. Proin libero orci, rhoncus a eleifend commodo, pretium quis est. Mauris placerat diam mi, sit amet cursus lorem imperdiet ac.

Ut rhoncus suscipit velit. Sed semper elementum accumsan. Donec nec erat nec sapien eleifend posuere. Nunc blandit, mauris quis condimentum sollicitudin, ex justo lacinia tellus, sodales commodo eros quam eget felis. Aliquam non neque risus. Integer egestas dapibus metus, nec rhoncus mauris eleifend quis. Mauris dignissim, elit id convallis fermentum, felis ante vestibulum nisi, nec cursus odio mi sed dui. Donec lacinia aliquam semper. Nunc egestas faucibus sapien. Fusce id scelerisque turpis. Vestibulum tortor lectus, fringilla sed commodo id, facilisis a neque.
[/div][/div][/div]
codedbycrucially | pastebin: x , version ii | live preview: x
 
Last edited:
eeee i love your latest codes, simple but pretty *-*
 
asdfghjhklj; hiiiiiii, thank youuuuu so muchhhh! it means a lot lovely ! eeeeep. i'm about to post another one because it's been a g e s ! i try to make it as simple but aesthetically pleasing as possible! but also because i've been changing from div to solely classes as well! the transition is a bit hard but it's getting thereee! anyways, i'm ramblings ; -; uwu, thank you for the support dearest !
 
of course lovelyyyy! if you ever need any help with coding, don't be afraid to send me a private message c:
i'm looking forward to seeing what you cook up in the future
 
๐ˆ๐‘๐ˆ๐’
[class=background] position: relative; background-color: #f7f7f7; border: 1px solid #EAECE7; max-width: 700px; height: 544px; padding: 18px; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; margin: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); [/class] [class=backgroundtwo] position: relative; max-width: 450px; background-color: #fcfcfc; border: 1px solid #E2E2E2; height: 552px; margin-left: -6px; margin-top: -5px; [/class] [class=banner] background: url(https://media.giphy.com/media/VboBRThBZr9NXPrtrw/giphy.gif) no-repeat; background-size: cover; height: 150px; border-bottom: 1px solid #F5F5F6; [/class] [class=picture] width: 250px; height: 551px; position: relative; display: inline-block; webkit-filter: grayscale(60%); filter: grayscale(60%); background: url('https://i.imgur.com/sBC3l9l.jpg'); background-size: cover; border: 1px solid #E2E2E2; [/class] [class name=picture state=hover] transition: 0.6s; filter: grayscale(60%); webkit-filter: grayscale(60%); -webkit-transition-timing-function: 0.6s ease-in-out; background: url('https://s3.amazonaws.com/uploads.chicmanagement.com.au/2015/02/EddieNew-AmeliaZadro5.jpg'); background-size: cover; width: 250px; height: 551px; border: 1px solid #E2E2E2; [/class] [class=picturetext] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.1); color: white; z-index: 2; [/class] [class name=picturetext state=hover] opacity: 1; [/class] [class=tabone] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 205px; margin-top: -47px; [/class] [class=tabtwo] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 233px; margin-top: -17px; [/class] [class=tabthree] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 205px; margin-top: 8px [/class] [class=tabfour] position: absolute; display: inline-block; margin: auto; background-color: #505D70; border: 1px solid #F5F5F6; transform: rotate(135deg); width: 30px; height: 30px; margin-left: 178px; margin-top: -17px; [/class] [class=tab] position: absolute; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform 0s ease-in-out; [/class] [class name=activeTab] background-color: #333E4B; [/class] [class name=tab state=hover] transition: .8s; background-color: #333E4B; -webkit-transform: rotate(225deg); transform: rotate(225deg); [/class] [class=textcontainer] font-size: 13px; line-height: 18px; color: #888888; padding: 10px; text-align: justify; [/class] [class=textheader] text-align: center; font-size: 18px; text-transform: uppercase; [/class] [class=textinfo] background-color: #505D70; display: inline-block; padding: 2px; color: white; margin-top: 5px [/class] [script class=tab on=click] hide tabsContent removeClass activeTab tab addClass activeTab set currentTab (getText) if (eq ${currentTab} one) (show tabsContentone) if (eq ${currentTab} two) (show tabsContenttwo) if (eq ${currentTab} three) (show tabsContentthree) if (eq ${currentTab} four) (show tabsContentfour) [/script] [div class=background][div class=backgroundtwo][div class=banner][/div] [div class="tab tabone"]
one
[/div] [div class="tab tabtwo"]
two
[/div] [div class="tab tabthree"]
three
[/div] [div class="tab tabfour"]
four
[/div] [div class="tabsContent tabsContentone"]
[div class=textcontainer][div class=textheader]who is she ?
โบ [div class=textinfo]Name:
Hello loves, crucially here! The big photo(s) has a width of 250px and a height of 551px. The banner height is 150px! I wanted to keep the pictures here to give you lovelies an idea of how the code looks with everything together!
โบ [div class=textinfo]Birthday | Age:[/div]
โบ [div class=textinfo]Gender:[/div]
โบ [div class=textinfo]Sexuality:[/div]
โบ [div class=textinfo]Species:[/div]
โบ [div class=textinfo]Blood Status:[/div]
โบ [div class=textinfo]Nationality:[/div]
โบ [div class=textinfo]Ethnicity:[/div]

[div class=textheader]quote here[/div] โบ [div class=textinfo]Faceclaim:[/div]
โบ [div class=textinfo]Height:[/div]
โบ [div class=textinfo]Eye Color:[/div]
โบ [div class=textinfo]Hair Color:[/div]
โบ [div class=textinfo]Body Type:[/div]
โบ [div class=textinfo]Distinguishing Features:[/div]
โบ [div class=textinfo]Markings | Body Mods:[/div]
[/div][/div][/div][/div] [div class="tabsContent tabsContenttwo" style="display: none;"]
[div class=textcontainer][div class=textheader]SHE WALKED IN MOON DUST
โบ [div class=textinfo]Persona:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.

Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.

[div class=textheader]AND STARS SPRINKLED HER HAIR[/div] โบ [div class=textinfo]Vices:[/div]
โบ [div class=textinfo]Virtues:[/div]
โบ [div class=textinfo]Habits:[/div]
โบ [div class=textinfo]Quirks:[/div]
โบ [div class=textinfo]Likes:[/div]
โบ [div class=textinfo]Dislikes:[/div]
โบ [div class=textinfo]Strengths:[/div]
โบ [div class=textinfo]Weaknesses:[/div]
โบ [div class=textinfo]Hobbies:[/div]
โบ [div class=textinfo]Talents:[/div]
[/div][/div][/div][/div] [div class="tabsContent tabsContentthree" style="display: none;"]
[div class=textcontainer][div class=textheader]OF COURSE, I FEEL TOO MUCH
โบ [div class=textinfo]History:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis pellentesque ante non gravida. Donec lorem lacus, consequat in vestibulum molestie, dapibus nec est. Cras sollicitudin magna at purus luctus, sed faucibus arcu porta. Fusce viverra rhoncus scelerisque. Ut elementum hendrerit fringilla. Donec sit amet varius orci. Vivamus convallis convallis diam eu rutrum. Pellentesque ullamcorper lacus eget velit porta tempor. Vestibulum finibus mi quis ex rhoncus, sit amet suscipit enim rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Sed eu aliquam purus.

Sed tincidunt augue metus, ac commodo erat tempus viverra. Nunc id est at dolor mattis tempus in et sem. Mauris auctor elit sit amet massa consectetur semper. Phasellus mollis mi eget lorem gravida, a blandit lorem mattis. Fusce viverra vel nisi et imperdiet. Vestibulum imperdiet magna sed tortor hendrerit, vitae rutrum sem dapibus. Morbi aliquam tempus dictum. Aenean auctor gravida nulla, id dignissim est tristique viverra. Maecenas posuere vel est nec sagittis. Vestibulum cursus tempor purus a aliquet. Suspendisse bibendum accumsan dui eu commodo. Sed dapibus aliquet velit gravida scelerisque.

[div class=textheader]I AM A UNIVERSE OF EXPLODING STARS[/div] โบ [div class=textinfo]Parents:[/div]
โบ [div class=textinfo]Siblings:[/div]
โบ [div class=textinfo]Famous Relatives:[/div]
โบ [div class=textinfo]Family Line of Work:[/div]
โบ [div class=textinfo]Home Town:[/div]
[/div][/div][/div][/div] [div class="tabsContent tabsContentfour" style="display: none;"]
[div class=textcontainer][div class=textheader]quote here
โบ [div class=textinfo]Other

[/div][/div][/div][/div]
[div class=picture] [div class=picturetext]
โ› quote here โœ
[/div][/div][/div][/div]
codedbycrucially | hover photo and click diamonds | pastebin: x | live preview: x, xx
 
Last edited:
My goodness these codes are gorgeous!
As you said- simple, functional, aesthetically pleasing...
And I love the fact that they're not tiny! xD
 
aaaaah! thank you very much! itโ€™s such a lovely notification to wake up to! happy new year to you and iโ€™m so happy that you like the codes !! oh my gosh! iโ€™ve been playing with different code sizes so i totally understand! i donโ€™t have a โ€œstyleโ€ just yet but hopefully one day if someone looks at the code they can immediately recognize, โ€œoh! cruci did it!โ€ hehe. i think thatโ€™s a goal of mine and iโ€™m rambling! anyways, thank you so much ! c:
 
I definitely think I'll be using your Fair Ravenclaw code. It's so nice twinkle!
 
athens!! oh my gosh! yes! go ahead lovely! i canโ€™t wait to see what you do with it / stylise it! thank you loveeee!
 
it's so lovely to be getting notifs from one of your threads again!! loving the new title (definitely didn't laugh a little bit when I saw) ; keep it up darling!! <3
 
i love your codes!! i'll totally let you know when i'm gonna use them, because there's several that would be great for some of the rps i'm in c:
 
๐‡๐„๐€๐ƒ๐€๐‚๐‡๐„
[class=background] max-width: 750px; height: 514px; background: url('http://www.designbolts.com/wp-content/uploads/2012/12/simple-pattern-white-seamless-website-background.jpg'); margin: auto; border: 1px dashed grey; padding: 25px; cursor: url(https://i.imgur.com/X2LfhKo.png), auto !important; [/class] [class=tabone] display: inline-block; background: url(https://66.media.tumblr.com/5803aff01fa009df613c6d1c6bb94ff2/tumblr_phqyliSIA91t7hjuv_640.png); border: 1px solid lightgrey; width: 120px; height: 120px; background-size: 100%; [/class] [class=tabtwo] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://66.media.tumblr.com/e8ffebf7cf9001b52e7f01a75beb42c5/tumblr_p8vzfs242f1wn5egto1_400.jpg); background-size: 100%; margin-top: 128px; [/class] [class=tabthree] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://i.pinimg.com/736x/70/53/55/705355fddc290157b871a4f61c0582a3.jpg); background-size: 100%; margin-top: 257px; [/class] [class=tabfour] display: inline-block; border: 1px solid lightgrey; width: 120px; height: 120px; background: url(https://66.media.tumblr.com/2361d972f3c0e4b27673de59e75f71a8/tumblr_pgdrogQ77C1vhmz26_1280.jpg); background-size: 100%; margin-top: 386px; [/class] [class=tabinfo] max-width: 625px; border: 1px solid lightgrey; margin-left: 130px; background-color: white; height: 506px; [/class] [class=tab] position: absolute; [/class] [class name=tab state=hover] transition-duration: 0.3s; background-color: rgba(105, 105, 105, 0.2); [/class] [class=picturetext] position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background-color: rgba(105, 105, 105, 0.2); color: white; font-size: 15px; [/class] [class name=picturetext state=hover] opacity: 1; [/class] [class=picturetexttwo] text-align: center; margin-top: 10px; text-transform: uppercase; [/class] [class=textbackground] background-color: #B08587; display: inline-block; padding: 2px; color: white; margin-top: 5px; [/class] [class=textcontainter] padding: 10px; font-size: 13px; line-height: 18px; color: #202020; text-align: justify; [/class] [class=header] font-weight: bold; font-size: 30px; text-transform: uppercase; color: grey; [/class] [class=header_two] font-weight: bold; font-size: 30px; text-transform: uppercase; text-align: right; color: grey; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} basic) (show tabsContentBasics) if (eq ${currentTab} persona) (show tabsContentPersona) if (eq ${currentTab} background) (show tabsContentBackground) if (eq ${currentTab} other) (show tabsContentOther) [/script] [div class=background] [div class="tab tabone"][div class=picturetext][div class=picturetexttwo]

basic
[/div][/div][/div] [div class="tab tabtwo"][div class=picturetext][div class=picturetexttwo]

persona
[/div][/div][/div] [div class="tab tabthree"][div class=picturetext][div class=picturetexttwo]

background
[/div][/div][/div] [div class="tab tabfour"][div class=picturetext][div class=picturetexttwo]

other
[/div][/div][/div] [div class="tabsContent tabsContentBasics"][div class=tabinfo]
[div class=textcontainter][div class=header]โ€” basic information;

[div class=textbackground]name:
hello loves! i kept the pictures in this template just to show how the whole code looks like overall! all the images are tabs and their width and height is 120x120! if you donโ€™t want to use a background image, you can remove โ€œbackground: urlโ€ and replace it with โ€œbackground-colorโ€!
[div class=textbackground]nickname:[/div]
[div class=textbackground]age:[/div]
[div class=textbackground]date of birth:[/div]
[div class=textbackground]zodiac:[/div]
[div class=textbackground]gender:[/div]
[div class=textbackground]sexuality:[/div]
[div class=textbackground]domain:[/div]

[div class=header]โ€” appearance;[/div]
[div class=textbackground]faceclaim[/div]
[div class=textbackground]hair:[/div]
[div class=textbackground]eyes:[/div]
[div class=textbackground]height[/div]
[div class=textbackground]weight:[/div]
[div class=textbackground]distinguishing feature:[/div]
[div class=textbackground]tattoos | markings:[/div]
[div class=textbackground]clothing:[/div]
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContentPersona" style="display: none;"][div class=tabinfo]
[div class=textcontainter][div class=header]โ› what doesn't kill me

[div class=textbackground]virtues:

[div class=textbackground]vices:[/div]
[div class=textbackground]likes:[/div]
[div class=textbackground]dislikes:[/div]


[div class=header_two]makes me stronger โœ[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.
[/div][/div][/div][/div][/div] [div class="tabsContent tabsContentBackground" style="display: none;"][div class=tabinfo]
[div class=textcontainter][div class=header]โ› it's not my fault

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.
[/div][/div][/div][/div] [div class="tabsContent tabsContentOther" style="display: none;"][div class=tabinfo]
[div class=textcontainter][div class=header]i have my father's eyes โœ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum sapien a ipsum elementum finibus. Aenean dictum ut sapien et pellentesque. Suspendisse tempor vehicula turpis, at sagittis ligula tincidunt ut. Curabitur orci enim, auctor vel pharetra in, consectetur ac arcu. Nulla eleifend, elit et tempus ultricies, odio libero faucibus ipsum, nec tempor leo orci eu nisi. Vivamus tellus massa, congue in egestas vel, euismod id sapien. Nam ac gravida justo, at laoreet eros. Donec tristique velit turpis, quis condimentum erat tristique et. Integer eu tincidunt tortor. Pellentesque placerat auctor neque sit amet malesuada. Suspendisse vel tellus erat. Nam dapibus aliquet ligula eu fringilla. Ut sit amet luctus elit. Ut efficitur sapien sed dolor cursus congue.

Cras hendrerit dapibus convallis. Maecenas a sollicitudin urna. Integer ac molestie odio. Nunc ut risus tellus. Phasellus vitae mattis arcu, vel mattis diam. Proin consequat porttitor viverra. Suspendisse potenti. Duis sodales velit velit, id tempus nunc sollicitudin ac. In tincidunt nec risus at gravida. Morbi nec justo quis est volutpat elementum. Aliquam vitae mollis lectus. Quisque auctor tortor ut mi scelerisque venenatis. Suspendisse accumsan ipsum eget diam malesuada, sed tempus turpis ornare.
[/div][/div][/div][/div][/div]
codedbycrucially | click on picture [ tabs ] | hidden scroll | pastebin: x | live preview: x , xx
 
Last edited:

Users who are viewing this thread

Back
Top