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

Resource ↳ ís чσur sunshínє líkє mч rαín ↰

0 | (intro) when i was a young boy

fudgecakez

maybe i am,,,oops ?
0
when i was a young boy
hover !
my father
took me into the city
to see a marching band


alright
hi
im fudge and yes thats the username ive stuck with since my cringey-internet-teen years cause i lost all my creativity as i got older
i kinda suck at coding tbh so idek why im doing this but hey
practice makes perfect or smth right ?
noob level 5000 im warning you before you choos


DON'T S
  • remove credit
  • plagirize/try to pass off as your own
  • that's literally it

DO S
  • feel free to use with credit
  • hover over the "titles" to read more detail on each code
  • ask questions ! i promse i don't bite c:
  • lmk if smth isn't working correctly !!
  • suggest ways i can improve the code <3
  • heart the message if you plan on using any of these uwu
  • fill in the details in the codes i leave at the bottom !!! this is v imp bc they're blank templates
 
Last edited:
1 | the butterflies broke my heart

fudgecakez

maybe i am,,,oops ?
1
the butterflies broke my heart
hover !
alright alright hello !
starting this off with smth relatively simple c:

the code: click/tap the big central image to access the "detail." click/tap on the "name" (which is "YVONNE" in this case) to head back to the "home page" (the one with big central image.) click/tap on the 3 smol images to alternate between the different tabs and... yeah, that's about it

mobile-friendly ? mobile-friendly !

i did leave a blank template for anyone who wants to use the code but it requires you to fill in the blanks and insert your own values wherever I've left words in CAPITALS e.g. there's a part where it says color: COLOR; so you should add in your desired colour there.

i don't recommend messing with the height + widths too much unless you really know what you're doing bc let's be honest even i don't know what im doing

please for the love of God do *not* remove the credits or else i'm breaking both your knees

and speaking of credits, i used @RI.a 's tutorial and @glucose guardian and @Alteras ' snipper bc my dumbass couldnt figure out how to work hidden scrolls properly but hey ! it turned out p nice at the end so im not even mad

don't rip off the character either please and thank you :)
but yo guys, meet my baby yvonne she's a witch !
i made this c.s. for this coven rp that i left before it even took off so,,,yeet

n yea im done
i hope you like it !
and if you have any questions feel free to ask c:


#B69A95
#F3F2F9
#1C231A
#AF3F2A
#82473B
#788261
#31292C
#6B6182


code by @fudgecakez
if time heals wounds, why don't i feel the hurt less?
YVONNE
NAME ⋉
yvonne
no last name
nickname(s) ⊢
eve
evie
van /'vaan'/

nia

AGE ⋉
n/a
d.o.b. ⊢
13th may, 1966
zodiac ⊢
taurus

GENDER ⋉
while most demons are agender, yvonne does harbour a more feminine appeal
pronouns ⊢
she/her

SEXUALITY ⋉
bisexual

o r so she assumes; she's never liked anyone romantically before
but if she does, she doesn't think she'd discriminate between something as insignificant as gender identity
romantic orientation ⊢
aegoromantic
while the concept of it does intrigue her, she knows that "love" isn't as perfect as love itself. so she's not interested or actively looking to be in a relationship currently

LANGUAGES ⋉
english
hebrew
latin
coptic
aramaic
old norse
greek
other than that, she's a fast learner and can pick up languages easily

RACE ⋉
demon witch

FACE CLAIM ⋉
kim na hee (@knhs2)

HEAD CANONS ⋉
late night drives on stolen motor bikes (she makes sure to return them by sunrise!)
Plant Mom™; grows poisonous plants in her greenhouse/forest because they deserve love too!
l o v e s playing matchmaker between her friends
has practically mastered the art of herbal healing; yes, she was her own test subject and yes, she would sometimes hurt herself on purpose for the sake of science (though most times, that wouldn't even be required because she's so fucking clumsy)
recently made a tumblr blog to connect with other witches. her viewers/followers thought she was roleplaying account and let's just say it took her a while to find out (to be honest, she would've been completely oblivious to this day if it weren't for elmo pointing it out)
has experienced all music genres throughout the years and lana-fucking-del ray and chateau pop have her whole heart and more
basically lives in the local library. "honey, you're the only one who ever comes here anymore."
keeps a journal of fashion throughout the years
great at sketching and painting but can't cook for shit (even though she's had so much time to practice?)
looks like she can't handle her alcohol but hot d a m n, "dude, aftershock? the cinammon flavour? believe me, i can take a shot of straight rum."
*confusion noises*
"yeah, i know. they had skittles-flavoured vodka too. times were wild."
people think she's a bit of an odd ball but hey, she's pretty and she's fun and that's all that matters!
her First Time™ was pegging a guy
hates scooby doo with a burning passion, "no, i will not calm down! the characters are ripped off of the funky phantom, speed buggy and bailey's comets! it's so obvious! how are they getting away with this?!"
sings the incantations they used to recite at the church and adds her own words and twists to it, then watches stuff randomly blow up, "again, evie?" *sighs*
if she can, then she'll almost always be barefoot
arranges freshly-picked flowers on her friends' bedsides to show her appreciation for them
scribbly, scrawny, messy cursive handwriting that always slants downwards if she doesn' use lined-registers
has a whole shelf of bottles filled with jinxes, hexes and curses, that she found in the remains of the church
fought that one robber who was trying to steal an old granny's purse, won, and the granny ended up smacking her with her walking stick.
helps at a local orphanage on weekends because she knows what it's like to grow up without a proper family and not knowing exactly who/what you are. and she doesn't want the orphans to feel the way she does when she sees children bonding with their parents at the park
occassionally helps out at the local schools and always gets into arguments with the history teachers over the factual accuracy of the information given in the students' textbooks, "i object! that's not what really happened!"
the sound of music, finding nemo and spirit will always be the superior movies, the rest don't matter
works at cafes and bars and is always super oblivious to her patrons' flirting

YVONNE
PERSONALITY ⋉
amiable
very welcoming and friendly; she's the type to approach you if you're alone at a party and try to include you in her circle
conciliatory
she hates nothing more than when her friends argue and will do everything in her power to make them apologize to each other and own up to their mistake, "time out. all of you! you're behaving like children!"
patient
she's very disciplined/ascetic and can take every insult you throw her way; unless you're someone who matters to her, your opinion doesn't matter to her
abrasive
you'd have to put in a lot of effort to drive her to that brink and in the event that you succeed, she still won't go berserk: she has a harsh tongue in that case and will not hold herself back
idealistic
she's very starry-eyed and posseses a child-like innocence, believing that achieving a perfect utopia in this world is more than possible. this is also why she chooses to see the good in people which... doesn't work in her favour a whole lot
secretive
while she loves helping others with their problems, she seldom ever lets anyone else inside to display her vulnerabilites too; a part of her believes she doesn't deserve that priveledge
mbti type ⊢
enfj-a
the protagonist
passionate
charismatic
confident
altruist
intuitive
genuine
caring
temperament ⊢
75% sanguine
sociable charismatic
67% phlegmatic
thoughtful reserved
21% meloncholic
introverted self-reliant
8% choleric
strong-willed impatient
moral alignment ⊢
chaotic good

the "rebel hero"
will fight for what's right till the end

BIOGRAPHY ⋉
on the 13th of may, 1966 (which was the first and only friday the 13th occuring that year) a group of cultists tried to contact the devil, asking satan for a reward for their devotion to him. satan asked for a ritual: menorrhoeal blood from three virgin women, a sacrificial goat, and other items that will remain unnamed. satan granted them their wish and right in the dead-centre of that poorly-crafted pentagram lay a small baby wrapped up in a blue bundle.
assuming that it was the child of lucifer, they raised it as their own, expecting it to become the very epitome of evil. what they didn't expect, however, was seeing her chase butterflies around in the garden and crouch next to baby deer, petting its head.
they took this as test from their lord; to see how far they were willing to go for him. and so, they locked her up in the dungeon, shackled her wrists and chained her arms to the wall with iron restraints. they tortured her endleslly, relentless in their trangessions, and she took it all without a word in return - not a single curse fell from her lips
but what they never seemed to realise was the fact that she too, was a child of fire and as much as she tried to control her powers, aware of the possible damage they could cause, but her patience was wearing thin and tl;dr she accidentally burned the priest's face off and cried herself to sleep that night while the smell of charred flesh infiltrated her alveoli
she apologized countless times, thrasing violently while the cultists had her ankles fettered to a log they'd tied to the ceiling, having her suspended upside down over a pit of fire. they recited their incantations as the emblems began burning brighter on her skin, and they cursed her; the source of her life became her very weakness: she still had control over fire, she could still bend it to her will but now, it would take a toll on her
she learned that the hard way: after the "sacrament" was over, they locked her up again. she tried to melt the metal that bound her hands over her head but couldn't manage to reach the temperatures she wanted and ended up passing out from exertion
she doesn' know how long she'd been passed out for but when her eyelids finally fluttered open, there was a slow loris sitting on her lap, "you look like you could use some help." and together, they escaped
the news of a local church mysteriously burning down to its very foundations spread only a few days later and she swears it wasn't her doing

YVONNE
POWERS ⋉
elemental control (fire)
like most witches, she has the ability to control the four elements to a certain degree. but since she was born out of the blazing fire, her powers are especially potent when it comes to manipulating it. imagine harvesting such an immense ability and not being able to use it to its full potential because... that's her in a nutshell. if she desired to, she could conjure storms of fire, tornadoes that would consume everything in their path, set fire to the pouring rain, but the problem is... she can't: not anymore at least (not that she would've wanted to in the past even) because her captors - who she thought was her family for all those decades - cursed her because there was no other safe option for them; they cursed her so that this power of her's was rendered useless, for the more she tries to use it, the more of her life and health it consumes instead.
seventh sense
past the sixth sense, you now enter the astral realm where the concept of time is practically non-existent. she' living here and in the real world simultaneously, and this is why she can sense things before they occur. it's very subtle and if she isn't fully focused, she might just miss it. right before something dangerous is about to happen, she'll feel the air change; right before death is about to occur, she'll hear the soul crack into tiny fragments. this ability of her's also alerts her if someone isn't being entire truthful, if they're hiding something valuable (an emotion, a thought, an important piece of information) from her
zoolingualism
she also has the mystic ability to communicate to all wildlife; animals, birds, insects - they all naturally gravitate to her, and she can sit for hours on end talking to each one of the creatures, listening to all their wonderful stories with rapt attention

FAMILIAR ⋉
a slow loris named elmo
he'd heard stories from the pets in his neighbourhood, of a young woman that the local church apparently had imprisoned in their basement and has been interested in her since then
however, he could never find a way to enter because the boundaries were shrouded with dark magic
one day, during his daily visits to the church, he found that the barrier was down and took this as his chance to break in
the scene broke his heart: a young woman (the one he assumed was the hot topic between the pets) was hung upside-down over a blazing pit of fire; there was nothing he could've done then to stop the ritual because he wasn't bonded to her as her familiar yet
he'd waited for days in detainment with her, waiting for her to wake up, and the day she had, he'd wasted no time, "you look like you could use some help."
"from now onwards, i am your's and you are mine. he has the power to camouflage or blend in with his surroundings (different from invisibility) and that's how he slipped her out of that hell-hole
Smol But Dangerous™; if elmo was your ordinary slow loris, his bite would be painful, yes, causing extreme discomfort and illness but he's not your everyday slow loris; his bite can cause the victim to go into anaphylactic shock within moments and death may occur in minutes
"can i hold your hand?" he's still a baby and barely bigger than the size of her palm; if he's not sleeping in her pocket then he's wrapped around her index finger while she tries to accomplish her tasks without hurting him
absolutely adores her with all his might and loves it when she praises him; will become sad if she pays more attention to others than to him
"let's play hide and seek in the dark!" he always wins too, because he can see when it's pitch black and he hasn't told her about his scotopia yet
Smol But Lethal Pt. 2: he's the monster you see hovering over you in your sleep paralysis; has the ability to manifest into a person's deepest nightmares and slip into their dreams while they're in rem sleep tried to do it to her once but his form was unchanged. "aren't you scared of anything?"
"you saved me from my only ephialtes. why would i be?"
despite her constant questioning, he refuses to admit that he was the one who set the church on fire: he'd just been sitting on a nearby tree and contemplating doing so when it'd happened out of the blue. "but if you'd wanted me to, i would've destroyed their lineage so no remnants of their generations could even continue into the afterlife. i'd shred them to pieces if you had wanted me to."
"your name is literally elmo. as in, the cute, cuddly character from sesame street. don't give me that."
"you're the one who--!"
their relationship is so w h o l e s o m e i'm crying
"hey, evie?"
"hm?"
"i love you."
"aw, i love you too, elmo."



again, i repeat: anywhere you see smth written in CAPITAL letters, you're required to fill that in with a value/option of your choice e.g. if you see background: url('URL'); then you should ctrl c + v your desired image's url there, or if you see a YC'S NAME somewhere then type in yc's name there. okay ? okay

also since i don't want y'all to suffer finding all the divs you need to fit stuff in, i'll write them down below and you can just ctrl c + f search for them and quickly fill 'em out

  • background: BGCOLORAROUNDPIC;
  • background: url('URL');
  • border: 1px STYLE COLOR;
  • cursor: url('URL'), auto;
  • opacity: OPACITY;
  • width: ANYTHINGLESSTHAN270PX;
  • transform: rotate(#deg);
  • font-size: #px;
  • letter-spacing: #px;
  • color: FONTCOLOR;
  • top: #px;
  • left: #px;
  • background: BGCOLORFOR3PICS;
  • background: BGCOLORFORTEXT;
  • color: TEXTCOLOR;
  • color: TRANSFONTCOLOR;
  • font="FONT"
  • QUOTE HERE
  • YC'S NAME
  • YOUR TEXT HERE

Code:
[nobr]
[class="tab1"]
width: 310px;
height: 320px;
box-sizing: border-box;
padding: 20px;
background: BGCOLORAROUNDPIC;
margin: auto;
[/class]

[class="tab2"]
width: 310px;
height: auto;
margin: auto;
display: none;
[/class]

[class="tab3"]
width: 310px;
height: auto;
margin: auto;
display: none;
[/class]

[class="tab4"]
width: 310px;
height: auto;
margin: auto;
display: none;
[/class]

[class="tab1pic"]
width: 270px;
height: 280px;
background: url('URL');
background-size: cover;
transition: 1s;
box-sizing: border-box;
border: 1px STYLE COLOR;
cursor: url('URL'), auto;
[/class]

[comment]the "cursor" can be "pointer" instead of "url('URL')" too[/comment]

[class name="tab1pic" state="hover"]
opacity: OPACITY;
[/CLASS]

[script class="tab1pic" on="click"]
hide tab1
show tab2
hide tab3
hide tab4
[/script]

[class="tab1pictext"]
width: ANYTHINGLESSTHAN270PX;
position: relative;
transform: rotate(#deg);
font-size: #px;
letter-spacing: #px;
color: FONTCOLOR;
top: #px;
left: #px;
[/class]

[comment]the "transform" and "letter-spacing" properties in the "tab1pictext" class are optional[/comment]

[class="imgcontainer"]
width: 120px;
height: 320px;
background: BGCOLORFOR3PICS;
[/class]

[class="img1"]
background: url('URL');
background-size: cover;
height: 80px;
width: 80px;
position: relative;
margin-left: 20px;
margin-top: 20px;
box-sizing: border-box;
border: 1px STYLE COLOR;
display: block;
background-position: center;
transition: 1s;
cursor: url('URL'), auto;
[/CLASS]

[comment]again, the "ur('URL')l" in the cursor can be replaced with "pointer." background-size and position can also be altered to your liking. this applies to classes "img1" "img2" "img3" "name"[/comment]

[class name="img1" state="hover"]
opacity: OPACITY;
[/CLASS]

[script class="img1" on="click"]
hide tab1
show tab2
hide tab3
hide tab4
[/script]

[class="img2"]
background: url('URL');
background-size: cover;
height: 80px;
width: 80px;
position: relative;
margin-left: 20px;
margin-top: 20px;
box-sizing: border-box;
border: 1px STYLE COLOR;
display: block;
background-position: center;
transition: 1s;
cursor: url('URL'), auto;
[/class]

[class name="img2" state="hover"]
opacity: OPACITY;
[/class]

[script class="img2" on="click"]
hide tab1
hide tab2
show tab3
hide tab4
[/script]

[class="img3"]
background: url('URL');
background-size: cover;
height: 80px;
width: 80px;
position: relative;
margin-left: 20px;
margin-top: 20px;
box-sizing: border-box;
border: 1px STYLE COLOR;
display: block;
background-position: center;
transition: 1s;
cursor: url('URL'), auto;
[/class]

[class name="img3" state="hover"]
opacity: OPACITY;
[/class]

[script class="img3" on="click"]
hide tab1
hide tab2
hide tab3
show tab4
[/script]

[class="detaildiv"]
width: 190px;
height: 320px;
background: BGCOLORFORTEXT;
[/class]

[class="name"]
width: 190px;
height: 25px;
background: BGCOLORFORTEXT;
text-align: center;
line-height: 25px;
font-size: 23px;
color: TEXTCOLOR;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
display: block;
transition: 1s;
cursor: url('URL'), auto;
[/class]

[class name="name" state="hover"]
color: TRANSFONTCOLOR;
[/class]

[script class="name" on="click"]
show tab1
hide tab2
hide tab3
hide tab4
[/script]

[class="credits"]
margin: auto;
width: 310px;
height: auto;
font-size: 8px;
text-align: right;
[/class]

[class="postscroll"]
overflow: hidden;
width: 100%;
height: 290px;
border: 2px solid transparent;
[/class]

[class="post"]
width: 120%;
height: 290px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class="text"]
max-width: 185px;
font-size: 10px;
line-height: #px;
text-align: justify;
color: FONTCOLOR;
[/CLASS]

[div class="credits"]code by @fudgecakez[/div]
[div class="tab1"]
[div class="tab1pic"]
[div class="tab1pictext"]
[font="FONT"]QUOTE HERE[/font]
[/div]
[/div]
[/div]

[comment]that's ^^^ the first visible tab (the one with the big pic + slanted text.)[/comment]

[div class="tab2"]
[div=display: flex; justify-content: center;]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]YC'S NAME[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR TEXT HERE
[div=width: 10px; height: 400px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[comment]that's ^^^ the "first" tab i.e. the one with the "name" "age" "sexuality" "headcanons" etc. the last div i added (the one with height: 400px;) can be decreased to once you've added your text. in my code, i have it at 30px just because i like having that extra bit of scroll. also for the bit where you write yc's name, i'd suggest doing only the first name or a nickname because the height is fixed so extra text will overflow onto your "post"/"text" div[/comment]

[div class="tab3"]
[div=display: flex; justify-content: center;]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]YC'S NAME[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR TEXT HERE
[div=width: 10px; height: 400px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[comment]that's ^^^ the "second" tab i.e. the one with mc's personality + bio. whatever i said in my previous comment about the height: 400px; applies here too. and in this next vvv one as well[/comment]

[div class="tab4"]
[div=display: flex; justify-content: center;]
[div class="imgcontainer"]
[div class="img1"][/div]
[div class="img2"][/div]
[div class="img3"][/div]
[/div]
[div class="detaildiv"]
[div class="name"]YC'S NAME[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
YOUR TEXT HERE
[div=width: 10px; height: 400px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[comment]that's ^^^ the "third" tab i.e. the one with info about power and familiar in the original code. don't forget to add [br][/br] for line breaks[/comment]

[/nobr]
 
Last edited:
2 | can't risk falling for you

fudgecakez

maybe i am,,,oops ?
2
can't risk falling for you
hover !
i'm back at it again with the white vans

this was absolute hell to code just bc im still really new to coding/bbcode+ but seeing all these cool-ass aesthetic posts ppl make kinda riles me up to do the same c:< that being said, i needed a l o t of help figuring out the slide up and down of the pseudo-accordion (tbh, it was only after i was done that i realised i could've made use of the accordion/slider codes but,,,oh well this looks cooler.) so anyways, i needed some help with them and oof, big thank you to @Alteras (im lowkey scared of acc tagging them to i linked to their profile instead tho im sure we all know them lmao)

the code: hover/tap over the main "focus on me" background img and after it recolours + repositions and the box with pics slides in, click/tap on any of the images to reveal the "details." in order to return to the "main page" (as in, have all the pics show once more) click/tap on the "FOCUS ON ME" written on the bottom left of the background img

it sounds kind of complicated ik but it's p simple and was sm fun to code (even though i was this close to losing my mind at certain points)

mobile-friendly ? mobile-friendly !

i did leave a blank template for anyone who wants to use the code but it requires you to fill in the blanks and insert your own values wherever I've left words in CAPITALS e.g. there's a part where it says color: COLOR; so you should add in your desired colour there.

i don't recommend messing with the height + widths too much unless you really know what you're doing bc let's be honest even i don't know what im doing guys im not joking the code is an absolute clusterfuck

please for the love of God do *not* remove the credits or else i'm eating both your kneecaps

don't rip off the character either please and thank you :)
but yo guys, here's my baby izzy uvu i made this c.s. for a 1x1 i left too soon n i r e g r e t. in the middle of actually typing in all the details for her, i started feeling like im making one of those typical YA female protagonists yknow the ones who're all "oMg Im So DifFeReNt I'm NoT lIek tHEsE oTheR gIrLS" :le sigh: but oh well

i hope you like it !
and if you have any questions feel free to ask c:


#f5efeb
#e9ebe8
#faf1eb
#faf0eb
rgba(168, 156, 145)
#3F1714
#7F211D
#6F1110
#320505
#562C25
#1D0F0C
#A34240
#4E1D1C
#8F231B
#471A14


code by @fudgecakez
name
isadora shaylyn covington
isadora
/ iz-za-do-ra. /
feminine form of the name isidoros which means gift of isis. it's a compound name composed of the egyptian goddess isis (the goddess of fertility) and the greek element dōron (meaning gift)
shaylyn
/ shay-lin. /
one version of the gaelic name shayla which means admirable and from a fairy palace
covington
/ kuv-ving-ten. /
this family name dates back to anglo-saxon culture of britain

nicknames
it's mostly only her friends who lovingly use nicknames for her, or if her brothers are feeling particularly affectionate and their parents either, aren't around or their father's drunk enough
izzy

dora

shea butter

gem

age
22 but she's often mistaken to be older than she actually is due to her sensual aura and outward demeanour
d.o.b.
21st june
zodiac
gemini; and as a gemini, she doesn't like being confined to stereotypes and rules, or being forced to stick to one set of traits. shifts her perspctive constantly and is very open to listening to others' views as well

gender
genderfluid
pronouns
she/her or he/him; it's usually quite obvious which one she'd prefer you address her by at the moment
sexuality
pansexual but definitely is more sapphic and fem-aligned
romantic orientation
alloromantic; while she does experience romantic attraction to both sexes and everything in-between, she doesn't... care much for finding love? she doesn't believe anyone could love a freak like her and is perfectly fine with that

religion
none
theism
instead of believing in a particular system or sect, and following their teachings and books, and believing in their she believes in a God - the Divine Creator who loves all his creations and is unbiased between colour, race, and social standing

languages
having been brought up in a relatively well-off family, she's fluent in a few languages and would like to learn many more!
english

french

japanese
mbti type
entj-t
the commander
the embodiment of charisma and confidence with an authority that draws crowds together; uses her determination and drive to achieve any goal she sets for herself

freudian personality

phallic-compensative
can be compared to a five-year-old who knows she's not the favourite of the family but would like nothing more than to be, and as a result of this envy, she prides in being able to peel another's overbearing dominance and pick apart their futile arguments, laying their bullshit bare to them.
while she's marked as easy-going and even-handed by most, the underlying motivation of her noble actions is a longing to be noticed and deemed worthy of those she believes to be mightier than herself

temperament

sanguine
very pleasure-seeking: cannot stick to routines and will try to pursue a new hobbies but loses interest as soon as it ceases to be enjoyable. and sociable. it's difficult for her to follow all the way through with tasks without expectations and a deadline looming overhead
enjoys social gatherings and meeting new people. not shy at all and oozes confidence and charisma. believes that what she's doing is right and can be quite shameless at times

moral alignment

neutral
defines extremes such as good and evil, and law and chaos on her own accord, doing what she feels to be the right thing even if it hurts the people around her.
can be true to her word and loyal when she wants to but if the task is getting out of hand, she will try to negotiate a middle way, and if the other party refuses to see from her perspective, then she'll gladly take the first exit presented to her by another. will take her personal interest into account first before striking deals, making her diplomatic and tactful

hogwarts house

gryffindor
bold and assertive, not afraid to speak her mind about anything that goes against her sense of right and wrong

-vert type

ambivert
enjoys the spotlight almost just as much as she enjoys a corner and good book

-ist type

idealist
trusts in her intuition but at the same time, dreams of attaining more knowledge and wisdom that can help her achieve her goals quicker, and with less obstacles in her path. passionately concerned with personal growth and development, and to learn more about herself so that she can become her best possible self - removing any flaws and weaknesses

-dere type

deredere
generally a very energetic and outspoken girl who tries to treat everyone as fairly as they treat her. thrives off of adventure, wanting to meet more people who can level her enthusiasm for topics of literature, philosophy, history and politics

spirit animal

tiger
a master of her own domain; she holds great passion and energy but she chooses very meticulously what she wants to spend this energy and zeal on. she's determined and independent, willing to try, try, and try again if she doesn't succeed the first time. failure isn't something that scares her - it's inevitable.
a tiger isn't a long-distance runner but that doesn't make it a weak hunter. it means that it zeroes in on its end-goal, working silently, and when the time is right, it'll deliver its final blow with swiftness and confidence
age

actual
22
appearance
27

eyes

colour
a cool, autumn-brown that glows a warm honey-hazel under the last rays of the evening sun
glasses
near-sighted; requires reading glasses (mostly because of all those novels and textbooks she used to read under the bedcovers late at night)
contacts
make her eyes water so she tries to steer clear of them

hair

colour
the darkest brown before it's mistaken for black
length
reaches to the tip of her scapula
type
neither very fine, nor too coarse; wavy and light; glistens under the sunlight; easy to style; the tips are more curly
style
her usualy daytime hairstyle is a classic under braid or a half-up braid - depending on how much time she's willing to give the maids to spend on her appearance. nighttime, she does her hair herself and likes to keep all of it tightly secured in a two-way braid-bun. and she's precise too: can't have a single strand out of place!

physique

build
slightly-built; thin and not overly muscular. has a defined waist and bust (though that's a given with how tight her corsets are tied)
compact; don't get her wrong! she may be short and slender but she can combat a man with equal brawns - with much difficulty, of course. not in hand-to-hand brawls either. with an épée, perhaps
statuesque; a true beauty. her face is very pleasing to the eye
height
5'5"
weight
120 llbs

skin

tone
light-skinned with rose undertones
scars
abrasions on her knees from the amount of times she's fallen over a horse; yes, she wears shorts for horse-riding. or... she used to, at least
birthmarks
a weird blob on her arm that's a little darker than the rest of her skin
tattoos
none; she doesn't want to taint her skin with something she may regret in the years to come
piercings
one on both her ears, like most women

appearance

accessories
nothing that you could call a predominant feature since she likes to mix and match her jewelry; one thing that's always constant is the silver accents in her hair
dressing style
ball gowns make her feel elegant and worthy of her title as the Viscount's daughter. heels, however, are the bane of her existence; not in the sense that she can't seem to find her balance (though that may play a noticeable part) but how wearing them for too long make her feet sore

illnesses

physical disabilities
none
physical amputations
none
mental disorders
none that she knows of
chronic diseases
none
gender

genderfluid
there's nothing wrong with a woman wanting to wear men's clothing and doing activities that are considered more manly but in the environment she was brought up in, that's what's been beaten into her head from a young age. which is why she doesn't feel comfortable being addressed as a woman during her rather questionable nighttime trysts

alias

isaiah
/ iz-za-ae-yah /
from the hebrew name yesha'yahu which means which means to save. isaiah is one of the major four prophets from the old testament, and supposedly the author of the book of isaiah
she came across this name as a child when she used to be a frequent church goer. it sounded much like her own name and that's probably why it stuck with her all this time. once, when attending a political meet-up late at night, she was asked to introduce herself and isaiah is what she'd blurted out. they never asked for more information regarding her family and businesses so this is the only detail she's concreted about her second identity

hobby

cross-dressing
she hadn't meant to take it on as a full-time thing; it'd started during her late-teenage years when her mother had been going through her brother's wardrobe, trying to organize the constant state of chaos it's always in, tossing the charity clothes into one basket and laundry ones into another. she'd been tasked with getting rid of the charity clothes and... she kind-of fulfilled her promise? she ended up trying them on and that's where it all started. wearing a pair of tight trousers and a low-neck overcoat adorned with threading too extravagant for her tastes... it felt oddly fitting.
it was her nighttime thing though; something she'd do in front of the full-body mirror in her room when everyone was asleep but one night... she doesn't know what'd come over her: she'd styled all her hair in a tight up-do, ensuring that none of the strands would slip out of place, before tucking them into a tidy cap. she would shuffle the boots on and... just head out. head out is a fancy way of saying jump out the window and sprain her ankle. she visited a local bar and felt so much more confident in men's attire. no one suspected it was her; however, the patrons at the bar were probably all too drunk to pick up on her rather feminine and light tone of voice. she'd received a few off-hand comments about it from the ladies she'd taken for a walk that evening
men, in their drunken stupor, had flirted with her too! that's where she'd gotten a true taste for this lifestyle and slowly, she started sneaking out more, for longer, started going back to peoples' homes more often - careful to never be on the receiving end, and stop things before they went too far. overtime, she's gotten better at masking her voice, deepening it with the help of some sulfur-hexafluoride and lots of practice. now, she's able to get past most security and trick most of the aristocrats that attend those nightly political round-table talks that they could be arrested for if caught.
it's the thrill.
and she lives for it
history

childhood
after having three consecutive boys, the covingtons were ready to try for another one. men were, naturally, the head of the household at the time - they inherited the property, lead the army, participated in politics. they could build a name for themselves in this wretched without batting a single eyelash, uncaring for who they had to step on and put behind to achieve their end goals. women, on the other hand, were wallflowers. pretty collectables who were good for nothing except bearing the males' children (boys and popping them out healthy and ready to take on the world. all they did was tend to the house, care for their husband, chat about fashion over tea; their standing in society was respectable, yes, but not fair. the ones with the good face usually made it out to the top but still, were treated as underlings to men.
this is why mrs covington had prayed to God to, Please, please, don't let it be a girl. her intentions had been pure: she'd seen and experienced the world for what it was and what it could be, and didn't want her own daughter to face any of that. after all, a woman's fate was predestined from the start: marry a handsome, young, wealthy stud and live the american dream! this is... also why she'd cried after successfully delivering a baby girl
still, mrs convington tried to be the perfect mother to her child and raised her according to the standards society held for women at the time. despite women not having access to education, she hired many tutors and paid them handsomely to teach her daughter. they did and she proved to be a quick learner. mrs covington even taught isadora how to cook and clean so on the occassion that, Your husband can't afford maids... she could still be the perfect, petite wife
adolescence
around the time when she started to get more curious and her friends started introducing her to what were known as the undesirables. they were men and women alike, who'd been kicked out of their homes for being different and not conforming with the norms. isadora remembers asking her friends, like the innocent child she was, "why're they not desirable? they look fine to me." maybe a good soak, a fresh pair of clothes and some warm stew would bring the colour back to their face but otherwise, they were fine. "you see him?" one of her friends had replied, pointing to one of the men sleeping against the tree. isadora had nodded. "that's not a 'him.' that's a girl. that's why they were kicked out."
that never made much sense to her and she'd pondered about it the entire evening and after she was tucked into bed too! "is something the matter, little one?" her mother had cooed, carding her fingers through her hair. she always used such a gentle tone when speaking with her daughter, did all she could to make up for the love her father never gave. "why're they called the undesirables?" isadora had blurted out without thinking about the consequences, as she always does, "i don't think there's anything wrong with wanting to be more boy-ish. is there, mother?" she still remembers the look of absolute horror she'd seen on her mother's face that night, how quickly she'd blown the candle out and urged the brunette to go to sleep and never bring the topic up again.
that was harder than it seemed because she was so curious. and she'd spent the entire night tossing and turning in bed; stayed awake throughout the loud clamouring and bellowing as her father screamed on top of his lungs, "YOU RAISED HER! IT'S YOUR FAULT, WOMAN!" followed by clattering and crashing as he threw precious china around and her mother sobbed quietly in the corner.
this was also the time when she developed a deep distaste for her father, and how effective make-up can be in covering up your mistakes (because her mother had bedaubed foundation on for weeks to hide the deep red bruise on her left cheek)
adulthood
she's a lot more knowledgeable now and her nightly endeavours keep on getting more and more adventurous, and her encounters with others keep on becoming more frisky. she's come a long way from the introverted girl she used to be; isaiah had taught her to be more comfortable with her body, to hold her head up high and look a man square in the eye were conversing with them (her brothers abhor this habit of hers but the men at the bar - on occasions when she visits as a woman - seem to love the challenge she presents them with. which is good: she loves a man (or even a woman, but they're harder to come by) who can acknowledge her fire and mirror it back with equal ardour.
unfortunately for her, she also started becoming more careless in disposing of her evidence or covering up her tracks properly because one fateful night, when she was out, her mother visited her room only to find it... empty. empty as the wind blew back the curtains and the open balcony-doors. not having anticipated any of this, isadora climbed back in just before sunrise and right through the route she'd taken to escape.
that was the first day her mother had raised a hand on her. but promised to keep it a secret from everyone else as long as she, "Get rid of those! I will not have you tarnish this family's name!" she didn't have to; her father was, only days later, caught redhanded in the illicit business of trading drugs, gunpowder and other ammunition with the local gangs - who transported it past the border, selling it to the enemies and their armies. he was put behind bars and isadora doesn't understand why he wasn't punished more severely! this was blatant treachery to the state!
the night they'd taken her father away was the night isadora had donned her unbecoming attire, paying extra attention to detail and walked out through the front doors while her mother cried and her brothers consoled her. she's still mad at all of them: her mother for never realising how much power she could've had over the man of the household if she'd learned to put her foot down, her brothers for always siding with their father, the judicial system for being as corrupt as it was. everything really

this is a blank template where you have to fill out the details. e.g. if somewhere it says "background-size: #px;" then input the "# (number)" value there and watch the magic happen. i don't recommend messing with values i've left as is but... who am i to stop you, eh ?
if you have any questions feel free to ask c:

also since i don't want y'all to suffer finding all the divs you need to fit stuff in, i'll write them down below and you can just ctrl c + f search for them and quickly fill 'em out

  • background: url('URL');
  • background-size: #%;
  • background-position: #% #%;
  • filter: brightness(#%) grayscale(#%);
  • filter: brightness(#%) grayscale(0%);
  • background: rgba(#, #, #, #);
  • top: #px;
  • left: #px;
  • YOUR TEXT HERE

Code:
[nobr]
[class=container]
width: 320px;
height: 250px;
overflow: hidden;
margin: auto;
[/class]




[comment]-----------------background image (the one that moves when you hover over it)-----------------[/comment]

[class=image]
width: 320px;
height: 250px;
background: url('URL');
background-size: #%;
background-position: #% #%;
filter: brightness(#%) grayscale(#%);
box-sizing: border-box;
[/class]

[class=color]
animation-name: {post_id}imagecolor;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[animation=imagecolor]
[keyframe=50]
filter: brightness(#%) grayscale(0%);
[/keyframe]
[keyframe=100]
filter: brightness(#%) grayscale(0%);
background-size: #%;
background-position: #% #%;
[/keyframe]
[/animation]

[script class=image on=mouseenter]
addClass color image
addClass slidein picdiv
[/script]

[comment]the "image" class is where we define the post-animation "look" of the picture (i.e. how it looks before you hover over it.) you'll have to decide the placement + colours yourself. and in the "imagecolor" animation, you'll have to input values for how you want it positioned + looking /after/ the "image" is hovered on[/comment]




[comment]-----------------sliding the box with pictures in-----------------[/comment]

[class=picdiv]
position: relative;
width: 286px;
height: 62px;
background: rgba(#, #, #, #);
transform: translate(320px, 38px);
display: flex;
justify-content: space-between;
align-content: space-between;
overflow: hidden;
box-sizing: border-box;
padding: 6px;
[/class]

[comment]the fourth # in "background: rgba(#, #, #, #);" is supposed to be any number between 0 to 1 and it changes the opacity of the div (the div with the five pictures in it[/comment]

[class=slidein]
animation-name: {post_id}slideinpicdiv;
animation-duration: 2.25s;
animation-delay: 3.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;[/class]

[animation=slideinpicdiv]
[keyframe=100]
transform: translate(17px, 38px);
[/keyframe]
[/animation]




[comment]-----------------pictures in the box that slid in-----------------[/comment]

[class name=pic1 state=hover]
opacity: 1;
[/class]
[class name=pic2 state=hover]
opacity: 1;
[/class]
[class name=pic3 state=hover]
opacity: 1;
[/class]
[class name=pic4 state=hover]
opacity: 1;
[/class]
[class name=pic6 state=hover]
opacity: 1;
[/class]

[class=pic1]
background: url('URL');
width: 50px;
height: 50px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic2]
background: url('URL');
width: 50px;
height: 50px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic3]
background: url('URL');
width: 50px;
height: 50px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic4]
background: url('URL');
width: 50px;
height: 50px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic6]
background: url('URL');
width: 50px;
height: 50px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[comment]depending on what picture you use, you might have to background-position: ___; and background-size: #px; it accordingly to show the desired parts of the picture. also... don't ask what happened to pic5 we don't speak of that[/comment]




[comment]-----------------functions on the pictures (getting accordions to *open*)-----------------[/comment]

[script class=pic1 on=click]
hide pic2
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800  hidden
fadeIn 900 scroll
fadeIn 1000 textbox
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic1
removeClass decsize pic1
addClass smallpermsize pic1
addClass incsize pic1
[/script]

[script class=pic2 on=click]
hide pic1
hide pic3
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800  hidden2
fadeIn 900 scroll2
fadeIn 1000 textbox2
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic2
removeClass decsize pic2
addClass smallpermsize pic2
addClass incsize pic2
[/script]

[script class=pic3 on=click]
hide pic1
hide pic2
hide pic4
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800  hidden3
fadeIn 900 scroll3
fadeIn 1000 textbox3
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic3
removeClass decsize pic3
addClass smallpermsize pic3
addClass incsize pic3
[/script]

[script class=pic4 on=click]
hide pic1
hide pic2
hide pic3
hide pic6
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800  hidden4
fadeIn 900 scroll4
fadeIn 1000 textbox4
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic4
removeClass decsize pic4
addClass smallpermsize pic4
addClass incsize pic4
[/script]

[script class=pic6 on=click]
hide pic1
hide pic2
hide pic3
hide pic4
addClass permspot picdiv
removeClass slidein picdiv
addClass incheight picdiv
fadeIn 800  hidden6
fadeIn 900 scroll6
fadeIn 1000 textbox6
addClass activereturn home
removeClass permheight picdiv
removeClass decheight picdiv
removeClass tallpermsize pic6
removeClass decsize pic6
addClass smallpermsize pic6
addClass incsize pic6
[/script]




[comment]-----------------text boxes inside the accordions-----------------[/comment]

[class=hidden]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]

[class=scroll]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=textbox]
box-sizing: border-box;
max-width: 218px;
display: none;
[/class]

[class=hidden2]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]

[class=scroll2]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=textbox2]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]

[class=hidden3]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]

[class=scroll3]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=textbox3]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]

[class=hidden4]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]

[class=scroll4]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=textbox4]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]

[class=hidden6]
display: none;
width: 218px;
margin-left: 5px;
overflow: hidden;
[/class]

[class=scroll6]
display: none;
width: 120%;
height: 166px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class=textbox6]
box-sizing: border-box;
max-width: 218px;
display: none;
text-align: justify;
[/class]




[comment]-----------------holy shit okay these vvv are all the classes/scripts to get the accordion to open n close to show the text inside-----------------[/comment]

[class=permspot]
transform: translate(17px, 38px);
[/class]

[class=incheight]
animation-name: {post_id}picdivincheight;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[animation=picdivincheight]
[keyframe=100]
height: 178px;
transform: translate(17px, 17px);
[/keyframe]
[/animation]

[class=incsize]
animation-name: {post_id}incsizepic;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[animation=incsizepic]
[keyframe=100]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/keyframe]
[/animation]

[class=tallpermsize]
opacity: 1;
height: 166px;
width: 50px;
background-repeat: repeat;
cursor: auto;
[/class]

[class=decsize]
opacity: 0.8;
animation-name: {post_id}decsizepic;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[animation=decsizepic]
[keyframe=100]
height: 50px;
width: 50px;
cursor: pointer;
[/keyframe]
[/animation]

[class name=decsize state=hover]
opacity: 1;
[/class]

[class=smallpermsize]
height: 50px;
[/class]

[class=permheight]
height: 178px;
transform: translate(17px, 17px);
[/class]

[class=decheight]
animation-name: {post_id}decheightpicdiv;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
[/class]

[animation=decheightpicdiv]
[keyframe=100]
height: 62px;
transform: translate(17px, 38px);
[/keyframe]
[/animation]




[comment]-----------------function on the "back" button (getting accordions to *close*)-----------------[/comment]

[class=home]
background: blue;
opacity: 0.5;
width: 138px;
height: 20px;
position: absolute;
top: #px;
left: #px;
[/class]

[comment]the "background: blue;" on here is temporary just so you know where you're placing the "back button" (in my case, it was positioned over the "FOCUS ON ME" on the background image. depending on the image you go with, you'll have to position it according (i.e. fill in the "top: __px;" and "left: __px;" values[/comment]

[class=activereturn]
cursor: pointer;
[/class]

[script class=home on=click]
removeClass activereturn home
addClass permheight picdiv
hide hidden
hide scroll
hide textbox
removeClass incsize pic1
addClass tallpermsize pic1
addClass decsize pic1
removeClass smallpermsize pic1
hide hidden2
hide scroll2
hide textbox2
removeClass incsize pic2
addClass tallpermsize pic2
addClass decsize pic2
removeClass smallpermsize pic2
hide hidden3
hide scroll3
hide textbox3
removeClass incsize pic3
addClass tallpermsize pic3
addClass decsize pic3
removeClass smallpermsize pic3
hide hidden4
hide scroll4
hide textbox4
removeClass incsize pic4
addClass tallpermsize pic4
addClass decsize pic4
removeClass smallpermsize pic4
hide hidden6
hide scroll6
hide textbox6
removeClass incsize pic6
addClass tallpermsize pic6
addClass decsize pic6
removeClass smallpermsize pic6
removeClass incheight picdiv
addClass decheight picdiv
fadeIn 900 pic1
fadeIn 900 pic2
fadeIn 900 pic3
fadeIn 900 pic4
fadeIn 900 pic6
[/script]




[comment]-----------------the acc code-----------------[/comment]

[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by [USER=68743]@fudgecakez[/USER][/div]
[div class=container]
[div class=image]
[div class=picdiv]
[div class=pic1][/div]
[div class=pic2][/div]
[div class=pic3][/div]
[div class=pic4][/div]
[div class=pic6][/div]
[div class=hidden][div class=scroll][div class=textbox]
YOUR TEXT HERE
[/div][/div][/div]

[div class=hidden2][div class=scroll2][div class=textbox2]
YOUR TEXT HERE
[/div][/div][/div]

[div class=hidden3][div class=scroll3][div class=textbox3]
YOUR TEXT HERE
[/div][/div][/div]

[div class=hidden4][div class=scroll4][div class=textbox4]
YOUR TEXT HERE
[/div][/div][/div]

[div class=hidden6][div class=scroll6][div class=textbox6]
YOUR TEXT HERE
[/div][/div][/div]
[/div]
[div class=home][/div]
[/div]
[/div]

[comment]for the above divs (wherever you have to add in your detail-text) don't forget to add [br][/br] for line breaks[/comment]

[/nobr]
this acc happened to me while i was coding this n i almost cried
asdsadasd.PNG
 
Last edited:

starboy.

nihilist blues.
dude that last one is so freakin' beautiful. but one question. where is the back button. it's probably cause i'm on mobile or something but i cannot find it for the life of me.
 

fudgecakez

maybe i am,,,oops ?
that last one is so freakin' beautiful
oml thank you sm i appreciate you <3
there's no back "button" per se
you see how the "FOCUS ON ME" of the bg img moves to the bottom left ?
just tap on those words and the text box + accordion will close n you'll have the pictures + other options back c:
 
Last edited:

starboy.

nihilist blues.
god bless you i thought i was really stupid for not finding it skskdf. but i am totally gonna use it in the future! it's so sick.
 

eggsaladsandwitch

Doing their best!
hihi! i'm trying to use your first code and was wondering if you could help me out with an issue i've been trying to fix ;w;
for some reason, all of my text is justified to fill the space and it looks really awkward? do you have any idea of how to fix this spacing issue? here's a picture of what i mean (:
pls help!.JPG
thank you!
 
3 | try harder, try-hard

fudgecakez

maybe i am,,,oops ?
3
try harder, try-hard
hover !
[/br] this is prbly the quickest i've ever made a code tbh (record: two days tops) and i feel like dying it's currently almos5 three in the morning here while i type this

the code: hover/tap over that tree icon on the top right corner. it'll display three circles on the horizontal "fake it" picture that you can click/tap on to navigate between the different pages

this one's p simple, nothing special, quite compact but it looks kinda cute anyway so i d to share it with y'all too c:

mobile-friendly ? mobile-friendly !

as always, blank template at the bottom for anyone who wants to use this!

ok i know what you're thinking: ugh aNotHEr coLe SpRoUse cHarAcTer but joke's on you 'cause this is the first time i used him as a fc :P long story short, my partner n i realised we were highkey lowkey recreating cole n lili for our plot so she suggested we just go ahead n use them as fcs and i was like ??? yEs ?????

so i hope you like it too (as basic as it it sjsksk)
and if you have any questions feel free to ask c:


#D0BFA8
rgb(61, 54, 48)
#faf2e8
#3d3630
35C3B2A
rgb(44, 19, 14)
#8F6442
#426D8F
#E8C4AC
#ACD0E8
#DEEAE3
#EADEE5
#C55CA1
#A1C55C
#5CA1C5


code by @fudgecakez
mood:
prideful​

sociability:

muse:

lethargy:

confidence:

craving:
ice-cream​
name:
cosmin reneer mandel​
cosmin - it means to be in solidarity with life; to not oppose the natural flow of events and instead, accept them like the seashore, the oncoming waves
reneer - alternate spelling of the name renier and means someone who is rich in love both, for others and from others
mandel - surname of german origin which was a topographic name for someone who lived by almond trees

nicknames:
cosmo,​
ren​


zodiac:
sagittarius​
and as a sagittarius, he's very adventurous, outgoing and full of energy; a born entertainer because of his gifted communication skills and great sense of humour. he handles criticism decently well (or appears to, at least) but will take everyones' "advice" and "opinions" with a pinch of salt
d.o.b.:
14th nov​

age:
24​


gender:
cis male​

pronouns:
he/him/his​

sexuality:
bisexual (closeted)​
despite how accepting and inclusive society seemingly is to all gender identities and sexual orientations, he isn't openly out to anyone except a few close friends and his older sister


nationality:
american with german and italian descent​

ethnicity:
white​

race:
caucasian​

religion:
deist​


education:
high school graduate​
took a gap year afterwards to focus more on polishing his skills as an actor and on-stage performer. is currently on break from college since he succeeded at the audition and got accepted for a leading role in one of the up and oncoming t.v. serial
social status:
lower-upper class​
face claim:

eyes:
swamp green​
he has kind, gentle eyes: the kind one can see themselves getting lost in everytime you talk. there's always a playful glint in them - teasing but never mean
hair:
hazel brown​

height:
5'10"​

weight:
70kg​

tattoos:
none but plans on getting a few soon​

piercings:
none​

distinguishing features:
freckled face,​
charming smile,​
pointed, sloping nose and pinched nose bridge​
i thought you knew i'm filthy rich
i thought you knew i never answer my phone
i thought you knew i was a bitch
i got a driver so i'm never alone

mbti:
entp-t​
loves taking on new and exciting challenges just for the sake of testing his own limits and proving to others how much he's truly capable of. has this way with words that others find intriguing but despite how good he is at giving motivational speeches, it's hard for him to connect with others emotionally simply because he's not a very affectionate person in general and also because it's difficult for him to empathise with others when he doesn't know what they're going through

enneagram:
3w4​
career-oriented with an immense fear of failure. he desires success in the industry and admiration from both, his peers and his superiors which clashes with his laid-back personality because he has to make an effort for that to happen

temperament:
phlegmatic​
tries to read other peoples' body language and likes to think he's quite decent at making inferences just by the tone of someone's voice when they said hi. he's relaxed and doesn't try to rush and urge others to cross boundaries they aren't quite willing to (even if it's the exact opposite for himself but then again, he tends to be harsher on himself than others)

alignment:
neutral​
doesn't lean very strongly one way or the other and is a firm believer that we define sin and virtue ourselves and what we feel most fitting for the situation. he quotes this sensational michael pitt line often: each of us has within us a weak aspect...that insists on deciding for ourselves, each of us, individually, what is good, and what is evil

i'm a big shot, baby
i'm a columbus
'cause he went too far

q. would you rather swim in an ocean or lake?
a. well, i think that'd depend on my mood, honestly. i've always wanted to swim in at the ocean at night, laying by myself under the stars. but then i imagine a tranquil forest and a burbling river flowing in the middle. i can't choose!

q.do you see yourself as the good or bad guy?
a. i'm more of the comedic relief kinda character. you know, the one who's there to give the others a reality check every now and then? i think they're the first to die in horror movies too but that's just a small price to pay

q. are you seeing anyone?
a. haha, usually, i'd be very hesitant to answer something like this but everyone already knows 'cause she posts about literally everything so... you guys have heard of helena? she's seriously talented, wow and we started going out, uh... a month ago? she's the one who approached me first. crazy, right?

q. one thing you'd change about yourself?
a. not myself but more... my circumstances: to have been born in a less known family - and i know loads of people are going to call me ungrateful for this but i feel like all my "success" has been handed down to me on a golden platter and that's not a very positive mindset for friday evenings

i was thinking
bad things when i kissed you
did my tongue tell you every lie?


stuff you have to fill in:

  • background: BGCOLOR;
  • background-size: ___;
  • background: url('URL');
  • background-position: #% #%;
  • background: rgba(#, #, #, #);
  • text-shadow: 3px 3px 4px COLOR;
  • color: FONTCOLOR;
  • font-size: #px;
  • line-height: #px;
  • TEXT IN THE VERTICAL PICTURE
  • YOUR TEXT FOR PAGE 1 GOES HERE
  • YOUR TEXT FOR PAGE 2 GOES HERE
  • YOUR TEXT FOR PAGE 3 GOES HERE
don't forget to add [br][/br] for line-breaks !

Code:
[class="bg"]
width: 320px;
height: 320px;
background: BGCOLOR;
margin: auto;
position: relative;
z-index: 0;
box-sizing: border-box;
padding: 10px;
[/class]

[class="picture"]
width: 250px;
height: 90px;
background: url('URL');
background-size: ___;
background-position: #% #%;
position: relative;
z-index: -1;
[/class]

[comment]in the "background: url('URL');" for that ^^^ you add the horizontal picture of your liking (which was the "faked it" one for me.) instead of "#% #%;" in the "background-position" you can also input something like "center," "top right," etc. this applies everywhere else where this property shows up too. i left it as "background-size: ___;" bc it's up to you whether you add a px value or "cover"[/comment]

[class="person"]
width: 110px;
height: 250px;
background: url('URL');
background-size: ___;
background-position: #% #%;
position: absolute;
margin-left: 190px;
top: 60px;
[/class]

[comment]in the "background: url('URL');" for that ^^^ is where you add the pic of you fc (which was cole sprouse in my case[/comment]

[class="person_text"]
cursor: default;
display: none;
width: 110px;
height: 250px;
background: rgba(#, #, #, #);
box-sizing: border-box;
padding: #px;
font-size: #px;
color: #faf2e8;
text-shadow: 3px 3px 4px COLOR;
line-height: #px;
[/class]

[comment]you have to play around with your padding depending on what your font-size + line-height is. remember that you can specify padding for each side by typing in "padding: #px #px #px #px" (or switch in "%" for "px") it goes from top --> right --> bottom --> left[/comment]

[class="block"]
height: 8px;
width: 12px;
display: inline-block;
box-sizing: border-box;
[/class]

[class="text_1"]
background: BGCOLOR;
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
position: relative;
margin-top: 10px;
[/class]

[class="text_2"]
width: 120%;
height: 180px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class="text_3"]
box-sizing: border-box;
max-width: 160px;
color: FONTCOLOR;
text-align: justify;
font-size: #px;
line-height: 13px;
cursor: default;
[/class]

[class="text_33"]
box-sizing: border-box;
max-width: 160px;
color: FONTCOLOR;
text-align: justify;
font-size: #px;
line-height: #px;
cursor: default;
display: none;
[/class]

[class="text_333"]
box-sizing: border-box;
max-width: 160px;
color: FONTCOLOR;
text-align: justify;
font-size: #px;
line-height: #px;
cursor: default;
display: none;
[/class]

[script class="circle1" on="click"]
fadeOut 900 icon_options
fadeIn 900 text_3
hide text_33
hide text_333
[/script]

[script class="circle2" on="click"]
fadeOut 900 icon_options
hide text_3
fadeIn 900 text_33
hide text_333
[/script]

[script class="circle3" on="click"]
fadeOut 900 icon_options
hide text_3
hide text_33
fadeIn 900 text_333
[/script]

[class="icon"]
width: 40px;
height: 40px;
background: url('URL');
background-size: cover;
background-position: #% #%;
position: relative;
float: right;
cursor: pointer;
[/class]

[comment]here ^^^ the "background: url('URL');" is supposed to be the smol image on the top right of the div. "background-size" can be altered to your liking[/comment]

[class="icon_options"]
width: 250px;
height: 90px;
background: rgba(#, #, #, #);
box-sizing: border-box;
display: none;
[/class]

[script class="icon" on="mouseenter"]
fadeIn 900 icon_options
fadeIn 900 person_text
[/script]

[script class="icon" on="mouseleave"]
fadeOut 900 person_text
[/script]

[class="center_circle"]
width: 250px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
[/class]

[class="circle1"]
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: BGCOLOR;
transition: 0.5s all ease-out;
[/class]

[comment]this ^^^ "background: BGCOLOR;" is for the color of the circle(s)[/comment]

[class name="circle1" state="hover"]
background: BGCOLOR;
[/class]

[comment]this ^^^ "background: BGCOLOR;" is for the color of the circles when you hover on them[/comment]

[class="circle2"]
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: BGCOLOR;
transition: 0.5s all ease-out;
[/class]

[class name="circle2" state="hover"]
background: BGCOLOR;
[/class]

[class="circle3"]
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: BGCOLOR;
transition: 0.5s all ease-out;
[/class]

[class name="circle3" state="hover"]
background: BGCOLOR;
[/class]

[class="breaks"]
width: 20px;
height: 10px;
background: transparent;
display: inline-block;
[/class]

[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by [USER=68743]@fudgecakez[/USER][/div]
[div class="bg"]
[div class="icon"][/div]
[div class="person"]
[div class="person_text"]
TEXT IN THE VERTICAL PICTURE (THAT APPEARS AFTER YOU HOVER ON THE SMOL ICON IN THE TOP RIGHT) COMES HERE
[/div]
[/div]
[div class="picture"]
[div class="icon_options"]
[div class="center_circle"]
[div class="circle1"][/div]
[div class="breaks"][/div]
[div class="circle2"][/div]
[div class="breaks"][/div]
[div class="circle3"][/div]
[/div]
[/div]
[/div]
[div class="text_1"]
[div class="text_2"]
[div class="text_3"]
YOUR TEXT FOR PAGE 1 GOES HERE
[/div]

[div class="text_33"]
YOUR TEXT FOR PAGE 2 GOES HERE
[/div]

[div class="text_333"]
YOUR TEXT FOR PAGE 3 GOES HERE
[/div]
[/div]
[/div]
[/div]
[/nobr]
 
Last edited:

nios

𝘴𝘱𝘰𝘰𝘱𝘺
Hey @fudgecakez! I used your "the butterflies broke my heart" code! I hope you're getting the mention when I post it :c please lmk if you're not! Never stop being amazing, booboo <3
 
4 | we're happy here

fudgecakez

maybe i am,,,oops ?
4
we're happy here
hover !
holy shit it's fudge back at it again after three-year-long hiatus
fuck yea bitches
and what i bring to the table is nothing special, unfortunately: only the code i used for my interest check once upon a time
but just because that's what i used it for, doesn't mean it won't work for other stuff too: like, i suppose it can be used as a CS ? idk man

also wtf is this ugly-ass colour scheme i've got going for the header ?
i kinda fckn hate it but at the same time, it's almost midnight and i dont really give a frick ??
pls someone give me colour-combination lessons, i beg you

anyways, about the code:
p straightforward: choose any one of the "buttons" and watch the magic unfold.
then click "bacc" to...idk go back i think ?
that's...literally all there is to it wow i need to step up my game
and stop being so cynical

the few edits i made to this code vs the og is that it's a lot less complicated now + doesn't glitch out on mobile anymore
so that's great
fudge 1 - bbcode 0

mobile-friendly ?
you bet
(or at least, it's compatible on all the phones i cross-checked w)

as always, i've left a blank template of the code in a spoiler; you're required to fill out the details everywhere you see shit written in ALL CAPS.
i've left some comments here and there for everything i thought would be confusing, to clear things out but if you still have questions + confusions, don't hesitate to PM me or reply on this thread ! i'll get back to ASAP

also, don't remove the credit else i'm going to rotten-tomato like it's the 19th century again


#f0ebeb
#f7faff
#FFF6F2
rgb(151, 157, 174)
#4B5161
#192239
rgb(125, 114, 114)
#514242
#2B2323
rgb(180, 138, 117)
#B56F4C
#6e3a20


code by @fudgecakez
about me
about you
about the plot
bacc
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
bacc
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
bacc
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
  • [COMMENT]
  • background: url('URL');
  • background-size: COVER | #% | ETC;
  • background-position: CENTER | #% #% | LEFT | ETC;
  • --button-a-colour: COLOUR;
  • cursor: pointer;
  • left: #%;
  • top: #%;
  • transform: translate(-#%, -#%);
  • background: rgba(#, #, #, 0.7);
  • --back-text-colour: COLOR;
  • --button-b-colour: COLOR;
  • --button-c-colour: COLOR;
  • color: COLOR;
  • BUTTON A
  • BUTTON B
  • BUTTON C
  • BACK A
  • BACK B
  • BACK C
  • YOUR A TEXT HERE
  • YOUR B TEXT HERE
  • YOUR C TEXT HERE




[nobr]

[class="bg"]
width: 320px;
height: 320px;
background: url('URL');
background-size: COVER | #% | ETC;
background-position: CENTER | #% #% | LEFT | ETC;
box-sizing: border-box;
position: relative;
margin: auto;
padding: 20px;
border-radius: 20px;
[/class]


[class="a"]
--button-a-colour: COLOUR;
height: auto;
display: inline-block;
border-radius: 100px;
background-color: var(--button-a-colour);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
left: #%;
top: #%;
transform: translate(-#%, -#%);
position: absolute;
z-index: 1;
text-align: center;
[/class]

[COMMENT]
  1. a little something to mention ^^^ the values you put in for left: #%; and right: #%; should be the ones that go into transform: translate(-#%, -#%); (except with a minus sign.) And remember that for the transform: translate(-#%, -#%); the "walk before you fly" rule applies: so you'd be defining the x-axis value and then the y-axis one.
  2. basically, the left: #%; value needs to coincide with the first "#" in transform: translate(#%, #%);. as does the value for left: #%; with the second "#"
  3. --button-a-colour: COLOUR; is where your desired colour for button a (or what i have as the "about me" button) goes
  4. there are a total of 3 "button" divs (that i've specified simply as "a" "b" and "c") and points (1), (2) and (3) apply for them too
[/COMMENT]


[class="texta"]
height: calc(100% - 40px);
width: calc(100% - 40px);
background: rgba(#, #, #, 0.7);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 0 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]

[COMMENT]
  1. so here ^^^ i have the "a" value in background: rgba(#, #, #, 0.7); set as "0.7" but you can change it to your liking
  2. this "texta" class is for the text-box that fades in when you click Button A so the colour you set in for background: rgba(#, #, #, 0.7); could match it ? like, this colour could be a tint lighter than the one you entered for --button-a-colour: COLOUR; earlier. again, entirely up to you!
  3. there are a total of 3 text-box classes (that i've specified simply as "texta" "textb" and "textc") and both points (1) and (2) apply for them too
[/COMMENT]


[class="backa"]
--back-text-colour: COLOR;
display: inline-block;
font-weight: bolder;
color: var(--back-text-colour);
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backa" state="hover"]
--back-hover-colour: COLOR;
color: var(--back-hover-colour);
[/class]


[class="b"]
--button-b-colour: COLOR;
height: auto;
display: inline-block;
border-radius: 100px;
background: var(--button-b-colour);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
top: #%;
left: #%;
transform: translate(-#%, -#%);
position: absolute;
z-index: 1;
text-align: center;
[/class]

[class="textb"]
height: 280px;
width: 280px;
background: rgba(#, #, #, 0.7);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]

[class="backb"]
display: inline-block;
font-weight: bolder;
color: COLOR;
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backb" state="hover"]
color: COLOR;
[/class]


[class="c"]
--button-c-colour: COLOR;
height: auto;
display: inline-block;
border-radius: 100px;
background: var(--button-c-colour);
opacity: 0;
font-weight: bolder;
font-size: 17px;
box-sizing: border-box;
padding: 3px 15px 6px 15px;
cursor: pointer;
top: #%;
left: #%;
position: absolute;
z-index: 1;
text-align: center;
transform: translate(-#%, -#%);[/class]

[class="textc"]
height: 280px;
width: 280px;
background: rgba(#, #, #, 0.7);
position: absolute;
z-index: 0;
opacity: 0;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
[/class]

[class="backc"]
display: inline-block;
font-weight: bolder;
color: COLOR;
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backc" state="hover"]
color: COLOR;
[/class]


[class="hidden"]
width: 260px;
overflow: hidden;
margin-top: 5px;
[/class]

[class="scrolla"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class="textboxa"]
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: COLOR;
cursor: default;
[/class]

[COMMENT]
this color: COLOR; ^^^ is for the actual colour of your detail text (i.e. all the info about your oc/interest check you type in) in the text-boxes.
it's the same for the color: COLOR; in "textboxb" and "textboxc"
[/COMMENT]


[class="scrollb"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class="textboxb"]
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: COLOR;
cursor: default;
[/class]

[class="scrollc"]
width: 120%;
height: 240px;
overflow-Y: scroll;
overflow-X: hidden;
[/class]

[class="textboxc"]
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: COLOR;
cursor: default;
[/class]



[script class="bg" on="init"]
addClass aopacity1 a
addClass bopacity1 b
addClass copacity1 c
[/script]

[script class="a" on="click"]
addClass aopacity0 a
addClass bopacity0 b
addClass copacity0 c
addClass textaopacity1 texta
addClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta

removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb

removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc
[/script]


[script class="backa" on="click"]
removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
addClass aopacity1 a
addClass bopacity1 b
addClass copacity1 c
addClass textaopacity0 texta
[/script]


[script class="b" on="click"]
addClass aopacity0 b
addClass bopacity0 c
addClass copacity0 a
addClass textaopacity1 textb
addClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb

removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta

removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc
[/script]


[script class="backb" on="click"]
removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
addClass aopacity1 b
addClass bopacity1 c
addClass copacity1 a
addClass textaopacity0 textb
[/script]


[script class="c" on="click"]
addClass aopacity0 c
addClass bopacity0 a
addClass copacity0 b
addClass textaopacity1 textc
addClass activecursor backc
removeClass aopacity1 c
removeClass bopacity1 a
removeClass copacity1 b
removeClass textaopacity0 textc

removeClass aopacity0 a
removeClass bopacity0 b
removeClass copacity0 c
removeClass textaopacity1 texta
removeClass activecursor backa
removeClass aopacity1 a
removeClass bopacity1 b
removeClass copacity1 c
removeClass textaopacity0 texta

removeClass aopacity0 b
removeClass bopacity0 c
removeClass copacity0 a
removeClass textaopacity1 textb
removeClass activecursor backb
removeClass aopacity1 b
removeClass bopacity1 c
removeClass copacity1 a
removeClass textaopacity0 textb
[/script]


[script class="backc" on="click"]
removeClass aopacity0 c
removeClass bopacity0 a
removeClass copacity0 b
removeClass textaopacity1 textc
removeClass activecursor backc
addClass aopacity1 c
addClass bopacity1 a
addClass copacity1 b
addClass textaopacity0 textc
[/script]


[class="aopacity0"]
transition: 1s all ease-out;
opacity: 0;
[/class]

[class="bopacity0"]
transition: 1s all ease-out 0.8s;
opacity: 0;
[/class]

[class="copacity0"]
transition: 1s all ease-out 1.6s;
opacity: 0;
[/class]

[class="aopacity1"]
transition: 1s all ease-out 0.8s;
opacity: 1;
[/class]

[class="bopacity1"]
transition: 1s all ease-out 1.6s;
opacity: 1;
[/class]

[class="copacity1"]
transition: 1s all ease-out 2.4s;
opacity: 1;
[/class]

[class="textaopacity1"]
transition: 1s all ease-out 2.4s;
opacity: 1;
z-index: 2;
[/class]

[class="textaopacity0"]
transition: 1s all ease-out;
opacity: 0;
[/class]

[class="activecursor"]
cursor: pointer;
[/class]









[div="height: auto; font-size: 8px; width: 280px; text-align: right; margin: auto;"]code by [USER=68743]@fudgecakez[/USER][/div]
[div class="bg"]

[div class="a"]BUTTON A[/div]
[div class="b"]BUTTON B[/div]
[div class="c"]BUTTON C[/div]

[div class="texta"]
[div class="backa"]BACK A[/div]
[div class="hidden"][div class="scrolla"][div class="textboxa"]
YOUR A TEXT HERE
[/div][/div][/div]
[/div]

[div class="textb"]
[div class="backb"]BACK B[/div]
[div class="hidden"][div class="scrollb"][div class="textboxb"]
YOUR B TEXT HERE
[/div][/div][/div]
[/div]

[div class="textc"]
[div class="backc"]BACK C[/div]
[div class="hidden"][div class="scrollc"][div class="textboxc"]
YOUR C TEXT HERE
[/div][/div][/div]
[/div]

[/div]


[/nobr]

 
Last edited:

fei

nah.
code by @ fudgecakez
0
when i was a young boy
hover !
my father
took me into the city
to see a marching band


alright
hi
im fudge and yes thats the username ive stuck with since my cringey-internet-teen years cause i lost all my creativity as i got older
i kinda suck at coding tbh so idek why im doing this but hey
practice makes perfect or smth right ?
noob level 5000 im warning you before you choos


DON'T S
  • remove credit
  • plagirize/try to pass off as your own
  • that's literally it

DO S
  • feel free to use with credit
  • hover over the "titles" to read more detail on each code
  • ask questions ! i promse i don't bite c:
  • lmk if smth isn't working correctly !!
  • suggest ways i can improve the code <3
  • heart the message if you plan on using any of these uwu
  • fill in the details in the codes i leave at the bottom !!! this is v imp bc they're blank templates
Could I use this for my RP? I added a credit in the corner
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top