[ is your sunshine like my rain ]

0 | (intro) when i was a young boy

VALEN T.

Member
[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
hover ! [/div] [div class="textbocks"] my father
took me into the city
to see a marching band


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


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

DO S
  • feel free to use with credit
  • hover over the "titles" to read more detail on each code
  • ask questions ! i promse i don't bite c:
  • lmk if smth isn't working correctly !!
  • suggest ways i can improve the code <3
  • heart the message if you plan on using any of these uwu
  • fill in the details in the codes i leave at the bottom !!! this is v imp bc they're blank templates
[/div] [/div] [/div]
 
Last edited:
1 | the butterflies broke my heart
mobile-friendly
3 tabs (pictures)
hidden scroll
character sheet
big hover
keep credit
[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
click !
[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​

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 ?

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


alright alright hello !

starting this off with smth relatively simple

the code:
click/tap the big central image to access the "detail"
click/tap on the "name" (which is "YVONNE" in this case) to head back to the "home page" (the one with big central image + quote)
click/tap on the 3 smol images to alternate between the different tabs

and... yeah, that's about it

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

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

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

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

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


#F3F2F9

#B69A95

#82473B

#AF3F2A

#31292C

#788261

#1C231A

#6B6182


[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 VALEN T. VALEN T. [/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 class="imgcontainer"] [div class="img1"]
[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 ⋉
given name
surname
nickname(s) ⊢
option one
two
three

four

age ⋉
number
d.o.b. ⊢
dd/mm/yyyy
zodiac ⊢
star sign

gender ⋉
answer
pronouns ⊢
answer

sexuality ⋉
answer

explanation?
continued
romantic orientation ⊢
answer
explanation

languages ⋉
answer one
two
three
four
five
six
seven
random trivia

race ⋉
answer one two

face claim ⋉
answer

head canons ⋉
answer one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
forteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty
twenty-one
twenty-two
twenty-three

[/div] [/div] [/div] [/div] [/div] [/div] [div class="tab3"]
[div class="imgcontainer"] [div class="img1"]
[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 ⋉
adjective one
further explanation
two
more detail
three
oh la la
negative trait?
further explanation
two
i love detail
three
'cause darling i'm a nightmare dressed like a daydream
mbti type ⊢
answer
explanation
trait one
two
three
four
five
six
seven
temperament ⊢
x% sanguine
adjective one two
x% phlegmatic
three four
x% meloncholic
five six
x% choleric
seven eight
moral alignment ⊢
answer

explanation
further detail

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

[/div] [/div] [/div] [/div] [/div] [/div] [div class="tab4"]
[div class="imgcontainer"] [div class="img1"]
[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 ⋉
answer one (fire)
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.
two
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.
three
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.

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

[/div] [/div] [/div] [/div] [/div] [/div]
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
a different coloured underline

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]


name ⋉
yvonne
no last name
nickname(s) ⊢
eve
evie
van /'vaan'/

nia
 
Last edited:
2 | can't risk falling for you
mobile-friendly
5 tabs (pics)
hidden scroll
character sheet
hover
sliders
keep credit
[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
click !
[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​

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 ?

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


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

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

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

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

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)

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

i hope you like it ! [/div] [/div] [/div]


#f5efeb

#e9ebe8

#faf1eb

#faf0eb

rgba(168, 156, 145)

#3F1714

#7F211D

#6F1110

#320505

#562C25

#1D0F0C

#A34240

#4E1D1C

#8F231B

#471A14


[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]
code by VALEN T. VALEN T.
[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
meaning[/div] [div class="subheading" style="color: #f5efeb; background: #7F211D;"]middle[/div] [div class="sbdetails" style="color: #f5efeb;"]pronounciation
meaning[/div] [div class="subheading" style="color: #f5efeb; background: #7F211D;"]last[/div] [div class="sbdetails" style="color: #f5efeb;"]pronounciation
meaning[/div]
[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]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]four[/div]

[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]
[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]
[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]
[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]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]two[/div]
[div class="subheading" style="color: #f5efeb; background: #7F211D;"]three[/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]
[div class="heading" style="background: #320505; color: #e9ebe8;"]freudian personality[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div class="heading" style="background: #320505; color: #e9ebe8;"]temperament[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div class="heading" style="background: #320505; color: #e9ebe8;"]moral alignment[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div class="heading" style="background: #320505; color: #e9ebe8;"]hogwarts house[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-vert type[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]extro/intro/ambi[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[div class="heading" style="background: #320505; color: #e9ebe8;"]-ist type[/div]
[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]
[div class="heading" style="background: #320505; color: #e9ebe8;"]spirit animal[/div]
[div class="subheading" style="color: #e9ebe8; background: #6F1110;"]answer[/div] [div class="sbdetails" style="color: #e9ebe8"]explanation[/div]
[/div] [/div] [/div] [div class=hidden3] [div class=scroll3] [div class=textbox3] [div class="heading" style="background: #1D0F0C; color: #faf1eb;"]age[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]eyes[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]hair[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]physique[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]skin[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]appearance[/div]
[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]
[div class="heading" style="background: #1D0F0C; color: #faf1eb;"]illnesses[/div]
[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] [/div] [/div] [div class=hidden4] [div class=scroll4] [div class=textbox4] [div class="heading" style="background: #4E1D1C; color: #faf0eb;"]gender[/div]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div] [div class="sbdetails" style="color: #faf0eb;"]further explanation if required[/div]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]alias[/div]
[div class="subheading" style="color: #faf0eb; background: #A34240;"]answer[/div] [div class="sbdetails" style="color: #faf0eb;"]pronounciation
meaning + how'd they discover it for themself[/div]
[div class="heading" style="background: #4E1D1C; color: #faf0eb;"]hobby[/div]
[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] [/div] [/div] [div class=hidden6] [div class=scroll6] [div class=textbox6] [div class="heading" style="background: #471A14; color: #fcf0ed;"]history[/div]
[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] [/div] [/div] [/div] [div class=home] FOCUS ON ME [/div] [/div] [/div]
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 class="heading"] heading [/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 class="heading" style="color: COLOR; background: COLOR;"] HEADING [/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 class="hdetails" style="color: COLOR;"] heading details [/div]



now to achieve this look, we simply write the "heading" and "hdetails" divs together
[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 class="heading" style="color: #f5efeb; background: #3F1714;"]name
[div class="hdetails" style="color: #f5efeb;"]isadora shaylyn covington[/div] [/div]
so your code should look like:
[div class="heading" style="color: COLOR; background: COLOR;] heading [/div] [div class="hdetails" style="color: COLOR;"] heading details [/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 class="subheading" style="color: COLOR; background: COLOR;"] sub-heading [/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 class="sbdetails" style="color: COLOR;"] sub-heading details [/div]



now to have them both written together like this:
[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 class="subheading" style="color: #f5efeb; background: #7F211D;"]isadora
[div class="sbdetails" style="color: #f5efeb;"]/ iz-za-do-ra. /
feminine form of the name isidoros which means gift of isis. it's a compound name composed of the egyptian goddess isis (the goddess of fertility) and the greek element dōron (meaning gift)[/div] [/div]
your code needs to be:
[div class="subheading" style="color: COLOR; background: COLOR;"] sub-heading [/div] [div class="sbdetails" style="color: COLOR;"] sub-heading details [/div]



now the only thing left is to combine all of it so it looks like this:
[div class="heading" style="color: #f5efeb; background: #3F1714;"]name
[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. /
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. /
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. /
this family name dates back to anglo-saxon culture of britain[/div] [/div]
which is super easy:
[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]

this acc happened to me while i was coding this n i almost cried
asdsadasd.PNG
 
Last edited:
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.
 
that last one is so freakin' beautiful
oml thank you sm i appreciate you <3
there's no back "button" per se
you see how the "FOCUS ON ME" of the bg img moves to the bottom left ?
just tap on those words and the text box + accordion will close n you'll have the pictures + other options back c:
 
Last edited:
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.
 
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
mobile-friendly
3 tabs (circles)
hidden scroll
character sheet
hover
stats
keep credit
[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
click !
[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​

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 ?

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


this is prbly the quickest i've ever made a code tbh (record: two days tops) and i feel like dying it's currently almos5 three in the morning here while i type this

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

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

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

ok i know what you're thinking: ugh aNotHEr coLe SpRoUse cHarAcTer but joke's on you 'cause this is the first time i used him as a fc

long story short, my partner n i realised we were highkey lowkey recreating cole n lili for our plot so she suggested we just go ahead n use them as fcs and i was like ??? yEs ?????

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

and if you have any questions feel free to ask c: [/div] [/div] [/div]


#faf2e8

#E8C4AC

#D0BFA8

#8F6442

35C3B2A

rgb(61, 54, 48)

rgb(44, 19, 14)

#DEEAE3

#ACD0E8

#5CA1C5

#426D8F

#EADEE5

#C55CA1

#A1C55C


[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]
code by VALEN T. VALEN T.
[div class="bg"] [div class="icon"][/div] [div class="person"] [div class="person_text"]
mood:
a word or two​

sociability:
[div class="colblock"]
[div class="colblock"]​
[div class="colblock"]​
[div class="uncolblock"][/div] [div class="uncolblock"][/div] [/div]​
[/div]
muse:
[div class="colblock"]
[div class="colblock"]​
[div class="colblock"][/div] [div class="colblock"][/div] [div class="uncolblock"][/div] [/div]​
[/div]
lethargy:
[div class="colblock"]
[div class="uncolblock"]​
[div class="uncolblock"][/div] [div class="uncolblock"][/div] [div class="uncolblock"][/div] [/div]​
[/div]
confidence:
[div class="colblock"]
[div class="colblock"]​
[div class="colblock"][/div] [div class="colblock"][/div] [div class="colblock"][/div] [/div]​
[/div]
craving:
a life​
[/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

middle - meaning

surname - meaning [/div]
[div class="flex"] [div class="heading"]nicknames:[/div] [div class="deet"]answer one,
two[/div] [/div]
[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]
[div class="flex"] [div class="heading"]d.o.b.:[/div] [div class="deet"]dd/mm/yyyy[/div] [/div]
[div class="flex"] [div class="heading"]age:[/div] [div class="deet"]##[/div] [/div]
[div class="flex"] [div class="heading"]gender:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]pronouns:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]sexuality:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] some description maybe? [/div]
[div class="flex"] [div class="heading"]nationality:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]ethnicity:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]race:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]religion:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]education:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] explanation if required [/div]
[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]
[div class="flex"] [div class="heading"]eyes:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] description [/div]
[div class="flex"] [div class="heading"]height:[/div] [div class="deet"]#'##" or #.##m[/div] [/div]
[div class="flex"] [div class="heading"]weight:[/div] [div class="deet"]##kg or ###lbs[/div] [/div]
[div class="flex"] [div class="heading"]tattoos:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]piercings:[/div] [div class="deet"]answer[/div] [/div]
[div class="flex"] [div class="heading"]distinct
features:[/div] [div class="deet"]answer one.
two.
three.
four.[/div] [/div] [/div] [/div] [/div] [div class="text_111"] [div class="text_222"] [div class="text_333"] [div class="quote"] song
lyrics
bitch [/div]
[div class="flex"] [div class="heading"]mbti:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] explanation [/div]
[div class="flex"] [div class="heading"]enneagram:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] explanation [/div]
[div class="flex"] [div class="heading"]temperament:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] explanation [/div]
[div class="flex"] [div class="heading"]alignment:[/div] [div class="deet"]answer[/div] [/div] [div class="box"] explanation [/div]
[div class="quote"] some more
song
lyrics [/div]
[div class="qna"] q. a question?

a. an answer uwu [/div]
[div class="qna"] q. another question?

a. another answer owo [/div]
[div class="qna"] q. omg more questions?

a. i'll keep fucking answering u bisch [/div]
[div class="qna"] q. last question?

a. you're lucky i love u hmph [/div]
[div class="quote"] another
song
lyric [/div] [/div] [/div] [/div] [/div] [/div]
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:
name:
cosmin reneer mandel (text text text text text)

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 class="flex"] [div class="heading"] name [/div] [div class="answer"] cosmin reneeer mandel (text text text text text) [/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:
cosmin - it means to be in solidarity with life; to not oppose the natural flow of events and instead, accept them like the seashore, the oncoming waves

reneer - alternate spelling of the name renier and means someone who is rich in love both, for others and from others

the code for it will simply be:
[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]



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:
q. do you see yourself as the good or bad guy?

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

the code for it is:
[div class="qna"]
[b] Q. question question question? [/b]
[br][/br][br][/br]
[b] A. [/b] answer answer answer
[/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:
i was thinking
bad things when i kissed you
did my tongue tell you every lie?

for this you'll need to have some prior knowledge on basic bbcode.
your code will look something like this:
[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]


 
Last edited:
me: sees an indian typeface
me: goes crazy bc i'm indian

your codes are 101% beauty
 
yoU KNOW for someone who sucks at coding, these are pretty rad ! please continue changing lives ok 🙂
 
Hey VALEN T. VALEN T. ! I used your "the butterflies broke my heart" code! I hope you're getting the mention when I post it :c please lmk if you're not! Never stop being amazing, booboo <3
 
4 | we're happy here
mobile-friendly
3 tabs (buttons)
hidden scroll
interest check
character sheet
keep credit
[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
click !
[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​

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 ?

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


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

fuck yea bitches

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

but just because that's what i used it for, doesn't mean it won't work for other stuff too: like, i suppose it can be used as a CS ? idk man

the code:
choose any one of the "buttons" and watch the magic unfold
then click "bacc" to go back

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

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

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

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

so that's great

fudge 1 - bbcode 0

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


#f0ebeb

#f7faff

#FFF6F2

rgb(151, 157, 174)

#4B5161

#192239

rgb(125, 114, 114)

#514242

#2B2323

rgb(180, 138, 117)

#B56F4C

#6e3a20


[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]
code by VALEN T. VALEN T.
[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]
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:
code by @ fudgecakez
[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
hover ! [/div] [div class="textbocks"] my father
took me into the city
to see a marching band


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


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

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

Could I use this for my RP? I added a credit in the corner
 
5 | addicted to hurting
mobile-friendly
5 tabs
visible scroll
character sheet
slider
keep credit
[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
click !
[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​

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 ?

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


yo guys look i got a new code for my...uh...what are these called even ?

whatever bc tbh, i think this is very ugly it's honestly so fckn bland.

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

on w the code:
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
click either the top or bottom pictures to be taken back to slide #1 where it says "character archetype"

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—

uh...wrong platform ? whoops

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


#ffffff

#F3FDFC

rgb(243, 253, 252)

#EBD4D5

#ffb5c6

#A21734

#473344

#1c0409

#000000


[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"]
code by VALEN T. VALEN T.
[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
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]
[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]
[div class="flex"] [div class="heading"]AGE[/div] [div class="answer"]##[/div] [/div]
[div class="flex"] [div class="heading"]D.O.B.[/div] [div class="answer"]DD/MM/YYYY[/div] [/div]
[div class="flex"] [div class="heading"]ZODIAC[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]GENDER[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]SEXUALITY[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]ROMANTIC
ORIENTATION
[/div] [div class="align"] [div class="answer"]Answer one[/div] [div class="answer"]Two, if required[/div] [/div] [/div]
[div class="flex"] [div class="heading"]NATIONALITY[/div] [div class="answer"]Answer[/div] [/div]
[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]
[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]
[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]
[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
CLAIM
[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]HEIGHT[/div] [div class="align"] [div class="answer"]#'##"[/div] [div class="answer"]#.##m[/div] [/div] [/div]
[div class="flex"] [div class="heading"]WEIGHT[/div] [div class="align"] [div class="answer"]##kg[/div] [div class="answer"]###lbs[/div] [/div] [/div]
[div class="flex"] [div class="heading"]BUILD[/div] [div class="answer"]Answer[/div] [/div]
[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]
[div class="flex"] [div class="heading"]EYES[/div] [div class="answer"]Colour[/div] [/div]
[div class="flex"] [div class="heading"]TATTOOS[/div] [div class="align"] [div class="answer"]Answer one[/div] [div class="answer"]Two[/div] [/div] [/div]
[div class="flex"] [div class="heading"]BIRTHMARKS[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]PIERCINGS[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]DISTINCT
FEATURE
[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]ATTIRE[/div] [div class="align"] [div class="answer"]Answer[/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]
[div class="flex"] [div class="heading"]SELF
IMAGE
[/div] [div class="answer"]#sadboi4life[/div] [/div]
[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]
[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]
[div class="flex"] [div class="heading"]FEARS[/div] [div class="answer"]Answer[/div] [/div]
[div class="flex"] [div class="heading"]THEME
(LINKS)
[/div] [div class="align"] [div class="answer"]imma leave the song links here so you can check 'em out[/div] [div class="answer"]
EDEN - Drugs
[/div] [div class="answer"]
bülow - Sweet Little Lies
[/div] [div class="answer"]
The Weeknd - House of Balloons / Glass Table Girls
[/div] [div class="answer"]
One Direction - 18
[/div] [div class="answer"]
The Weeknd - Wicked Games
[/div] [div class="answer"]
Lykke Li - sex money feelings die
[/div] [div class="answer"]
The Weeknd - Acquainted
[/div] [div class="answer"]
Chase Atlantic - Consume
[/div] [div class="answer"]
The Weeknd - Hurt You
[/div] [div class="answer"]
Andy Powell - Pretty Little Lies
[/div] [div class="answer"]
Lana Del Rey - Born To Die
[/div] [/div] [/div] [/div] [/div] [div class="apage"] [div class="scroll"]
[div class="heading"]CONCISE HISTORY[/div]​

[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[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]
[div class="flex"] [div class="heading"]ANOTHER
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]
[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]
[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 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]
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"
NAME

--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 class="heading"][font='Archivo Black'] NAME [/font][/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
Marcel Reitz Ackermann

--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 class="answer"] Marcel [/div]



now, how do we put these together so it looks like this:
NAME
Marcel Reitz Ackermann

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 class="flex"] [div class="heading"][font='Archivo Black'] NAME [/font][/div] [div class="answer"] Marcel Reitz Ackermann [/div] [/div]



HOWEVER !!
if your "heading" requires multiple "answers" as such:
NICKNAME
Marc / Mark
Rey
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
Ritz; by his cousins

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

 
Last edited:

Users who are viewing this thread

Back
Top