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