[ is your sunshine like my rain ]

[VALEN T.]

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

 

[VALEN T.]

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

Spoiler: code

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:

Spoiler: blank template

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

Spoiler: text

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

 

[VALEN T.]

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.

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

Spoiler: code

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:

Spoiler: blank template

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

Spoiler: text

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:

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

[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

[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

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

Spoiler: negl

this acc happened to me while i was coding this n i almost cried

 

[VALEN T.]

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.

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

Spoiler: code

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:

Spoiler: blank template

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

Spoiler: text

let me explain those last 6 classes now

starting off with the "flex" "heading" and "deet" classes:

[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

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

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

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

 

[VALEN T.]

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.

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

Spoiler: code

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:

Spoiler: blank template

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

 

[VALEN T.]

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.

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

Spoiler: code

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:

Spoiler: blank template

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

Spoiler: text

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

let's start with heading:

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

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

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

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

 

[VALEN T.]

mobile-friendly

instagram

hidden scroll

ic code

better on dark

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; align-items: center; flex-direction: column; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class] [div class="2"] in noir
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​

​

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 !

Y'ALL THIS IS THE FIRST IC CODE I'VE POSTED ADHKSDSDS

it's kinda fucked up tho :/ like...jank level 2000 BUT don't worry, i've left [COMMENT]s here and there to aid you through the process

the code:

•

click/tap "View all 6 comments" or "more" on the bottom to view the actual IC post

•

click/tap on the " " on the top left (next to the "Comments") to return to Instragram-post page

additionally:

•

you can like and unlike the actual Instagram post

•

you can bookmark the Instagram post too

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

don't remove the credit thanks [/div] [/div] [/div]

#FF4956

#ffffff

#ededed

#bdbdbd

#000000

[class="container1"] max-width: 350px; height: 61px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background1"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="phonebar"] color: black; width: 100%; height: 20px; display: flex; align-items: center; background: #ededed; [/class] [class="igbar"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: #ededed; [/class] [class="igbar_2"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: #ededed; [/class] [class="back"] font-size: 17px; line-height: 17px; cursor: pointer; display: inline-block; [/class] [class="container2"] max-width: 350px; height: 539px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background2"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="postbar"] color: black; width: 100%; height: 50px; display: flex; align-items: center; background: white; [/class] [class="post"] --instagram-post: url('https://i.pinimg.com/564x/33/15/cc/3315cc8076e742c82113fcaf59ba75bf.jpg'); width: 100%; height: 350px; background: var(--instagram-post); background-size: cover; background-position: center; [/class] [class="postoptions"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: white; [/class] [class="whiteheart"] width: 23px; height: 21px; background: url('https://i.imgur.com/MnrUy3i.png'); background-size: cover; background-position: top; background-repeat: no-repeat; cursor: pointer; position: relative; margin-left: -23px; [/class] [class="redheart"] width: 23px; height: 21px; background: url('https://i.imgur.com/StDpI98.png'); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; position: relative; [/class] [class="whitebookmark"] height: 22px; width: 22px; background: url('https://i.imgur.com/KhQx69o.png'), white; background-size: cover; background-position: center; position: relative; float: right; cursor: pointer; margin-right: -22px; [/class] [class="blackbookmark"] height: 22px; width: 22px; background: url('https://i.imgur.com/puDUxns.png'), white; background-size: cover; background-position: center; position: relative; float: right; cursor: pointer; [/class] [class="likes"] color: black; width: 100%; height: 20px; background: white; position: relative; box-sizing: border-box; padding-left: 10px; [/class] [class="likesbefore"] position: absolute; font-weight: bold; font-size: 12px; line-height: 12px; background: white; [/class] [class="likesafter"] position: absolute; font-weight: bold; font-size: 12px; line-height: 12px; background: white; [/class] [class="caption"] color: black; width: 100%; min-height: 40px; background: white; position: relative; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; [/class] [class="comments"] color: #969696; width: 100%; height: auto; background: white; position: relative; box-sizing: border-box; padding: 5px 10px 10px 10px; font-size: 13px; [/class] [class="viewcomments"] cursor: pointer; display: inline-block; transition: 0.2s all ease-out; [/class] [class="more"] cursor: pointer; display: inline-block; transition: 0.2s all ease-out; color: #969696; [/class] [class="container3"] max-width: 350px; height: 539px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background3"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="details"] color: black; width: 100%; min-height: 600px; background: white; font-size: 12px; box-sizing: border-box; padding: 10px; [/class] [class="credit"] color: #3c8be6; transition: 0.2s all ease-out; display: inline-block; cursor: pointer; [/class] [class="container4"] max-width: 350px; height: 42px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background4"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="bottombar"] width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; background: #ededed; box-sizing: border-box; padding: 0 25px 0 25px; [/class] [class="container5"] max-width: 350px; height: 42px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background5"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="bottombar_2"] width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; background: #ededed; box-sizing: border-box; padding: 0 15px 0 15px; [/class] [class="hidden1"] width: 200%; height: 100%; overflow: hidden; position: relative; background: transparent; [/class] [class="hidden2"] width: 100%; height: 100%; overflow: auto; background: transparent; [/class] [class="hidden3"] box-sizing: border-box; width: 50%; height: auto; cursor: default; background: white; [/class] [class="none"] display: none; [/class] [class="border"] background: #bdbdbd; width: 100%; height: 2px; [/class] [script class="whiteheart" on="click"] hide whiteheart hide likesbefore [/script] [script class="redheart" on="click"] show whiteheart show likesbefore [/script] [script class="whitebookmark" on="click"] hide whitebookmark [/script] [script class="blackbookmark" on="click"] show whitebookmark [/script] [class name="viewcomments" state="hover"] color: #4d4d4d; [/class] [script class="viewcomments" on="click"] hide container2 hide container4 hide igbar show none [/script] [class name="more" state="hover"] color: #4d4d4d; [/class] [script class="more" on="click"] hide container2 hide container4 hide igbar show none [/script] [script class="back" on="click"] hide none show igbar show container2 show container4 [/script] [class name="credit" state="hover"] color: #154985; [/class] [class="a"] flex: 1; background: transparent; box-sizing: border-box; padding-left: 5px; [/class] [class="b"] display: flex; align-items: center; position: relative; [/class] [class="signal"] font-size: 12px; line-height: 12px; position: relative; margin-right: 5px; [/class] [class="mobnetwrk"] font-size: 11px; line-height: 11px; position: relative; margin-right: 5px; font-weight: 700; [/class] [class="wifi"] font-size: 11px; line-height: 11px; [/class] [class="time"] flex: 1; background: transparent; text-align: center; font-size: 11px; line-height: 11px; font-weight: 800; [/class] [class="c"] flex: 1; background: transparent; text-align: right; box-sizing: border-box; padding-right: 5px; [/class] [class="d"] display: flex; align-items: center; justify-content: flex-end; [/class] [class="percentage"] font-size: 11px; line-height: 11px; position: relative; margin-right: 5px; font-weight: 700; [/class] [class="battery"] font-size: 14px; line-height: 14px; position: relative; margin-right: 5px; [/class] [class="charging"] font-size: 12px; line-height: 12px; [/class] [class="photo"] flex: 1; text-align: center; font-weight: 800; font-size: 14px; line-height: 14px; [/class] [class="e"] flex: 1; box-sizing: border-box; padding-right: 15px; [/class] [class="refresh"] height: 17px; width: 17px; background: url('https://i.imgur.com/UWxahMS.png'); background-size: cover; background-position: center; background-repeat: no-repeat; float: right; [/class] [class="kcab"] flex: 1; box-sizing: border-box; padding-left: 15px; font-size: 17px; line-height: 17px; [/class] [class="k"] flex: 1; box-sizing: border-box; padding-left: 15px; [/class] [class="dm"] height: 15px; width: 17px; background: url('https://i.imgur.com/KC5AisA.png'); background-size: cover; background-position: center; position: relative; float: right; [/class] [class="f"] flex: 2; box-sizing: border-box; padding-left: 10px; position: relative; [/class] [class="bigpfp"] --insta-profile-picture: url('https://wallpapercave.com/wp/wp2139824.jpg'); height: 30px; width: 30px; border-radius: 100%; background: var(--insta-profile-picture); background-size: 150%; background-position: 30% 15%; position: relative; margin-right: 10px; [/class] [class="ellipsis"] flex: 1; text-align: right; box-sizing: border-box; padding-right: 10px; font-size: 12px; line-height: 12px; [/class] [class="commentsign"] width: 23px; height: 21px; background: url('https://i.imgur.com/gPrjlBZ.png'); background-size: cover; background-position: center; position: relative; margin-left: 11px; [/class] [class="dmsign"] height: 20px; width: 23px; background: url('https://i.imgur.com/KC5AisA.png'), white; background-size: cover; background-position: center; position: relative; margin-left: 10px; [/class] [class="g"] flex: 1; border-box; padding-right: 8px; position: relative; [/class] [class="h"] display: flex; position: relative; [/class] [class="username"] display: inline-block; font-weight: bold; position: relative; margin-right: 5px; [/class] [class="ago"] font-variant: small-caps; [/class] [class="j"] position: relative; margin-bottom: 25px; display: flex; align-items: flex-start; box-sizing: border-box; border-bottom: 1px solid #ededed; padding-bottom: 25px; [/class] [class="notherpfp"] --insta-profile-picture: url('https://wallpapercave.com/wp/wp2139824.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--insta-profile-picture); background-size: 150%; background-position: 30% 15%; position: relative; margin-right: 10px; [/class] [class="i"] flex: 1; [/class] [class="l"] position: relative; margin-bottom: 25px; display: flex; align-items: flex-start; [/class] [class="mdpfp"] --profile-picture-for-mood: url('https://i.pinimg.com/564x/3b/0e/d8/3b0ed845791b0ac055cdfe865411dbfd.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-mood); background-size: 130%; background-position: 50% 45%; position: relative; margin-right: 10px; [/class] [class="mntnspfp"] --profile-picture-for-mentions: url('https://i.pinimg.com/564x/23/98/f4/2398f43a4173e4a43c36824b67e72d8e.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-mentions); background-size: 110%; background-position: 50% 45%; position: relative; margin-right: 10px; [/class] [class="ntrctnspfp"] --profile-picture-for-interactions: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSusuwiU_5fiQVONgt2yGes0TCAKWr2-HCmRfM4y9_ZXQ_RPxYd&s'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-interactions); background-size: 130%; background-position: 100% 45%; position: relative; margin-right: 10px; [/class] [class="lctnpfp"] --profile-picture-for-location: url('https://i.pinimg.com/564x/69/0b/5f/690b5f63587bc66f2280da24516e2da0.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-location); background-size: 120%; background-position: 0 50%; position: relative; margin-right: 10px; [/class] [class="tftpfp"] --profile-picture-for-outfit: url('https://i.pinimg.com/564x/7f/cc/1b/7fcc1b6ed02b6498fc85b6cb1faf13a0.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-outfit); background-size: 150%; background-position: 110% 65%; position: relative; margin-right: 10px; [/class] [class="pstpfp"] --profile-picture-for-your-text-post: url('https://i.pinimg.com/564x/9f/40/8c/9f408ce0f8828656042f01803e494904.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-your-text-post); background-size: 150%; background-position: 50% 65%; position: relative; margin-right: 10px; [/class] [class="line"] height: 1px; width: 100%; background: #bdbdbd; [/class] [class="home"] height: 21px; width: 20px; background: url('https://i.imgur.com/zfaceu8.png'); background-size: cover; background-position: center; [/class] [class="search"] height: 21.5px; width: 21px; background: url('https://i.imgur.com/K1jPpBO.png'); background-size: cover; background-position: center; [/class] [class="add"] height: 22px; width: 22px; background: url('https://i.imgur.com/jwKfqZH.png'); background-size: cover; background-position: center; [/class] [class="m"] height: 20px; width: 22px; background: url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Heart-2-icon.png'); background-size: cover; background-position: center; [/class] [class="circlea"] height: 25px; width: 25px; border-radius: 100%; background: black; display: flex; align-items: center; justify-content: center; [/class] [class="circleb"] height: 23px; width: 23px; border-radius: 100%; background: rgba(237, 237, 237, 1); display: flex; align-items: center; justify-content: center; [/class] [class="circlec"] height: 21px; width: 21px; border-radius: 100%; background: url('https://wallpapercave.com/wp/wp2139824.jpg'); background-size: 150%; background-position: 30% 15%; [/class] [class="ddcmmnt"] height: 30px; background: transparent; border-radius: 20px; box-sizing: border-box; border: 1px solid #bdbdbd; display: flex; align-items: center; font-size: 12px; color: #bdbdbd; padding: 0 10px 0 10px; overflow: hidden; cursor: auto; [/class]

code by VALEN T.

[div class="container1"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background1"] [div class="phonebar"] [div class="a"] [div class="b"] [div class="signal"][/div] [div class="mobnetwrk"]vodafone[/div] [div class="wifi"][/div] [/div] [/div] [div class="time"]2:46 P.M.[/div] [div class="c"] [div class="d"] [div class="percentage"]100%[/div] [div class="battery"][/div] [div class="charging"][/div] [/div] [/div] [/div] [div class="igbar"] [div class="kcab"][/div] [div class="photo"]Photo[/div] [div class="e"][div class="refresh"][/div][/div] [/div] [div class="none"] [div class="igbar_2"] [div class="k"][div class="back"][/div][/div] [div class="photo"]Comments[/div] [div class="e"][div class="dm"][/div][/div] [/div] [/div] [div class="border"][/div] [/div] [/div] [/div] [/div] [/div] [div class="container2"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background2"] [div class="postbar"] [div class="f"] [div class="b"] [div class="bigpfp"][/div] [div class="charging"]fickle_abstraction[/div] [/div] [/div] [div class="ellipsis"][/div] [/div] [div class="post"][/div] [div class="postoptions"] [div class="f"] [div class="b"] [div class="redheart"][/div] [div class="whiteheart"][/div] [div class="commentsign"][/div] [div class="dmsign"][/div] [/div] [/div] [div class="g"] [div class="blackbookmark"][/div] [div class="whitebookmark"][/div] [/div] [/div] [div class="likes"] [div class="h"] [div class="likesafter"]57,692,566 likes[/div] [div class="likesbefore"]57,692,565 likes[/div] [/div] [/div] [div class="caption"] [div class="username"]fickle_abstraction[/div] ❝ i left my girl back home
i don't love her no more ❞... [div class="more"]more[/div] [/div] [div class="comments"] [div class="viewcomments"]View all 6 comments[/div] [div class="ago"]9 minutes ago[/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class="none"] [div class="container3"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background3"] [div class="details"] [div class="j"] [div class="notherpfp"][/div] [div class="i"] [div class="username"]fickle_abstraction[/div] ❝ i left my girl back home
i don't love her no more ❞
VALEN T. [div class="credit" style="cursor: default;"]#marcel_ackermann[/div] [/div] [/div] [div class="l"] [div class="mdpfp"][/div] [div class="i"] [div class="username"]mood[/div] lorizzle ipsizzle dolizzle sit amizzle [/div] [/div] [div class="l"] [div class="mntnspfp"][/div] [div class="i"] [div class="username"]mentions[/div] bacon ipsum dolor amet turkey [/div] [/div] [div class="l"] [div class="ntrctnspfp"][/div] [div class="i"] [div class="username"]interactions[/div] veggies es bonus vobis [/div] [/div] [div class="l"] [div class="lctnpfp"][/div] [div class="i"] [div class="username"]location[/div] De carne lumbering animata corpora quaeritis [/div] [/div] [div class="l"] [div class="tftpfp"][/div] [div class="i"] [div class="username"]outfit[/div] chalk and cheese paneer dolcelatte [/div] [/div] [div class="l"] [div class="pstpfp"][/div] [div class="i"] [div class="username"]post[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at urna eget neque fringilla fermentum et vitae eros. Nunc rhoncus est ac congue ultricies. Aenean eget efficitur lorem, ac sollicitudin nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras blandit mauris ipsum. Sed at congue ante, at blandit mi. Cras mollis consequat orci, a laoreet eros ullamcorper vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec imperdiet mauris, et venenatis neque. Praesent id sapien molestie, pharetra quam nec, laoreet leo. Suspendisse potenti. Proin suscipit volutpat luctus. Aenean nec dolor at lorem vehicula porttitor. Nunc at ante maximus, bibendum tellus et, volutpat elit. Maecenas ac ex vitae felis gravida finibus vel vel lorem. Ut nec ex quis tellus consectetur efficitur.

Aliquam sollicitudin finibus purus, sed sodales enim cursus vel. Donec quis elit tellus. Cras non lobortis tortor. Suspendisse potenti. Morbi ac commodo nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Sed nec semper enim. Nam non dolor et lectus varius commodo. Proin iaculis, sem et vestibulum elementum, eros lectus placerat dolor, non mollis magna arcu eget justo. Nunc sed ullamcorper arcu. Nulla sodales, justo non varius gravida, massa orci tincidunt nisl, id cursus odio magna vel lacus. Duis venenatis turpis egestas libero finibus, nec imperdiet turpis lacinia. Mauris faucibus, neque vel eleifend rhoncus, nunc purus commodo urna, at tempus mi odio at lorem.

Integer ac pharetra tortor. Donec sed ultricies felis. Etiam tincidunt sit amet justo sit amet eleifend. Aliquam erat volutpat. Quisque quis massa enim. Sed ut venenatis orci. Fusce ac ultricies quam. Integer interdum ullamcorper ex, eget scelerisque est vestibulum eget. Duis interdum porttitor varius. Donec vestibulum vulputate ex ac rhoncus. Morbi eu consequat sapien, sed pellentesque mauris.

Aliquam efficitur at nulla ac congue. Donec at leo quam. Quisque ut tincidunt nunc. Integer ac odio ac dui tristique convallis. Maecenas sodales sapien commodo egestas finibus. Nulla sodales efficitur quam. Aliquam vitae sapien eu nulla volutpat dapibus eu malesuada turpis. Mauris neque urna, commodo eget vestibulum sit amet, sagittis sit amet libero. Maecenas pharetra laoreet arcu, et porttitor urna sollicitudin eu.

Praesent ut orci ut ipsum tristique imperdiet. Cras vitae sem sed est porta porttitor. Nullam vel purus convallis, vestibulum nunc vel, condimentum leo. Curabitur a leo a magna rhoncus ornare. Sed quis enim enim. Quisque in ornare orci. Quisque vehicula justo eget tortor suscipit volutpat. Suspendisse potenti. Cras vulputate nisi quis est facilisis sagittis. Donec convallis, lectus non dictum tempor, dolor elit sodales erat, vitae iaculis lectus purus vel purus. [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class="container4"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background4"] [div class="border"][/div] [div class="bottombar"] [div class="home"][/div] [div class="search"][/div] [div class="add"][/div] [div class="m"][/div] [div class="circlea"][div class="circleb"][div class="circlec"][/div][/div][/div] [/div] [div class="line"][/div] [/div] [/div] [/div] [/div] [/div] [div class="none"] [div class="container5"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background5"] [div class="border"][/div] [div class="bottombar_2"] [div class="bigpfp"][/div] [div class="i"][div class="ddcmmnt"]Add a comment...[/div][/div] [/div] [div class="line"][/div] [/div] [/div] [/div] [/div] [/div] [/div]

Spoiler: code

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:

• --insta-profile-picture: url('URL');
• --instagram-post: url('URL');
• --profile-picture-for-mood: url('URL');
• --profile-picture-for-mentions: url('URL');
• --profile-picture-for-interactions: url('URL');
• --profile-picture-for-location: url('URL');
• --profile-picture-for-outfit: url('URL');
• --profile-picture-for-your-text-post: url('URL');
• MOBILE-NETWORK-NAME-HERE
• TIME-IN-12/24-HOUR-CLOCK-FORMAT-HERE
• BATTERY-%-HERE
• BATTERY-ICON
• CHARACTER_NAME_OR_ROLE_HERE
• # + 1 likes
• # likes
• minutes ago
• YOUR-USER-CODE-HERE
• #YOUR_USERNAME_HERE
• #YOUR_CHARACTER'S_NAME_HERE
• INSTAGRAM CAPTION HERE
• YC'S MOOD HERE
• MENTIONS HERE
• INTERACTIONS AND TAGS HERE
• LOCATION HERE
• YC'S-OUTFIT'S-PICTURE'S-LINK-HERE
• SOME WORDS HERE, I SUPPOSE
• THE IC POST GOES HERE
• background-size: COVER | #% | #px | ETC;
• background-position: CENTER | #% #% | #px #px | ETC;

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:

Spoiler: blank template

[nobr]
[class="container1"]
max-width: 350px;
height: 61px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]

[class="background1"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]

[COMMENT]these 2 ^^^ are for the top part of the code (i.e. the phone + insta bar)[/COMMENT]


[class="phonebar"]
color: black;
width: 100%;
height: 20px;
display: flex;
align-items: center;
background: #ededed;
[/class]

[class="igbar"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]

[class="igbar_2"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]

[class="back"]
font-size: 17px;
line-height: 17px;
cursor: pointer;
display: inline-block;
[/class]

[COMMENT]these ^^^ are the contents of container + background 1[/COMMENT]




[class="container2"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]

[class="background2"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]

[COMMENT]these 2 ^^^ are for the instagram part of the code (the insta post + likes etc)[/COMMENT]


[class="postbar"]
color: black;
width: 100%;
height: 50px;
display: flex;
align-items: center;
background: white;
[/class]

[class="post"]
--instagram-post: url('URL');
width: 100%;
height: 350px;
background: var(--instagram-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]

[class="postoptions"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: white;
[/class]

[class="whiteheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/MnrUy3i.png');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
margin-left: -23px;
[/class]

[class="redheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/StDpI98.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
[/class]

[class="whitebookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/KhQx69o.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
margin-right: -22px;
[/class]

[class="blackbookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/puDUxns.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
[/class]

[class="likes"]
color: black;
width: 100%;
height: 20px;
background: white;
position: relative;
box-sizing: border-box;
padding-left: 10px;
[/class]

[class="likesbefore"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]

[class="likesafter"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]

[class="caption"]
color: black;
width: 100%;
min-height: 40px;
background: white;
position: relative;
box-sizing: border-box;
padding: 0 10px 0 10px;
font-size: 12px;
[/class]

[class="comments"]
color: #969696;
width: 100%;
height: auto;
background: white;
position: relative;
box-sizing: border-box;
padding: 5px 10px 10px 10px;
font-size: 13px;
[/class]

[class="viewcomments"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
[/class]

[class="more"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
color: #969696;
[/class]

[COMMENT]these ^^^ are the contents of container + background 2[/COMMENT]




[class="container3"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]

[class="background3"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]

[COMMENT]these 2 ^^^ are for the comment section part of the code (the mood + mentions + interactions etc)[/COMMENT]


[class="details"]
color: black;
width: 100%;
min-height: 600px;
background: white;
font-size: 12px;
box-sizing: border-box;
padding: 10px;
[/class]

[class="credit"]
color: #3c8be6;
transition: 0.2s all ease-out;
display: inline-block;
cursor: pointer;
[/class]

[COMMENT]these ^^^ are the contents of container + background 3[/COMMENT]




[class="container4"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]

[class="background4"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]

[COMMENT]these 2 ^^^ are for the "options" part of the insta page (the home + search + add + likes + profile bar)[/COMMENT]


[class="bottombar"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 25px 0 25px;
[/class]

[COMMENT]these ^^^ are the contents of container + background 4[/COMMENT]




[class="container5"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]

[class="background5"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]

[COMMENT]these 2 ^^^ are for the bottom part of the comment section (the "add a comment" part)[/COMMENT]


[class="bottombar_2"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 15px 0 15px;
[/class]

[COMMENT]these ^^^ are the contents of container + background 5[/COMMENT]




[class="hidden1"]
width: 200%;
height: 100%;
overflow: hidden;
position: relative;
background: transparent;
[/class]

[class="hidden2"]
width: 100%;
height: 100%;
overflow: auto;
background: transparent;
[/class]

[class="hidden3"]
box-sizing: border-box;
width: 50%;
height: auto;
cursor: default;
background: white;
[/class]

[class="none"]
display: none;
[/class]

[class="border"]
background: #bdbdbd;
width: 100%;
height: 2px;
[/class]

[COMMENT]a few miscellaneous classes ^^^[/COMMENT]




[script class="whiteheart" on="click"]
hide whiteheart
hide likesbefore
[/script]

[script class="redheart" on="click"]
show whiteheart
show likesbefore
[/script]

[script class="whitebookmark" on="click"]
hide whitebookmark
[/script]

[script class="blackbookmark" on="click"]
show whitebookmark
[/script]

[class name="viewcomments" state="hover"]
color: #4d4d4d;
[/class]

[script class="viewcomments" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]

[class name="more" state="hover"]
color: #4d4d4d;
[/class]

[script class="more" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]

[script class="back" on="click"]
hide none
show igbar
show container2
show container4
[/script]

[class name="credit" state="hover"]
color: #154985;
[/class]

[COMMENT]^^^ scripts and other functions[/COMMENT]



[class="a"]
flex: 1; 
background: transparent; 
box-sizing: border-box; 
padding-left: 5px;
[/class]

[class="b"]
display: flex; 
align-items: center;
position: relative;
[/class]

[class="signal"]
font-size: 12px; 
line-height: 12px; 
position: relative; 
margin-right: 5px;
[/class]

[class="mobnetwrk"]
font-size: 11px; 
line-height: 11px; 
position: relative; 
margin-right: 5px; 
font-weight: 700;
[/class]

[class="wifi"]
font-size: 11px; 
line-height: 11px;
[/class]

[class="time"]
flex: 1; 
background: transparent; 
text-align: center; 
font-size: 11px; 
line-height: 11px; 
font-weight: 800;
[/class]

[class="c"]
flex: 1; 
background: transparent; 
text-align: right; 
box-sizing: border-box; 
padding-right: 5px;
[/class]

[class="d"]
display: flex; 
align-items: center; 
justify-content: flex-end;
[/class]

[class="percentage"]
font-size: 11px; 
line-height: 11px; 
position: relative; 
margin-right: 5px; 
font-weight: 700;
[/class]

[class="battery"]
font-size: 14px; 
line-height: 14px; 
position: relative; 
margin-right: 5px; 
[/class]

[class="charging"]
font-size: 12px; 
line-height: 12px;
[/class]




[class="photo"]
flex: 1; 
text-align: center; 
font-weight: 800; 
font-size: 14px; 
line-height: 14px;
[/class]

[class="e"]
flex: 1; 
box-sizing: border-box; 
padding-right: 15px;
[/class]

[class="refresh"]
height: 17px; 
width: 17px; 
background: url('https://i.imgur.com/UWxahMS.png'); 
background-size: cover;
background-position: center; 
background-repeat: no-repeat; 
float: right;
[/class]

[class="kcab"]
flex: 1; 
box-sizing: border-box; 
padding-left: 15px; 
font-size: 17px; 
line-height: 17px;
[/class]

[class="k"]
flex: 1; 
box-sizing: border-box; 
padding-left: 15px;
[/class]

[class="dm"]
height: 15px; 
width: 17px; 
background: url('https://i.imgur.com/KC5AisA.png'); 
background-size: cover; 
background-position: center; 
position: relative; 
float: right;
[/class]




[class="f"]
flex: 2; 
box-sizing: border-box; 
padding-left: 10px;
position: relative;
[/class]

[class="bigpfp"]
--insta-profile-picture: url('URL');
height: 30px; 
width: 30px; 
border-radius: 100%; 
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="ellipsis"]
flex: 1; 
text-align: right; 
box-sizing: border-box; 
padding-right: 10px; 
font-size: 12px; 
line-height: 12px;
[/class]

[class="commentsign"]
width: 23px; 
height: 21px; 
background: url('https://i.imgur.com/gPrjlBZ.png'); 
background-size: cover; 
background-position: center; 
position: relative; 
margin-left: 11px;
[/class]

[class="dmsign"]
height: 20px; 
width: 23px; 
background: url('https://i.imgur.com/KC5AisA.png'), white; 
background-size: cover; 
background-position: center; 
position: relative; 
margin-left: 10px;
[/class]

[class="g"]
flex: 1; 
border-box; 
padding-right: 8px; 
position: relative;
[/class]

[class="h"]
display: flex; 
position: relative;
[/class]

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

[class="ago"]
font-variant: small-caps;
[/class]

[class="j"]
position: relative; 
margin-bottom: 25px; 
display: flex; 
align-items: flex-start; 
box-sizing: border-box; 
border-bottom: 1px solid #ededed; 
padding-bottom: 25px;
[/class]

[class="notherpfp"]
--insta-profile-picture: url('URL');
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="i"]
flex: 1;
[/class]

[class="l"]
position: relative; 
margin-bottom: 25px; 
display: flex; 
align-items: flex-start;
[/class]

[class="mdpfp"]
--profile-picture-for-mood: url('URL');
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-mood); 
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="mntnspfp"]
--profile-picture-for-mentions: url('URL'); 
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-mentions);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="ntrctnspfp"]
--profile-picture-for-interactions: url('URL'); 
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-interactions);
background-size: COVER | #% | #px | ETC; 
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="lctnpfp"]
--profile-picture-for-location: url('URL'); 
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-location);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="tftpfp"]
--profile-picture-for-outfit: url('URL'); 
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-outfit);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]

[class="pstpfp"]
--profile-picture-for-your-text-post: url('URL'); 
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: var(--profile-picture-for-your-text-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative; 
margin-right: 10px;
[/class]




[class="line"]
height: 1px;
width: 100%; 
background: #bdbdbd;
[/class]

[class="home"]
height: 21px; 
width: 20px; 
background: url('https://i.imgur.com/zfaceu8.png'); 
background-size: cover; 
background-position: center;
[/class]

[class="search"]
height: 21.5px; 
width: 21px; 
background: url('https://i.imgur.com/K1jPpBO.png'); 
background-size: cover; 
background-position: center;
[/class]

[class="add"]
height: 22px; 
width: 22px; 
background: url('https://i.imgur.com/jwKfqZH.png'); 
background-size: cover; 
background-position: center;
[/class]

[class="m"]
height: 20px; 
width: 22px; 
background: url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Heart-2-icon.png'); 
background-size: cover; 
background-position: center;
[/class]

[class="circlea"]
height: 25px; 
width: 25px; 
border-radius: 100%; 
background: black; 
display: flex; 
align-items: center; 
justify-content: center;
[/class]

[class="circleb"]
height: 23px; 
width: 23px; 
border-radius: 100%;
background: rgba(237, 237, 237, 1); 
display: flex; 
align-items: center; 
justify-content: center;
[/class]

[class="circlec"]
height: 21px; 
width: 21px; 
border-radius: 100%; 
background: url('https://wallpapercave.com/wp/wp2139824.jpg'); 
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]

[class="ddcmmnt"]
height: 30px;
background: transparent; 
border-radius: 20px; 
box-sizing: border-box; 
border: 1px solid #bdbdbd; 
display: flex; 
align-items: center; 
font-size: 12px;
color: #bdbdbd; 
padding: 0 10px 0 10px; 
overflow: hidden; 
cursor: auto;
[/class]



















[div="max-width: 350px; font-size: 8px; text-align: left; margin: auto;"]code by @fudgecakez[/div]
[div class="container1"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background1"]

[div class="phonebar"]
[div class="a"]
[div class="b"]
[div class="signal"][fa]fa-signal[/fa][/div]
[div class="mobnetwrk"][font='Open Sans'] MOBILE-NETWORK-NAME-HERE [/font][/div]
[div class="wifi"][fa]fa-wifi[/fa][/div]
[/div]
[/div]
[div class="time"][font='Open Sans'] TIME-IN-12/24-HOUR-CLOCK-FORMAT-HERE [/font][/div]
[div class="c"]
[div class="d"]
[div class="percentage"][font='Open Sans'] BATTERY-%-HERE [/font][/div]
[div class="battery"] BATTERY-ICON [/div]
[div class="charging"][fa]fa-bolt[/fa][/div]
[/div]
[/div]
[/div]

[COMMENT]so y'all see that "BATTERY-ICON" ? 
there are a few other options available that you can substitute in for it:
[fa]fa-battery-empty[/fa]
[fa]fa-battery-quarter[/fa]
[fa]fa-battery-half[/fa]
[fa]fa-battery-three-quarters[/fa] 
[fa]fa-battery-full[/fa][/COMMENT]


[div class="igbar"]
[div class="kcab"][fa]fa-chevron-left[/fa][/div]
[div class="photo"]Photo[/div]
[div class="e"][div class="refresh"][/div][/div]
[/div]

[div class="none"]
[div class="igbar_2"]
[div class="k"][div class="back"][fa]fa-chevron-left[/fa][/div][/div]
[div class="photo"]Comments[/div]
[div class="e"][div class="dm"][/div][/div]
[/div]
[/div]

[div class="border"][/div]

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



[div class="container2"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background2"]

[div class="postbar"]
[div class="f"]
[div class="b"]
[div class="bigpfp"][/div]
[div class="charging"][font='Open Sans'][B] CHARACTER_NAME_OR_ROLE_HERE [/B][/font][/div]
[/div]
[/div]

[div class="ellipsis"][fa]fa-ellipsis-h[/fa][/div]
[/div]

[div class="post"][/div]

[div class="postoptions"]
[div class="f"]
[div class="b"]
[div class="redheart"][/div]
[div class="whiteheart"][/div]
[div class="commentsign"][/div]
[div class="dmsign"][/div]
[/div]
[/div]

[div class="g"]
[div class="blackbookmark"][/div]
[div class="whitebookmark"][/div]
[/div]
[/div]

[div class="likes"]
[div class="h"]
[div class="likesafter"][font='Open Sans'] # + 1 likes [/font][/div]
[div class="likesbefore"][font='Open Sans'] # likes [/font][/div]
[/div]
[/div]

[COMMENT]here ^^^ if your "#" of likes are 10, then your "# + 1" of likes should be 11[/COMMENT]


[div class="caption"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS... 
[div class="more"]more[/div]
[/font]
[/div]

[COMMENT]don't remove that "..." there ^^^[/COMMENT]


[div class="comments"]
[div class="viewcomments"][font='Open Sans']View all 6 comments[/font][/div]
[div class="ago"][font='Open Sans'] [SIZE=2]#[/SIZE] minutes ago [/font][/div]
[/div]

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



[div class="none"]
[div class="container3"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background3"]

[div class="details"]
[font='Open Sans']

[div class="j"]
[div class="notherpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[br][/br] 
[user=YOUR-USER-CODE-HERE][div class="credit"] #YOUR_USERNAME_HERE [/div][/user] 
[div class="credit" style="cursor: default;"] #YOUR_CHARACTER'S_NAME_HERE [/div] 
[/font]
[/div]
[/div]

[COMMENT]here ^^^ the "#" does not mean you have to replace it with a number. that's literally just being used as an instagram hashtag.
for the "YOUR-USER-CODE-HERE" part, the easiest way to find out yours is by tagging yourself > posting reply > clicking "reply" or "quote" on the post > viewing the quoted text on the rich-text-editor > there, it should say what your user code is[/COMMENT]


[div class="l"]
[div class="mdpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mood[/font][/div]
YC'S MOOD HERE
[/div]
[/div]

[div class="l"]
[div class="mntnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mentions[/font][/div]
MENTIONS HERE
[/div]
[/div]

[div class="l"]
[div class="ntrctnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']interactions[/font][/div]
INTERACTIONS AND TAGS HERE
[/div]
[/div]

[div class="l"]
[div class="lctnpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']location[/font][/div]
LOCATION HERE
[/div]
[/div]

[div class="l"]
[div class="tftpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']outfit[/font][/div]
[url="YC'S-OUTFIT'S-PICTURE'S-LINK-HERE"]SOME WORDS HERE, I SUPPOSE[/url]
[/div]
[/div]

[div class="l"]
[div class="pstpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']post[/font][/div]

THE IC POST GOES HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS. 

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

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



[div class="container4"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background4"]

[div class="border"][/div]

[div class="bottombar"]
[div class="home"][/div]
[div class="search"][/div]
[div class="add"][/div]
[div class="m"][/div]
[div class="circlea"][div class="circleb"][div class="circlec"][/div][/div][/div]
[/div]

[div class="line"][/div]

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



[div class="none"]
[div class="container5"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background5"]

[div class="border"][/div]

[div class="bottombar_2"]
[div class="bigpfp"][/div]
[div class="i"][div class="ddcmmnt"]Add a comment...[/div][/div]
[/div]

[div class="line"][/div]

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

 

[VALEN T.]

mobile-friendly

4 tabs (stars)

hidden scroll

character sheet

interest check

space

constellation

keep credit

[class="some"]height: calc(100% - 10px); width: 100%; background: #622224; position: relative; margin-top: 5px; color: #F7F1DF; 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="thing"]height: 100%; width: 100%; background: #622224; color: #F7F1DF; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 115%; line-height: 130%; text-align: center; font-weight: bolder; display: flex; align-items: center; flex-direction: column; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class] [div class="thing"] somewhere far away from here
click !

[class name="thing" state="hover"] text-shadow: 4px 4px 2px black; [/class] [class="just"]opacity: 0;[/class] [script class="thing" on="click"] fadeIn 1800 some addClass just thing [/script] [div class="some"] [class="like"]font-weight: bold; cursor: pointer; display: inline-block;[/class] [script class="like" on="click"] fadeOut 200 some removeClass just thing [/script]

[div class="like"]back​

​

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

damn y'all i haven risen from my grave

the code:

•

click/tap on any of the small stars/circles to access the different tabs

•

in each tab, there's a hidden scroll on the main/big div + one more on the small div with the song lyrics (above the picture on the bottom left - you'll know once you see it)

•

in each tab, there is also a picture on the top left (saturn, star, moon, meteor - any one of these) and it serves the purpose of the "back" button

and... yeah, that's about it

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

don't remove credit, please i worked rlly hard on this code + on making it mobile-friendly too

so yes this is mobile-friendly but i will admit, the constellation looks a little wonky on mobile screen i.e. the "title" doesn't properly align with the lines ): but other than that, we're coolio w everything else so i'm still p happy

i got inspiration from this picture btw

+ can any of you guess which constellation this is ? the first one with the right answer gets dubbed the cake to my fudge uwu

*sigh* i'm so tired i've been sitting on my laptop all morning trying to finally get this finished so i can post it sdhsds

so...yea i hope you like it, babes [/div] [/div] [/div]

#FFFFFF

#F9A8A0

#F45142

#D76795

#EBB3CA

#D1ABCA

#A45795

#2D909D

#96C7CE

[div class=smol] [div class=pleasework]

[/div] [div class=page2] [div class=what] [div class=bcontainer] [div class=back2] [div class=hole][/div] [/div] [/div] [div class="text" style="border-color:#D76795;"] [div class=text_a] [div class=text_b] [div class=text_c] I've been fucked
and I want ya
I can't even text ya 'Cause
my fingers
ain't workin'
but my heart is [/div] [/div] [/div] [/div] [div class="image" style="background:url(https://i.imgur.com/aSXbNdg.jpg); background-size:cover; background-position:50% 50%;"][/div] [/div] [div class="who" style="border-color:#D76795;"] [div class="pagetitle" style="color:#D76795;"] basics [/div] [div class="deetext" style="border-color:#D76795;"] [div class=text_a] [div class=text_b] [div class="text_c" style="padding:0 10px 0 10px;"] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . NAME [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . nickname(s) [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . stage name [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . d.o.b. [/div] [div class=d3] YOUR ANSWER HERE[/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . age [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . zodiac [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . gender [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . sexuality [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . p.o.b. [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . heritage [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . religion [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . education
... level [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . occupation [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class=d2] . face claim [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [div class=d1] [div class=d2] . body
... mods [/div] [div class=d3] YOUR ANSWER HERE [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class=page3] [div class=what] [div class=bcontainer] [div class=back3][/div] [/div] [div class="text" style="border-color:#2D909D;"] [div class=text_a] [div class=text_b] [div class=text_c] Show me you're
shameless
Write it on my neck
why don't ya?
And I won't erase it [/div] [/div] [/div] [/div] [div class="image" style="background:url(https://i.imgur.com/kpIULtc.png); background-size:cover; background-position:50% 50%;"][/div] [/div] [div class="who" style="border-color:#2D909D;"] [div class="pagetitle" style="color:#2D909D"] persona [/div] [div class="deetext" style="border-color:#2D909D;"] [div class=text_a] [div class=text_b] [div class="text_c" style="padding:0 10px 0 10px;"] [div class="d1" style="margin-bottom:10px; color:#96C7CE;"] [div class=d4][/div] [div class=d5] image [/div] [/div]

[div class="d1" style="margin-bottom:5px; color:#96C7CE;"] [div class=d6]

[div class=d7] STRANGERS + ACQUAINTANCES [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] What's strangers' and OC's acquaintances' opinion on them? [/div] [div class="d1" style="margin-bottom:5px; color:#96C7CE;"] [div class=d6][/div] [div class=d7] STAFF / TEAM [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] What's OC's colleagues' opinion on them? [/div] [div class="d1" style="margin-bottom:5px; color:#96C7CE;"] [div class=d6][/div] [div class=d7] FANS + OTHER IDOLS [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] What's YC's fans' and fellow celebrities' opinion on them? [/div] [div class="d1" style="margin-bottom:5px; color:#96C7CE;"] [div class=d6][/div] [div class=d7] FAMILY [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] What's YC's family's opinion on them? [/div] [div class="d1" style="margin-bottom:5px; color:#96C7CE"] [div class=d6][/div] [div class=d7] HIMSELF [/div] [/div] [div class="d8" style="margin-left:12px;"] What's YC's opinion of themself? [/div] [/div] [div class="d1" style="margin-bottom:10px; color:#96C7CE;"] [div class=d4][/div] [div class=d5] likes [/div] [/div]

[div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"]

[div class=d10] List what YC likes here [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] I like this [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] I like that too [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Another thing [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Once more [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] There's ten places [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] I can keep going [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] You could keep going [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Gucci [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Louis Tomlinson [/div] [/div] [/div] [div class="d1" style="margin-bottom:10px; color:#96C7CE;"] [div class=d4][/div] [div class=d5] dislikes [/div] [/div]

[div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"]

[div class=d10] List YC's dislikes here [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Onions [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Caramelized onions [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] I can't eat onions [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] The fact that it's still only january 8th [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] You wanna know why? [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Because Walls by Louis Tomlinson is coming out January 31st [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] And I am HYPED [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Ahh, I love louis so much [/div] [/div] [div class="d1" style="margin-bottom:5px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Stream We Made It by Louis Tomlinson on YouTube and Spotify, k, thanks [/div] [/div] [/div] [div class="d1" style="margin-bottom:10px; color:#96C7CE;"] [div class=d4][/div] [div class=d5] trivia [/div] [/div]

[div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#96C7CE;"]

[div class=d10] Some random trivia facts about YC go here [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Did I tell y'all how hyped I am for Walls by Louis Tomlinson coming out this January 31st? [/div] [/div] [div class=d1] [div class="d9" style="color:#96C7CE;"][/div] [div class=d10] Yeah, WHOOP, baby! [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class=page4] [div class=what] [div class=bcontainer] [div class=back4][/div] [/div] [div class="text" style="border-color:#A45795;"] [div class=text_a] [div class=text_b] [div class=text_c] 'Cause I'm heartless
And I'm back
to my ways
'cause I'm heartless
All this money
and this fame
got me heartless
Low life for life
'cause I'm heartless [/div] [/div] [/div] [/div] [div class="image" style="background:url(https://i.imgur.com/KfUeoS5.jpg); background-size:cover; background-position:50% 50%;"][/div] [/div] [div class="who" style="border-color:#A45795;"] [div class="pagetitle" style="color:#A45795;"] interview [/div] [div class="deetext" style="border-color:#A45795;"] [div class=text_a] [div class=text_b] [div class="text_c" style="padding:0 10px 0 10px;"] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:1px;"][/div] [div class=d11] Questions for a cute character interview go here! [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] Answers for your cute character interview go here! [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:1px;"][/div] [div class=d11] Do you love Louis Tomlinson? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] So, so much but please don't tell any of my IRL peeps, they'll bully me ): [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:1px;"][/div] [div class=d11] What do you love about Louis Tomlinson? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] He's such a smol BEAN oml. And he's so, so strong, and so, so kind, and his voice is so, so soothing to hear. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] Do you remember when Louis Tomlinson dyed his hair red? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] Yeah! He dyed it red for Red Nose Day (an important charity to raise money for children's education, health, homes, etc) in England. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] Is this basically an excuse for me to fanboi/fangurl over Louis Tomlinson? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] You fuckin' bet. But I can't help it, he's so endearing. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] Should I stop talking about him now ? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] Ok, I'll stop [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] Do you wanna know about my crush? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] She's this girl in my biochemistry class. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] How'd we meet? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] I've actually known her since high school so it's been three years. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] Are we friends? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] I mean, yeah, kind of. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class=d4][/div] [div class=d11] What do I mean by 'kind of' ? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] The thing we were acquaintances for the first 2.5 years, and then I started talking to her because she's the only person I knew in biochem [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] ow long have I had this crush? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] It's actually pretty recent: a few months maybe. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] How do I feel about her? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] I love talking to her, she's so much fun to be around. The only issue is I kinda wanna kiss her too so :/ [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] Have I confessed? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] N o p e, and I don't plan on, thank you very much. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] So... what's my deal with biochem, anyway? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] See, aha, the thing is...I kinda also had the biggest crush on my PROFESSOR too, yikes. [/div] [div class="d1" style="margin-bottom:5px; color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] I'm hiding something, aren't I? [/div] [/div] [div class="d8" style="margin-bottom:25px; margin-left:12px;"] Oof, okay, so I may have had a crush on this other dude too. [/div] [div class="d1" style="color:#D1ABCA;"] [div class="d4" style="top:-1px;"][/div] [div class=d11] Damn... So biochem, huh ? [/div] [/div] [div class="d8" style="margin-left:12px;"] I'm weak for pretty people, okay, fuck off. [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class=page5] [div class=what] [div class=bcontainer] [div class=back5][/div] [/div] [div class="text" style="border-color:#F45142;"] [div class=text_a] [div class=text_b] [div class=text_c] Every week is
fashion week for me
Wake up
put on all the
freshest shit
you ever seen
New York
LA
Milan
Italy
I know that your girl
wanna get up
and leave with me [/div] [/div] [/div] [/div] [div class="image" style="background:url(https://i.imgur.com/sYI6Uf3.png); background-size:cover; background-position:50% 50%;"][/div] [/div] [div class="who" style="border-color:#F45142;"] [div class="pagetitle" style="color:#F45142;"] private [/div] [div class="deetext" style="border-color:#F45142;"] [div class=text_a] [div class=text_b] [div class="text_c" style="padding:0 10px 0 10px;"] [div class="d1" style="margin-bottom:10px; color:#F9A8A0;"] [div class=d4][/div] [div class=d5] history [/div] [/div]

[div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#F9A8A0;"]

[div class=d10] This place is for writing YC's bio. [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#F9A8A0;"][/div] [div class=d10] I hate writing bios with every fibre of my being but at the same time, I love doing it because I love detailed character sheets. [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#F9A8A0;"][/div] [div class=d10] So what I do now is go with 5 highlights from MC's past and include those ONLY. [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#F9A8A0;"][/div] [div class=d10] It's a win-win situation then, eh? [/div] [/div] [div class="d1" style="margin-bottom:10px;"] [div class="d9" style="color:#F9A8A0;"][/div] [div class=d10] Because I get, at least, a small portion of the bio without having to spend days drafting their full life story. [/div] [/div] [/div] [div class="d1" style="margin-bottom:10px; color:#F9A8A0;"] [div class=d4][/div] [div class=d5] relationships [/div] [/div]

[div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] This place is for listing YC's significant relationships

[/div] [/div] [div class="d14" style="background:url(https://pbs.twimg.com/media/EJZRRIpU0AIA6Q9.jpg); background-size:260%; background-position:45% 27%;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] Mother finger, mother finger, where are you? [/div] [/div] [/div] [div class="d14" style="background:url(https://img7.yna.co.kr/photo/yna/YH/2017/07/17/PYH2017071716320034100_P4.jpg); background-size:140%; background-position:50% 0;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] Father finger, father finger, where are you? [/div] [/div] [/div] [div class="d14" style="background:url(https://66.media.tumblr.com/1c7e696696da41e989f58130b2820dc0/tumblr_pina77XU5M1xrzetzo4_250.png); background-size:cover; background-position:center;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] Here I am, here I am, how do you do? [/div] [/div] [/div] [div class="d14" style="background:url(https://data.whicdn.com/images/323461926/original.png); background-size:250%; background-position:40% 20%;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] I'm doing pretty great actually, thanks for asking [/div] [/div] [/div] [div class="d14" style="background:url(https://pbs.twimg.com/profile_images/1000880365677043715/9RObTh8L_400x400.jpg); background-size:180%; background-position:60% 15%;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] I'm running out of different ways to say "Fudge." [/div] [/div] [/div] [div class="d14" style="background:url(https://i.pinimg.com/originals/2a/45/b5/2a45b563821eabd80db2fee3ada9a82c.png); background-size:cover; background-position:50% 50%;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] One of my friends once said that the thumb isn't a finger. [/div] [/div] [/div] [div class="d14" style="background:url(https://i.ebayimg.com/images/g/0yUAAOSweXddQWXE/s-l400.jpg); background-size:200%; background-position:60% 5%;"][/div] [/div] [div class="d13" style="margin-bottom:20px;"]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] Fun fact: I've never been fwbs with someone before. [/div] [/div] [/div] [div class="d14" style="background:url(https://i.pinimg.com/originals/fc/31/e0/fc31e07f6d7442aec18aef86da2911a2.jpg); background-size:120%; background-position:55% 20%;"][/div] [/div] [div class=d13]

[div class="d1" style="margin-right:10px;"] [div class=d12]

[div class=d8] I wanna write you a song. [/div] [/div] [/div] [div class="d14" style="background:url(https://i.pinimg.com/564x/52/92/12/529212107a0376dfbef3648bc477e502.jpg); background-size:115%; background-position:55% 25%;"][/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class=holder] [div class=uni]

code by VALEN T.

[div class="name" style="transform:rotate(58deg) translate(-5.5%, -29%); left:5.5%; top:29%;"]quirky[/div] [div class="name" style="transform:rotate(-42deg) translate(-87%, -58%); left:87%; top:58%;"]title[/div] [div class=1][/div] [div class=line12] [div class=1n2_a][/div] [div class=2n3_a][/div] [div class=3n4_a][/div] [div class=4n5_a][/div] [/div] [div class=2][/div] [div class=line23] [div class=2n3_b][/div] [div class=3n4_b][/div] [div class=4n5_b][/div] [/div] [div class=3][/div] [div class=line34] [div class=3n4_c][/div] [div class=4n5_c][/div] [/div] [div class=4][/div] [div class=line45] [div class=4n5_d][/div] [/div] [div class=5][/div] [/div] [/div] [/div] [class=pleasework]background:url(https://i.imgur.com/lK3Y1Kl.png); background-size:105%; background-position:center; width:500px; height:400px; margin:auto; box-shadow:0 0 30px 5px black; transition:1s all ease-out 1.5s;[/class] [class=smol]transform:scale(0.7); transition:1s all ease-out 1.4s; z-index:1;[/class] [class=holder]transform:scale(0.6); width:500px; height:400px; position:absolute; z-index:9; transition:1s all ease-out 2.7s; cursor:default;[/class] [class=uni]width:100%; height:100%;[/class] [class=1]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:9%; left:3%; transform:translate(-3%, -9%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class] [class=2]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:52%; left:24%; transform:translate(-24%, -52%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class] [class=3]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:49%; left:51%; transform:translate(-51%, -49%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class] [class=4]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:93%; left:69%; transform:translate(-69%, -93%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class] [class=5]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:59%; left:99%; transform:translate(-99%, -59%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class] [class=line12]position:absolute; z-index:10; background:white; height:2px; width:35%; top:31.5%; left:-4%; transform:translate(4%, -31.5%) rotate(58deg);[/class] [class=line23]position:absolute; z-index:10; background:white; height:2px; width:22.5%; top:51%; left:34.5%; transform:translate(-34.5%, -51%) rotate(-5deg);[/class] [class=line34]position:absolute; z-index:10; background:white; height:2px; width:34%; top:70%; left:65%; transform:translate(-65%, -70%) rotate(63deg);[/class] [class=line45]position:absolute; z-index:10; background:white; height:2px; width:35%; top:75%; left:100%; transform:translate(-100%, -75%) rotate(-42deg);[/class] [class=1n2_a]position:absolute; height:100%; width:1px; background:#D76795; transition:1s all ease-out;[/class] [class=2n3_a]position:absolute; height:100%; width:1px; background:#2D909D; transition:1s all ease-out;[/class] [class=2n3_b]position:absolute; height:100%; width:1px; background:#2D909D; transition:1s all ease-out 1.5s;[/class] [class=3n4_a]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out;[/class] [class=3n4_b]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out 1.5s;[/class] [class=3n4_c]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out 3s;[/class] [class=4n5_a]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out;[/class] [class=4n5_b]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 1.5s;[/class] [class=4n5_c]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 3s;[/class] [class=4n5_d]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 4.5s;[/class] [class=length]width:100%;[/class] [class=trans1]transition:1.5s all ease-out;[/class] [class=trans2]transition:1.5s all ease-out 1.5s;[/class] [class=trans3]transition:1.5s all ease-out 3s;[/class] [class=trans4]transition:1.5s all ease-out 4.5s;[/class] [class=white]box-shadow:0 0 10px 2px white; background:transparent; color:white; border-color:white;[/class] [class=pink]box-shadow:0 0 10px 2px #D76795; background:transparent; color:#D76795; border-color:#D76795; transition:0.5s all ease-out 1.5s;[/class] [class=blue]box-shadow:0 0 10px 2px #2D909D; background:transparent; color:#2D909D; border-color:#2D909D; transition:0.5s all ease-out 3s;[/class] [class=purple]box-shadow:0 0 10px 2px #A45795; background:transparent; color:#A45795; border-color:#A45795; transition:0.5s all ease-out 4.5s;[/class] [class=orange]box-shadow:0 0 10px 2px #F45142; background:transparent; color:#F45142; border-color:#F45142; transition:0.5s all ease-out 6s;[/class] [class=cursor]cursor:pointer;[/class] [class=name]position:absolute; height:auto; display:inline-block; color:white; font-size:25px; text-transform:uppercase; line-height:16px; font-weight:bold; letter-spacing:4px; transition:0.5s all ease-out;[/class] [class=pn]color:#D76795; transition:0.5s all ease-out 1.5s;[/class] [class=bn]color:#2D909D; transition:0.5s all ease-out 3s;[/class] [class=ppn]color:#A45795; transition:0.5s all ease-out 4.5s;[/class] [class=on]color:#F45142; transition:0.5s all ease-out 6s;[/class] [class=what]width:130px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; position:relative; margin-right:20px;[/class] [class=bcontainer]height:auto; width:100%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; position:relative; margin-bottom:20px;[/class] [class=text]flex:1; width:100%; box-sizing:border-box; border-right:2px solid; border-left:2px solid; position:relative; margin-bottom:20px; border-radius:10px; font-size:10px; line-height:12px; overflow:hidden; padding:9px; text-align:center; text-transform:lowercase;[/class] [class=text_a]width:200%; height:100%; overflow:hidden;[/class] [class=text_b]width:100%; height:100%; overflow:auto;[/class] [class=text_c]width:50%; box-sizing:border-box;[/class] [class=image]height:210px !important; width:100%; border-radius:10px;[/class] [class=who]flex:1; height:100%; box-sizing:border-box; border-bottom:2px solid; border-radius:10px; display:flex; flex-direction:column;[/class] [class=pagetitle]font-size:12px; line-height:14px; padding:7px 10px 7px 10px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; position:relative;[/class] [class=deetext]color:white; overflow:hidden; width:100%; flex:1; box-sizing:border-box; text-align:justify; position:relative; margin-bottom:10px; padding-top:10px; border-top:2px solid; border-radius:10px;[/class] [class=page2]width:calc(100% - 40px); height:calc(100% - 40px); position:absolute; z-index:3; transition:1s all ease-out; display:flex; align-items:center; justify-content:flex-end; opacity:0;[/class] [class=op0]opacity:0; transition:1s all ease-out 2.6s; z-index:1;[/class] [class=scale1]transform:scale(1); transition:1s all ease-out 3.8s; box-shadow: 0 0 0 0;[/class] [class=op1]opacity:1; transition:1s all ease-out 5s; z-index:7;[/class] [class=back2]height:40px; width:40px; background:url(https://i.imgur.com/ssnrm2C.png); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:flex-end; position:relative;[/class] [class=hole]border-radius:100%; height:30px; width:30px; background:url(https://i.imgur.com/lK3Y1Kl.png); background-size:cover; background-position:center; transition:0.5s all ease-out; position:relative; top:-20%; left:20%; transform:translate(-20%, 20%);[/class] [class=big]transform:scale(1.3);[/class] [script class="back2" on="mouseenter"] addClass big hole [/script] [script class="back2" on="mouseleave"] removeClass big hole [/script] [class=bg2]background-size:150%; transition:1s all ease-out 3.8s; background-position:24% 52%;[/class] [class=d1]display:flex; align-items:flex-start; position:relative;[/class] [class=d2]position:relative; margin-right:10px; text-transform:uppercase; display:inline-block; color:#EBB3CA;[/class] [class=d3]flex:1; text-align:right; font-size:11px;[/class] [class=page3]width:calc(100% - 40px); height:calc(100% - 40px); position: absolute; display:flex; align-items:center; justify-content:flex-end; opacity:0; z-index:4; transition:1s all ease-out;[/class] [class=0op]opacity:0; transition:1s all ease-out 4.1s; z-index:1;[/class] [class=1scale]transform:scale(1); transition: 1s all 5.3s; box-shadow: 0 0 0 0;[/class] [class=1op]opacity:1; transition:1s all ease-out 6.5s; z-index:6;[/class] [class=back3]font-size:19px; color:white; transform:rotate(-15deg);[/class] [class=glow]animation-name:{post_id}glowani; animation-duration:0.7s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:infinite; animation-timing-function:ease-out;[/class] [animation=glowani] [keyframe=0]transform:rotate(-15deg);[/keyframe] [keyframe=25]transform:rotate(-15deg);[/keyframe] [keyframe=26]transform:rotate(15deg);[/keyframe] [keyframe=49]transform:rotate(15deg);[/keyframe] [keyframe=50]transform:rotate(-15deg) scale(1.5);[/keyframe] [keyframe=62]transform:rotate(-15deg) scale(1.5);[/keyframe] [keyframe=63transform:rotate(15deg) scale(1.5);[/keyframe] [keyframe=75]transform:rotate(15deg) scale(1.5);[/keyframe] [keyframe=100]transform:rotate(-15deg);[/keyframe] [/animation] [script class="back3" on="mouseenter"] addClass glow back3 [/script] [script class="back3" on="mouseleave"] removeClass glow back3 [/script] [class=bg3]background-size:150%; transition:1s all ease-out 5.3s; background-position:51% 49%;[/class] [class=d4]display: inline-block; font-size:11px; position:relative; margin-right:5px;[/class] [class=d5]font-size:20px; flex:1; line-height:15px; text-transform:uppercase; font-weight:bold; letter-spacing:1px;[/class] [class=d6]display:inline-block; font-size:10px; position:relative; margin-right:5px; top:1px;[/class] [class=d7]font-size:19px; flex:1; line-height:15px; text-transform:uppercase;[/class] [class=d8]font-size:11px; line-height:13px; position:relative;[/class] [class=d9]display: inline-block; font-size:9px; position:relative; margin-right:5px;[/class] [class=d10]font-size:11px; flex:1; line-height:13px;[/class] [class=page4]width:calc(100% - 40px); height:calc(100% - 40px); display:flex; align-items:center; justify-content:flex-end; position:absolute; opacity:0; z-index:5; transition:1s all ease-out;[/class] [class=0op0]opacity:0; transition:1s all ease-out 5.6s; z-index:1;[/class] [class=1scale1]transform:scale(1); transition: 1s all 6.8s; box-shadow: 0 0 0 0;[/class] [class=1op1]opacity:1; transition:1s all ease-out 8s; z-index:6;[/class] [class=back4]height:50px; width:67px; background:url(https://i.imgur.com/BKvFugv.png); background-size:cover; background-position:center; background-repeat:no-repeat; transform:rotate(10deg);[/class] [class=loopey]animation-name:{post_id}loopeyani; animation-duration:2s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:1; animation-timing-function:ease-out;[/class] [animation=loopeyani] [keyframe=0]transform:rotate(10deg);[/keyframe] [keyframe=10]transform:rotate(30deg);[/keyframe] [keyframe=20]transform:rotate(10deg);[/keyframe] [keyframe=30]transform:rotate(30deg);[/keyframe] [keyframe=40]transform:rotate(10deg);[/keyframe] [keyframe=50]transform:rotate(30deg);[/keyframe] [keyframe=60]transform:rotate(10deg);[/keyframe] [keyframe=50]transform:rotate(30deg);[/keyframe] [keyframe=100]transform:rotate(10deg);[/keyframe] [/animation] [script class="back4" on="mouseenter"] addClass loopey back4 [/script] [script class="back4" on="mouseleave"] removeClass loopey back4 [/script] [class=bg4]background-size:150%; transition:1s all ease-out 6.8s; background-position:69% 93%;[/class] [class=d11]font-size:19px; flex:1; line-height:13px;[/class] [class=page5]width:calc(100% - 40px); height:calc(100% - 40px); position:absolute; z-index:6; transition:1s all ease-out; display:flex; align-items:center; justify-content:flex-end; opacity:0;[/class] [class=o0p]opacity:0; transition:1s all ease-out 7.1s; z-index:1;[/class] [class=sca1le]transform:scale(1); transition: 1s all 8.3s; box-shadow: 0 0 0 0;[/class] [class=o1p]opacity:1; transition:1s all ease-out 9.5s; z-index:7;[/class] [class=back5]height:60px; width:100%; background:url(https://i.imgur.com/Ae2l97g.png); background-size:cover; background-position:center; background-repeat:no-repeat; transform:rotateY(180deg);[/class] [class=quake]animation-name:{post_id}quakeani; animation-duration:0.5s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:infinite; animation-timing-function:ease-out;[/class] [animation=quakeani] [keyframe=0]transform:translate(0, 0) rotateY(180deg);[/keyframe] [keyframe=25]transform:translate(0, 2px) rotateY(180deg);[/keyframe] [keyframe=50]transform:translate(0, -2px) rotateY(180deg);[/keyframe] [keyframe=75]transform:translate(0, 2px) rotateY(180deg);[/keyframe] [keyframe=100]transform:translate(0, 0) rotateY(180deg);[/keyframe] [/animation] [script class="back5" on="mouseenter"] addClass quake back5 [/script] [script class="back5" on="mouseleave"] removeClass quake back5 [/script] [class=bg5]background-size:150%; transition:1s all ease-out 8.3s; background-position:99% 59%;[/class] [class=d12]position:relative; margin-right:5px; color:#F9A8A0; font-size:9px;[/class] [class=d13]display:flex; align-items:center; justify-content:space-between; position:relative;[/class] [class=d14]width:50px; height:50px; border-radius:10px;[/class] [script class="1" on="click"] removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d addClass trans1 1n2_a addClass trans2 2n3_a addClass trans1 2n3_b addClass trans3 3n4_a addClass trans2 3n4_b addClass trans1 3n4_c addClass trans4 4n5_a addClass trans3 4n5_b addClass trans2 4n5_c addClass trans1 4n5_d removeClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name removeClass ppn name removeClass on name hide page2 hide page3 hide page4 hide page5 [/script] [script class="2" on="click"] addClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d addClass trans2 2n3_a addClass trans1 2n3_b addClass trans3 3n4_a addClass trans2 3n4_b addClass trans1 3n4_c addClass trans4 4n5_a addClass trans3 4n5_b addClass trans2 4n5_c addClass trans1 4n5_d addClass white 1 addClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 addClass pn name removeClass bn name removeClass ppn name removeClass on name addClass op0 holder addClass scale1 smol addClass op1 page2 addClass bg2 pleasework addClass cursor back2 hide page3 hide page4 hide page5 [/script] [script class="3" on="click"] removeClass length 1n2_a addClass length 2n3_a addClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d removeClass trans2 2n3_a removeClass trans1 2n3_b addClass trans3 3n4_a addClass trans2 3n4_b addClass trans1 3n4_c addClass trans4 4n5_a addClass trans3 4n5_b addClass trans2 4n5_c addClass trans1 4n5_d addClass white 1 removeClass pink 2 addClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name addClass bn name removeClass ppn name removeClass on name addClass 0op holder addClass 1scale smol addClass 1op page3 addClass bg3 pleasework addClass cursor back3 hide page2 hide page4 hide page5 [/script] [script class="4" on="click"] addClass length 3n4_a addClass length 3n4_b addClass length 3n4_c removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d addClass trans2 2n3_a addClass trans1 2n3_b removeClass trans3 3n4_a removeClass trans2 3n4_b removeClass trans1 3n4_c addClass trans4 4n5_a addClass trans3 4n5_b addClass trans2 4n5_c addClass trans1 4n5_d addClass white 1 removeClass pink 2 removeClass blue 3 addClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name addClass ppn name removeClass on name addClass 0op0 holder addClass 1scale1 smol addClass 1op1 page4 addClass bg4 pleasework addClass cursor back4 hide page2 hide page3 hide page5 [/script] [script class="5" on="click"] addClass length 4n5_a addClass length 4n5_b addClass length 4n5_c addClass length 4n5_d removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c addClass trans2 2n3_a addClass trans1 2n3_b addClass trans3 3n4_a addClass trans2 3n4_b addClass trans1 3n4_c removeClass trans4 4n5_a removeClass trans3 4n5_b removeClass trans2 4n5_c removeClass trans1 4n5_d removeClass trans1 4n5_c addClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 addClass orange 5 removeClass pn name removeClass bn name removeClass ppn name addClass on name addClass o0p holder addClass sca1le smol addClass o1p page5 addClass bg5 pleasework addClass cursor back5 hide page2 hide page3 hide page4 [/script] [script class="back2" on="click"] removeClass op1 page2 removeClass scale1 smol removeClass op0 holder removeClass bg2 pleasework removeClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name removeClass ppn name removeClass on name removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d removeClass cursor back2 show page3 show page4 show page5 [/script] [script class="back3" on="click"] removeClass 1op page3 removeClass 1scale smol removeClass 0op holder removeClass bg3 pleasework removeClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name removeClass ppn name removeClass on name removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d removeClass cursor back3 show page2 show page4 show page5 [/script] [script class="back4" on="click"] removeClass 1op1 page4 removeClass 1scale1 smol removeClass 0op0 holder removeClass bg4 pleasework removeClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name removeClass ppn name removeClass on name addClass trans1 3n4_c removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d removeClass cursor back4 show page2 show page3 show page5 [/script] [script class="back5" on="click"] removeClass o1p page5 removeClass sca1le smol removeClass o0p holder removeClass bg5 pleasework removeClass white 1 removeClass pink 2 removeClass blue 3 removeClass purple 4 removeClass orange 5 removeClass pn name removeClass bn name removeClass ppn name removeClass on name addClass trans1 4n5_c addClass trans1 4n5_d removeClass length 1n2_a removeClass length 2n3_a removeClass length 2n3_b removeClass length 3n4_a removeClass length 3n4_b removeClass length 3n4_c removeClass length 4n5_a removeClass length 4n5_b removeClass length 4n5_c removeClass length 4n5_d removeClass cursor back5 show page2 show page3 show page4 [/script]

Spoiler: code

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 (blank template) in your workshop (or wherever) here's a few things to search for + fill out:

• song lyric
• background:url(URL)
• background-size:COVER | #% | #px | ETC
• background-position:CENTER | #% #% | #px #px | ETC
• YOUR ANSWER HERE
• link_to_your_oc's_fc.png

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:

Spoiler: blank template

[nobr]
[comment]-------------------------------the actual code-------------------------------[/comment]

[comment]Before we even start, I just want to say that I've kept the colour scheme in the blank template the exact same as in the original (i.e. the same colours: pink, blue, purple, orange) and if you want to change them, that's on you; you'll have to ctrcl c + f + v search for the HEX codes manually to replace them.[/comment]


[div=max-width:500px; height:400px; margin:auto; position:relative; cursor:default; overflow:hidden; display:flex; align-items:center; justify-content:center;]



[div class=smol]
[div class=pleasework][/div]
[/div]





[comment]---------------------BASICS page---------------------[/comment]

[div class=page2]
[div class=what]

[div class=bcontainer]
[div class=back2]
[div class=hole][/div]
[/div]
[/div]


[comment]Here, you can add a short quote or a song lyric[/comment]

[div class="text" style="border-color:#D76795;"]
[div class=text_a]
[div class=text_b]
[div class=text_c]
a nice
[br][/br]
quote
[br][/br]
or
[br][/br]
song lyric
[br][/br]
goes here
[/div]
[/div]
[/div]
[/div]


[comment]This "image" class here is for the picture on the bottom left of the BASICS (pink) page; for me, it was for MC's FC, however, you can have it be anything you want.[/comment]

[div class="image" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]


[/div]

[div class="who" style="border-color:#D76795;"]

[div class="pagetitle" style="color:#D76795;"]
[font=Press Start 2P]basics[/font]
[/div]

[div class="deetext" style="border-color:#D76795;"]
[div class=text_a]
[div class=text_b]
[div class="text_c" style="padding:0 10px 0 10px;"]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]NAME[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]nickname(s)[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]stage name[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]d.o.b.[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font][/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]age[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]zodiac[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]gender[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]sexuality[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]p.o.b.[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]heritage[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]religion[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]education [br][/br] [COLOR=transparent]...[/COLOR] level[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]occupation[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR]
[SIZE=19px]face claim[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro][URL='link_to_your_oc's_fc.png']YOUR ANSWER HERE[/URL][/font] [/div]
[/div]

[div class=d1]
[div class=d2]
[font=Cute Font][SIZE=11px][fa]fa-chevron-right[/fa][/SIZE]
[COLOR=transparent].[/COLOR] [SIZE=19px]body [br][/br] [COLOR=transparent]...[/COLOR] mods[/SIZE][/font]
[/div]
[div class=d3] [font=Source Code Pro]YOUR ANSWER HERE[/font] [/div]
[/div]

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

[/div]
[/div]





[comment]---------------------PERSONA page---------------------[/comment]

[div class=page3]
[div class=what]

[div class=bcontainer]
[div class=back3][fa]fa-star[/fa][/div]
[/div]


[comment]Here, you can add a short quote or a song lyric[/comment]

[div class="text" style="border-color:#2D909D;"]
[div class=text_a]
[div class=text_b]
[div class=text_c]
some
[br][/br]
random
[br][/br]
quote
[br][/br]
or
[br][/br]
song lyric
[br][/br]
here
[/div]
[/div]
[/div]
[/div]


[comment]This "image" class here is for the picture on the bottom left of the PERSONA (blue) page; for me, it was for MC's FC, however, you can have it be anything you want.[/comment]

[div class="image" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]


[/div]

[div class="who" style="border-color:#2D909D;"]

[div class="pagetitle" style="color:#2D909D"]
[font=Press Start 2P]persona[/font]
[/div]

[div class="deetext" style="border-color:#2D909D;"]
[div class=text_a]
[div class=text_b]
[div class="text_c" style="padding:0 10px 0 10px;"]

[div class="d1" style="margin-bottom:10px; color:#96C7CE;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]image[/font] [/div]
[/div]

[div=position:relative; margin-left:10px; margin-bottom:50px;]

[div class="d1" style="margin-bottom:5px; color:#96C7CE;"]
[div class=d6][fa]fa-chevron-right[/fa][/div]
[div class=d7] [font=Cute Font]STRANGERS + ACQUAINTANCES[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]What's strangers' and OC's acquaintances' opinion on them? YOUR ANSWER HERE[/font] [/div]


[comment]over here, you see where it say "STAFF / TEAM" ? That can be substituted for whatever you see fit - this is just what applied for MC[/comment]

[div class="d1" style="margin-bottom:5px; color:#96C7CE;"]
[div class=d6][fa]fa-chevron-right[/fa][/div]
[div class=d7] [font=Cute Font]STAFF / TEAM[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]What's OC's colleagues' opinion on them? YOUR ANSWER HERE[/font] [/div]


[comment]over here, you see where it say "FANS + OTHER IDOLS" ? That can be substituted for whatever you see fit - this is just what applied for MC[/comment]

[div class="d1" style="margin-bottom:5px; color:#96C7CE;"]
[div class=d6][fa]fa-chevron-right[/fa][/div]
[div class=d7] [font=Cute Font]FANS + OTHER IDOLS[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]What's YC's fans' and fellow celebrities' opinion on them? YOUR ANSWER HERE[/font] [/div]


[div class="d1" style="margin-bottom:5px; color:#96C7CE;"]
[div class=d6][fa]fa-chevron-right[/fa][/div]
[div class=d7] [font=Cute Font]FAMILY[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]What's YC's family's opinion on them? YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#96C7CE"]
[div class=d6][fa]fa-chevron-right[/fa][/div]
[div class=d7] [font=Cute Font]HIMSELF[/font] [/div]
[/div]
[div class="d8" style="margin-left:12px;"] [font=Source Code Pro]What's YC's opinion of themself? YOUR ANSWER HERE[/font] [/div]

[/div]

[div class="d1" style="margin-bottom:10px; color:#96C7CE;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]likes[/font] [/div]
[/div]

[div=position:relative; margin-left:12px; margin-bottom:50px;]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]list what YC likes here; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]i like this; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]i like that too; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]another thing; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]once more; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]there's ten places; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]i can keep going; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]you could keep going; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]gucci; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]louis tomlinson; YOUR ANSWER HERE[/font] [/div]
[/div]

[comment]If you want to add more "likes" then copy the basic format and do as you please. The only thing you need to be careful of is the lone "/div" below this comment; all the "likes" need to be added ABOVE this lone "/div" over here, okay ?[/comment]

[/div]


[div class="d1" style="margin-bottom:10px; color:#96C7CE;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]dislikes[/font] [/div]
[/div]

[div=position:relative; margin-left:12px; margin-bottom:50px;]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]list YC's dislikes here; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]onions; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]caramelized onions; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]i can't eat onions; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]the fact that it's still only january 8th; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]you wanna know why? YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]because walls by louis tomlinson is coming out january 31st; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]and i am HYPED; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]ahh, i love louis so much; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:5px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]stream we made it by louis tomlinson on youtube and spotify k thanks; YOUR ANSWER HERE[/font] [/div]
[/div]

[comment]If you want to add more "dislikes" then copy the basic format and do as you please. The only thing you need to be careful of is the lone "/div" below this comment; all the "dislikes" need to be added ABOVE this lone "/div" over here, okay ?[/comment]

[/div]


[div class="d1" style="margin-bottom:10px; color:#96C7CE;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]trivia[/font] [/div]
[/div]

[div=position:relative; margin-left:12px;]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]Some random trivia facts about YC go here; YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]Did I tell y'all how hyped I am for Walls by Louis Tomlinson coming out this January 31st? YOUR ANSWER HERE[/font] [/div]
[/div]

[div class=d1]
[div class="d9" style="color:#96C7CE;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]Yeah, WHOOP, baby! YOUR ANSWER HERE[/font] [/div]
[/div]

[comment]If you want to add more "trivia" then copy the basic format and do as you please. The only thing you need to be careful of is the lone "/div" below this comment; all the "trivia" need to be added ABOVE this lone "/div" over here, okay ?[/comment]

[/div]


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

[/div]
[/div]





[comment]---------------------INTERVIEW page---------------------[/comment]

[div class=page4]
[div class=what]

[div class=bcontainer]
[div class=back4][/div]
[/div]


[comment]Here, you can add a short quote or a song lyric[/comment]

[div class="text" style="border-color:#A45795;"]
[div class=text_a]
[div class=text_b]
[div class=text_c]
some
[br][/br]
random
[br][/br]
quote
[br][/br]
or
[br][/br]
song lyric
[br][/br]
goes
[br][/br]
here
[/div]
[/div]
[/div]
[/div]


[comment]This "image" class here is for the picture on the bottom left of the INTERVIEW (purple) page; for me, it was for MC's FC, however, you can have it be anything you want.[/comment]

[div class="image" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]


[/div]

[div class="who" style="border-color:#A45795;"]

[div class="pagetitle" style="color:#A45795;"]
[font=Press Start 2P]interview[/font]
[/div]

[div class="deetext" style="border-color:#A45795;"]
[div class=text_a]
[div class=text_b]
[div class="text_c" style="padding:0 10px 0 10px;"]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Questions for a cute character interview go here! YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]Answers for your cute character interview go here! YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Do you love Louis Tomlinson? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]So so much but please don't tell any of my IRL peeps, they'll bully me ): YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]What do you love about Louis Tomlinson? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]He's such a smol BEAN oml. And he's so, so strong, and so, so kind, and his voice is so, so soothing to hear. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Do you remember when Louis Tomlinson dyed his hair red? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]Yeah! He dyed it red for Red Nose Day (an important charity to raise money for children's education, health, homes, etc) in England. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Is this basically an excuse for me to fanboi/fangurl over Louis Tomlinson? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]You fuckin' bet. But I can't help it, he's so endearing. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Should I stop talking about him now ? OUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]Ok, I'll stop YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Do you wanna know about my crush? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]She's this girl in my biochemistry class. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]How'd we meet? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]I've actually known her since high school so it's been three years. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Are we friends? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]I mean, yeah, kind of. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]What do I mean by 'kind of' ? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]The thing we were acquaintances for the first 2.5 years, and then I started talking to her because she's the only person I knew in biochem. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]How long have I had this crush? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]It's actually pretty recent: a few months maybe. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]How do I feel about her? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]I love talking to her, she's so much fun to be around. The only issue is I kinda wanna kiss her too so :/ YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Have I confessed? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]N o p e, and I don't plan on, thank you very much. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]So... what's my deal with biochem, anyway? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]See, aha, the thing is...I kinda also had the biggest crush on my PROFESSOR too, yikes. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="margin-bottom:5px; color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]I'm hiding something, aren't I? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-bottom:25px; margin-left:12px;"] [font=Source Code Pro]Oof, okay, so I may have had a crush on this other dude too. YOUR ANSWER HERE[/font] [/div]

[div class="d1" style="color:#D1ABCA;"]
[div class="d4" style="top:-1px;"][fa]fa-chevron-right[/fa][/div]
[div class=d11] [font=Cute Font]Damn... So biochem, huh ? YOUR ANSWER HERE[/font] [/div]
[/div]
[div class="d8" style="margin-left:12px;"] [font=Source Code Pro]I'm weak for pretty people, okay, fuck off. YOUR ANSWER HERE[/font] [/div]

[comment]If you want to add more questions + answers then copy the basic format and do as you please. The only thing you need to be careful of is adding them ABOVE this comment, okay ?[/comment]

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

[/div]
[/div]





[comment]---------------------HISTORY / PRIVATE page---------------------[/comment]

[div class=page5]
[div class=what]

[div class=bcontainer]
[div class=back5][/div]
[/div]


[comment]Here, you can add a short quote or a song lyric[/comment]

[div class="text" style="border-color:#F45142;"]
[div class=text_a]
[div class=text_b]
[div class=text_c]
a
[br][/br]
quote
[br][/br]
or
[br][/br]
song lyric
[br][/br]
can
[br][/br]
go
[br][/br]
here
[/div]
[/div]
[/div]
[/div]


[comment]This "image" class here is for the picture on the bottom left of the PRIVATE (orange) page; for me, it was for MC's FC, however, you can have it be anything you want.[/comment]

[div class="image" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]


[/div]

[div class="who" style="border-color:#F45142;"]

[div class="pagetitle" style="color:#F45142;"]
[font=Press Start 2P]private[/font]
[/div]

[div class="deetext" style="border-color:#F45142;"]
[div class=text_a]
[div class=text_b]
[div class="text_c" style="padding:0 10px 0 10px;"]

[div class="d1" style="margin-bottom:10px; color:#F9A8A0;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]history[/font] [/div]
[/div]

[div=position:relative; margin-left:10px; margin-bottom:50px;]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#F9A8A0;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]This place is for writing YC's bio. YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#F9A8A0;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]I hate writing bios with every fibre of my being but at the same time, I love doing it because I love detailed character sheets. YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#F9A8A0;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]So what I do now is go with 5 highlights from MC's past and include those ONLY. YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#F9A8A0;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]It's a win-win situation then, eh? YOUR ANSWER HERE[/font] [/div]
[/div]

[div class="d1" style="margin-bottom:10px;"]
[div class="d9" style="color:#F9A8A0;"][fa]fa-chevron-right[/fa][/div]
[div class=d10] [font=Source Code Pro]Because I get, at least, a small portion of the bio without having to spend days drafting their full life story. YOUR ANSWER HERE[/font] [/div]
[/div]

[comment]If you want to add more points for YC's bio then copy the basic format and do as you please. The only thing you need to be careful of is this lone "/div" down here. Be sure to add any more points ABOVE this lone "/div" down here, okay ?[/comment]

[/div]


[div class="d1" style="margin-bottom:10px; color:#F9A8A0;"]
[div class=d4][fa]fa-chevron-right[/fa][/div]
[div class=d5] [font=Cute Font]relationships[/font] [/div]
[/div]

[div=position:relative; margin-left:10px;]

[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]This place is for listing YC's significant relationships; YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudge (bff)" then in place of the "background:url(URL)" I would add a picture of Fudge's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]Mother finger, mother finger, where are you? YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgey (friend)" then in place of the "background:url(URL)" I would add a picture of Fudgey's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]Father finger, father finger, where are you? YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgeyboii (bro)" then in place of the "background:url(URL)" I would add a picture of Fudgeyboii's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]Here I am, here I am, how do you do? YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgezilla (m8)" then in place of the "background:url(URL)" I would add a picture of Fudgeyzilla's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]I'm doing pretty great actually, thanks for asking; YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgeykinz (lover)" then in place of the "background:url(URL)" I would add a picture of Fudgeykinz's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]I'm running out of different ways to say "Fudge." YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgecakez (og)" then in place of the "background:url(URL)" I would add a picture of Fudgecakez's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]One of my friends once said that the thumb isn't a finger. YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fudgecakes (fake)" then in place of the "background:url(URL)" I would add a picture of Fudgecakes' FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class="d13" style="margin-bottom:20px;"]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]Fun fact: I've never been fwbs with someone before. YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(URL); background-size:COVER | #% | #px | ETC; background-position:CENTER | #% #% | #px #px | ETC;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Fuck (me daddy SAKHDSDS)" then in place of the "background:url(URL)" I would add a picture of Fuck's FC. The "background-size" and "background-position" should be filled out accordingly[/comment]


[div class=d13]
[div=flex:1;]
[div class="d1" style="margin-right:10px;"]
[div class=d12][fa]fa-chevron-right[/fa][/div]
[div class=d8] [font=Source Code Pro]I wanna write you a song. YOUR ANSWER HERE[/font] [/div]
[/div]
[/div]
[div class="d14" style="background:url(https://i.pinimg.com/564x/52/92/12/529212107a0376dfbef3648bc477e502.jpg); background-size:115%; background-position:55% 25%;"][/div]
[/div]

[comment]This "d14" class up here is for the picture associated with whatever relation you list; e.g. if it says "Louis (loml)" then in place of the "background:url(URL)" I would add a picture of Louis' FC. The "background-size" and "background-position" should be filled out accordingly

If you want to add more in this "relationships" section then copy the basic format and do as you please. The only thing you need to be careful of is adding them ABOVE this comment, okay?[/comment]

[/div]

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

[/div]
[/div]





[div class=holder]
[div class=uni]
[div=width:100%;font-size:13px;line-height:14px;margin:auto;text-align:right;position:absolute;z-index:15;]code by [USER=68743]@fudgecakez[/USER][/div]



[comment]These two "name" classes are for the text on the constellation page. It says "quirky" and "title" but really, you can have whatever you want.
I'm leaving the "transform:rotate" "left" and "top" values here as is because those are what apply for the words "quirky" and "title." Change the words or adding more is a trial-and-error method because you don't know which values are going to work.
One thing to remember is that the number value for "left" should be the same for the first one in "translate(___%, x%)" and the value for "top" should be the same for the second one in "translate(x%, ___%)"[/comment]
[div class="name" style="transform:rotate(58deg) translate(-11%, -28%); left:11%; top:28%;"][font=Gayathri]quirky[/font][/div]

[div class="name" style="transform:rotate(-42deg) translate(-87%, -52.5%); left:87%; top:52.5%;"][font=Gayathri]title[/font][/div]



[div class=1][fa]fa-star[/fa][/div]



[div class=line12]
[div class=1n2_a][/div]
[div class=2n3_a][/div]
[div class=3n4_a][/div]
[div class=4n5_a][/div]
[/div]



[div class=2][fa]fa-star[/fa][/div]



[div class=line23]
[div class=2n3_b][/div]
[div class=3n4_b][/div]
[div class=4n5_b][/div]
[/div]



[div class=3][fa]fa-star[/fa][/div]



[div class=line34]
[div class=3n4_c][/div]
[div class=4n5_c][/div]
[/div]



[div class=4][fa]fa-star[/fa][/div]



[div class=line45]
[div class=4n5_d][/div]
[/div]



[div class=5][fa]fa-star[/fa][/div]



[/div]
[/div]

[/div]























[comment]-------------------------------what goes on (code classes and scripts)-------------------------------[/comment]

[comment]---------------------the background---------------------[/comment]

[class=pleasework]background:url(https://i.imgur.com/lK3Y1Kl.png); background-size:105%; background-position:center; width:500px; height:400px; margin:auto; box-shadow:0 0 30px 5px black; transition:1s all ease-out 1.5s;[/class]

[class=smol]transform:scale(0.7); transition:1s all ease-out 1.4s; z-index:1;[/class]

[class=holder]transform:scale(0.6); width:500px; height:400px; position:absolute; z-index:9; transition:1s all ease-out 2.7s; cursor:default;[/class]

[class=uni]width:100%; height:100%;[/class]





[comment]---------------------the four star circles---------------------[/comment]

[class=1]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:9%; left:3%; transform:translate(-3%, -9%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class]

[class=2]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:52%; left:24%; transform:translate(-24%, -52%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class]

[class=3]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:49%; left:51%; transform:translate(-51%, -49%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class]

[class=4]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:93%; left:69%; transform:translate(-69%, -93%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class]

[class=5]height:20px; width:20px; box-sizing:border-box; border:2px solid white; border-radius:100%; position:absolute; top:59%; left:99%; transform:translate(-99%, -59%); cursor:pointer; font-size: 60%; line-height:80%; display:flex; align-items:center; justify-content:center; transition:0.5s all ease-out; z-index:12; color:white;[/class]





[comment]---------------------the lines connecting the circles---------------------[/comment]

[class=line12]position:absolute; z-index:10; background:white; height:2px; width:35%; top:31.5%; left:-4%; transform:translate(4%, -31.5%) rotate(58deg);[/class]

[class=line23]position:absolute; z-index:10; background:white; height:2px; width:22.5%; top:51%; left:34.5%; transform:translate(-34.5%, -51%) rotate(-5deg);[/class]

[class=line34]position:absolute; z-index:10; background:white; height:2px; width:34%; top:70%; left:65%; transform:translate(-65%, -70%) rotate(63deg);[/class]

[class=line45]position:absolute; z-index:10; background:white; height:2px; width:35%; top:75%; left:100%; transform:translate(-100%, -75%) rotate(-42deg);[/class]





[comment]---------------------the coloured lines---------------------[/comment]

[class=1n2_a]position:absolute; height:100%; width:1px; background:#D76795; transition:1s all ease-out;[/class]

[class=2n3_a]position:absolute; height:100%; width:1px; background:#2D909D; transition:1s all ease-out;[/class]
[class=2n3_b]position:absolute; height:100%; width:1px; background:#2D909D; transition:1s all ease-out 1.5s;[/class]

[class=3n4_a]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out;[/class]
[class=3n4_b]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out 1.5s;[/class]
[class=3n4_c]position:absolute; height:100%; width:1px; background:#A45795; transition:1s all ease-out 3s;[/class]

[class=4n5_a]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out;[/class]
[class=4n5_b]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 1.5s;[/class]
[class=4n5_c]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 3s;[/class]
[class=4n5_d]position:absolute; height:100%; width:1px; background:#F45142; transition:1s all ease-out 4.5s;[/class]





[comment]---------------------some misc classes (only for clicking the star-circles)---------------------[/comment]

[class=length]width:100%;[/class]

[class=trans1]transition:1.5s all ease-out;[/class]
[class=trans2]transition:1.5s all ease-out 1.5s;[/class]
[class=trans3]transition:1.5s all ease-out 3s;[/class]
[class=trans4]transition:1.5s all ease-out 4.5s;[/class]

[class=white]box-shadow:0 0 10px 2px white; background:transparent; color:white; border-color:white;[/class]
[class=pink]box-shadow:0 0 10px 2px #D76795; background:transparent; color:#D76795; border-color:#D76795; transition:0.5s all ease-out 1.5s;[/class]
[class=blue]box-shadow:0 0 10px 2px #2D909D; background:transparent; color:#2D909D; border-color:#2D909D; transition:0.5s all ease-out 3s;[/class]
[class=purple]box-shadow:0 0 10px 2px #A45795; background:transparent; color:#A45795; border-color:#A45795; transition:0.5s all ease-out 4.5s;[/class]
[class=orange]box-shadow:0 0 10px 2px #F45142; background:transparent; color:#F45142; border-color:#F45142; transition:0.5s all ease-out 6s;[/class]

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





[comment]---------------------classes for the name/title---------------------[/comment]

[class=name]position:absolute; height:auto; display:inline-block; color:white; font-size:25px; text-transform:uppercase; line-height:16px; font-weight:bold; letter-spacing:4px; transition:0.5s all ease-out;[/class]

[class=pn]color:#D76795; transition:0.5s all ease-out 1.5s;[/class]

[class=bn]color:#2D909D; transition:0.5s all ease-out 3s;[/class]

[class=ppn]color:#A45795; transition:0.5s all ease-out 4.5s;[/class]

[class=on]color:#F45142; transition:0.5s all ease-out 6s;[/class]





[comment]---------------------classes similar for all 4 pages---------------------[/comment]

[class=what]width:130px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; position:relative; margin-right:20px;[/class]

[class=bcontainer]height:auto; width:100%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; position:relative; margin-bottom:20px;[/class]

[class=text]flex:1; width:100%; box-sizing:border-box; border-right:2px solid; border-left:2px solid; position:relative; margin-bottom:20px; border-radius:10px; font-size:10px; line-height:12px; overflow:hidden; padding:9px; text-align:center; text-transform:lowercase;[/class]

[class=text_a]width:200%; height:100%; overflow:hidden;[/class]

[class=text_b]width:100%; height:100%; overflow:auto;[/class]

[class=text_c]width:50%; box-sizing:border-box;[/class]

[class=image]height:210px !important; width:100%; border-radius:10px;[/class]

[class=who]flex:1; height:100%; box-sizing:border-box; border-bottom:2px solid; border-radius:10px; display:flex; flex-direction:column;[/class]

[class=pagetitle]font-size:12px; line-height:14px; padding:7px 10px 7px 10px; box-sizing:border-box; text-transform:uppercase; font-weight:bold;  position:relative;[/class]

[class=deetext]color:white; overflow:hidden; width:100%; flex:1; box-sizing:border-box; text-align:justify; position:relative; margin-bottom:10px; padding-top:10px; border-top:2px solid; border-radius:10px;[/class]





[comment]---------------------classes for details for 2nd circle---------------------[/comment]

[class=page2]width:calc(100% - 40px); height:calc(100% - 40px); position:absolute; z-index:3; transition:1s all ease-out; display:flex; align-items:center; justify-content:flex-end; opacity:0;[/class]

[class=op0]opacity:0; transition:1s all ease-out 2.6s; z-index:1;[/class]
[class=scale1]transform:scale(1); transition:1s all ease-out 3.8s; box-shadow: 0 0 0 0;[/class]
[class=op1]opacity:1; transition:1s all ease-out 5s; z-index:7;[/class]

[class=back2]height:40px; width:40px; background:url(https://i.imgur.com/ssnrm2C.png); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:flex-end; position:relative;[/class]

[class=hole]border-radius:100%; height:30px; width:30px; background:url(https://i.imgur.com/lK3Y1Kl.png); background-size:cover; background-position:center; transition:0.5s all ease-out; position:relative; top:-20%; left:20%; transform:translate(-20%, 20%);[/class]

[class=big]transform:scale(1.3);[/class]

[script class="back2" on="mouseenter"]
addClass big hole
[/script]

[script class="back2" on="mouseleave"]
removeClass big hole
[/script]

[class=bg2]background-size:150%; transition:1s all ease-out 3.8s; background-position:24% 52%;[/class]

[class=d1]display:flex; align-items:flex-start; position:relative;[/class]

[class=d2]position:relative; margin-right:10px; text-transform:uppercase; display:inline-block; color:#EBB3CA;[/class]

[class=d3]flex:1; text-align:right; font-size:11px;[/class]





[comment]---------------------classes for details for 3rd circle---------------------[/comment]

[class=page3]width:calc(100% - 40px); height:calc(100% - 40px); position: absolute; display:flex; align-items:center; justify-content:flex-end; opacity:0; z-index:4; transition:1s all ease-out;[/class]

[class=0op]opacity:0; transition:1s all ease-out 4.1s; z-index:1;[/class]
[class=1scale]transform:scale(1); transition: 1s all 5.3s; box-shadow: 0 0 0 0;[/class]
[class=1op]opacity:1; transition:1s all ease-out 6.5s; z-index:6;[/class]

[class=back3]font-size:19px; color:white; transform:rotate(-15deg);[/class]

[class=glow]animation-name:{post_id}glowani; animation-duration:0.7s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:infinite; animation-timing-function:ease-out;[/class]

[animation=glowani]
[keyframe=0]transform:rotate(-15deg);[/keyframe]
[keyframe=25]transform:rotate(-15deg);[/keyframe]
[keyframe=26]transform:rotate(15deg);[/keyframe]
[keyframe=49]transform:rotate(15deg);[/keyframe]
[keyframe=50]transform:rotate(-15deg) scale(1.5);[/keyframe]
[keyframe=62]transform:rotate(-15deg) scale(1.5);[/keyframe]
[keyframe=63transform:rotate(15deg) scale(1.5);[/keyframe]
[keyframe=75]transform:rotate(15deg) scale(1.5);[/keyframe]
[keyframe=100]transform:rotate(-15deg);[/keyframe]
[/animation]

[script class="back3" on="mouseenter"]
addClass glow back3
[/script]

[script class="back3" on="mouseleave"]
removeClass glow back3
[/script]

[class=bg3]background-size:150%; transition:1s all ease-out 5.3s; background-position:51% 49%;[/class]

[class=d4]display: inline-block; font-size:11px; position:relative; margin-right:5px;[/class]

[class=d5]font-size:20px; flex:1; line-height:15px; text-transform:uppercase; font-weight:bold; letter-spacing:1px;[/class]

[class=d6]display:inline-block; font-size:10px; position:relative; margin-right:5px; top:1px;[/class]

[class=d7]font-size:19px; flex:1; line-height:15px; text-transform:uppercase;[/class]

[class=d8]font-size:11px; line-height:13px; position:relative;[/class]

[class=d9]display: inline-block; font-size:9px; position:relative; margin-right:5px;[/class]

[class=d10]font-size:11px; flex:1; line-height:13px;[/class]





[comment]---------------------classes for details for 4th circle---------------------[/comment]

[class=page4]width:calc(100% - 40px); height:calc(100% - 40px); display:flex; align-items:center; justify-content:flex-end; position:absolute; opacity:0; z-index:5; transition:1s all ease-out;[/class]

[class=0op0]opacity:0; transition:1s all ease-out 5.6s; z-index:1;[/class]
[class=1scale1]transform:scale(1); transition: 1s all 6.8s; box-shadow: 0 0 0 0;[/class]
[class=1op1]opacity:1; transition:1s all ease-out 8s; z-index:6;[/class]

[class=back4]height:50px; width:67px; background:url(https://i.imgur.com/BKvFugv.png); background-size:cover; background-position:center; background-repeat:no-repeat; transform:rotate(10deg);[/class]

[class=loopey]animation-name:{post_id}loopeyani; animation-duration:2s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:1; animation-timing-function:ease-out;[/class]

[animation=loopeyani]
[keyframe=0]transform:rotate(10deg);[/keyframe]
[keyframe=10]transform:rotate(30deg);[/keyframe]
[keyframe=20]transform:rotate(10deg);[/keyframe]
[keyframe=30]transform:rotate(30deg);[/keyframe]
[keyframe=40]transform:rotate(10deg);[/keyframe]
[keyframe=50]transform:rotate(30deg);[/keyframe]
[keyframe=60]transform:rotate(10deg);[/keyframe]
[keyframe=50]transform:rotate(30deg);[/keyframe]
[keyframe=100]transform:rotate(10deg);[/keyframe]
[/animation]

[script class="back4" on="mouseenter"]
addClass loopey back4
[/script]

[script class="back4" on="mouseleave"]
removeClass loopey back4
[/script]

[class=bg4]background-size:150%; transition:1s all ease-out 6.8s; background-position:69% 93%;[/class]

[class=d11]font-size:19px; flex:1; line-height:13px;[/class]





[comment]---------------------classes for details for 5th circle---------------------[/comment]

[class=page5]width:calc(100% - 40px); height:calc(100% - 40px); position:absolute; z-index:6; transition:1s all ease-out; display:flex; align-items:center; justify-content:flex-end; opacity:0;[/class]

[class=o0p]opacity:0; transition:1s all ease-out 7.1s; z-index:1;[/class]
[class=sca1le]transform:scale(1); transition: 1s all 8.3s; box-shadow: 0 0 0 0;[/class]
[class=o1p]opacity:1; transition:1s all ease-out 9.5s; z-index:7;[/class]

[class=back5]height:60px; width:100%; background:url(https://i.imgur.com/Ae2l97g.png); background-size:cover; background-position:center; background-repeat:no-repeat; transform:rotateY(180deg);[/class]

[class=quake]animation-name:{post_id}quakeani; animation-duration:0.5s; animation-delay:0; animation-direction:normal; animation-fill-mode:forwards; animation-iteration-count:infinite; animation-timing-function:ease-out;[/class]

[animation=quakeani]
[keyframe=0]transform:translate(0, 0) rotateY(180deg);[/keyframe]
[keyframe=25]transform:translate(0, 2px) rotateY(180deg);[/keyframe]
[keyframe=50]transform:translate(0, -2px) rotateY(180deg);[/keyframe]
[keyframe=75]transform:translate(0, 2px) rotateY(180deg);[/keyframe]
[keyframe=100]transform:translate(0, 0) rotateY(180deg);[/keyframe]
[/animation]

[script class="back5" on="mouseenter"]
addClass quake back5
[/script]

[script class="back5" on="mouseleave"]
removeClass quake back5
[/script]

[class=bg5]background-size:150%; transition:1s all ease-out 8.3s; background-position:99% 59%;[/class]

[class=d12]position:relative; margin-right:5px; color:#F9A8A0; font-size:9px;[/class]

[class=d13]display:flex; align-items:center; justify-content:space-between; position:relative;[/class]

[class=d14]width:50px; height:50px; border-radius:10px;[/class]





[comment]---------------------script for 1st circle---------------------[/comment]

[script class="1" on="click"]
removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

addClass trans1 1n2_a
addClass trans2 2n3_a
addClass trans1 2n3_b
addClass trans3 3n4_a
addClass trans2 3n4_b
addClass trans1 3n4_c
addClass trans4 4n5_a
addClass trans3 4n5_b
addClass trans2 4n5_c
addClass trans1 4n5_d

removeClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

hide page2
hide page3
hide page4
hide page5
[/script]





[comment]---------------------script for 2nd circle---------------------[/comment]

[script class="2" on="click"]
addClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

addClass trans2 2n3_a
addClass trans1 2n3_b
addClass trans3 3n4_a
addClass trans2 3n4_b
addClass trans1 3n4_c
addClass trans4 4n5_a
addClass trans3 4n5_b
addClass trans2 4n5_c
addClass trans1 4n5_d

addClass white 1
addClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

addClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

addClass op0 holder
addClass scale1 smol
addClass op1 page2
addClass bg2 pleasework

addClass cursor back2

hide page3
hide page4
hide page5
[/script]





[comment]---------------------script for the 3rd circle---------------------[/comment]

[script class="3" on="click"]
removeClass length 1n2_a
addClass length 2n3_a
addClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

removeClass trans2 2n3_a
removeClass trans1 2n3_b
addClass trans3 3n4_a
addClass trans2 3n4_b
addClass trans1 3n4_c
addClass trans4 4n5_a
addClass trans3 4n5_b
addClass trans2 4n5_c
addClass trans1 4n5_d

addClass white 1
removeClass pink 2
addClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
addClass bn name
removeClass ppn name
removeClass on name

addClass 0op holder
addClass 1scale smol
addClass 1op page3
addClass bg3 pleasework

addClass cursor back3

hide page2
hide page4
hide page5
[/script]





[comment]---------------------script for the 4th circle---------------------[/comment]

[script class="4" on="click"]
addClass length 3n4_a
addClass length 3n4_b
addClass length 3n4_c
removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

addClass trans2 2n3_a
addClass trans1 2n3_b
removeClass trans3 3n4_a
removeClass trans2 3n4_b
removeClass trans1 3n4_c
addClass trans4 4n5_a
addClass trans3 4n5_b
addClass trans2 4n5_c
addClass trans1 4n5_d

addClass white 1
removeClass pink 2
removeClass blue 3
addClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
addClass ppn name
removeClass on name

addClass 0op0 holder
addClass 1scale1 smol
addClass 1op1 page4
addClass bg4 pleasework

addClass cursor back4

hide page2
hide page3
hide page5
[/script]





[comment]---------------------script for the 5th circle---------------------[/comment]

[script class="5" on="click"]
addClass length 4n5_a
addClass length 4n5_b
addClass length 4n5_c
addClass length 4n5_d
removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c

addClass trans2 2n3_a
addClass trans1 2n3_b
addClass trans3 3n4_a
addClass trans2 3n4_b
addClass trans1 3n4_c
removeClass trans4 4n5_a
removeClass trans3 4n5_b
removeClass trans2 4n5_c
removeClass trans1 4n5_d

removeClass trans1 4n5_c

addClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
addClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
addClass on name

addClass o0p holder
addClass sca1le smol
addClass o1p page5
addClass bg5 pleasework

addClass cursor back5

hide page2
hide page3
hide page4
[/script]





[comment]---------------------script for the 2nd back button---------------------[/comment]

[script class="back2" on="click"]
removeClass op1 page2
removeClass scale1 smol
removeClass op0 holder
removeClass bg2 pleasework

removeClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

removeClass cursor back2

show page3
show page4
show page5
[/script]





[comment]---------------------script for the 3rd back button---------------------[/comment]

[script class="back3" on="click"]
removeClass 1op page3
removeClass 1scale smol
removeClass 0op holder
removeClass bg3 pleasework

removeClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

removeClass cursor back3

show page2
show page4
show page5
[/script]





[comment]---------------------script for the 4th back button---------------------[/comment]

[script class="back4" on="click"]
removeClass 1op1 page4
removeClass 1scale1 smol
removeClass 0op0 holder
removeClass bg4 pleasework

removeClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

addClass trans1 3n4_c

removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

removeClass cursor back4

show page2
show page3
show page5
[/script]





[comment]---------------------script for the 5th back button---------------------[/comment]

[script class="back5" on="click"]
removeClass o1p page5
removeClass sca1le smol
removeClass o0p holder
removeClass bg5 pleasework

removeClass white 1
removeClass pink 2
removeClass blue 3
removeClass purple 4
removeClass orange 5

removeClass pn name
removeClass bn name
removeClass ppn name
removeClass on name

addClass trans1 4n5_c
addClass trans1 4n5_d

removeClass length 1n2_a
removeClass length 2n3_a
removeClass length 2n3_b
removeClass length 3n4_a
removeClass length 3n4_b
removeClass length 3n4_c
removeClass length 4n5_a
removeClass length 4n5_b
removeClass length 4n5_c
removeClass length 4n5_d

removeClass cursor back5

show page2
show page3
show page4
[/script]
[/nobr]

 

[VALEN T.]

mobile-friendly

3 tabs (circles)

hidden scroll

character sheet

interest check

keep credit

[class="some"]height: calc(100% - 10px); width: 100%; background: #622224; position: relative; margin-top: 5px; color: #F7F1DF; 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="thing"]height: 100%; width: 100%; background: #622224; color: #F7F1DF; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 135%; line-height: 140%; text-align: center; font-weight: bolder; display: flex; align-items: center; flex-direction: column; justify-content: center; letter-spacing: 4px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class] [div class="thing"] take it and run
click !

[class name="thing" state="hover"] text-shadow: 4px 4px 2px black; [/class] [class="just"]opacity: 0;[/class] [script class="thing" on="click"] fadeIn 1800 some addClass just thing [/script] [div class="some"] [class="like"]font-weight: bold; cursor: pointer; display: inline-block;[/class] [script class="like" on="click"] fadeOut 200 some removeClass just thing [/script]

[div class="like"]back​

​

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

holy shit it's been actual aeons since i've been online.

i was making a new quick partner search uncoded and that bothered me so this started and...yeah, it's beautiful in my humble opinion (':

y'all have no idea how much i'd forgotten about classes and scripts and coding in general but a day later this has finally come together

the code:

•

click/tap on any of the three circles to access the different tabs

•

there's a hidden scroll on each tab

•

in order to go back to the "main" page, click the picture in the tab !

i didn't leave a blank template this time because i got lazy :/ however the COMMENTs i left throughtout should be plenty helpful to anyone who wants to use the code

it goes without saying but don't remove credit or i'll be vv angy ):<

i took inspiration from / ripped off this picture so coming clean about that right now dklfhdh [/div] [/div] [/div]

#FFFFFF

#D6D3CC

#9C9787

#948777

#806D62

#5D544A

#625E54

#50443D

#342A29

#000000

[div class="circle_1"]

[div class="text_holder"] [div class="pink"]

[div class="brown_1"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.

[/div] [div class="orange"][div class="tape"][/div][/div] [div class="brown_2"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.

[/div] [div class="plum"][/div] [div class="yellow"][/div] [div class="brown_3"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.

[/div] [div class="white"]dazzling haze, a mysterious way about you[/div] [/div] [div class="circle_2"][/div] [div class="circle_3"][/div] [/div] [/div]

code by VALEN T.

[class="cut"] overflow: hidden; [/class] [class="pointer"] cursor: pointer; opacity: 0.8; [/class] [class="pink"] position: absolute; background: url(https://66.media.tumblr.com/d83207eae0d0279b8cf783e9e1f73f3d/tumblr_pcp20hOIFU1vgokhlo1_500.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 62%; height: 40%; left: -41%; top: 6.5%; transform: translate(41%, -6.5%); z-index: 3; [/class] [class="orange"] position: absolute; background: url(https://66.media.tumblr.com/e1bf44224628ce6e2e7e944585ae9d0d/tumblr_pcp20hOIFU1vgokhlo9_400.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 49%; height: 55.5%; top: 31.5%; left: 106%; transform: translate(-106%, -31.5%); z-index: 4; [/class] [class="plum"] position: absolute; background: url(https://66.media.tumblr.com/98c1aad5aae2077e68b81ea544824688/tumblr_pcp20hOIFU1vgokhlo4_1280.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 55%; height: 39%; top: 61.75%; left: 50%; transform: translate(-50%, -61.75%); z-index: 5; [/class] [class="yellow"] position: absolute; background: url(https://66.media.tumblr.com/12657289fb029db414aa9a9cd2c21cec/tumblr_pcp20hOIFU1vgokhlo6_500.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; width: 48%; height: 33%; top: 90.5%; left: 0; transform: translate(0, -90.5%); z-index: 6; [/class] [class="white"] position: absolute; width: 45%; height: 19%; top: 94.5%; left: 87%; transform: translate(-87%, -94.5%); z-index: 6; box-sizing: border-box; padding: 2% 0 0 5%; color: black; font-size: 85%; line-height: 95%; z-index: 7; [/class] [class="circle_1"] --first-circle-colour: #806D62; position: absolute; border-radius: 100%; height: 60px; width: 60px; background: var(--first-circle-colour); top: 50%; left: 3.5%; transform: translate(-3.5%, -50%); z-index: 8; [/class] [class="text_holder"] position: absolute; width: 72.5%; height: 90.5%; z-index: 1; left: calc(100% - 5%); top: 50%; transform: translate(-100%, -50%); [/class] [class="circle_2"] --second-circle-colour: #948777; position: absolute; border-radius: 100%; height: 60px; width: 60px; background: var(--second-circle-colour); top: 70%; left: 3.5%; transform: translate(-3.5%, -70%); z-index: 8; [/class] [class="circle_3"] --third-circle-colour: #9C9787; position: absolute; border-radius: 100%; height: 60px; width: 60px; background: var(--third-circle-colour); top: 90%; left: 3.5%; transform: translate(-3.5%, -90%); z-index: 8; [/class] [class="tape"] background: url(https://lh3.googleusercontent.com/proxy/5o8Ax84WLvPQBmRVIbI_sWVaTk3T5mChOm57zghX0ziTjQ0Gz7UIPL6uX9Sx2siqyObc0TUk1UNvcupevuWfvC98iPwJGAEriIHtmloigFA); background-size: cover; background-repeat: no-repeat; height: 68px; width: 75px; position: absolute; z-index: 6; left: 17%; top: -27%; transform: rotate(-45deg) translate(-17%, 27%); [/class] [class="brown_1"] --page-1-colour: #806D62; background: var(--page-1-colour); position: absolute; width: 100%; height: 100%; z-index: 2; display: none; [/class] [class="brown_2"] --page-2-colour: #948777; background: var(--page-2-colour); position: absolute; width: 100%; height: 100%; z-index: 2; display: none; [/class] [class="brown_3"] --page-3-colour: #9C9787; background: var(--page-3-colour); position: absolute; width: 100%; height: 100%; z-index: 2; display: none; [/class] [class name="pink" state="hover"] opacity: 0.6; [/class] [class name="orange" state="hover"] opacity: 0.6; [/class] [class name="plum" state="hover"] opacity: 0.6; [/class] [class name="yellow" state="hover"] opacity: 0.6; [/class] [class name="circle_1" state="hover"] --first-circle-hover-colour: #50443D; background: var(--first-circle-hover-colour); cursor: pointer; [/class] [script class="circle_1" on="click"] addClass pointer pink removeClass pointer orange removeClass pointer yellow addClass cut text_holder fadeIn 700 pink fadeOut 700 orange fadeOut 700 plum fadeOut 700 yellow fadeOut 700 white fadeOut 700 circle_1 fadeIn 700 circle_2 fadeIn 700 circle_3 fadeIn 700 tape fadeIn 700 brown_1 fadeOut 700 brown_2 fadeOut 700 brown_3 [/script] [script class="pink" on="click"] removeClass cut text_holder removeClass pointer pink fadeIn 700 orange fadeIn 700 plum fadeIn 700 yellow fadeIn 700 white fadeIn 700 circle_1 fadeIn 700 tape fadeOut 700 brown_1 [/script] [class name="circle_2" state="hover"] --second-circle-hover-colour: #5D544A; cursor: pointer; background: var(--second-circle-hover-colour); [/class] [script class="circle_2" on="click"] addClass pointer orange removeClass pointer pink removeClass pointer yellow addClass cut text_holder fadeIn 700 orange fadeOut 700 pink fadeOut 700 yellow fadeOut 700 plum fadeOut 700 white fadeOut 700 circle_2 fadeIn 700 circle_1 fadeIn 700 circle_3 fadeOut 700 tape fadeOut 700 brown_1 fadeIn 700 brown_2 fadeOut 700 brown_3 [/script] [script class="orange" on="click"] removeClass cut text_holder removeClass pointer orange fadeIn 700 pink fadeIn 700 plum fadeIn 700 yellow fadeIn 700 white fadeIn 700 circle_2 fadeIn 700 tape fadeOut 700 brown_2 [/script] [class name="circle_3" state="hover"] --third-circle-hover-colour: #625E54; cursor: pointer; background: var(--third-circle-hover-colour); [/class] [script class="circle_3" on="click"] addClass pointer yellow removeClass pointer pink removeClass pointer orange addClass cut text_holder fadeIn 700 yellow fadeOut 700 pink fadeOut 700 plum fadeOut 700 orange fadeOut 700 white fadeOut 700 circle_3 fadeIn 700 circle_1 fadeIn 700 circle_2 fadeIn 700 tape fadeOut 700 brown_1 fadeOut 700 brown_2 fadeIn 700 brown_3 [/script] [script class="yellow" on="click"] removeClass cut text_holder removeClass pointer yellow fadeIn 700 pink fadeIn 700 orange fadeIn 700 plum fadeIn 700 white fadeIn 700 tape fadeIn 700 circle_3 fadeOut 700 brown_3 [/script]

Spoiler: code

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

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

Spoiler

[nobr]
[COMMENT]-----------------------------the actual code-----------------------------[/COMMENT]


[COMMENT]here the colour value for the "border" is colour for the...well, border obviously kfdhfk[/COMMENT]

[div=
margin: auto;
position: relative;
max-width: 410px;
height: 460px;
box-sizing: border-box;
border: 5px solid #342A29;
padding: 2%;
cursor: default;]


[COMMENT]here the colour value for the "background" is background colour for the the whole code (everything inside the border)[/COMMENT]

[div=
height: 100%;
width: 100%;
position: relative;
background: #D6D3CC;
box-sizing: border-box;]

[div class="circle_1"][/div]

[div class="text_holder"]

[div class="pink"][/div]


[COMMENT]here is where your details for the first circle/tab/page go[/COMMENT]

[div class="brown_1"]
[div=width: 88%; left: 6%; bottom: 4%; height: 92%; position: absolute; opacity: 0.7; overflow: hidden;][div=width: 200%; height: 100%; overflow: hidden; position: relative;][div=width: 100%; height: 100%; overflow: auto; position: relative;][div=height: 46%; width: 100%;][/div][div=width: 50%; height: auto; position: relative; text-align: justify; font-size: 80%; color: white;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.
[/div][/div][/div][/div]
[/div]

[div class="orange"][div class="tape"][/div][/div]


[COMMENT]here is where your details for the second circle/tab/page go[/COMMENT]

[div class="brown_2"]
[div=width: 88%; left: 6%; bottom: 4%; height: 92%; position: absolute; opacity: 0.7; overflow: hidden;][div=width: 200%; height: 100%; overflow: hidden; position: relative;][div=width: 100%; height: 100%; overflow: auto; position: relative;][div=height: 74%; width: 100%;][/div][div=width: 50%; height: auto; position: relative; text-align: justify; font-size: 80%; color: white;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.
[/div][/div][/div][/div]
[/div]

[div class="plum"][/div]

[div class="yellow"][/div]


[COMMENT]here is where your details for the third circle/tab/page go[/COMMENT]

[div class="brown_3"]
[div=width: 88%; left: 6%; bottom: 4%; height: 92%; position: absolute; opacity: 0.7; overflow: hidden;][div=width: 200%; height: 100%; overflow: hidden; position: relative;][div=width: 100%; height: 100%; overflow: auto; position: relative;][div=width: 50%; height: auto; position: relative; text-align: justify; font-size: 80%; color: white;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet eu tellus a viverra. Ut eu diam sed sem suscipit dapibus. Proin commodo rutrum varius. Nulla hendrerit velit lorem, vel viverra odio bibendum quis. In rutrum sagittis urna, id ornare nibh molestie ac. Sed vestibulum lorem vitae eros scelerisque eleifend. Quisque ac nisi ante. Aliquam dapibus mauris quis justo rutrum dictum a eget metus. Cras ultrices augue a pulvinar luctus. Vivamus sodales maximus eleifend. Proin ultrices et justo quis ornare. Curabitur id ligula vitae nisi consequat scelerisque ac eget urna. Curabitur dictum leo in dapibus viverra. Praesent vitae consectetur ligula. Integer in mollis est, id vestibulum nisl. In vulputate pretium suscipit. Suspendisse dictum, libero eu accumsan suscipit, lacus mauris hendrerit nisi, at fringilla quam massa a dolor. Sed metus ipsum, consequat non velit sed, consequat tempor magna. Maecenas euismod lectus sapien, eget bibendum risus porttitor non. Duis ante tortor, dapibus sit amet odio vel, convallis vulputate ante. Integer maximus, lacus id varius eleifend, nisl lacus aliquet nisl, ut elementum sem ipsum a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec turpis sapien, elementum sit amet nunc at, porta laoreet orci. Quisque lacus dolor, efficitur id venenatis vitae, rhoncus ut sapien. Maecenas aliquam quam vel ultrices faucibus. Curabitur nunc dolor, dignissim vel eros vel, fermentum aliquet lectus. Cras vitae semper leo, a maximus urna. Vestibulum id commodo est. Proin a maximus est. Mauris ac sodales elit, nec finibus magna. In scelerisque dui vitae laoreet efficitur. Pellentesque ut luctus enim. Mauris libero risus, dapibus in fermentum nec, efficitur sit amet nunc. Aliquam erat volutpat. Praesent mollis lacus in tellus bibendum venenatis.
[/div][div=height: 42%; width: 100%;][/div][/div][/div][/div]
[/div]


[COMMENT]here is where the lyric/quote goes (it's on the bottom right of the code.) keep it short.[/COMMENT]

[div class="white"][font=Parisienne]dazzling haze, a mysterious way about you[/font][/div]

[/div]

[div class="circle_2"][/div]

[div class="circle_3"][/div]

[/div]

[/div]

[div=
text-align: center;
height: auto;
width: auto;
position: relative;][div=font-size: 47%;]code by [USER=68743]@fudgecakez[/USER][/div][/div]





[COMMENT]-----------------------------the classes-----------------------------[/COMMENT]

[class="cut"]
overflow: hidden;
[/class]

[class="pointer"]
cursor: pointer;
opacity: 0.8;
[/class]


[COMMENT]this is the picture on the top left picture. the url input should be of the image you want. "background-position" can be changed depending on which part of your image you want to it show (the first number is the x value, the second is the y value.) similarly, "background-size" can be changed as well (% and px values both work)[/COMMENT]

[class="pink"]
position: absolute;
background: url(https://66.media.tumblr.com/d83207eae0d0279b8cf783e9e1f73f3d/tumblr_pcp20hOIFU1vgokhlo1_500.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 62%;
height: 40%;
left: -41%;
top: 6.5%;
transform: translate(41%, -6.5%);
z-index: 3;
[/class]


[COMMENT]this is the right-most picture. the url input should be of the image you want. "background-position" can be changed depending on which part of your image you want to it show (the first number is the x value, the second is the y value.) similarly, "background-size" can be changed as well (% and px values both work)[/COMMENT]

[class="orange"]
position: absolute;
background: url(https://66.media.tumblr.com/e1bf44224628ce6e2e7e944585ae9d0d/tumblr_pcp20hOIFU1vgokhlo9_400.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 49%;
height: 55.5%;
top: 31.5%;
left: 106%;
transform: translate(-106%, -31.5%);
z-index: 4;
[/class]


[COMMENT]this is the picture in the middle. the url input should be of the image you want. "background-position" can be changed depending on which part of your image you want to it show (the first number is the x value, the second is the y value.) similarly, "background-size" can be changed as well (% and px values both work)[/COMMENT]

[class="plum"]
position: absolute;
background: url(https://66.media.tumblr.com/98c1aad5aae2077e68b81ea544824688/tumblr_pcp20hOIFU1vgokhlo4_1280.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 55%;
height: 39%;
top: 61.75%;
left: 50%;
transform: translate(-50%, -61.75%);
z-index: 5;
[/class]


[COMMENT]this is the picture on the bottom left. the url input should be of the image you want. "background-position" can be changed depending on which part of your image you want to it show (the first number is the x value, the second is the y value.) similarly, "background-size" can be changed as well (% and px values both work)[/COMMENT]

[class="yellow"]
position: absolute;
background: url(https://66.media.tumblr.com/12657289fb029db414aa9a9cd2c21cec/tumblr_pcp20hOIFU1vgokhlo6_500.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 48%;
height: 33%;
top: 90.5%;
left: 0;
transform: translate(0, -90.5%);
z-index: 6;
[/class]


[COMMENT]this is the box that contains the short lyric/quote (on the bottom right.) feel free to change the height but be careful to keep the values of "top" "left" and "transform: translate" consistent even if you have to change them[/COMMENT]

[class="white"]
position: absolute;
width: 45%;
height: 19%;
top: 94.5%;
left: 87%;
transform: translate(-87%, -94.5%);
z-index: 6;
box-sizing: border-box;
padding: 2% 0 0 5%;
color: black;
font-size: 85%;
line-height: 95%;
z-index: 7;
[/class]


[COMMENT]this is the first circle. the input for "--first-circle-colour" should be the colour you want the first circle to be...obviously kfhkdh[/COMMENT]

[class="circle_1"]
--first-circle-colour: #806D62;
position: absolute;
border-radius: 100%;
height: 60px;
width: 60px;
background: var(--first-circle-colour);
top: 50%;
left: 3.5%;
transform: translate(-3.5%, -50%);
z-index: 8;
[/class]

[class="text_holder"]
position: absolute;
width: 72.5%;
height: 90.5%;
z-index: 1;
left: calc(100% - 5%);
top: 50%;
transform: translate(-100%, -50%);
[/class]


[COMMENT]this is the second circle. the input for "--second-circle-colour" should be the colour you want the second circle to be...obviously kfhkdh[/COMMENT]

[class="circle_2"]
--second-circle-colour: #948777;
position: absolute;
border-radius: 100%;
height: 60px;
width: 60px;
background: var(--second-circle-colour);
top: 70%;
left: 3.5%;
transform: translate(-3.5%, -70%);
z-index: 8;
[/class]


[COMMENT]this is the second circle. the input for "--third-circle-colour" should be the colour you want the third circle to be...obviously kfhkdh[/COMMENT]

[class="circle_3"]
--third-circle-colour: #9C9787;
position: absolute;
border-radius: 100%;
height: 60px;
width: 60px;
background: var(--third-circle-colour);
top: 90%;
left: 3.5%;
transform: translate(-3.5%, -90%);
z-index: 8;
[/class]

[class="tape"]
background: url(https://lh3.googleusercontent.com/proxy/5o8Ax84WLvPQBmRVIbI_sWVaTk3T5mChOm57zghX0ziTjQ0Gz7UIPL6uX9Sx2siqyObc0TUk1UNvcupevuWfvC98iPwJGAEriIHtmloigFA);
background-size: cover;
background-repeat: no-repeat;
height: 68px;
width: 75px;
position: absolute;
z-index: 6;
left: 17%;
top: -27%;
transform: rotate(-45deg) translate(-17%, 27%);
[/class]


[COMMENT]this is the page/tab that shows up when you click the first circle. the input for "--page-1-colour" is the colour you want it to be. i recommend matching the colours for "--first-circle-colour" and "--page-1-colour" because it looks nice[/COMMENT]

[class="brown_1"]
--page-1-colour: #806D62;
background: var(--page-1-colour);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
display: none;
[/class]


[COMMENT]this is the page/tab that shows up when you click the second circle. the input for "--page-2-colour" is the colour you want it to be. i recommend matching the colours for "--second-circle-colour" and "--page-2-colour" because it looks nice[/COMMENT]

[class="brown_2"]
--page-2-colour: #948777;
background: var(--page-2-colour);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
display: none;
[/class]


[COMMENT]this is the page/tab that shows up when you click the third circle. the input for "--page-3-colour" is the colour you want it to be. i recommend matching the colours for "--third-circle-colour" and "--page-3-colour" because it looks nice[/COMMENT]

[class="brown_3"]
--page-3-colour: #9C9787;
background: var(--page-3-colour);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
display: none;
[/class]





[COMMENT]-----------------------------the scripts and actions-----------------------------[/COMMENT]

[class name="pink" state="hover"]
opacity: 0.6;
[/class]

[class name="orange" state="hover"]
opacity: 0.6;
[/class]

[class name="plum" state="hover"]
opacity: 0.6;
[/class]

[class name="yellow" state="hover"]
opacity: 0.6;
[/class]


[COMMENT]the input for "--first-circle-hover-colour" should be the colour you want the first circle's colour to be when you hover over it[/COMMENT]

[class name="circle_1" state="hover"]
--first-circle-hover-colour: #50443D;
background: var(--first-circle-hover-colour);
cursor: pointer;
[/class]

[script class="circle_1" on="click"]
addClass pointer pink
removeClass pointer orange
removeClass pointer yellow
addClass cut text_holder
fadeIn 700 pink
fadeOut 700 orange
fadeOut 700 plum
fadeOut 700 yellow
fadeOut 700 white
fadeOut 700 circle_1
fadeIn 700 circle_2
fadeIn 700 circle_3
fadeIn 700 tape
fadeIn 700 brown_1
fadeOut 700 brown_2
fadeOut 700 brown_3
[/script]

[script class="pink" on="click"]
removeClass cut text_holder
removeClass pointer pink
fadeIn 700 orange
fadeIn 700 plum
fadeIn 700 yellow
fadeIn 700 white
fadeIn 700 circle_1
fadeIn 700 tape
fadeOut 700 brown_1
[/script]


[COMMENT]the input for "--second-circle-hover-colour" should be the colour you want the second circle's colour to be when you hover over it[/COMMENT]

[class name="circle_2" state="hover"]
--second-circle-hover-colour: #5D544A;
cursor: pointer;
background: var(--second-circle-hover-colour);
[/class]

[script class="circle_2" on="click"]
addClass pointer orange
removeClass pointer pink
removeClass pointer yellow
addClass cut text_holder
fadeIn 700 orange
fadeOut 700 pink
fadeOut 700 yellow
fadeOut 700 plum
fadeOut 700 white
fadeOut 700 circle_2
fadeIn 700 circle_1
fadeIn 700 circle_3
fadeOut 700 tape
fadeOut 700 brown_1
fadeIn 700 brown_2
fadeOut 700 brown_3
[/script]

[script class="orange" on="click"]
removeClass cut text_holder
removeClass pointer orange
fadeIn 700 pink
fadeIn 700 plum
fadeIn 700 yellow
fadeIn 700 white
fadeIn 700 circle_2
fadeIn 700 tape
fadeOut 700 brown_2
[/script]


[COMMENT]the input for "--third-circle-hover-colour" should be the colour you want the third circle's colour to be when you hover over it[/COMMENT]

[class name="circle_3" state="hover"]
--third-circle-hover-colour: #625E54;
cursor: pointer;
background: var(--third-circle-hover-colour);
[/class]

[script class="circle_3" on="click"]
addClass pointer yellow
removeClass pointer pink
removeClass pointer orange
addClass cut text_holder
fadeIn 700 yellow
fadeOut 700 pink
fadeOut 700 plum
fadeOut 700 orange
fadeOut 700 white
fadeOut 700 circle_3
fadeIn 700 circle_1
fadeIn 700 circle_2
fadeIn 700 tape
fadeOut 700 brown_1
fadeOut 700 brown_2
fadeIn 700 brown_3
[/script]

[script class="yellow" on="click"]
removeClass cut text_holder
removeClass pointer yellow
fadeIn 700 pink
fadeIn 700 orange
fadeIn 700 plum
fadeIn 700 white
fadeIn 700 tape
fadeIn 700 circle_3
fadeOut 700 brown_3
[/script]
[/nobr]

Spoiler: come look !!!!!

i may have gotten a bit over-zealous and made tons of templates so...pls marvel at them: