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!

    Remember to credit artists when using work not your own.

Resource [ is your sunshine like my rain ]

0 | (intro) when i was a young boy

fudgecakez

i write too many songs about you
[nobr]
[class="bocks"]
width: 100%;
height: 120px;
display: flex;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto;
[/class]

[class="left"]
width: 10%;
height: 120px;
background: #A1A3A8;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: bold;
text-align: center;
color: #e3d1c8;
[/class]

[class="right"]
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 120px;
background: url('https://images.unsplash.com/photo-1534176331298-076b28a35131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1494&q=80');
background-size: cover;
background-position: 50% 40%;
box-sizing: border-box;
padding: 10px;
[/class]

[class="title"]
font-size: 22px;
font-weight: bold;
text-align: center;
color: #e3d1c8;
text-shadow: 5px 5px 5px #5e514e;
letter-spacing: 2px;
[/class]

[class="textbocks"]
width: 100%;
max-height: 100px;
background: rgba(227, 209, 200, 0.6);
font-size: 12px;
color: #2e343b;
display: none;
box-sizing: border-box;
padding: 10px 5px 10px 5px;
overflow-y: auto;
line-height: 14px;
[/class]

[script class="title" on="mouseenter"]
hide title
fadeIn 800 textbocks
[/script]

[script class="bocks" on="mouseleave"]
hide textbocks
fadeIn 800 title
[/script]

[div class="bocks"]
[div class="left"]0[/div]
[div class="right"]
[div class="title"]
when i was a young boy
[br][/br]
hover !
[/div]
[div class="textbocks"]
my father
[br][/br]
took me into the city
[br][/br]
to see a marching band


[br][/br][br][/br]

alright
[br][/br]
hi
[br][/br]
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
[br][/br]
i kinda suck at coding tbh so idek why im doing this but hey
[br][/br]
practice makes perfect or smth right ?
[br][/br]
noob level 5000 im warning you before you choos

[br][/br][br][/br][BR][/BR]

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

[br][/br]

DO S
[br][/br]
  • 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
[/div]
[/div]
[/div]
[/nobr]
 
Last edited:
1 | the butterflies broke my heart

fudgecakez

i write too many songs about you
[nobr]
[div="height: 200px; max-width: 350px; background: #752F32; display: flex; margin: auto;"]

[div="width: 120px; height: 100%; background: transparent; box-sizing: border-box; padding: 5px 0 5px 5px;"]

[div="height: 100px; width: 115px; background: url('https://i.imgur.com/pPmt2I8.jpg'); background-size: cover; background-position: 50% 60%; position: relative; margin-bottom: 5px;"][/div]

[div="height: 85px; width: 115px; background: transparent; display: flex; flex-direction: column; overflow-y: auto; align-items: center; box-sizing: border-box; padding: 0 5px 0 5px;"]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]mobile-friendly[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]3 tabs (pictures)[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hidden scroll[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]character sheet[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]big hover[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; line-height: 11px; text-align: center;"]keep credit[/div]

[/div]

[/div]

[div="flex: 1; background: transparent; box-sizing: border-box; position: relative;"]

[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]

[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 120%; text-align: center; font-weight: bolder; display: flex; align-items: center; flex-direction: column; justify-content: center; letter-spacing: 1px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]

[div class="2"]
the butterflies broke my heart

[br][/br]

click !

[/div]

[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]

[class="op0"]opacity: 0;[/class]

[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]

[div class="1"]

[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]

[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]

[div class="back"]back[/div]​

[br][/br]

a tip: i would h i g h l y suggest you copy the code straight from the spoiler where it's attached instead of clicking reply and extracting it because the latter process will be very confusing. trust me on this one, okay ?

[br][/br][br][/br]

if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities

[br][/br][br][/br]

[div="width: 100%; height: 2px; background: white;"][/div]

[br][/br]

alright alright hello !

[br][/br][br][/br]

starting this off with smth relatively simple

[br][/br][br][/br]

the code:

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]click/tap the big central image to access the "detail"[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]click/tap on the "name" (which is "YVONNE" in this case) to head back to the "home page" (the one with big central image + quote)[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]click/tap on the 3 smol images to alternate between the different tabs[/div][/div]

[br][/br]

and... yeah, that's about it

[br][/br][br][/br]

i did leave a blank template for anyone who wants to use the code

[br][/br][br][/br]

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

[br][/br][br][/br]

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

[br][/br][br][/br]

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

[br][/br][br][/br]

n yea im done
i hope you like it !
[/div]

[/div]

[/div]
[/nobr]

[div="display: flex; justify-content: space-evenly; flex-wrap: wrap;"]
[div="background: #F3F2F9; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#F3F2F9[/div]
[div="background: #B69A95; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#B69A95[/div]
[div="background: #82473B; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#82473B[/div]
[div="background: #AF3F2A; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#AF3F2A[/div]
[div="background: #31292C; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#31292C[/div]
[div="background: #788261; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#788261[/div]
[div="background: #1C231A; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#1C231A[/div]
[div="background: #6B6182; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#6B6182[/div] [/div]


[nobr]
[class="credits"]
margin: auto;
width: 310px;
height: auto;
font-size: 8px;
text-align: right;
[/class]
[class="tab1"]
--bg-color-around-big-picture: #788261;
width: 310px;
height: 320px;
box-sizing: border-box;
padding: 20px;
background: var(--bg-color-around-big-picture);
margin: auto;
cursor: default;
[/class]
[class="tab2"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab3"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab4"]
width: 310px;
height: auto;
margin: auto;
display: none;
cursor: default;
[/class]
[class="tab1pic"]
--url-for-big-picture: url('https://ilarge.lisimg.com/image/15844364/740full-kim-na-hee.jpg');
--border-around-big-pic: #f3f2f9;
width: 270px;
height: 280px;
background: var(--url-for-big-picture);
background-size: COVER;
background-position: CENTER;
transition: 0.5s;
box-sizing: border-box;
padding: 0 0 30px 20px;
border: 1px solid var(--border-around-big-pic);
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: flex-end;
[/class]
[class name="tab1pic" state="hover"]
opacity: 0.8;
[/class]
[script class="tab1pic" on="click"]
hide tab1
show tab2
hide tab3
hide tab4
[/script]
[class="tab1pictext"]
--how-much-you-want-to-rotate-quote: rotate(-5deg);
--text-color-for-quote: #f3f2f9;
width: 250px;
position: relative;
transform: var(--how-much-you-want-to-rotate-quote);
font-size: 15px;
letter-spacing: 2px;
color: var(--text-color-for-quote);
text-align: left;
[/class]
[class="imgcontainer"]
--bg-color-around-3-pics: #788261;
width: 120px;
height: 320px;
background: var(--bg-color-around-3-pics);
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
[/class]

[class="img1"]
--url-for-1st-smol-pic: url('https://i.pinimg.com/236x/5e/e7/c3/5ee7c39ccff71c076a84387dc9123895.jpg');
--border-around-smol-pic: #f3f2f9;
background: var(--url-for-1st-smol-pic);
background-size: 80px;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: TOP;
transition: 0.5s all ease-out;
cursor: pointer;
[/class]
[class name="img1" state="hover"]
opacity: 0.8;
[/class]
[script class="img1" on="click"]
show tab2
hide tab3
hide tab4
[/script]
[class="img2"]
--url-for-2nd-smol-pic: url('https://pbs.twimg.com/media/dacy0vjuiae0hkj.jpg:large');
--border-around-smol-pic: #f3f2f9;
background: var(--url-for-2nd-smol-pic);
background-size: COVER;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER;
transition: 0.5s;
cursor: pointer;
[/class]
[class name="img2" state="hover"]
opacity: 0.8;
[/class]
[script class="img2" on="click"]
hide tab2
show tab3
hide tab4
[/script]
[class="img3"]
--url-for-3rd-smol-pic: url('https://scontent.cdninstagram.com/vp/f08206b3b064e14a050ae05ba488f980/5d9d10ee/t51.2885-15/e35/27579167_577931972545880_7814585994551754752_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com');
--border-around-smol-pic: #f3f2f9;
background: var(--url-for-3rd-smol-pic);
background-size: 97px;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: TOP;
transition: 0.5s;
cursor: pointer;
[/class]
[class name="img3" state="hover"]
opacity: 0.8;
[/class]
[script class="img3" on="click"]
hide tab2
hide tab3
show tab4
[/script]
[class="detaildiv"]
--bg-for-text: #f3f2f9;
width: 190px;
height: 320px;
background: var(--bg-for-text);
[/class]
[class="name"]
--bg-for-name: #f3f2f9;
--text-color-for-name: #1c231a;
width: 190px;
height: 25px;
background: var(--bg-for-text);
text-align: center;
line-height: 25px;
font-size: 23px;
color: var(--text-color-for-name);
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.5s;
cursor: pointer;
[/class]

[class name="name" state="hover"]
--color-for-name-hover: #ad9382;
color: var(--color-for-name-hover);
[/class]
[script class="name" on="click"]
show tab1
hide tab2
hide tab3
hide tab4
[/script]
[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"]
--color-for-general-text: COLOR;
max-width: 185px;
font-size: 10px;
line-height: 11px;
text-align: justify;
color: var(--color-for-general-text);
[/class]
[div class="credits"]
code by fudgecakez fudgecakez
[/div]
[div class="tab1"]
[div class="tab1pic"]
[div class="tab1pictext"]
if time heals wounds, why don't i feel the hurt less?
[/div]
[/div]
[/div]
[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"]
YVONNE

[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
name ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] given name [/div]

surname
[br][/br]
nickname(s) ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
option one
[br][/br]

two
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] three [/div]
[br][/br]

four
[br][/br][br][/br]
age ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
number
[br][/br]
d.o.b. ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
dd/mm/yyyy
[br][/br]
zodiac ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
star sign
[br][/br][br][/br]
gender ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer
[br][/br]
pronouns ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer
[br][/br][br][/br]
sexuality ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] answer[/div]
[br][/br]

explanation?
[br][/br]

continued
[br][/br]
romantic orientation ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] answer [/div]
explanation
[br][/br][br][/br]
languages ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer one
[br][/br]

two
[br][/br]

three
[br][/br]

four
[br][/br]

five
[br][/br]

six
[br][/br]

seven
[br][/br]

random trivia
[br][/br][br][/br]
race ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer one

two
[br][/br][br][/br]
face claim ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer
[br][/br][br][/br]
head canons ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer one
[br][/br]

two
[br][/br]

three
[br][/br]

four
[br][/br]

five
[br][/br]

six
[br][/br]

seven
[br][/br]

eight
[br][/br]

nine
[br][/br]

ten
[br][/br]

eleven
[br][/br]

twelve
[br][/br]

thirteen
[br][/br]

forteen
[br][/br]

fifteen
[br][/br]

sixteen
[br][/br]

seventeen
[br][/br]

eighteen
[br][/br]

nineteen
[br][/br]

twenty
[br][/br]

twenty-one
[br][/br]

twenty-two
[br][/br]

twenty-three
[br][/br][br][/br]
[div=width: 10px; height: 50px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[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"]
YVONNE
[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
personality ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] adjective one [/div]

further explanation
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] two [/div]

more detail
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] three [/div]

oh la la
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] negative trait? [/div]

further explanation
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] two [/div]

i love detail
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] three [/div]

'cause darling i'm a nightmare dressed like a daydream
[br][/br]
mbti type ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] answer [/div]

explanation
[br][/br]

trait one
[br][/br]

two
[br][/br]

three
[br][/br]

four
[br][/br]

five
[br][/br]

six
[br][/br]

seven
[br][/br]
temperament ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] x% sanguine [/div]

adjective one two
[br][/br]

[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] x% phlegmatic [/div]

three four
[br][/br]

[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] x% meloncholic [/div]

five six
[br][/br]

[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] x% choleric [/div]

seven eight
[br][/br]
moral alignment ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] answer[/div]
[br][/br]

explanation
[br][/br]

further detail
[br][/br][br][/br]
biography ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br][br][/br]
[div=width: 10px; height: 50px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[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"]
YVONNE
[/div]
[div class="postscroll"]
[div class="post"]
[div class="text"]
powers ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] answer one (fire)
[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] two [/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] three [/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br][br][/br]
familiar ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
answer
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.
[br][/br][br][/br]
[div=width: 10px; height: 50px;][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]
don't forget to add [br][/br] for line-breaks !

don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone

after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:


  • --bg-color-around-big-picture: COLOR;
  • --url-for-big-picture: url('URL');
  • --border-around-big-pic: COLOR;
  • --how-much-you-want-to-rotate-quote: rotate(#deg);
  • --text-color-for-quote: COLOR;
  • --bg-color-around-3-pics: COLOR;
  • background-size: #% | COVER | #px | ETC;
  • background-position: CENTER | #% #% | LEFT | ETC;
  • --url-for-1st-smol-pic: url('URL');
  • --url-for-2nd-smol-pic: url('URL');;
  • --url-for-3rd-smol-pic: url('URL');
  • --border-around-smol-pic: COLOR;
  • --bg-for-text: COLOR;
  • --bg-for-name: COLOR;
  • --text-color-for-name: COLOR;
  • --color-for-name-hover: COLOR;
  • --color-for-general-text: COLOR;
  • ADD YOUR QUOTE
  • YC'S NAME HERE
  • YOUR SMOL-PIC-1 DETAIL TEXT HERE
  • YOUR SMOL-PIC-2 DETAIL TEXT HERE
  • YOUR SMOL-PIC-3 DETAIL TEXT HERE

the full, original code (with my input values) can be found on this website

you will find the blank template on this website and in this spoiler:

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

[class="tab1"]
--bg-color-around-big-picture: COLOR;
width: 310px;
height: 320px;
box-sizing: border-box;
padding: 20px;
background: var(--bg-color-around-big-picture);
margin: auto;
cursor: default;
[/class]

[COMMENT]i mention this for now and for wherever it pops up in other parts of the code as well: the "COLOR" value in "--bg-color-around-big-picture: COLOR;" needs to substituted with either a colour name (such as green, blue, orange.) note that names such as light blue, baby pink, etc may not work in which case you will need a hex colour value (which you can easily copy and paste from any colour picker.) an example of a hex colour value is #FFFFFF (white)[/COMMENT]


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

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

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

[class="tab1pic"]
--url-for-big-picture: url('URL');
--border-around-big-pic: COLOR;
width: 270px;
height: 280px;
background: var(--url-for-big-picture);
background-size: #% | COVER | #px | ETC;
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
box-sizing: border-box;
padding: 0 0 30px 20px;
border: 1px solid var(--border-around-big-pic);
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: flex-end;
[/class]

[class name="tab1pic" state="hover"]
opacity: 0.8;
[/class]
[script class="tab1pic" on="click"]
hide tab1
show tab2
hide tab3
hide tab4
[/script]

[class="tab1pictext"]
--how-much-you-want-to-rotate-quote: rotate(#deg);
--text-color-for-quote: COLOR;
width: 250px;
position: relative;
transform: var(--how-much-you-want-to-rotate-quote);
font-size: 15px;
letter-spacing: 2px;
color: var(--text-color-for-quote);
text-align: left;
[/class]

[COMMENT]ok listen
depending on much your text is rotated (mine was -5deg) you will have to adjust the "padding: 0 0 30px 20px;" in the "tab1pic" class. the "30px" defines padding on the bottom, and the "20px" defines it for the left side.
also, i'd recommend adding the same colour values for "--text-color-for-quote: COLOR;" and "--border-around-big-pic: COLOR;" because it looks nicer[/COMMENT]


[class="imgcontainer"]
--bg-color-around-3-pics: COLOR;
width: 120px;
height: 320px;
background: var(--bg-color-around-3-pics);
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
[/class]

[COMMENT]i would suggest having the colour for "--bg-color-around-3-pics: COLOR;" and "--bg-color-around-big-picture: COLOR;" (in the "tab1" class) the same[/COMMENT]


[class="img1"]
--url-for-1st-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-1st-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s all ease-out;
cursor: pointer;
[/class]

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

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


[class="img2"]
--url-for-2nd-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-2nd-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
cursor: pointer;
[/class]

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

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


[class="img3"]
--url-for-3rd-smol-pic: url('URL');
--border-around-smol-pic: COLOR;
background: var(--url-for-3rd-smol-pic);
background-size: #% | COVER | #px | ETC;
height: 80px;
width: 80px;
position: relative;
box-sizing: border-box;
border: 1px solid var(--border-around-smol-pic);
background-position: CENTER | #% #% | LEFT | ETC;
transition: 0.5s;
cursor: pointer;
[/class]

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

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


[class="detaildiv"]
--bg-for-text: COLOR;
width: 190px;
height: 320px;
background: var(--bg-for-text);
[/class]

[class="name"]
--bg-for-name: COLOR;
--text-color-for-name: COLOR;
width: 190px;
height: 25px;
background: var(--bg-for-text);
text-align: center;
line-height: 25px;
font-size: 23px;
color: var(--text-color-for-name);
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
transition: 0.5s;
cursor: pointer;
[/class]

[COMMENT]whatever colour/hex you input for "--bg-for-name: COLOR;" should be the same for "--bg-for-text: COLOR;" (in the "detaildiv" class)[/COMMENT]


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

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


[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"]
--color-for-general-text: COLOR;
max-width: 185px;
font-size: 10px;
line-height: 11px;
text-align: justify;
color: var(--color-for-general-text);
[/class]





[div class="credits"]
code by [user=68743]@fudgecakez[/user]
[/div]

[div class="tab1"]
[div class="tab1pic"]
[div class="tab1pictext"]
[font='Homemade Apple']ADD YOUR QUOTE (on top of big pic) HERE.[/font]
[/div]
[/div]
[/div]

[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 HERE

[COMMENT]add only the first name or a short nickname. you don't want the text to overflow from the given because then it makes everything else look wonky[/COMMENT]

[/div]

[div class="postscroll"]
[div class="post"]
[div class="text"]

YOUR SMOL-PIC-1 DETAIL TEXT HERE
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[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 HERE

[/div]

[div class="postscroll"]
[div class="post"]
[div class="text"]

YOUR SMOL-PIC-2 DETAIL TEXT HERE

[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[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 HERE

[/div]

[div class="postscroll"]
[div class="post"]
[div class="text"]

YOUR SMOL-PIC-3 DETAIL TEXT HERE

[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]
there isn't anything special for the text here.
i only added a few unciode symbols:


other than that, the only other thing worth mentioning is how to add [div=display: inline-block; text-decoration: underline; text-decoration-color: red;]a different coloured underline[/div]
this is achieved by adding the following code around the text you want underlined + entering the colour of your choice where it says "COLOR":
[div=
--color-of-underline: COLOR;
display: inline-block;
text-decoration: underline;
text-decoration-color: var(--color-of-underline);]
TEXT [/div]


[nobr]
[div="background: #f3f2f9; box-sizing: border-box; padding: 5px; display: inline-block; font-size: 11px; line-height: 12px;"]
name ⋉
[div="display: inline-block; height: 1px; width: 1px;"][/div]
[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #af3f2a;] yvonne [/div]

no last name
[br][/br]
nickname(s) ⊢
[div="display: inline-block; height: 1px; width: 1px;"][/div]
eve
[br][/br]

evie
[br][/br]

[div=display: inline-block; color: #1c231a; text-decoration: underline; text-decoration-color: #82473b;] van /'vaan'/ [/div]
[br][/br]

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

fudgecakez

i write too many songs about you
[nobr]
[div="height: 200px; max-width: 350px; background: #752F32; display: flex; margin: auto;"]

[div="width: 120px; height: 100%; background: transparent; box-sizing: border-box; padding: 5px 0 5px 5px;"]

[div="height: 100px; width: 115px; background: url('https://i.imgur.com/pPmt2I8.jpg'); background-size: cover; background-position: 50% 60%; position: relative; margin-bottom: 5px;"][/div]

[div="height: 85px; width: 115px; background: transparent; display: flex; flex-direction: column; overflow-y: auto; align-items: center; box-sizing: border-box; padding: 0 5px 0 5px;"]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]mobile-friendly[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]5 tabs (pics)[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hidden scroll[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]character sheet[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hover[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]sliders[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; line-height: 11px; text-align: center;"]keep credit[/div]

[/div]

[/div]

[div="flex: 1; background: transparent; box-sizing: border-box; position: relative;"]

[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]

[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 160%; text-align: center; font-weight: bolder; display: flex; flex-direction: column; align-items: center; justify-content: center; letter-spacing: 3px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]

[div class="2"]
can't risk falling for you

[br][/br]

click !

[/div]

[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]

[class="op0"]opacity: 0;[/class]

[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]

[div class="1"]

[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]

[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]

[div class="back"]back[/div]​

[br][/br]

a tip: i would h i g h l y suggest you copy the code straight from the spoiler where it's attached instead of clicking reply and extracting it because the latter process will be very confusing. trust me on this one, okay ?

[br][/br][br][/br]

if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities

[br][/br][br][/br]

[div="width: 100%; height: 2px; background: white;"][/div]

[br][/br]

the code:

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]hover/tap over the main "focus on me" background img[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]after it recolours + repositions and the box with pics slides in, click/tap on any of the images to reveal the "details"[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]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[/div][/div]

[br][/br]

i did leave a blank template for anyone who wants to use the code

[br][/br][br][/br]

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

[br][/br][br][/br]

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 rile 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

[br][/br][br][/br]

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)

[br][/br][br][/br]

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

[br][/br][br][/br]

i hope you like it !

[/div]

[/div]

[/div]
[/nobr]

[div="display: flex; justify-content: space-evenly; flex-wrap: wrap;"]
[div="background: #f5efeb; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#f5efeb[/div]
[div="background: #e9ebe8; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#e9ebe8[/div]
[div="background: #faf1eb; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#faf1eb[/div]
[div="background: #faf0eb; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#faf0eb[/div]
[div="background: rgba(168, 156, 145); display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]rgba(168, 156, 145)[/div]
[div="background: #3F1714; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#3F1714[/div]
[div="background: #7F211D; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#7F211D[/div]
[div="background: #6F1110; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#6F1110[/div]
[div="background: #320505; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#320505[/div]
[div="background: #562C25; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#562C25[/div]
[div="background: #1D0F0C; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#1D0F0C[/div]
[div="background: #A34240; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#A34240[/div]
[div="background: #4E1D1C; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#4E1D1C[/div]
[div="background: #8F231B; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#8F231B[/div]
[div="background: #471A14; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#471A14[/div] [/div]


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






[class=image]
--url-for-bg-image: url('https://pbs.twimg.com/media/DoP6GeYXsAA2EC7.jpg');
width: 320px;
height: 250px;
background: var(--url-for-bg-image);
background-size: 170%;
background-position: 48% 28%;
filter: brightness(110%) grayscale(70%);
box-sizing: border-box;
position: relative;
[/class]




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

[animation=imagecolor]
[keyframe=25]
filter: brightness(95%) grayscale(0%); background-size: 140%;
[/keyframe]
[keyframe=50]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: 50% -10%;
[/keyframe]
[keyframe=100]
filter: brightness(95%) grayscale(0%); background-size: 140%; background-position: 100% -235%;
[/keyframe]
[/animation]




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






[class=picdiv]
--colour-for-the-div-that-slides-in: rgba(168, 156, 145, 0.8);
position: relative;
width: 286px;
height: 62px;
background: var(--colour-for-the-div-that-slides-in);
transform: translate(320px, 38px);
display: flex;
justify-content: space-between;
align-content: space-between;
overflow: hidden;
box-sizing: border-box;
padding: 6px;
[/class]




[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]






[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]
--1st-smol-pic: url('https://i.pinimg.com/564x/94/a5/42/94a542c7123524182330b7ebdeacc1f3.jpg');
background: var(--1st-smol-pic);
width: 50px;
height: 50px;
background-size: 85px;
background-position: -15px -15px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]




[class=pic2]
--2nd-smol-pic: url('https://i.pinimg.com/564x/c7/19/a2/c719a2d842cc254d89d6d7859dcf863a.jpg');
background: var(--2nd-smol-pic);
width: 50px;
height: 50px;
background-size: 90px;
background-position: -10px -25px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic3]
--3rd-smol-pic: url('https://i.pinimg.com/564x/0a/ed/5f/0aed5fb5d12238c66fbea7369e462801.jpg');
background: var(--3rd-smol-pic);
width: 50px;
height: 50px;
background-size: 50px;
background-position: CENTER;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic4]
--4th-smol-pic: url('https://i.pinimg.com/564x/ea/39/38/ea39384ab82ece3eda0f7a39f5eee766.jpg');
background: var(--4th-smol-pic);
width: 50px;
height: 50px;
background-size: 65px;
background-position: 0 -5px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic6]
--6th-smol-pic: url('https://i.pinimg.com/564x/04/0d/31/040d311b71d0e2ce6f62dc8f1a2b3c2e.jpg');
background: var(--6th-smol-pic);
width: 50px;
height: 50px;
background-size: 90px;
background-position: -15px -25px;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]






[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]






[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]






[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]






[class=home]
opacity: 0;
height: 20px;
position: absolute;
top: 83%;
left: 8%;
background: transparent;
font-weight: bold;
line-height: 19px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
color: transparent;
transition: 1.5s all ease-out;
cursor: default;
[/class]




[class=activereturn]
cursor: pointer; opacity: 0.8;
[/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]






[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]

[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]

[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]

[class=sbdetails]
font-size: 11px;
line-height: 12px;
padding-left: 5px;
text-align: justify;
[/class]














[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by fudgecakez fudgecakez [/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]

[div class="heading" style="color: #f5efeb; background: #3F1714;"]name[/div]
[div class="hdetails" style="color: #f5efeb;"]given + middle + last[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]given[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]middle[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]last[/div]
[div class="sbdetails" style="color: #f5efeb;"]pronounciation
[br][/br]
meaning[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]nicknames[/div]
[div class="hdetails" style="color: #f5efeb;"]who uses them?[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer one[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]four[/div]
[br][/br][br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]age[/div]
[div class="hdetails" style="color: #f5efeb;"]actual age + appearance-wise[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]d.o.b.[/div]
[div class="sbdetails" style="color: #f5efeb;"]dd/mm/yyyy[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]zodiac[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer + are they anything like it?[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]gender[/div]
[div class="hdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]pronouns[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]sexuality[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]romantic orientation[/div]
[div class="sbdetails" style="color: #f5efeb;"]answer[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]religion[/div]
[div class="hdetails" style="color: #f5efeb;"]answer[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer[/div]
[div class="sbdetails" style="color: #f5efeb;"]for this, the "answer" can be replaced with any of the following: deist / theist / atheist / agnostic[/div]
[br][/br]
[div class="heading" style="color: #f5efeb; background: #3F1714;"]languages[/div]
[div class="hdetails" style="color: #f5efeb;"]some trivia fact?[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]answer one[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[br][/br]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/div]
[div="height: 8px;"][/div]

[/div]
[/div]
[/div]


[div class=hidden2]
[div class=scroll2]
[div class=textbox2]

[div class="heading" style="background: #320505; color: #e9ebe8;"]mbti type[/div]
[div class="hdetails" style="color: #e9ebe8;"]answer[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]freudian personality[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]temperament[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]moral alignment[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]hogwarts house[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-vert type[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]extro/intro/ambi[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-ist type[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]for this, the "answer" can be replaced by any of the following: optimist / pessimist / realist / idealist / nihilist[/div]
[br][/br]
[div class="heading" style="background: #320505; color: #e9ebe8;"]spirit animal[/div]
[br][/br]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div]
[div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div="height: 8px;"][/div]

[/div]
[/div]
[/div]


[div class=hidden3]
[div class=scroll3]
[div class=textbox3]

[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]age[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]actual[/div]
[div class="sbdetails" style="color: #faf1eb;"]##[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]appearance[/div]
[div class="sbdetails" style="color: #faf1eb;"]##[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]eyes[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]colour[/div]
[div class="sbdetails" style="color: #faf1eb;"]description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]glasses[/div]
[div class="sbdetails" style="color: #faf1eb;"]far-sighted / near-sighted / none[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]contacts[/div]
[div class="sbdetails" style="color: #faf1eb;"]do they wear 'em?[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]hair[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]colour[/div]
[div class="sbdetails" style="color: #faf1eb;"]description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]length[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]type[/div]
[div class="sbdetails" style="color: #faf1eb;"]as in, hair type: wavy / coarse / fine / silky / straight / curly[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]style[/div]
[div class="sbdetails" style="color: #faf1eb;"]how do they style it ?[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]physique[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]build[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]height[/div]
[div class="sbdetails" style="color: #faf1eb;"]#'##" or #.##m[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]weight[/div]
[div class="sbdetails" style="color: #faf1eb;"]###lbs or ##kg[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]skin[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]tone[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]scars[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]birthmarks[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]tattoos[/div]
[div class="sbdetails" style="color: #faf1eb;"]yes/no + description[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]piercings[/div]
[div class="sbdetails" style="color: #faf1eb;"]yes/no + description[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]appearance[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]accessories[/div]
[div class="sbdetails" style="color: #faf1eb;"]ones they regularly wear[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]dressing style[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[br][/br]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]illnesses[/div]
[br][/br]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]physical disabilities[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]physical amputations[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]mental disorders[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div class="subheading" style="color: #faf1eb; background: #562C25;"]chronic diseases[/div]
[div class="sbdetails" style="color: #faf1eb;"]answer[/div]
[div="height: 8px;"][/div]

[/div]
[/div]
[/div]


[div class=hidden4]
[div class=scroll4]
[div class=textbox4]

[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]gender[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]further explanation if required[/div]
[br][/br]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]alias[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]pronounciation
[br][/br]
meaning + how'd they discover it for themself[/div]
[br][/br]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]hobby[/div]
[br][/br]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div]
[div class="sbdetails" style="color: #faf0eb;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div="height: 8px;"][/div]

[/div]
[/div]
[/div]


[div class=hidden6]
[div class=scroll6]
[div class=textbox6]

[div class="heading" style="background: #471A14; color: #fcf0ed;"]history[/div]
[br][/br]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]childhood[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]adolescence[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div class="subheading" style="color: #fcf0ed; background: #8F231B;"]adulthood[/div]
[div class="sbdetails" style="color: #fcf0ed;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam bibendum velit, id cursus risus. Donec arcu diam, aliquam rutrum ante id, facilisis mollis magna. Ut a sapien dolor. Vivamus nunc ex, fringilla sit amet tortor a, maximus accumsan ipsum. Nulla facilisi. Aenean lobortis, lorem vitae tristique efficitur, nisi massa porttitor quam, eu mollis arcu felis vitae elit.[/div]
[div="height: 8px;"][/div]

[/div]
[/div]
[/div]

[/div]



[div class=home]

FOCUS ON ME

[/div]




[/div]
[/div]
[/nobr]
don't forget to add [br][/br] for line-breaks !

don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone

after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
  • --url-for-bg-image: url('URL');
  • background-position: #% #%;
  • --colour-for-the-div-that-slides-in: rgba(#, #, #, 0.8);
  • --1st-smol-pic: url('URL');
  • background-size: #% | #px | COVER | ETC;
  • background-position: #% #% | #px #px | CENTER | ETC;
  • --2nd-smol-pic: url('URL');
  • --3rd-smol-pic: url('URL');
  • --4th-smol-pic: url('URL');
  • --6th-smol-pic: url('URL');
  • YOUR TEXT FOR 1ST DETAIL DIV HERE
  • YOUR TEXT FOR 2ND DETAIL DIV HERE
  • YOUR TEXT FOR 3RD DETAIL DIV HERE
  • YOUR TEXT FOR 4TH DETAIL DIV HERE
  • YOUR TEXT FOR 6TH DETAIL DIV HERE

the full, original code (with my input values) can be found on this website

you will find the blank template on this website and in this spoiler:

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]
--url-for-bg-image: url('URL');
width: 320px;
height: 250px;
background: var(--url-for-bg-image);
background-size: 170%;
background-position: #% #%;
filter: brightness(110%) grayscale(70%);
box-sizing: border-box;
position: relative;
[/class]

[COMMENT]i have left it as "background-size: 170%;" but you may change this along with "filter: brightness(110%) grayscale(70%);" as you like[/COMMENT]


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

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

[COMMENT]you'll have to play around with the "background-position: #% -#%;" values here to see which ones work best for the background image you chose.
the values you input in "keyframe=50" should be different from "keyframe=100" i.e. mine were "50% -10%" and "100% -235%" respectively.
similarly, i've left it as "filter: brightness(95%) grayscale(0%);" and "background-size: 140%;" but you may change it as you please[/COMMENT]


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




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

[class=picdiv]
--colour-for-the-div-that-slides-in: rgba(#, #, #, 0.8);
position: relative;
width: 286px;
height: 62px;
background: var(--colour-for-the-div-that-slides-in);
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 the fourth value in the "rgba(#, #, #, 0.8);" defines opacity of your div. 1 means opaque and 0 means transparent. i have left it as  0.8 but you may change it as you wish[/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]
--1st-smol-pic: url('URL');
background: var(--1st-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[COMMENT]i know i have recommended "cover" as one of the "background-size" values but if you want the image to repeat when it elongates, i wouldn't recommend going with it; either "contain" or "#%" would work best[/COMMENT]


[class=pic2]
--2nd-smol-pic: url('URL');
background: var(--2nd-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic3]
--3rd-smol-pic: url('URL');
background: var(--3rd-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic4]
--4th-smol-pic: url('URL');
background: var(--4th-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]

[class=pic6]
--6th-smol-pic: url('URL');
background: var(--6th-smol-pic);
width: 50px;
height: 50px;
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
opacity: 0.8;
transition: all 1s;
cursor: pointer;
[/class]




[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-----------------[/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]
opacity: 0;
height: 20px;
position: absolute;
top: 83%;
left: 8%;
background: transparent;
font-weight: bold;
line-height: 19px;
font-size: 17px;
text-transform: uppercase;
display: inline-block;
color: transparent;
transition: 1.5s all ease-out;
cursor: default;
[/class]

[COMMENT]i have my "back" button as transparent because it perfectly aligns with the "FOCUS ON ME" text, however, if you wish to make it visible, simply replace the "transparent" in "background: transparent;" with your desired colour.
similar, you can change the text colour (color: transparent;) from "transparent" to any colour of your choice as well if you wish for the text to be visible[/COMMENT]


[class=activereturn]
cursor: pointer; opacity: 0.8;
[/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]-----------------random ish-----------------[/comment]

[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]

[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]

[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]

[class=sbdetails]
font-size: 11px;
line-height: 12px;
padding-left: 5px;
text-align: justify;
[/class]

[COMMENT]i explain more about these four ^^^ classes in the "text" spoiler[/COMMENT]











[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 FOR 1ST DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS

[/div]
[/div]
[/div]


[div class=hidden2]
[div class=scroll2]
[div class=textbox2]

YOUR TEXT FOR 2ND DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS

[/div]
[/div]
[/div]


[div class=hidden3]
[div class=scroll3]
[div class=textbox3]

YOUR TEXT FOR 3RD DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS

[/div]
[/div]
[/div]


[div class=hidden4]
[div class=scroll4]
[div class=textbox4]

YOUR TEXT FOR 4TH DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS

[/div]
[/div]
[/div]


[div class=hidden6]
[div class=scroll6]
[div class=textbox6]

YOUR TEXT FOR 6TH DETAIL DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS

[/div]
[/div]
[/div]

[/div]


[div class=home]

BACK

[/div]

[COMMENT]just because my text for the back/home button is "back", doesn't mean yours has to be too: change it up as you like ![/COMMENT]


[/div]
[/div]
[/nobr]
let me share with you how i wrote the text in my code and made it look the way it does.

let's start off with the heading i.e. all those texts with the darker backgrounds e.g. "name" "age" gender" "religion" etc.
they all look like (or close to) this:
[div class="heading" style="color: #f5efeb; background: #3F1714;"]heading[/div]
the background-colour i used for the heading is different in all 5 tabs but the basic code is the same for them:
Code:
[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]
then i simply added the class around my text:
[div="position: relative; margin-left: 5%;"][div class="heading"] heading [/div][/div]
and in order to add the colour + background (which were #f5efeb and #3f1714 for me, respectively) i added a "style" to my div:
[div="position: relative; margin-left: 5%;"][div class="heading" style="color: COLOR; background: COLOR;"] HEADING [/div][/div]


for the "details" for the headings e.g. "isadora" "24" "genderfluid" "none" etc, there's this class:
Code:
[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]
once more, the text-colour (#f5efeb for me) here was added via a "style"
[div="position: relative; margin-left: 5%;"][div class="hdetails" style="color: COLOR;"] heading details [/div][/div]


now to achieve this look, we simply write the "heading" and "hdetails" divs together
[NOBR]
[class=heading]
font-size: 12px;
line-height: 13px;
display: inline-block;
box-sizing: border-box;
padding: 0px 3px 3px 3px;
[/class]

[class=hdetails]
font-size: 12px;
line-height: 13px;
text-align: justify;
[/class]

[div="height: auto; width: 218px; background: rgb(168, 156, 145); box-sizing: border-box; padding: 10px;"]

[div class="heading" style="color: #f5efeb; background: #3F1714;"]name[/div]
[div class="hdetails" style="color: #f5efeb;"]isadora shaylyn covington[/div]

[/div]
[/nobr]
so your code should look like:
[div="position: relative; margin-left: 5%;"][div class="heading" style="color: COLOR; background: COLOR;] heading [/div]
[div class="hdetails" style="color: COLOR;"]
heading details [/div][/div]


next up are the sub-headings a.k.a. all the texts with the lighter background-colours e.g. "pronouns" "sexuality" "build" etc
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]sub-heading[/div]

once more, the background-colours i used for them are different in all the 5 tabs but the basic code is the same
Code:
[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]
and again, the text-colour and background-colour (which are #f5efeb and #7F211D for me, respectively) were added via a "style."
so your code should look something like this:
[div="position: relative; margin-left: 5%;"][div class="subheading" style="color: COLOR; background: COLOR;"] sub-heading [/div][/div]


then we have the "details" for the sub-headings e.g. "she/her" "pansexual" "slightly-built" etc
Code:
[class=sbdetails]
font-size: 11px;
line-height: 12px;
padding-left: 5px;
text-align: justify;
[/class]
add text-colour (#f5efeb for me) through "style" and the code should look like:
[div="position: relative; margin-left: 5%;"][div class="sbdetails" style="color: COLOR;"] sub-heading details [/div][/div]


now to have them both written together like this:
[NOBR]
[class=subheading]
font-size: 11px;
line-height: 12px;
display: inline-block;
box-sizing: border-box;
padding: 1px 2px 2px 3px;
margin-left: 5px;
[/class]

[class=sbdetails]
font-size: 11px;
line-height: 12px;
margin-left: 5px;
text-align: justify;
[/class]

[div="height: auto; width: 218px; background: rgb(168, 156, 145); box-sizing: border-box; padding: 10px;"]

[div class="subheading" style="color: #f5efeb; background: #7F211D;"]isadora[/div]
[div class="sbdetails" style="color: #f5efeb;"]/ iz-za-do-ra. /
[br][/br]
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)[/div]
[/div]
[/nobr]
your code needs to be:
[div="position: relative; margin-left: 5%;"][div class="subheading" style="color: COLOR; background: COLOR;"] sub-heading [/div]
[div class="sbdetails" style="color: COLOR;"]
sub-heading details [/div][/div]


now the only thing left is to combine all of it so it looks like this:
[nobr]
[div="height: auto; width: 218px; background: rgb(168, 156, 145); box-sizing: border-box; padding: 10px;"]

[div class="heading" style="color: #f5efeb; background: #3F1714;"]name[/div]
[div class="hdetails" style="color: #f5efeb;"]isadora shaylyn covington[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]isadora[/div]
[div class="sbdetails" style="color: #f5efeb;"]/ iz-za-do-ra. /
[br][/br]
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)[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]shaylyn[/div]
[div class="sbdetails" style="color: #f5efeb;"]/ shay-lin. /
[br][/br]
one version of the gaelic name shayla which means admirable and from a fairy palace[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]covington[/div]
[div class="sbdetails" style="color: #f5efeb;"]/ kuv-ving-ten. /
[br][/br]
this family name dates back to anglo-saxon culture of britain[/div]

[/div]
[/nobr]
which is super easy:
[div="position: relative; margin-left: 5%;"][div class="heading" style="color: COLOR; background: COLOR;] heading [/div]
[div class="hdetails" style="color: COLOR;"]
heading details [/div]
[div class="subheading" style="color: COLOR; background: COLOR;"]
sub-heading 1 [/div]
[div class="sbdetails" style="color: COLOR;"]
sub-heading 1 detail [/div]
[div class="subheading" style="color: COLOR; background: COLOR;"]
sub-heading 2 [/div]
[div class="sbdetails" style="color: COLOR;"]
sub-heading 2 detail [/div]
[div class="subheading" style="color: COLOR; background: COLOR;"]
sub-heading 3 [/div]
[div class="sbdetails" style="color: COLOR;"]
sub-heading 3 detail [/div][/div]
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

i write too many songs about you
[div=line-height: 14px; font-size: 13px;]
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:[/div]
 
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

i write too many songs about you
[nobr]
[div="height: 200px; max-width: 350px; background: #752F32; display: flex; margin: auto;"]

[div="width: 120px; height: 100%; background: transparent; box-sizing: border-box; padding: 5px 0 5px 5px;"]

[div="height: 100px; width: 115px; background: url('https://i.imgur.com/pPmt2I8.jpg'); background-size: cover; background-position: 50% 60%; position: relative; margin-bottom: 5px;"][/div]

[div="height: 85px; width: 115px; background: transparent; display: flex; flex-direction: column; overflow-y: auto; align-items: center; box-sizing: border-box; padding: 0 5px 0 5px;"]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]mobile-friendly[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]3 tabs (circles)[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hidden scroll[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]character sheet[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hover[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]stats[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; line-height: 11px; text-align: center;"]keep credit[/div]

[/div]

[/div]

[div="flex: 1; background: transparent; box-sizing: border-box; position: relative;"]

[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]

[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 130%; text-align: center; font-weight: bolder; display: flex; flex-direction: column; align-items: center; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]

[div class="2"]
try harder, tryhard

[br][/br]

click !

[/div]

[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]

[class="op0"]opacity: 0;[/class]

[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]

[div class="1"]

[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]

[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]

[div class="back"]back[/div]​

[br][/br]

a tip: i would h i g h l y suggest you copy the code straight from the spoiler where it's attached instead of clicking reply and extracting it because the latter process will be very confusing. trust me on this one, okay ?

[br][/br][br][/br]

if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities

[br][/br][br][/br]

[div="width: 100%; height: 2px; background: white;"][/div]

[br][/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

[br][/br][br][/br]

the code:

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]hover/tap over that tree icon on the top right corner[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]it'll display three circles on the horizontal "fake it" picture[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]click/tap on to navigate between the different pages[/div][/div]

[br][/br]

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

[br][/br][br][/br]

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

[br][/br][br][/br]

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

[br][/br][br][/br]

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 ?????

[br][/br][br][/br]

so i hope you like it too (as basic as it it sjsksk)

[br][/br][br][/br]

and if you have any questions feel free to ask c:

[/div]

[/div]

[/div]
[/nobr]

[div="display: flex; justify-content: space-evenly; flex-wrap: wrap;"]
[div="background: #faf2e8; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#faf2e8[/div]
[div="background: #E8C4AC; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#E8C4AC[/div]
[div="background: #D0BFA8; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#D0BFA8[/div]
[div="background: #8F6442; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#8F6442[/div]
[div="background: #5C3B2A; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]35C3B2A[/div]
[div="background: rgb(61, 54, 48);; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]rgb(61, 54, 48)[/div]
[div="background: rgb(44, 19, 14); display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]rgb(44, 19, 14)[/div]
[div="background: #DEEAE3; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#DEEAE3[/div]
[div="background: #ACD0E8; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#ACD0E8[/div]
[div="background: #5CA1C5; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#5CA1C5[/div]
[div="background: #426D8F; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#426D8F[/div]
[div="background: #EADEE5; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#EADEE5[/div]
[div="background: #C55CA1; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#C55CA1[/div]
[div="background: #A1C55C; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#A1C55C[/div] [/div]


[nobr]
[class="bg"]
--bg-color-for-entire-code: #D0BFA8;
width: 320px;
height: 320px;
background: var(--bg-color-for-entire-code);
margin: auto;
position: relative;
z-index: 0;
box-sizing: border-box;
padding: 10px;
[/class]

[class="picture"]
--url-for-horizontal-pic-on-top: url('https://i.imgur.com/KSRlhQv.jpg');
width: 250px;
height: 90px;
background: var(--url-for-horizontal-pic-on-top);
background-size: 255px;
background-position: 65% 60%;
position: relative;
z-index: -1;
[/class]

[class="person"]
--url-for-vertical-pic-on-right: url('https://i.pinimg.com/564x/f9/19/f6/f919f6964bb112c301ac7a5d46dc63db.jpg');
width: 110px;
height: 250px;
background: var(--url-for-vertical-pic-on-right);
background-size: 200px;
background-position: 20% 50%;
position: absolute;
margin-left: 190px;
top: 60px;
[/class]

[class="person_text"]
--bg-for-text-that-show-up-on-right-pic: rgba(61, 54, 48, 0.3);
--shadow-color-for-text: #3d3630;
--text-for-the-stats: #faf2e8;
cursor: default;
display: none;
width: 110px;
height: 250px;
background: var(--bg-for-text-that-show-up-on-right-pic);
position: relative;
font-size: 12px;
color: var(--text-for-the-stats);
text-shadow: 3px 3px 4px var(--shadow-color-for-text);
line-height: 13px;
[/class]




[class="colblock"]
--stat-color: #faf7f2;
--shadow-color-for-block: #3d3630;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
background: var(--stat-color);
[/class]

[class="uncolblock"]
--stat-color: #faf7f2;
--shadow-color-for-block: #3d3630;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
border: 1.5px solid var(--stat-color);
[/class]




[class="text_holder"]
--bg-for-text-div: #5C3B2A;
--text-color-in-text-div: #faf7f2;
background: var(--bg-for-text-div);
color: var(--text-color-in-text-div);
width: 180px;
height: 200px;
position: relative;
margin-top: 10px;
[/class]

[class="text_1"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 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;
text-align: justify;
font-size: 12px;
line-height: 13px;
cursor: default;
[/class]

[class="text_11"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
display: none;
[/class]

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

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

[class="text_111"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
display: none;
[/class]

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

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

[class="icon"]
--url-for-top-right-smol-pic: url('https://cdn.pixabay.com/photo/2018/11/11/13/34/tree-3808776_960_720.png');
width: 40px;
height: 40px;
background: var(--url-for-top-right-smol-pic);
background-size: COVER;
background-position: 35% 0;
position: relative;
float: right;
cursor: pointer;
[/class]

[class="icon_options"]
--bg-color-for-3-dots: rgba(#, #, #, 0.3);
width: 250px;
height: 90px;
background: var(--bg-color-for-3-dots);
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]

[script class="circle1" on="click"]
fadeOut 900 icon_options
fadeIn 900 text_1
hide text_11
hide text_111
[/script]

[script class="circle2" on="click"]
fadeOut 900 icon_options
hide text_1
fadeIn 900 text_11
hide text_111
[/script]

[script class="circle3" on="click"]
fadeOut 900 icon_options
hide text_1
hide text_11
fadeIn 900 text_111
[/script]


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

[class="circle1"]
--color-for-1st-circle: #8F6442;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-1st-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle1" state="hover"]
--color-for-1st-circle-hover: #EADEE5;
background: var(--color-for-1st-circle-hover);
[/class]


[class="circle2"]
--color-for-2nd-circle: #E8C4AC;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-2nd-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle2" state="hover"]
--color-for-2nd-circle-hover: #ACD0E8;
background: var(--color-for-2nd-circle-hover);
[/class]


[class="circle3"]
--color-for-3rd-circle: #DEEAE3;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-3rd-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle3" state="hover"]
--color-for-3rd-circle-hover: #426D8F;
background: var(--color-for-3rd-circle-hover);
[/class]


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


[class="flex"]
display: flex;
justify-content: space-between;
align-items: flex-start;
[/class]

[class="heading"]
display: inline-block;
position: relative;
margin-right: 5px;
font-weight: bold;
[/class]

[class="deet"]
flex: 1;
text-align: right;
[/class]

[class="box"]
--text-color-in-text-div: #faf7f2;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: auto;
padding: 5px;
box-sizing: border-box;
border: 1px solid var(--text-color-in-text-div);
font-size: 11px;
line-height: 12px;
[/class]

[class="qna"]
--text-color-in-text-div: #faf7f2;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: auto;
font-size: 11px;
line-height: 12px;
padding: 5px;
box-sizing: border-box;
border: 2px dashed var(--text-color-in-text-div);
[/class]

[class="quote"]
text-align: center;
font-size: 7px;
line-height: 9px;
font-style: italic;
[/class]















[div=width: 320px; text-align: right; margin: auto; font-size: 8px;]code by fudgecakez fudgecakez [/div]
[div class="bg"]
[div class="icon"][/div]
[div class="person"]
[div class="person_text"]
[div="height: 100%; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 10px;"]

[div="flex: 1;"]
mood:
[br][/br]

a word or two
[/div]




[br][/br]

[div="flex: 1;"]
sociability:
[br][/br]

[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/div]




[br][/br]

[div="flex: 1;"]
muse:
[br][/br]

[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/div]




[br][/br]

[div="flex: 1;"]
lethargy:
[br][/br]

[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[div class="uncolblock"][/div]
[/div]
[/div]

[br][/br]

[div="flex: 1;"]
confidence:
[br][/br]

[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[div class="colblock"][/div]
[/div]
[/div]

[br][/br]

[div="flex: 1;"]
craving:

a life
[/div]




[/div]
[/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_holder"]
[div class="text_1"]
[div class="text_2"]
[div class="text_3"]

[div class="flex"]
[div class="heading"]name:[/div]
[div class="deet"]given + middle + surname[/div]
[/div]
[div class="box"]
given - meaning
[br][/br][br][/br]
middle - meaning
[br][/br][br][/br]
surname - meaning
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]nicknames:[/div]
[div class="deet"]answer one,
[br][/br]
two[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]zodiac:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
are they anything like their star sign?
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]d.o.b.:[/div]
[div class="deet"]dd/mm/yyyy[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]age:[/div]
[div class="deet"]##[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]gender:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]pronouns:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]sexuality:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
some description maybe?
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]nationality:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ethnicity:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]race:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]religion:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]education:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation if required
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]social status:[/div]
[div class="deet"]answer[/div]
[/div]

[/div]
[/div]
[/div]


[div class="text_11"]
[div class="text_22"]
[div class="text_33"]

[div class="flex"]
[div class="heading"]face claim:[/div]
[div class="deet"]fc's name that links to some of their pictures?[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]eyes:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
description
[/div]
[br][br]
[div class="flex"]
[div class="heading"]hair:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]height:[/div]
[div class="deet"]#'##" or #.##m[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]weight:[/div]
[div class="deet"]##kg or ###lbs[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]tattoos:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]piercings:[/div]
[div class="deet"]answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]distinct [br][/br] features:[/div]
[div class="deet"]answer one.
[br][/br]
two.
[br][/br]
three.
[br][/br]
four.[/div]
[/div]

[/div]
[/div]
[/div]


[div class="text_111"]
[div class="text_222"]
[div class="text_333"]

[div class="quote"]
song
[br][/br]
lyrics
[br][/br]
bitch
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]mbti:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]enneagram:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]temperament:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]alignment:[/div]
[div class="deet"]answer[/div]
[/div]
[div class="box"]
explanation
[/div]
[br][/br]
[div class="quote"]
some more
[br][/br]
song
[br][/br]
lyrics
[/div]
[br][/br]
[div class="qna"]
q. a question?
[br][/br][br][/br]
a. an answer uwu
[/div]
[br][/br]
[div class="qna"]
q. another question?
[br][/br][br][/br]
a. another answer owo
[/div]
[br][/br]
[div class="qna"]
q. omg more questions?
[br][/br][br][/br]
a. i'll keep fucking answering u bisch
[/div]
[br][/br]
[div class="qna"]
q. last question?
[br][/br][br][/br]
a. you're lucky i love u hmph
[/div]
[br][/br]
[div class="quote"]
another
[br][/br]
song
[br][/br]
lyric
[/div]

[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]
don't forget to add [br][/br] for line-breaks !

don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone

after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
  • --bg-color-for-entire-code: COLOR;
  • --url-for-horizontal-pic-on-top: url('URL');
  • background-size: #% | #px | COVER | ETC;
  • background-position: #% #% | #px #px | CENTER | ETC;
  • --url-for-vertical-pic-on-right: url('URL');
  • --bg-for-text-that-show-up-on-right-pic: rgba(#, #, #, 0.3);
  • --shadow-color-for-text: COLOR;
  • --text-for-the-stats: COLOR;
  • --stat-color: COLOR;
  • --shadow-color-for-block: COLOR;
  • --bg-for-text-div: COLOR;
  • --text-color-in-text-div: COLOR;
  • --url-for-top-right-smol-pic: url('URL');
  • --bg-color-for-3-dots: rgba(#, #, #, 0.3);
  • --color-for-1st-circle: COLOR;
  • --color-for-1st-circle-hover: COLOR;
  • --color-for-2nd-circle: COLOR;
  • --color-for-2nd-circle-hover: COLOR;
  • --color-for-3rd-circle: COLOR;
  • --color-for-3rd-circle-hover: COLOR;
  • YC'S MOOD HERE
  • "colblock | uncolblock"
  • YC'S CRAVING HERE
  • YOUR DETAIL FOR THE

the full, original code (with my input values) can be found on this website

you will find the blank template on this website and in this spoiler:

Code:
[nobr]
[class="bg"]
--bg-color-for-entire-code: COLOR;
width: 320px;
height: 320px;
background: var(--bg-color-for-entire-code);
margin: auto;
position: relative;
z-index: 0;
box-sizing: border-box;
padding: 10px;
[/class]

[class="picture"]
--url-for-horizontal-pic-on-top: url('URL');
width: 250px;
height: 90px;
background: var(--url-for-horizontal-pic-on-top);
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
position: relative;
z-index: -1;
[/class]

[class="person"]
--url-for-vertical-pic-on-right: url('URL');
width: 110px;
height: 250px;
background: var(--url-for-vertical-pic-on-right);
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
position: absolute;
margin-left: 190px;
top: 60px;
[/class]

[class="person_text"]
--bg-for-text-that-show-up-on-right-pic: rgba(#, #, #, 0.3);
--shadow-color-for-text: COLOR;
--text-for-the-stats: COLOR;
cursor: default;
display: none;
width: 110px;
height: 250px;
background: var(--bg-for-text-that-show-up-on-right-pic);
position: relative;
font-size: 12px;
color: var(--text-for-the-stats);
text-shadow: 3px 3px 4px var(--shadow-color-for-text);
line-height: 13px;
[/class]

[COMMENT]the fourth number in "rgba(#, #, #, 0.3);" is 0.3 which sets the opacity for the div. you can change it as you like: 1 means opaque and 0 means transparent[/COMMENT]


[class="colblock"]
--stat-color: COLOR;
--shadow-color-for-block: COLOR;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
background: var(--stat-color);
[/class]

[class="uncolblock"]
--stat-color: COLOR;
--shadow-color-for-block: COLOR;
height: 8px;
width: 12px;
display: inline-block;
box-shadow: 3px 3px 4px var(--shadow-color-for-block);
box-sizing: border-box;
border: 1.5px solid var(--stat-color);
[/class]

[COMMENT]i would recommend having the same colour for "--stat-color: COLOR;" and "--text-for-the-stats: COLOR;" because it looks nicer that way. also the same colour for "--shadow-color-for-block" and "--shadow-color-for-text" because it looks nice (:[/COMMENT]


[class="text_holder"]
--bg-for-text-div: COLOR;
--text-color-in-text-div: COLOR;
background: var(--bg-for-text-div);
color: var(--text-color-in-text-div);
width: 180px;
height: 200px;
position: relative;
margin-top: 10px;
[/class]

[class="text_1"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
position: relative;
[/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;
text-align: justify;
font-size: 12px;
line-height: 13px;
cursor: default;
[/class]

[class="text_11"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
position: relative;
display: none;
[/class]

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

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

[class="text_111"]
width: 180px;
height: 200px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
position: relative;
display: none;
[/class]

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

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

[class="icon"]
--url-for-top-right-smol-pic: url('URL');
width: 40px;
height: 40px;
background: var(--url-for-top-right-smol-pic);
background-size: #% | #px | COVER | ETC;
background-position: #% #% | #px #px | CENTER | ETC;
position: relative;
float: right;
cursor: pointer;
[/class]

[class="icon_options"]
--bg-color-for-3-dots: rgba(#, #, #, 0.3);
width: 250px;
height: 90px;
background: var(--bg-color-for-3-dots);
box-sizing: border-box;
display: none;
[/class]

[COMMENT]the fourth number in "rgba(#, #, #, 0.3);" is 0.3 which sets the opacity for the div. you can change it as you like: 1 means opaque and 0 means transparent[/COMMENT]


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

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

[script class="circle1" on="click"]
fadeOut 900 icon_options
fadeIn 900 text_1
hide text_11
hide text_111
[/script]

[script class="circle2" on="click"]
fadeOut 900 icon_options
hide text_1
fadeIn 900 text_11
hide text_111
[/script]

[script class="circle3" on="click"]
fadeOut 900 icon_options
hide text_1
hide text_11
fadeIn 900 text_111
[/script]


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

[class="circle1"]
--color-for-1st-circle: COLOR;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-1st-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle1" state="hover"]
--color-for-1st-circle-hover: COLOR;
background: var(--color-for-1st-circle-hover);
[/class]


[class="circle2"]
--color-for-2nd-circle: COLOR;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-2nd-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle2" state="hover"]
--color-for-2nd-circle-hover: COLOR;
background: var(--color-for-2nd-circle-hover);
[/class]


[class="circle3"]
--color-for-3rd-circle: COLOR;
width: 22px;
height: 22px;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
background: var(--color-for-3rd-circle);
transition: 0.5s all ease-out;
[/class]

[class name="circle3" state="hover"]
--color-for-3rd-circle-hover: COLOR;
background: var(--color-for-3rd-circle-hover);
[/class]


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


[class="flex"]
display: flex; 
justify-content: space-between; 
align-items: flex-start;
[/class]

[class="heading"]
display: inline-block; 
position: relative; 
margin-right: 5px; 
font-weight: bold;
[/class]

[class="deet"]
flex: 1; 
text-align: right;
[/class]

[class="box"]
--text-color-in-text-div: COLOR; 
margin-top: 5px; 
margin-bottom: 5px; 
height: auto; 
width: auto; 
padding: 5px; 
box-sizing: border-box; 
border: 1px solid var(--text-color-in-text-div);
font-size: 11px; 
line-height: 12px;
[/class]

[class="qna"]
--text-color-in-text-div: COLOR; 
margin-top: 5px; 
margin-bottom: 5px; 
height: auto; 
width: auto; 
font-size: 11px; 
line-height: 12px;
padding: 5px; 
box-sizing: border-box; 
border: 2px dashed var(--text-color-in-text-div);
[/class]

[class="quote"]
text-align: center; 
font-size: 7px; 
line-height: 9px; 
font-style: italic;
[/class]

[COMMENT]i explain more about these last 6 classes ("flex" "heading" "deet" "box" "qna" and "quote") in my "text" spoiler later on but just to quickly explain:
the "heading" class is for the text like "name" "nickname" "age" "zodiac" etc.
the "deet" class is for said texts' answers like "cosmin" "cosmo" "24" "sagittarius" etc.
the "box" class is for the boxes with extra info about the "name" "nickname" "mbti" and other headings.
the "qna" class is for those dashed-boxes where the question is asked and the answers are ic + from the character himself.
the "quote" class are for the lyrics i included on the third tab.[/COMMENT]














[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"]
[div="height: 100%; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 10px;"]

[div="flex: 1;"]
[B]mood:[/B]
[br][/br]
[RIGHT]YC'S MOOD HERE[/RIGHT]
[/div]

[COMMENT]a one or two-line sentence/word/phrase would be ideal here ^^^[/COMMENT]


[br][/br]

[div="flex: 1;"]
[B]sociability:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock"][/div] 
[div class="colblock"][/div] 
[div class="colblock"][/div] 
[div class="uncolblock"][/div] 
[div class="uncolblock"][/div]
[/div]
[/RIGHT]
[/div]

[COMMENT]so to explain, the "colblock" means the stat box is filled with colour and "uncolblock" means it's empty. you can have less coloured and more empty or, more coloured and less empty - it all depends on what yc's sociability is at the moment.
The only thing I recommend is keeping a maximum of 5 stat boxes. no more, no less.[/COMMENT]


[br][/br]

[div="flex: 1;"]
[B]muse:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[/div]
[/RIGHT]
[/div]

[COMMENT]i'm leaving it as "colblock | uncolblock" so you can choose[/COMMENT]


[br][/br]

[div="flex: 1;"]
[B]lethargy:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[/div]
[/RIGHT]
[/div]

[br][/br]

[div="flex: 1;"]
[B]confidence:[/B]
[br][/br]
[RIGHT]
[div="letter-spacing: -0.1em;"]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[div class="colblock | uncolblock"][/div]
[/div]
[/RIGHT]
[/div]

[br][/br]

[div="flex: 1;"]
[B]craving:[/B]
[RIGHT]YC'S CRAVING HERE[/RIGHT]
[/div]

[COMMENT]again, a one or two-line sentence/word/phrase would be ideal here ^^^[/COMMENT]


[/div]
[/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_holder"]

[div class="text_1"]
[div class="text_2"]
[div class="text_3"]

YOUR DETAIL FOR THE 1ST CIRCLE TEXT DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS

[/div]
[/div]
[/div]


[div class="text_11"]
[div class="text_22"]
[div class="text_33"]

YOUR DETAIL FOR THE 2ND CIRCLE TEXT DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS

[/div]
[/div]
[/div]


[div class="text_111"]
[div class="text_222"]
[div class="text_333"]

YOUR DETAIL FOR THE 3RD CIRCLE TEXT DIV HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS

[/div]
[/div]
[/div]

[/div]

[/div]
[/nobr]

let me explain those last 6 classes now

starting off with the "flex" "heading" and "deet" classes:
Code:
[class="flex"]
display: flex; 
justify-content: space-between; 
align-items: flex-start;
[/class]

[class="heading"]
display: inline-block; 
position: relative; 
margin-right: 5px; 
font-weight: bold;
[/class]

[class="deet"]
flex: 1; 
text-align: right;
[/class]
these are the 3 classes you will need to make your text look like this:
[nobr]
[div="width: 180px; height: auto; background: #5C3B2A; box-sizing: border-box; padding: 10px; color: #faf7f2;"]
[div="display: flex; justify-content: space-between; font-size: 12px; line-height: 13px; align-items: flex-start;"]
[div="display: inline-block; position: relative; margin-right: 5px;"]name:[/div]
[div="flex: 1; text-align: right;"]cosmin reneer mandel (text text text text text)[/div]
[/div]
[/div]
[/nobr]
the "heading" class are for headings like "name" "nickname" "eye colour" "face claim" etc.
the "deet" class are for the answers/details to the "heading"s

your code should look like this:
[div="position: relative; margin-left: 5%;"][div class="flex"]
[div class="heading"]
name [/div]
[div class="answer"]
cosmin reneeer mandel (text text text text text) [/div]
[/div]
[/div]


next up is the "box" class
Code:
[class="box"]
margin-top: 5px; 
margin-bottom: 5px; 
height: auto; 
width: auto; 
padding: 5px; 
box-sizing: border-box; 
border: 1px solid #faf7f2; 
font-size: 11px; 
line-height: 12px;
[/class]
this is what you'll need to use to make your text look like this:
[nobr]
[div="width: 180px; height: auto; background: #5C3B2A; box-sizing: border-box; padding: 10px; color: #faf7f2;"]
[div="height: auto; width: auto; padding: 5px; box-sizing: border-box; border: 1px solid #faf7f2; color: #faf7f2; font-size: 11px; line-height: 12px;"]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[BR][/BR][br][/br]reneer - alternate spelling of the name renier and means someone who is rich in love both, for others and from others[/div]
[/div]
[/nobr]
the code for it will simply be:
[div="position: relative; margin-left: 5%;"][div class="box"]
[b] cosmin - [/b] text text text text text text text
[br][/br]
[b]
reneer [/b] more text text text text text text
[/div][/div]


now the "qna" class:
Code:
[class="qna"]
margin-top: 5px; 
margin-bottom: 5px; 
height: auto; 
width: auto; 
padding: 5px; 
font-size: 11px; 
line-height: 12px;
box-sizing: border-box; 
border: 2px dashed #faf7f2;
[/class]
this is what you'll need to use if you want to make your text look like this:
[nobr]
[div="width: 180px; height: auto; background: #5C3B2A; box-sizing: border-box; padding: 10px; color: #faf7f2;"]
[div="height: auto; width: auto; padding: 5px; box-sizing: border-box; border: 2px dashed #faf7f2; font-size: 11px; line-height: 12px;"]
q. do you see yourself as the good or bad guy?[br][/br][br][/br]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
[/div]
[/div]
[/nobr]
the code for it is:
[div="position: relative; margin-left: 5%;"][div class="qna"]
[b] Q. question question question? [/b]
[br][/br][br][/br]
[b] A. [/b] answer answer answer
[/div][/div]


last but not least we have the "quote" class:
Code:
[class="quote"]
text-align: center; 
font-size: 7px; 
line-height: 9px; 
font-style: italic;
[/class]
that one is for if you want to add smth like this:
[nobr]
[div="width: 180px; height: auto; background: #5C3B2A; box-sizing: border-box; padding: 10px; color: #faf7f2;"]
[div="text-align: center; font-size: 7px; line-height: 9px; font-style: italic;"]
i was thinking[br][/br]bad things when i kissed you[br][/br]did my tongue tell you every lie?
[/div]
[/div]
[/nobr]
for this you'll need to have some prior knowledge on basic bbcode.
your code will look something like this:
[div="position: relative; margin-left: 5%;"][div class="quote"]
[b]
bold [/b]
[br][/br]
[s]
strike-through [/s]
[br][/br]
[i]
italics [/i]
[br][/br]
[u]
underlined [/u]
[br][/br]
[color=COLOR]
coloured [/color]
[/div]
[/div]

 
Last edited:

nios

𝘽𝙇𝘼𝘾𝙆 𝙇𝙄𝙑𝙀𝙎 𝙈𝘼𝙏𝙏𝙀𝙍
Hey fudgecakez 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
 

fudgecakez

i write too many songs about you
[div=line-height: 14px; font-size: 13px; text-align: justify; text-transform: lowercase;]
used your "the butterflies broke my heart" code!
aaahhh i'm so sorry for the one month late reply
i prbly got the notif ?? i dont remember oof
but ily regardless <3[/div]
 
4 | we're happy here

fudgecakez

i write too many songs about you
[nobr]
[div="height: 200px; max-width: 350px; background: #752F32; display: flex; margin: auto;"]

[div="width: 120px; height: 100%; background: transparent; box-sizing: border-box; padding: 5px 0 5px 5px;"]

[div="height: 100px; width: 115px; background: url('https://i.imgur.com/pPmt2I8.jpg'); background-size: cover; background-position: 50% 60%; position: relative; margin-bottom: 5px;"][/div]

[div="height: 85px; width: 115px; background: transparent; display: flex; flex-direction: column; overflow-y: auto; align-items: center; box-sizing: border-box; padding: 0 5px 0 5px;"]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]mobile-friendly[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]3 tabs (buttons)[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]hidden scroll[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]interest check[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]character sheet[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; line-height: 11px; text-align: center;"]keep credit[/div]

[/div]

[/div]

[div="flex: 1; background: transparent; box-sizing: border-box; position: relative;"]

[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]

[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 110%; text-align: center; font-weight: bolder; display: flex; align-items: center; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]

[div class="2"]
we're happy here

[br][/br]

click !

[/div]

[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]

[class="op0"]opacity: 0;[/class]

[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]

[div class="1"]

[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]

[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]

[div class="back"]back[/div]​

[br][/br]

a tip: i would h i g h l y suggest you copy the code straight from the spoiler where it's attached instead of clicking reply and extracting it because the latter process will be very confusing. trust me on this one, okay ?

[br][/br][br][/br]

if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities

[br][/br][br][/br]

[div="width: 100%; height: 2px; background: white;"][/div]

[br][/br]

holy shit it's fudge back at it again after three-year-long hiatus

[br][/br][br][/br]

fuck yea bitches

[br][/br][br][/br]

and what i bring to the table is nothing special, unfortunately: only the code i used for my interest check once upon a time

[br][/br][br][/br]

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

[br][/br][br][/br]

the code:

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]choose any one of the "buttons" and watch the magic unfold[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]then click "bacc" to go back[/div][/div]

[br][/br]

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

[br][/br][br][/br]

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

[br][/br][br][/br]

that's...literally all there is to it wow i need to step up my game and stop being so cynical

[br][/br][br][/br]

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

[br][/br][br][/br]

so that's great

[br][/br][br][/br]

fudge 1 - bbcode 0

[br][/br][br][/br]

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

[/div]

[/div]

[/div]
[/nobr]

[div="display: flex; justify-content: space-evenly; flex-wrap: wrap;"]
[div="background: #f0ebeb; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#f0ebeb[/div]
[div="background: #f7faff; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#f7faff[/div]
[div="background: #FFF6F2; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#FFF6F2[/div]
[div="background: rgb(151, 157, 174); display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]rgb(151, 157, 174)[/div]
[div="background: #4B5161; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#4B5161[/div]
[div="background: #192239; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#192239[/div]
[div="background: rgb(125, 114, 114); display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]rgb(125, 114, 114)[/div]
[div="background: #514242; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#514242[/div]
[div="background: #2B2323; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#2B2323[/div]
[div="background: rgb(180, 138, 117); display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]rgb(180, 138, 117)[/div]
[div="background: #B56F4C; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#B56F4C[/div]
[div="background: #6e3a20; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#6e3a20[/div] [/div]


[nobr]
[class="bg"]
--url-for-bg-img: url('https://media1.tenor.com/images/58c0b2af26f9d0ac1950102b349ee481/tenor.gif?itemid=13574399');
width: 320px;
height: 320px;
background: var(--url-for-bg-img);
background-size: COVER;
background-position: CENTER;
box-sizing: border-box;
position: relative;
margin: auto;
padding: 20px;
border-radius: 20px;
[/class]

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




[class="texta"]
--bg-color-for-1st-text-div: rgba(125, 114, 114, 0.7);
height: calc(100% - 40px);
width: calc(100% - 40px);
background: var(--bg-color-for-1st-text-div);
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]




[class="backa"]
--text-color-for-1st-div: #f0ebeb;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-1st-div);
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backa" state="hover"]
--text-color-for-1st-back-button-when-hovered: #2B2323;
color: var(--text-color-for-1st-back-button-when-hovered);
[/class]


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

[class="textb"]
--bg-color-for-2nd-text-div: rgba(151, 157, 174, 0.7);
height: 280px;
width: 280px;
background: var(--bg-color-for-2nd-text-div);
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"]
--text-color-for-2nd-div: #f7faff;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-2nd-div);
transition: 0.3s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backb" state="hover"]
--text-color-for-2nd-back-button-when-hovered: #192239;
color: var(--text-color-for-2nd-back-button-when-hovered);
[/class]


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

[class="textc"]
--bg-color-for-3rd-text-div: rgba(180, 138, 117, 0.7);
height: 280px;
width: 280px;
background: var(--bg-color-for-3rd-text-div);
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"]
--text-color-for-3rd-div: #FFF6F2;
display: inline-block;
font-weight: bolder;
color: var(--text-color-for-3rd-div);
transition: 0.6s all ease;
font-size: 15px;
cursor: default;
line-height: 15px;
[/class]

[class name="backc" state="hover"]
--text-color-for-3rd-back-button-when-hovered: #6e3a20;
color: var(--text-color-for-3rd-back-button-when-hovered);
[/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"]
--text-color-for-1st-div: #f0ebeb;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-1st-div);
cursor: default;
[/class]

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

[class="textboxb"]
--text-color-for-2nd-div: #f7faff;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-2nd-div);
cursor: default;
[/class]

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

[class="textboxc"]
--text-color-for-3rd-div: #FFF6F2;
box-sizing: border-box;
max-width: 260px;
font-size: 12px;
text-align: justify;
color: var(--text-color-for-3rd-div);
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 fudgecakez fudgecakez [/div]
[div class="bg"]

[div class="a"]
about me
[/div]

[div class="b"]
about you
[/div]

[div class="c"]
about the plot
[/div]




[div class="texta"]

[div class="backa"]
bacc
[/div]

[div class="hidden"]
[div class="scrolla"]
[div class="textboxa"]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

[/div]
[/div]
[/div]

[/div]


[div class="textb"]

[div class="backb"]
bacc
[/div]

[div class="hidden"]
[div class="scrollb"]
[div class="textboxb"]

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. 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.

[/div]
[/div]
[/div]

[/div]

[div class="textc"]

[div class="backc"]
bacc
[/div]

[div class="hidden"]
[div class="scrollc"]
[div class="textboxc"]

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

[/div]
[/div]
[/div]

[/div]

[/div]
[/nobr]
don't forget to add [br][/br] for line-breaks !

don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone

after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
  • --url-for-bg-img: url('URL');
  • background-size: #% | #px | COVER | ETC;
  • background-position: #% #% | #px #px | CENTER | ETC;
  • --bg-color-for-1st-button: COLOR;
  • --bg-color-for-1st-text-div: rgba(#, #, #, 0.7);
  • --text-color-for-1st-div: COLOR;
  • --text-color-for-1st-back-button-when-hovered: COLOR;
  • --bg-color-for-2nd-button: COLOR;
  • --bg-color-for-2nd-text-div: rgba(#, #, #, 0.7);
  • --text-color-for-2nd-div: COLOR;
  • --text-color-for-2nd-back-button-when-hovered: COLOR;
  • --bg-color-for-3rd-button: COLOR;
  • --bg-color-for-3rd-text-div: rgba(#, #, #, 0.7);
  • --text-color-for-3rd-div: COLOR;
  • --text-color-for-3rd-back-button-when-hovered: COLOR;
  • ABOUT ME
  • ABOUT YOU
  • ABOUT THE PLOT
  • BACC
  • YOUR TEXT FOR THE 1ST DIV HERE
  • YOUR TEXT FOR THE 2ND DIV HERE
  • YOUR TEXT FOR THE 3RD DIV HERE

the full, original code (with my input values) can be found on this website

you will find the blank template on this website and in this spoiler:

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

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

[COMMENT]i have positioned the div as "left: 20%;" "top: 20%;" and "transform: translate(-20%, -20%);" but you can change it as you like.
the "left: 20%;" coincides with the first numerical value in "transform: translate(-20%, -20%);" and "top: 20%;" with the second.
all of this ^^^ also applies for the classes named "b" and "c"[/COMMENT]


[class="texta"]
--bg-color-for-1st-text-div: rgba(#, #, #, 0.7);
height: calc(100% - 40px); 
width: calc(100% - 40px); 
background: var(--bg-color-for-1st-text-div); 
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]the fourth number in "rgba(#, #, #, 0.7);" defines the opacity of the text div; i have left it as 0.7 but you may change it as you like: 1 means opaque and 0 means transparent.
this ^^^ applies for classes named "textb" and "textc" as well[/COMMENT]


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

[class name="backa" state="hover"]
--text-color-for-1st-back-button-when-hovered: COLOR;
color: var(--text-color-for-1st-back-button-when-hovered);
[/class]


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

[class="textb"]
--bg-color-for-2nd-text-div: rgba(#, #, #, 0.7);
height: 280px; 
width: 280px; 
background: var(--bg-color-for-2nd-text-div);
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"]
--text-color-for-2nd-div: COLOR;
display: inline-block; 
font-weight: bolder; 
color: var(--text-color-for-2nd-div); 
transition: 0.3s all ease;
font-size: 15px; 
cursor: default; 
line-height: 15px;
[/class]

[class name="backb" state="hover"]
--text-color-for-2nd-back-button-when-hovered: COLOR;
color: var(--text-color-for-2nd-back-button-when-hovered);
[/class]


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

[class="textc"]
--bg-color-for-3rd-text-div: rgba(#, #, #, 0.7);
height: 280px; 
width: 280px; 
background: var(--bg-color-for-3rd-text-div);
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"]
--text-color-for-3rd-div: COLOR;
display: inline-block; 
font-weight: bolder; 
color: var(--text-color-for-3rd-div); 
transition: 0.6s all ease; 
font-size: 15px; 
cursor: default; 
line-height: 15px;
[/class]

[class name="backc" state="hover"]
--text-color-for-3rd-back-button-when-hovered: COLOR;
color: var(--text-color-for-3rd-back-button-when-hovered);
[/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"]
--text-color-for-1st-div: COLOR;
box-sizing: border-box; 
max-width: 260px;
font-size: 12px; 
text-align: justify; 
color: var(--text-color-for-1st-div); 
cursor: default;
[/class]

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

[class="textboxb"]
--text-color-for-2nd-div: COLOR;
box-sizing: border-box; 
max-width: 260px; 
font-size: 12px; 
text-align: justify; 
color: var(--text-color-for-2nd-div); 
cursor: default;
[/class]

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

[class="textboxc"]
--text-color-for-3rd-div: COLOR;
box-sizing: border-box; 
max-width: 260px; 
font-size: 12px; 
text-align: justify; 
color: var(--text-color-for-3rd-div); 
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"]
ABOUT ME
[/div]

[div class="b"]
ABOUT YOU
[/div]

[div class="c"]
ABOUT THE PLOT
[/div]

[COMMENT]i wasn't exactly sure what to substitute the text here ^^^ for so i left it as is. however, feel free to change it as you wish ![/COMMENT]


[div class="texta"]

[div class="backa"]
BACC
[/div]

[COMMENT]the text i have for the "back button"s are simply "BACC" but you can change to whatever you want ! 
just try not to make the text more than one line long[/COMMENT]


[div class="hidden"]
[div class="scrolla"]
[div class="textboxa"]

YOUR TEXT FOR THE 1ST DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS

[/div]
[/div]
[/div]

[/div]


[div class="textb"]

[div class="backb"]
BACC
[/div]

[div class="hidden"]
[div class="scrollb"]
[div class="textboxb"]

YOUR TEXT FOR THE 2ND DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS

[/div]
[/div]
[/div]

[/div]

[div class="textc"]

[div class="backc"]
BACC
[/div]

[div class="hidden"]
[div class="scrollc"]
[div class="textboxc"]

YOUR TEXT FOR THE 3RD DIV HERE. DON'T FORGET TO ADD [BR][/BR] FOR LINE BREAKS

[/div]
[/div]
[/div]

[/div]

[/div]
[/nobr]
 
Last edited:

fei

johnny johnny yes papa
code by @ fudgecakez
[nobr]
[class="bocks"]
width: 100%;
height: 120px;
display: flex;
cursor: url('http://i.imgur.com/ZOrzC.png'), auto;
[/class]

[class="left"]
width: 10%;
height: 120px;
background: #A1A3A8;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: bold;
text-align: center;
color: #e3d1c8;
[/class]

[class="right"]
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 120px;
background: url('https://images.unsplash.com/photo-1534176331298-076b28a35131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1494&q=80');
background-size: cover;
background-position: 50% 40%;
box-sizing: border-box;
padding: 10px;
[/class]

[class="title"]
font-size: 22px;
font-weight: bold;
text-align: center;
color: #e3d1c8;
text-shadow: 5px 5px 5px #5e514e;
letter-spacing: 2px;
[/class]

[class="textbocks"]
width: 100%;
max-height: 100px;
background: rgba(227, 209, 200, 0.6);
font-size: 12px;
color: #2e343b;
display: none;
box-sizing: border-box;
padding: 10px 5px 10px 5px;
overflow-y: auto;
line-height: 14px;
[/class]

[script class="title" on="mouseenter"]
hide title
fadeIn 800 textbocks
[/script]

[script class="bocks" on="mouseleave"]
hide textbocks
fadeIn 800 title
[/script]

[div class="bocks"]
[div class="left"]0[/div]
[div class="right"]
[div class="title"]
when i was a young boy
[br][/br]
hover !
[/div]
[div class="textbocks"]
my father
[br][/br]
took me into the city
[br][/br]
to see a marching band


[br][/br][br][/br]

alright
[br][/br]
hi
[br][/br]
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
[br][/br]
i kinda suck at coding tbh so idek why im doing this but hey
[br][/br]
practice makes perfect or smth right ?
[br][/br]
noob level 5000 im warning you before you choos

[br][/br][br][/br][BR][/BR]

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

[br][/br]

DO S
[br][/br]
  • 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
[/div]
[/div]
[/div]
[/nobr]
Could I use this for my RP? I added a credit in the corner
 
5 | addicted to hurting

fudgecakez

i write too many songs about you
[nobr]
[div="height: 200px; max-width: 350px; background: #752F32; display: flex; margin: auto;"]

[div="width: 120px; height: 100%; background: transparent; box-sizing: border-box; padding: 5px 0 5px 5px;"]

[div="height: 100px; width: 115px; background: url('https://i.imgur.com/pPmt2I8.jpg'); background-size: cover; background-position: 50% 60%; position: relative; margin-bottom: 5px;"][/div]

[div="height: 85px; width: 115px; background: transparent; display: flex; flex-direction: column; overflow-y: auto; align-items: center; box-sizing: border-box; padding: 0 5px 0 5px;"]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]mobile-friendly[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]5 tabs[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]visible scroll[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]character sheet[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; margin-bottom: 5px; line-height: 11px; text-align: center;"]slider[/div]

[div="height: auto; display: inline-block; background: #F6F3E3; color: #1B1A18; box-sizing: border-box; padding: 4px 6px 4px 6px; font-size: 10px; border-radius: 5px; position: relative; line-height: 11px; text-align: center;"]keep credit[/div]

[/div]

[/div]

[div="flex: 1; background: transparent; box-sizing: border-box; position: relative;"]

[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]

[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 120%; text-align: center; font-weight: bolder; display: flex; align-items: center; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]

[div class="2"]
addicted to hurting

[br][/br]

click !

[/div]

[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]

[class="op0"]opacity: 0;[/class]

[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]

[div class="1"]

[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]

[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]

[div class="back"]back[/div]​

[br][/br]

a tip: i would h i g h l y suggest you copy the code straight from the spoiler where it's attached instead of clicking reply and extracting it because the latter process will be very confusing. trust me on this one, okay ?

[br][/br][br][/br]

if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities

[br][/br][br][/br]

[div="width: 100%; height: 2px; background: white;"][/div]

[br][/br]

yo guys look i got a new code for my...uh...what are these called even ? [br][/br][br][/br] whatever bc tbh, i think this is very ugly it's honestly so fckn bland.

[br][/br][br][/br]

i'll probably end up changing it again but for now

[br][/br][br][/br]

on w the code:

[br][/br]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]choose from any of the "buttons"/options on the bar at the left and be transported to a land apart where you can fly w dragons[/div][/div]

[div="display: flex;"][div="position: relative; margin-right: 5px;"]•[/div][div="flex: 1;"]click either the top or bottom pictures to be taken back to slide #1 where it says "character archetype"[/div][/div]

[br][/br]

yup so that's all i got for today's video be sure to smash like that like button and don't forget to subscribe and hit that bell ic—

[br][/br][br][/br]

uh...wrong platform ? whoops

[br][/br][br][/br]

i'm like super low energy today pls someone fedex me a few monster drinks

[/div]

[/div]

[/div]
[/nobr]

[div="display: flex; justify-content: space-evenly; flex-wrap: wrap;"]
[div="background: #ffffff; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#ffffff[/div]
[div="background: #F3FDFC; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#F3FDFC[/div]
[div="background: rgb(243, 253, 252); display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]rgb(243, 253, 252)[/div]
[div="background: #EBD4D5; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#EBD4D5[/div]
[div="background: #ffb5c6; display: inline-block; color: black; box-sizing: border-box; padding: 5px;"]#ffb5c6[/div]
[div="background: #A21734; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#A21734[/div]
[div="background: #473344; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#473344[/div]
[div="background: #1c0409; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#1c0409[/div]
[div="background: #000000; display: inline-block; color: white; box-sizing: border-box; padding: 5px;"]#000000[/div] [/div]


[nobr]
[class="container"]
height: 490px;
max-width: 600px;
margin: auto;
display: flex;
background: transparent;
cursor: url('https://i.imgur.com/Yi5T7jc.png'), default;
position: relative;
[/class]

[class="bg"]
--color-for-the-bg: white;
flex: 1;
height: 450px;
background: var(--color-for-the-bg);
position: relative;
z-index: 0;
top: 20px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0px 10px 0px 10px;
[/class]

[class="bookmark"]
--color-for-left-bar: #A21734;
--color-for-box-shadow: #1c0409;
width: 100px !important;
height: 470px;
background: var(--color-for-left-bar);
position: relative;
box-shadow: 0 0 15px var(--color-for-box-shadow);
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 10px 0 10px 0;
margin-right: 10px;
[/class]

[class="image1"]
--url-for-1st-pic-in-bar: url('https://pbs.twimg.com/media/DEpV6sTXgAQgCbf.jpg');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-1st-pic-in-bar);
background-size: 300%;
background-position: 50% 5%;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
[/class]

[class="image2"]
--url-for-2nd-pic-in-bar: url('https://img.buzzfeed.com/buzzfeed-static/static/2017-01/2/16/asset/buzzfeed-prod-web-05/sub-buzz-5349-1483392933-1.jpg');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-2nd-pic-in-bar);
background-size: 250%;
background-position: 45% 9%;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
[/class]

[class="textcontainer"]
--url-for-bg-pic-on-right: url('https://i.imgur.com/v2uTPmb.png');
position: relative;
height: 430px;
flex: 1;
background: var(--url-for-bg-pic-on-right);
background-size: cover;
background-position: 50% 10%;
box-sizing: border-box;
overflow: hidden;
[/class]


[class="bbutton"]
--color-for-button-text: white;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="bbutton" state="hover"]
--color-for-button-hover: #ffb5c6;
--color-for-button-shadow: black;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="lbutton"]
--color-for-button-text: white;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;[/class]

[class name="lbutton" state="hover"]
--color-for-button-hover: #ffb5c6;
--color-for-button-shadow: black;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="pbutton"]
--color-for-button-text: white;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="pbutton" state="hover"]
--color-for-button-hover: #ffb5c6;
--color-for-button-shadow: black;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="abutton"]
--color-for-button-text: white;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="abutton" state="hover"]
--color-for-button-hover: #ffb5c6;
--color-for-button-shadow: black;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="tbutton"]
--color-for-button-text: white;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="tbutton" state="hover"]
--color-for-button-hover: #ffb5c6;
--color-for-button-shadow: black;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="book"]
position: relative;
height: auto;
width: 100%;
transition: 2s all ease;
[/class]


[class="ogpage"]
position: absolute;
height: 430px;
width: 100%;
display: inline-block;
[/class]

[class="fa"]
--color-for-big-title: #EBD4D5;
--color-for-shadow-around-border: black;
position: relative;
height: auto;
display: inline-block;
font-weight: bold;
text-align: center;
text-transform: uppercase;
font-size: 160%;
box-sizing: border-box;
padding: 10px;
border: 6px solid var(--color-for-big-title);
color: var(--color-for-big-title);
text-shadow: 2px 2px 15px #473344, -2px -2px 15px #473344, 2px -2px 15px #473344, -2px 2px 15px #473344;
cursor: url('https://i.imgur.com/Yi5T7jc.png'), default;
box-shadow: 0 0 15px var(--color-for-shadow-around-border);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
[/class]


[class="bpage"]
--color-for-slider-page: rgba(255, 255, 255, 0.1);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 150%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]




[class="lpage"]
--color-for-slider-page: rgba(255, 255, 255, 0.1);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 300%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="ppage"]
--color-for-slider-page: rgba(255, 255, 255, 0.1);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 450%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="tpage"]
--color-for-slider-page: rgba(255, 255, 255, 0.1);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 600%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="apage"]
--color-for-slider-page: rgba(255, 255, 255, 0.1);;
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 750%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]



[script class="image1" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="image2" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="bbutton" on="click"]
addClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="lbutton" on="click"]
addClass active lbutton
removeClass active bbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move2 book
removeClass move1 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="pbutton" on="click"]
addClass active pbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active tbutton
addClass move3 book
removeClass move1 book
removeClass move2 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="abutton" on="click"]
addClass active abutton
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active tbutton
addClass move4 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move5 book
[/script]

[script class="tbutton" on="click"]
addClass active tbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active pbutton
addClass move5 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
[/script]

[class="move1"]
transform: translate(-150%, 0%);
[/class]

[class="move2"]
transform: translate(-300%, 0%);
[/class]

[class="move3"]
transform: translate(-450%, 0%);
[/class]

[class="move4"]
transform: translate(-750%, 0%);
[/class]

[class="move5"]
transform: translate(-600%, 0%);
[/class]

[class="active"]
--color-for-button-shadow: black;
--color-for-button-hover: #ffb5c6;
color: var(--color-for-button-hover);
letter-spacing: 3px;
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]

[class="scroll"]
height: 100%;
width: 100%;
background: transparent;
overflow-y: scroll;
box-sizing: border-box;
padding-right: 10px;
[/class]


[class="flex"]
display: flex;
justify-content: space-between;
align-items: flex-start;
[/class]

[class="align"]
display: flex;
flex-direction: column;
align-items: flex-end;
[/class]

[class="heading"]
--color-for-heading-text: #A21734;
--color-for-heading-bg: rgba(243, 253, 252, 0.6);
font-weight: bolder;
font-size: 12px;
color: var(--color-for-heading-text);
box-sizing: border-box;
border: 3px solid var(--color-for-heading-text);
display: inline-block;
padding: 2px 6px 2px 6px;
background: var(--color-for-heading-bg);
position: relative;
margin-right: 10px;
letter-spacing: -0.5px;
text-transform: uppercase;
text-align: center;
[/class]

[class="answer"]
--color-for-details-bg: rgba(162, 23, 52, 0.9);
--color-for-details-text: #F3FDFC;
display: inline-block;
background: var(--color-for-details-bg);
color: var(--color-for-details-text);
padding: 1px 7px 3px 7px;
font-size: 12px;
position: relative;
margin-bottom: 3px;
[/class]











[div class="container"]
[div="text-align: right; font-size: 8px; position: absolute; right: 0; top: 8px;"]code by fudgecakez fudgecakez [/div]
[div class="bg"]
[div class="bookmark"]
[div class="image1"][/div]

[div class="bbutton"]
BASICS
[/div]

[div class="lbutton"]
LOOKS
[/div]

[div class="pbutton"]
PSYCHE
[/div]

[div class="tbutton"]
TIES
[/div]

[div class="abutton"]
ACCOUNT
[/div]



[div class="image2"][/div]
[/div]

[div class="textcontainer"]
[div class="book"]
[div class="ogpage"]

[div class="fa"]
character [br][/br] archetype
[/div]

[/div]


[div class="bpage"]
[div class="scroll"]

[div class="flex"]
[div class="heading"]NAME[/div]
[div class="answer"]Given + Middle + Surname[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]NICKNAME[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[div class="answer"]Four[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]AGE[/div]
[div class="answer"]##[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]D.O.B.[/div]
[div class="answer"]DD/MM/YYYY[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ZODIAC[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]GENDER[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SEXUALITY[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ROMANTIC [br][/br] ORIENTATION[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two, if required[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]NATIONALITY[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]DEGREES[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]OCCUPATION[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]TRIVIA[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[div class="answer"]Four[/div]
[div class="answer"]Five[/div]
[div class="answer"]Six[/div]
[div class="answer"]Seven[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SECRET[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[/div]
[/div]

[/div]
[/div]


[div class="lpage"]
[div class="scroll"]

[div class="flex"]
[div class="heading"]FACE [br][/br] CLAIM[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]HEIGHT[/div]
[div class="align"]
[div class="answer"]#'##"[/div]
[div class="answer"]#.##m[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]WEIGHT[/div]
[div class="align"]
[div class="answer"]##kg[/div]
[div class="answer"]###lbs[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]BUILD[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]HAIR[/div]
[div class="align"]
[div class="answer"]Colour + Type + How they style it[/div]
[div class="answer"]Facial hair?[/div]
[div class="answer"]Anything extra you wanna add[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]EYES[/div]
[div class="answer"]Colour[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]TATTOOS[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]BIRTHMARKS[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]PIERCINGS[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]DISTINCT [br][/br] FEATURE[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ATTIRE[/div]
[div class="align"]
[div class="answer"]Answer[/div]
[div="width: 90%; height: 300px; background: url('https://i.imgur.com/VNQAI8u.png'); background-size: cover; background-position: 60% 0;"][/div]
[/div]
[/div]

[/div]
[/div]


[div class="ppage"]
[div class="scroll"]

[div class="flex"]
[div class="heading"]PERSONA[/div]
[div class="align"]
[div class="answer"]First impression they make on strangers[/div]
[div class="answer"]What their close friends / family might say[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SELF [br][/br] IMAGE[/div]
[div class="answer"]#sadboi4life[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]LIKES[/div]
[div class="align"]
[div class="answer"]Answer one[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[div class="answer"]Four[/div]
[div class="answer"]Five[/div]
[div class="answer"]Six[/div]
[div class="answer"]Seven[/div]
[div class="answer"]Eight[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]DISLIKES[/div]
[div class="align"]
[div class="answer"]One[/div]
[div class="answer"]Two[/div]
[div class="answer"]Three[/div]
[div class="answer"]Four[/div]
[div class="answer"]Five[/div]
[div class="answer"]Six[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]FEARS[/div]
[div class="answer"]Answer[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]THEME [br][/br] (LINKS)[/div]
[div class="align"]
[div class="answer"]imma leave the song links here so you can check 'em out[/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]EDEN - Drugs[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]bülow - Sweet Little Lies[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]The Weeknd - House of Balloons / Glass Table Girls[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]One Direction - 18[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]The Weeknd - Wicked Games[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]Lykke Li - sex money feelings die[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]The Weeknd - Acquainted[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]Chase Atlantic - Consume[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]The Weeknd - Hurt You[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]Andy Powell - Pretty Little Lies[/div][/div]
[div class="answer"][div="display: inline-block; cursor: url('https://i.imgur.com/WmtOPXU.png'), pointer; color: #F3FDFC;"]Lana Del Rey - Born To Die[/div][/div]
[/div]
[/div]

[/div]
[/div]


[div class="apage"]
[div class="scroll"]

[div class="heading"]CONCISE HISTORY[/div]​
[br][/br]
[div class="flex"]
[div class="heading"]1982[/div]
[div class="answer"]i feel too lazy to remove the years/dates so they're staying[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]1983~86[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]1987~92[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]1993~95[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]1996~2000[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]2000~04[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]2005~08[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]2009~15[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]2015~19[/div]
[div class="align"]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet. Ut pretium aliquet rutrum. Praesent ac efficitur urna, nec volutpat orci.[/div]
[/div]
[/div]
[br][/br]
[div class="heading"]PM me for full version[/div]​

[/div]
[/div]


[div class="tpage"]
[div class="scroll"]

[div class="flex"]
[div class="heading"]FATHER[/div]
[div class="answer"]What's their relationship like? What's YC's opinion of them?[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]MOTHER[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SIBLING[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]ANOTHER [br][/br] ONE[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]A LOVER?[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet
[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SOMEONE[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[br][/br]
[div class="flex"]
[div class="heading"]SOMEONE[/div]
[div class="answer"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum venenatis lacus, sed vestibulum ligula ullamcorper nec. Duis sit amet odio blandit, mollis lacus ut, ullamcorper lectus. Nam in euismod diam. Curabitur tristique varius nisl, et auctor lorem auctor sit amet.[/div]
[/div]
[/div]

[/div]
[/div]

[/div]
[/div]
[/div]
[/nobr]
don't forget to add [br][/br] for line-breaks !

don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone

after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
  • --color-for-the-bg: COLOR;
  • --color-for-left-bar: COLOR;
  • --color-for-box-shadow: COLOR;
  • --url-for-1st-pic-in-bar: url('URL');
  • background-size: COVER | #% | #px | ETC;
  • background-position: #% #% | CENTER | #px #px | ETC;
  • --url-for-2nd-pic-in-bar: url('URL');
  • --url-for-bg-pic-on-right: url('URL');
  • --color-for-button-text: COLOR;
  • --color-for-button-hover: COLOR;
  • --color-for-button-shadow: COLOR;
  • --color-for-big-title: COLOR;
  • --color-for-shadow-around-border: COLOR;
  • TEXT-SHADOW-COLOR
  • --color-for-slider-page: rgba(#, #, #, #);
  • --color-for-heading-text: COLOR;
  • --color-for-heading-bg: rgba(#, #, #, 0.6);
  • --color-for-details-bg: rgba(#, #, #, 0.9);
  • --color-for-details-text: COLOR;
  • BASICS
  • LOOKS
  • PSYCHE
  • TIES
  • ACCOUNT
  • NAME OF CHARA OR ROLE HERE
  • YOUR TEXT FOR THE "BASICS" SLIDE HERE
  • YOUR TEXT FOR THE "LOOKS" SLIDE HERE
  • YOUR TEXT FOR THE "PSYCHE" SLIDE HERE
  • YOUR TEXT FOR THE "ACCOUNT" SLIDE HERE
  • YOUR TEXT FOR THE "TIES" SLIDE HERE

the full, original code (with my input values) can be found on this website

you will find the blank template on this website and in this spoiler:

Code:
[nobr]
[class="container"]
height: 490px;
max-width: 600px;
margin: auto;
display: flex;
background: transparent;
cursor: default;
position: relative;
[/class]

[class="bg"]
--color-for-the-bg: COLOR;
flex: 1;
height: 450px;
background: var(--color-for-the-bg);
position: relative;
z-index: 0;
top: 20px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0px 10px 0px 10px;
[/class]

[class="bookmark"]
--color-for-left-bar: COLOR;
--color-for-box-shadow: COLOR;
width: 100px !important;
height: 470px;
background: var(--color-for-left-bar);
position: relative;
box-shadow: 0 0 15px var(--color-for-box-shadow);
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 10px 0 10px 0;
margin-right: 10px;
[/class]

[class="image1"]
--url-for-1st-pic-in-bar: url('URL');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-1st-pic-in-bar);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
cursor: pointer;
[/class]

[class="image2"]
--url-for-2nd-pic-in-bar: url('URL');
position: relative;
width: 80px;
height: 100px;
background: var(--url-for-2nd-pic-in-bar);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
cursor: pointer;
[/class]

[class="textcontainer"]
--url-for-bg-pic-on-right: url('URL');
position: relative;
height: 430px;
flex: 1;
background: var(--url-for-bg-pic-on-right);
background-size: COVER | #% | #px | ETC;
background-position: #% #% | CENTER | #px #px | ETC;
box-sizing: border-box;
overflow: hidden;
[/class]


[class="bbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="bbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="lbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;[/class]

[class name="lbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="pbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="pbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="abutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="abutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="tbutton"]
--color-for-button-text: COLOR;
font-size: 14px;
font-variant: small-caps;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
cursor: pointer;
color: var(--color-for-button-text);
transition: 0.3s all ease-out;
border-top: 1px solid var(--color-for-button-text);
display: inline-block;
border-bottom: 1px solid var(--color-for-button-text);
line-height: 18px;
padding: 0px 5px 5px 5px;
[/class]

[class name="tbutton" state="hover"]
--color-for-button-hover: COLOR;
--color-for-button-shadow: COLOR;
letter-spacing: 3px;
color: var(--color-for-button-hover);
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]


[class="book"]
position: relative;
height: auto;
width: 100%;
transition: 2s all ease;
[/class]


[class="ogpage"]
position: absolute;
height: 430px;
width: 100%;
display: inline-block;
[/class]

[class="fa"]
--color-for-big-title: COLOR;
--color-for-shadow-around-border: COLOR;
position: relative;
height: auto;
display: inline-block;
font-weight: bold;
text-align: center;
text-transform: uppercase;
font-size: 160%;
font-family: Times New Roman;
box-sizing: border-box;
padding: 10px;
border: 6px solid var(--color-for-big-title);
color: var(--color-for-big-title);
text-shadow: 2px 2px 15px TEXT-SHADOW-COLOR, -2px -2px 15px TEXT-SHADOW-COLOR, 2px -2px 15px TEXT-SHADOW-COLOR, -2px 2px 15px TEXT-SHADOW-COLOR;
cursor: default;
box-shadow: 0 0 15px var(--color-for-shadow-around-border);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
[/class]


[class="bpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 150%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]

[comment]so you see the "--color-for-slider-page: rgba(#, #, #, #);" you have to fill out ? it's for the background colour you want to give your slider page e.g. mine was a white w opacity 0.1 so it was very light.
furthermore the fourth "#" in "--color-for-slider-page: rgba(#, #, #, #);" is to be substituted for any value bw 0 and 1 (where 0 means transparent and 1 means opaque)
^^^all of this true for the next few classes too where we define the details for the "pages" or slides (that each "button" takes you to)[/comment]


[class="lpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 300%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="ppage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 450%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="tpage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 600%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]


[class="apage"]
--color-for-slider-page: rgba(#, #, #, #);
position: absolute;
height: 430px;
width: 100%;
background: var(--color-for-slider-page);
display: inline-block;
margin-left: 750%;
box-sizing: border-box;
padding: 10px 0px 10px 10px;
[/class]



[script class="image1" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="image2" on="click"]
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="bbutton" on="click"]
addClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="lbutton" on="click"]
addClass active lbutton
removeClass active bbutton
removeClass active pbutton
removeClass active abutton
removeClass active tbutton
addClass move2 book
removeClass move1 book
removeClass move3 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="pbutton" on="click"]
addClass active pbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active tbutton
addClass move3 book
removeClass move1 book
removeClass move2 book
removeClass move4 book
removeClass move5 book
[/script]

[script class="abutton" on="click"]
addClass active abutton
removeClass active bbutton
removeClass active lbutton
removeClass active pbutton
removeClass active tbutton
addClass move4 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move5 book
[/script]

[script class="tbutton" on="click"]
addClass active tbutton
removeClass active bbutton
removeClass active lbutton
removeClass active abutton
removeClass active pbutton
addClass move5 book
removeClass move1 book
removeClass move2 book
removeClass move3 book
removeClass move4 book
[/script]

[class="move1"]
transform: translate(-150%, 0%);
[/class]

[class="move2"]
transform: translate(-300%, 0%);
[/class]

[class="move3"]
transform: translate(-450%, 0%);
[/class]

[class="move4"]
transform: translate(-750%, 0%);
[/class]

[class="move5"]
transform: translate(-600%, 0%);
[/class]

[class="active"]
--color-for-button-shadow: COLOR;
--color-for-button-hover: COLOR;
color: var(--color-for-button-hover);
letter-spacing: 3px;
border-color: var(--color-for-button-hover);
text-shadow: 0 0 10px var(--color-for-button-shadow);
[/class]

[class="scroll"]
height: 100%; 
width: 100%; 
background: transparent; 
overflow-y: scroll; 
box-sizing: border-box; 
padding-right: 10px;
[/class]

[class="flex"]
display: flex; 
justify-content: space-between; 
align-items: flex-start;
[/class]

[class="align"]
display: flex; 
flex-direction: column; 
align-items: flex-end;
[/class]

[class="heading"]
--color-for-heading-text: COLOR;
--color-for-heading-bg: rgba(#, #, #, 0.6); 
font-weight: bolder;
font-size: 12px; 
color: var(--color-for-heading-text); 
box-sizing: border-box; 
border: 3px solid var(--color-for-heading-text); 
display: inline-block; 
padding: 2px 6px 2px 6px; 
background: var(--color-for-heading-bg);
position: relative; 
margin-right: 10px; 
letter-spacing: -0.5px;
font-family: Archivo Black;
text-transform: uppercase;
text-align: center;
[/class]

[class="answer"]
--color-for-details-bg: rgba(#, #, #, 0.9); 
--color-for-details-text: COLOR;
display: inline-block; 
background: var(--color-for-details-bg);
color: var(--color-for-details-text); 
padding: 1px 7px 3px 7px; 
font-size: 12px;
position: relative;
margin-bottom: 3px;
[/class]

[COMMENT]it looks super aesthetic when the colour values for "--color-for-heading-text: COLOR;" and "--color-for-details-bg: rgba(#, #, #, 0.9);" are the same (except one's in hex and the other's in rgb.)
also i explain how to use these last four classes ("flex" "align" "heading" and "answer") in my "text" spoiler but just so you have an idea: 
the "heading" class is for those "NAME" "NICKNAME" "ZODIAC" texts. 
the "answer" class is for said texts answers like "marcel" "marcie" "sagittarius"[/COMMENT]













[div class="container"]
[div="text-align: right; font-size: 8px; position: absolute; right: 0; top: 8px;"]code by @fudgecakez[/div]
[div class="bg"]
[div class="bookmark"]
[div class="image1"][/div]

[div class="bbutton"]
BASICS
[/div]

[div class="lbutton"]
LOOKS
[/div]

[div class="pbutton"]
PSYCHE
[/div]

[div class="tbutton"]
TIES
[/div]

[div class="abutton"]
ACCOUNT
[/div]

[comment]for these few divs ^^^ try not to make the words for the button too long. if you choose to use this as a cs, i would recommend you keep the words i've input here instead of switching them out for smth else.[/comment]


[div class="image2"][/div]

[/div]

[div class="textcontainer"]
[div class="book"]
[div class="ogpage"]

[div class="fa"]
NAME OF CHARA OR ROLE HERE
[/div]

[/div]


[div class="bpage"]
[div class="scroll"]

YOUR TEXT FOR THE "BASICS" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS

[/div]
[/div]


[div class="lpage"]
[div class="scroll"]

YOUR TEXT FOR THE "LOOKS" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS

[/div]
[/div]


[div class="ppage"]
[div class="scroll"]

YOUR TEXT FOR THE "PSYCHE" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS

[/div]
[/div]


[div class="apage"]
[div class="scroll"]

YOUR TEXT FOR THE "ACCOUNT" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS

[/div]
[/div]


[div class="tpage"]
[div class="scroll"]

YOUR TEXT FOR THE "TIES" SLIDE HERE.
FOR LINE BREAKS, YOU WILL NEED TO ADD [br][/br] TAGS

[/div]
[/div]

[/div]

[/div]

[/div]

[/div]
[/nobr]

let me get to explaining those last four classes.
i'll explain them one by one.

let's start with heading:
Code:
[class="heading"]
--color-for-heading-text: COLOR;
--color-for-heading-bg: rgba(#, #, #, 0.6); 
font-weight: bolder;
font-size: 12px; 
color: var(--color-for-heading-text); 
box-sizing: border-box; 
border: 3px solid var(--color-for-heading-text); 
display: inline-block; 
padding: 2px 6px 2px 6px; 
background: var(--color-for-heading-bg);
position: relative; 
margin-right: 10px; 
letter-spacing: -0.5px;
text-transform: uppercase;
text-align: center;
[/class]
this is the one you'll need to add around your text if you want it to look like this a.k.a. a "heading"
[div="font-weight: bolder; font-size: 12px; color: #A21734; box-sizing: border-box; border: 3px solid #A21734; display: inline-block; padding: 2px 6px 2px 6px; background: rgba(243, 253, 252, 0.6); position: relative; margin-right: 10px; letter-spacing: -0.5px;"]NAME[/div]
--color-for-heading-text: COLOR; is for the text colour of your heading. mine is a dark pink. it is also for the border-colour of your heading

--color-for-heading-bg: rgba(#, #, #, 0.6); is for the "background" of your heading. mine is a translucent white

you will add it around your heading text like such:
[div class="heading"] NAME [/div]

the one thing you have to do manually each time, is add the font (which, for me, was archivo black)
[div="position: relative; margin-left: 5%;"][div class="heading"][font='Archivo Black'] NAME [/font][/div][/div]


now let's talk about the "answer"
Code:
[class="answer"]
--color-for-details-bg: rgba(#, #, #, 0.9); 
--color-for-details-text: COLOR;
display: inline-block; 
background: var(--color-for-details-bg);
color: var(--color-for-details-text); 
padding: 1px 7px 3px 7px; 
font-size: 12px;
position: relative;
margin-bottom: 3px;
[/class]
this class is for the text you want looking like this a.k.a. the "answer"s to the "heading"s
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px;"]Marcel Reitz Ackermann[/div]
--color-for-details-bg: rgba(#, #, #, 0.9); is for the background colour of your "answer." mine is a dark pink

--color-for-details-text: COLOR; is for the text colour. mine is a white-ish (#F3FDFC to be exact)

you will add it around your answer text like such:
[div="position: relative; margin-left: 5%;"][div class="answer"] Marcel [/div][/div]


now, how do we put these together so it looks like this:
[nobr]
[div="max-width: 570px; height: auto; box-sizing: border-box; padding: 10px; background: rgba(255, 255, 255, 0.1);"]
[div="display: flex; justify-content: space-between; align-items: flex-start;"]
[div="font-weight: bolder; font-size: 12px; color: #A21734; box-sizing: border-box; border: 3px solid #A21734; display: inline-block; padding: 2px 6px 2px 6px; background: rgba(243, 253, 252, 0.6); position: relative; margin-right: 10px; letter-spacing: -0.5px;"]NAME[/div]
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px;"]Marcel Reitz Ackermann[/div]
[/div]
[/div]
[/nobr]
this is where the "flex" class comes in:
Code:
[class="flex"]
display: flex; 
justify-content: space-between; 
align-items: flex-start;
[/class]
here's how you will need to arrange the code:
[div="position: relative; margin-left: 5%;"][div class="flex"]
[div class="heading"][font='Archivo Black']
NAME [/font][/div]
[div class="answer"]
Marcel Reitz Ackermann [/div]
[/div]
[/div]


HOWEVER !!
if your "heading" requires multiple "answers" as such:
[nobr]
[div="max-width: 570px; height: auto; box-sizing: border-box; padding: 10px; background: rgba(255, 255, 255, 0.1);"]
[div="display: flex; justify-content: space-between; align-items: flex-start;"]
[div="font-weight: bolder; font-size: 12px; color: #A21734; box-sizing: border-box; border: 3px solid #A21734; display: inline-block; padding: 2px 6px 2px 6px; background: rgba(243, 253, 252, 0.6); position: relative; margin-right: 10px; letter-spacing: -0.5px;"]NICKNAME[/div]
[div="display: flex; flex-direction: column; align-items: flex-end;"]
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px; position: relative; margin-bottom: 3px;"]Marc / Mark[/div]
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px; position: relative; margin-bottom: 3px;"]Rey[/div]
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px; position: relative; margin-bottom: 3px;"]Marcie; oh, how he hates being referred to as this particular name and of course, that's exactly why his sister uses it for him[/div]
[div="display: inline-block; background: rgba(162, 23, 52, 0.9); color: #F3FDFC; padding: 1px 7px 3px 7px; font-size: 12px; position: relative; margin-bottom: 3px;"]Ritz; by his cousins[/div]
[/div]
[/div]
[/div]
[/nobr]
then we have to add the "align" class as well:
Code:
[class="align"]
display: flex; 
flex-direction: column; 
align-items: flex-end;
[/class]
and your code should look as such:
[div="position: relative; margin-left: 5%;"][div class="flex"]
[div class="heading"][font='Archivo Black']
NICKNAME [/font][/div]
[div class="align"]
[div class="answer"]
Marc / Mark [/div]
[div class="answer"]
Rey [/div]
[div class="answer"]
Marcie [/div]
[div class="answer"]
Ritz [/div]
[/div]
[/div]
[/div]
 
Last edited:

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

Top