[ is your sunshine like my rain ]

6 | in noir
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. 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. 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]
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:

Code:
[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]
 
Last edited:
hi fudge !! so the can’t risk falling for you code is gorgeous and so aesthetically pleasing that i gotta use it.

your codes are amazing ok.
 
Ohhhh... your works made my heart skip! <3 they're so lovely!! I will likely be using one or more of them if it's okay, will definitely credit you!

I literally jumped when i clicked the 'more' button in In Noir, i mean i saw it coming but it was still a lovely surprise!

Edit: OH, and I'd like to add that I'm super grateful for your helpful little comments! They're super useful and easy to understand for 10 IQ apes like me <3
Lekiel Lekiel
 
Last edited:
Ohhhh... your works made my heart skip! <3 they're so lovely!! I will likely be using one or more of them if it's okay, will definitely credit you!
your comment literally made my day thank you so much 😭 💚
and yes ofc they're all free to use !!

super grateful for your helpful little comments! They're super useful and easy to understand
no problemo love 💙
if you still have any questions or issues, my pms are always open !
 
7 | somewhere far away from here
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. 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]
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:

Code:
[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]
 
Last edited:
tried clicking all the stars and couldn't find one that would take me back-
so uhm
that's actually one of the drawbacks this one has: you can't click more than one star at a time bc then the slide just...won't show.
i'm going to work on fixing that as soon as...i have inspiration to do so sdhgsd :cries:


are your codes the square root of -1? bc they can't be real ;)
MY HEART JUST DID A DOKI WHO ALLOWED U
 
so uhm
that's actually one of the drawbacks this one has: you can't click more than one star at a time bc then the slide just...won't show.
i'm going to work on fixing that as soon as...i have inspiration to do so sdhgsd :cries:

gotcha. alright! i was just asking in case you missed it c:
 
8 | take it and run
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. 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]

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:
Code:
[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]
i may have gotten a bit over-zealous and made tons of templates so...pls marvel at them:
e22053514a80a16c56aa5e8543eea1d0.jpg
97e7a4e57d0d42fea37f508f4ea0f7fa.jpg
0b6d539f4129cb88934597739a0a4c47.jpg
3f1ba4d57c66f6c01ce834a15b560331.jpg
9089bd6dbb3d8c7ec7f413a319f9f4b7.jpg
d3c1bc2234edbd2e639f5ad121c8d292.jpg
71341375960ca9e4552705a5cd42410a.jpg
 
Omg these are breath-taking, idk why I have not seen you before!!! <3
Also my heart breaks for you bcos of the upcoming update ;-; You are so talented, I hope you won't stop creating!
 
fudge, you ANIMAL *heart eyes*
shsgakdjj thank you(?!?/!&/$7)


You are so talented, I hope you won't stop creating!
aww lovie thank you <3
hmmm well i did start my whole coding journey on rpn so we’ll see what happens haha cos i know p much jackshit ab how to work css + javascript irl 😬
also u prbly haven’t seen me bc i haven’t been online in so long 😭
but again thank you 🥺♥️
 

Users who are viewing this thread

Back
Top