Resource ¬ FEVERDREAMS ⸥ alt × sugar

fluticasone · Apr 17, 2018

[div class=root] [div class="titleshold"] [div class="titlefiller"][/div] [div class="titlescontainer"] [div class="titlescroll"] [div class="title"] [div class="header"]fever dreams[/div] [div class="numval"]10[/div] [div class="jankbar janklvl#"][/div] [/div] [div class="title"] [div class="header"]aster & edelweiss[/div] [div class="numval"]9[/div] [div class="jankbar janklvl9"][/div] [/div] [div class="title"] [div class="header"]endgame[/div] [div class="numval"]4[/div] [div class="jankbar janklvl4"][/div] [/div] [div class="title"] [div class="header"]tab code generator[/div] [div class="numval"]7[/div] [div class="jankbar janklvl7"][/div] [/div] [div class="title"] [div class="header"]cs code generator[/div] [div class="numval"]10[/div] [div class="jankbar janklvl10"][/div] [/div] [/div] [/div] [/div] [div class="catchall"][/div] [div class="container"] [div class=filler]

[/div] [div class="charaholder bgimage"] [div class="chara sugarvineimghold"][div class="sugarvineimg"]

[/div][/div] [div class="chara alterasimghold"][div class="alterasimg"]

[/div][/div] [/div] [div class="sugarvinecontenthold"] [div class="speechbubble sugarvinebubble"]

fluticasone [div class=larrow][/div][/div] [div class="content sugarvinecontent"] [div class="subtitle sugarvinesubtitle"]MCDONALD TRASH[/div] [div class="scroll"] Is often responsible for the design side of things. I tend to think of really ambitious ideas for my works but then realize it’s beyond my capabilities. Then I run to Alteras crying for help. It’s something he’s used to at this point. In my spare time I like reverse-engineering the code he makes so I don’t have to ask for his help next time.

If you see me come up with a really great idea, it’s probably because I had Mcdonalds'. Actually, my worst ideas stem from Mcdonald’s too so uh, it can go one of two ways. At least it’s never boring whenever you feed me shitty fast food? Is that even a good thing?

Feel free to dissect the works we'll be presenting to get a better understanding of the thought process behind it. However, I highly discourage copy pasting as the shit we make is sensitive and very specific for the design. Learning for yourself is something I wholeheartedly support. Questions are very welcome, although considering the degree of jank in this thread, we'd recommend having a basic to medium understanding of CSS and BBScript.

If you want to grab some ideas for aesthetics, go right ahead? Just remember that being inspired is one thing, but copying is your death as an artist. You rob youself of developing your own style the moment you make this choice. [/div] [/div] [/div] [div class="alterascontenthold"] [div class="speechbubble alterasbubble"]

Alteras [div class=rarrow][/div][/div] [div class="content alterascontent"] [div class="subtitle alterassubtitle"]HOME COOKED DINNER?
WHAT'S THAT?[/div] [div class="scroll"] is often responsible for the coding side of things. I tend to come up with ridiculous ideas, resulting in janky designs. When they get too janky, I rely on sugarvine to make it less janky. I honestly love how much more efficient her code is, not to mention the fact that all her designs are beautiful to the nth degree. I secretly want to steal half of her designs and call it my own... wait... this workshop is for doing just that!

I like to make each of my design unique, showcasing some new and crazy effect that can be achieved. Other times, I make my designs to fit a certain mood or feel, but I often need sugarvine's help to polish it up. My ideas are sometimes a bit too much, and just to show how "too much" it is, we decided to install the "Jank-o-Meter" to every one of our designs.

While I am a big fan of explaining things, I won't be giving away the code for the designs you see here, as per my partner's wishes. Most of the stuff you'll find here are the results of sweat, blood, and lots of tears that we poured into for days and weeks. I approve of you learning how to do things, but please don't steal our works.

And yes, I do have another workshop where I take requests, but I will absolutely not accept any requests that wish to adapt the designs in this workshop. Coding is painful, why do you think we partnered up? [/div] [/div] [/div] [div class="logo"][/div] [/div] [/div] [class name=root] position: relative; width: 100%; background-color: #1d1d1d; background-image: url('https://i.imgur.com/3QMnky3.gif'); background-blend-mode: soft-light; overflow: hidden; padding-top: 20px; font-size: initial; --speech-font-size: 1.5vh; [/class] [class name=catchall] position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 17; [/class] [class name=noclicking] pointer-events: none; [/class] [class name=container] position: relative; width: 83vh; max-width: 100%; height: auto; [/class] [class name=filler] position: relative; width: 83vh; max-width: 100%; font-size: 0; visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; [/class] [class name=bgimage] background-image: url('https://i.imgur.com/6t7ZJix.png'); background-size: contain; background-repeat: no-repeat; [/class] [class name=charaholder] position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; font-size: 0; [/class] [class name=logo] position: absolute; top: 40%; left: 50%; width: 60%; padding-top: calc(60% * 438/801); transform: translateX(-50%) rotate(0deg) scale(1); transform-origin: center; z-index: 20; background-image: url('https://i.imgur.com/tMbYAWW.png'); background-size: 100%; background-repeat: no-repeat; background-position: center; transition: transform .5s 1.5s ease; cursor: pointer; [/class] [class name=logo minWidth=100vh] pointer-events: none; [/class] [class name=logohide] transition: transform .5s ease; transform: translateX(-50%) rotate(-90deg) scale(0); [/class] [class name=chara] position: relative; font-size: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; [/class] [class name=sugarvineimghold] width: 42.5%; margin-right: -9%; z-index: 13; [/class] [class name=alterasimghold] width: 47.7%; margin-left: -8.5%; z-index: 12; transition: z-index 3s; [/class] [class name=sugarvineimg] pointer-events: none; transition: filter .75s 1.25s; filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%); user-select: none; [/class] [class name=alterasimg] pointer-events: none; transition: filter .75s 1.25s; filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%); user-select: none; [/class] [class name=imghide] transition: filter .75s; filter: contrast(0) sepia(100%) hue-rotate(204.5deg) saturate(4000%) brightness(78%); [/class] [class name=sugarvineforward] animation-name: {post_id}swapsugarvineforward; animation-duration: .75s; animation-direction: normal; animation-timing-function: ease-out; animation-iteration-count: 1; animation-delay: 1.25s; animation-fill-mode: both; [/class] [class name=sugarvinebackwards] animation-name: {post_id}swapsugarvinebackwards; animation-duration: .75s; animation-direction: normal; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [class name=alterasswap] z-index: 14; transition: z-index .375s; [/class] [class name=alterasforward] animation-name: {post_id}swapalterasforward; animation-direction: normal; animation-duration: .75s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [class name=alterasbackwards] animation-name: {post_id}swapalterasbackward; animation-direction: normal; animation-duration: .75s; animation-delay: 1.25s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: both; [/class] [animation=swapalterasforward] [keyframe=0] transform: translateX(0); [/keyframe] [keyframe=49] transform: translateX(22%); [/keyframe] [keyframe=50] transform: translateX(22%); [/keyframe] [keyframe=100] transform: translateX(0); [/keyframe] [/animation] [animation=swapalterasbackward] [keyframe=0] transform: translateX(0); [/keyframe] [keyframe=49] transform: translateX(22%); [/keyframe] [keyframe=50] transform: translateX(22%); [/keyframe] [keyframe=100] transform: translateX(0); [/keyframe] [/animation] [animation=swapsugarvineforward] [keyframe=0] transform: translateX(0); [/keyframe] [keyframe=49] transform: translateX(-22%); [/keyframe] [keyframe=50] transform: translateX(-22%); [/keyframe] [keyframe=100] transform: translateX(0); [/keyframe] [/animation] [animation=swapsugarvinebackwards] [keyframe=0] transform: translateX(0); [/keyframe] [keyframe=49] transform: translateX(-22%); [/keyframe] [keyframe=50] transform: translateX(-22%); [/keyframe] [keyframe=100] transform: translateX(0); [/keyframe] [/animation] [class name=sugarvinecontenthold] position: absolute; width: 22%; min-width: 100px; height: 60%; top: calc(29.5% - 1em); left: 42.5%; z-index: 20; font-size: var(--speech-font-size); [/class] [class name=alterascontenthold] position: absolute; width: 22%; min-width: 100px; height: 60%; top: calc(29.5% - 1em); right: 47%; z-index: 20; font-size: var(--speech-font-size); [/class] [class name=speechbubble] display: block; font-family: 'Poppins'; font-weight: 900; font-size: 1.4em; color: white; position: relative; background-color: #ff22c0; padding: .5em; text-align: center; border-radius: .5em; z-index: 22; [/class] [class name=sugarvinebubble] transform-origin: -1em center; transition: transform .5s .65s; transform: rotate(90deg) scale(0); [/class] [class name=alterasbubble] transform-origin: calc(100% + 1em) center; transition: transform .5s .65s; transform: rotate(-90deg) scale(0); [/class] [class name=bubbleexpansion] transform: rotate(0) scale(1); transition: transform .5s 1.25s; [/class] [class name=larrow] position: absolute; top: 50%; transform: translateY(-50%); left: -.9em; border: .5em solid transparent; border-right: .5em solid #ff22c0; width: 0; height: 0; [/class] [class name=rarrow] position: absolute; top: 50%; transform: translateY(-50%); right: -.9em; border: .5em solid transparent; border-left: .5em solid #ff22c0; width: 0; height: 0; [/class] [class name=content] position: absolute; top: 1em; padding: 1.25em; padding-top: 3em; width: 150%; height: 100%; box-sizing: border-box; background-color: rgba(0,0,0,0.8); border-radius: .5em; color: white; z-index: 21; overflow: hidden; text-align: justify; font-size: var(--speech-font-size); transition: transform .5s ease-in-out; transform: scale(0); font-weight: 100; [/class] [class name=sugarvinecontent] left: 1em; transform-origin: top left; [/class] [class name=alterascontent] right: 1em; transform-origin: top right; [/class] [class name=contentexpansion] transition: transform .5s ease-in-out 1.9s; transform: scale(1); [/class] [class name=subtitle] position: absolute; width: 40%; height: 7%; top: 0; text-align: left; box-sizing: border-box; font-size: .4em; display: flex; align-items: center; justify-content: center; padding: 8px 5px 5px 5px; font-weight: bold; [/class] [class name=sugarvinesubtitle] right: 0; [/class] [class name=alterassubtitle] left: 0; [/class] [class name=scroll] font-size: .8em; font-weight: normal; font-family: 'Poppins'; overflow-Y: scroll; overflow-X: hidden; padding-right: 150px; position: relative; width: 100%; height: 100%; [/class] [class name=titleshold] position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-flow: row wrap; justify-content: stretch; align-content: start; [/class] [class name=titlefiller] position: relative; width: 83vh; max-width: calc(100% - 50px); height: 0; [/class] [class name=titlescontainer] position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; min-width: 100px; [/class] [class name=titlescroll] position: absolute; height: 65%; width: 100%; padding-right: 150px; overflow-Y: scroll; display: flex; flex-flow: row wrap; justify-content: center; align-items: start; align-content: start; font-size: calc(1.4 * var(--speech-font-size) ); z-index: 10; pointer-events: none; margin-left: -7.5%; [/class] [class name=titlescroll maxWidth=100vh] z-index: -1; opacity: 0; transition: all .75s; align-items: center; align-content: center; margin-left: 0px; [/class] [class name=titlescrollshow] z-index: 30; opacity: 1; transition: opacity .75s; [/class] [class name=title] position: relative; width: 500px; max-width: calc(100% - 20px); box-sizing: border-box; height: auto; margin-bottom: 10px; padding: 15px; display: grid; background-color: rgba(29, 29, 29,0.8); border: 0px solid black; border-radius: 10px; grid-template-columns: calc(1.5em + 5px) 1fr; grid-template-rows: 1.5em 5px; grid-template-areas: 'num title' 'num bar'; grid-column-gap: 10px; pointer-events: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; white-space: nowrap; [/class] [class name=numval] position: relative; grid-area: num; display: flex; justify-content: center; align-items: center; border: 0 solid black; border-radius: 50%; background-color: #ff22c0; color: white; font-family: 'Poppins'; font-weight: 900; font-size: 1em; line-height: 2em; [/class] [class name=header] position: relative; grid-area: title; color: white; font-family: 'Poppins'; font-weight: 900; padding-left: .5%; [/class] [class name=jankbar] position: relative; grid-area: bar; border-radius: 5px; --block1: #b9fc49; --block2: #a7f55a; --block3: #95ee6c; --block4: #83e77d; --block5: #71e08f; --block6: #5ed8a0; --block7: #4cd1b2; --block8: #3acac3; --block9: #28c3d5; --block10: #16bce6; --blocknul: #989898; background-image: linear-gradient(to right, var(--block1) calc(10% - 2px), transparent calc(10% - 2px), transparent 10%, var(--block2) 10%, var(--block2) calc(20% - 2px), transparent calc(20% - 2px), transparent 20%, var(--block3) 20%, var(--block3) calc(30% - 2px), transparent calc(30% - 2px), transparent 30%, var(--block4) 30%, var(--block4) calc(40% - 2px), transparent calc(40% - 2px), transparent 40%, var(--block5) 40%, var(--block5) calc(50% - 2px), transparent calc(50% - 2px), transparent 50%, var(--block6) 50%, var(--block6) calc(60% - 2px), transparent calc(60% - 2px), transparent 60%, var(--block7) 60%, var(--block7) calc(70% - 2px), transparent calc(70% - 2px), transparent 70%, var(--block8) 70%, var(--block8) calc(80% - 2px), transparent calc(80% - 2px), transparent 80%, var(--block9) 80%, var(--block9) calc(90% - 2px), transparent calc(90% - 2px), transparent 90%, var(--block10) 90%); [/class] [class name=janklvl0] --block1: var(--blocknul); --block2: var(--blocknul); --block3: var(--blocknul); --block4: var(--blocknul); --block5: var(--blocknul); --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl1] --block2: var(--blocknul); --block3: var(--blocknul); --block4: var(--blocknul); --block5: var(--blocknul); --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl2] --block3: var(--blocknul); --block4: var(--blocknul); --block5: var(--blocknul); --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl3] --block4: var(--blocknul); --block5: var(--blocknul); --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl4] --block5: var(--blocknul); --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl5] --block6: var(--blocknul); --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl6] --block7: var(--blocknul); --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl7] --block8: var(--blocknul); --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl8] --block9: var(--blocknul); --block10: var(--blocknul); [/class] [class name=janklvl9] --block10: var(--blocknul); [/class] [script class=loadin version=2] (addClass "noclicking" "sugarvinecontenthold") (addClass "noclicking" "alterascontenthold") (addClass "noclicking" "catchall") [/script] [script class=logo version=2 on=click] (addClass "logohide" "logo") (addClass "titlescrollshow" "titlescroll") (removeClass "sugarvineforward" "sugarvineimghold") (addClass "sugarvinebackwards" "sugarvineimghold") (addClass "alterasforward" "alterasimghold") (removeClass "alterasbackwards" "alterasimghold") (removeClass "noclicking" "catchall") [/script] [script class=alterasimghold version=2 on=click] (addClass "logohide" "logo") (removeClass "sugarvineforward" "sugarvineimghold") (addClass "sugarvinebackwards" "sugarvineimghold") (addClass "alterasforward" "alterasimghold") (addClass "alterasswap" "alterasimghold") (removeClass "alterasbackwards" "alterasimghold") (addClass "imghide" "sugarvineimg") (addClass "bubbleexpansion" "alterasbubble") (addClass "contentexpansion" "alterascontent") (removeClass "noclicking" "alterascontenthold") (removeClass "noclicking" "catchall") [/script] [script class=sugarvineimghold version=2 on=click] (addClass "logohide" "logo") (removeClass "sugarvineforward" "sugarvineimghold") (addClass "sugarvinebackwards" "sugarvineimghold") (addClass "alterasforward" "alterasimghold") (removeClass "alterasbackwards" "alterasimghold") (addClass "imghide" "alterasimg") (addClass "bubbleexpansion" "sugarvinebubble") (addClass "contentexpansion" "sugarvinecontent") (removeClass "noclicking" "sugarvinecontenthold") (removeClass "noclicking" "catchall") [/script] [script class=catchall version=2 on=click] (removeClass "logohide" "logo") (removeClass "titlescrollshow" "titlescroll") (removeClass "sugarvinebackwards" "sugarvineimghold") (addClass "sugarvineforward" "sugarvineimghold") (addClass "alterasbackwards" "alterasimghold") (removeClass "alterasswap" "alterasimghold") (removeClass "alterasforward" "alterasimghold") (removeClass "imghide" "sugarvineimg") (removeClass "imghide" "alterasimg") (removeClass "bubbleexpansion" "alterasbubble") (removeClass "contentexpansion" "alterascontent") (removeClass "bubbleexpansion" "sugarvinebubble") (removeClass "contentexpansion" "sugarvinecontent") (addClass "noclicking" "sugarvinecontenthold") (addClass "noclicking" "alterascontenthold") (addClass "noclicking" "catchall") [/script]

Alteras · Apr 17, 2018

[div class="root"][div class="leftside"] [div class="scroll"] [div class="flexwrapper"] [div class="scroll"] [div class="scrollitem"] [div class="title"] #feverdreams [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] once you post this on your showcase "@sugarvine is a slave driver with a v specific vision that is both blessing and curse"
i can literally tell you how i want each area to interact
[/div] [div class="textbox textbox2"] lmao [/div] [div class="textbox textbox2"] dies [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]this is what torture is, when you see the solution, when you see the path to the solution, but you also know the path goes through a minefield. [/div] [div class="textbox textbox2"] LOL [/div] [div class="textbox textbox2"] nooo, don't die, I need to know what the values are!! [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] one of the notable quotes from this project
the other being
"mcdonalds fuels fever dreams" [/div] [/div] [div class="monoicon"] [/div] [/div] [/div] [/div] [/div] [/div] [/div][div class="rightside"][div class="flexwrapper" style="padding: 30px;"][div class="scroll"][div class="scrollitem"]Welcome to Fever Dreams, a BBCode Workshop Collaboration between

fluticasone and me,

Alteras !!! This actually started out as a joke when we were helping each other with our own designs, but then the more we joked about it, the more we started to add detail to it. That conversation you see there, that actually happened. Here is proof:

[div class=codebutton]Conversation[/div][div class="code proofspoil"]

Screen_Shot_2018-04-16_at_2.36.11_PM.png

[/div]

This bbcode design is by far the most complex I've ever coded before, utilizing a lot of flexboxes, z-index trickery, media queries, and CSS Animations. This 100% deserves the Level 10 Jank Rating. In this explanation, I'll only cover parts of the major sections, since this single code caused the two of us so much pain.

Animations
While there is quite the amount of CSS Transitions being used here, the biggest animation you see, where our two characters split apart and come back together, is done using CSS Animations and Keyframes. Here is the core of it:

[div class=codebutton]Animations and Keyframes[/div][div class="code animationspoil"]
[class name=sugarvineforward]
animation-name: {post_id}swapsugarvineforward;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-delay: 1.25s;
animation-fill-mode: both;
[/class]

[class name=sugarvinebackwards]
animation-name: {post_id}swapsugarvinebackwards;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasswap]
z-index: 14;
transition: z-index .375s;
[/class]

[class name=alterasforward]
animation-name: {post_id}swapalterasforward;
animation-direction: normal;
animation-duration: .75s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasbackwards]
animation-name: {post_id}swapalterasbackward;
animation-direction: normal;
animation-duration: .75s;
animation-delay: 1.25s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=swapalterasforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapalterasbackward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvineforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvinebackwards]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]
[/div]

As you can see in the keyframes, CSS Animations are able to have the same animation at multiple frames, giving it a lot more flexibility than Transitions. The way the animations are triggered is the same way that CSS Transitions get triggered, by adding them to the class. However the problem is that you can't trigger the same animation two times in a row, so we've had to duplicate the animations for both ways. It's a bit messy, but it is well worth it. We used transform instead of margin-left and margin-right so that we can achieve a smoother animation, since animating transform doesn't cause the browser to reformat everything. I'll will be explaining more on how to make CSS Animations in a guide in the future.

Media Queries and Device Adaptiveness
One of the cool things you'll find is that this code is actually mobile friendly— no, it would be more accurate to say made with mobile devices in mind first. Through a large amount of flexboxes and max min trickery, it will change itself to be the most presentable in any case. This is done on the fact that everything in this code is based on one single number, 83vh. We set the width of the main box to 83vh, and since the image was square shaped, we were able to have it translate well into percentages. Every single div inside uses either a percentage or a vh value, including the font-size. However, we recognized that there will be cases where 83vh is too large for a device, so we took advantage of that and designed it so that when it isn't, the code automatically switches over to mobile mode.

This is achieved using media queries and flexboxes. With flexboxes, what we ended up doing was making a dumby div the exact width of what the main div would be and a height of 0, and giving it a flex-flow: row wrap. That way, when there isn't enough room for the titles to be displayed, it'll wrap around below the dumby div, but since the dumby div has a height of 0, it'll actually be displayed on top of the main div. The problem was that we didn't want the titles to be display all the time like we did with the desktop version, so we used Media Queries.

Media Queries are a new addition of BBCode. It's syntax is as follows: [class name=Name minWidth= Length maxWidth=Length state=Effect]. What we specifically had was this:

[div class=codebutton]Media Queries[/div][div class="code mediaspoil"]
[class name=logo]
position: absolute;
top: 40%;
left: 50%;
width: 60%;
padding-top: calc(60% * 438/801);
transform: translateX(-50%) rotate(0deg) scale(1);
transform-origin: center;
z-index: 20;
background-image: url('https://i.imgur.com/tMbYAWW.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: transform .5s 1.5s ease;
cursor: pointer;
[/class]

[class name=logo minWidth=100vh]
pointer-events: none;
[/class]

[class name=titlescroll]
position: absolute;
height: 65%;
width: 100%;
padding-right: 150px;
overflow-Y: scroll;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: start;
align-content: start;
font-size: calc(1.4 * var(--speech-font-size) );
z-index: 10;
pointer-events: none;
margin-left: -7.5%;
[/class]

[class name=titlescroll maxWidth=100vh]
z-index: -1;
transform: scale(0);
transition: all .75s;
align-items: center;
align-content: center;
margin-left: 0px;
[/class]
[/div]

As you can see, we had them set to 100vh, meaning that if the width of the device was at some width in relation to 100vh, it would do certain things. In this case, in the class "titlescroll," if the width of the device was less than 100vh, using the z-index, it'll hide the titles and not display it over everything else until a transition is applied. To prevent this from accidentally happening on desktop, we had it so that if the width of the device was more than 100vh, you won't be able to press the logo.

Full Code
Here is the full code for your learning:

[div class=codebutton]#feverdreams[/div][div class="code fullspoil"][nobr]

[div class=root]
[div class="titleshold"]
[div class="titlefiller"][/div]
[div class="titlescontainer"]
[div class="titlescroll"]
[comment]Template:
[div class="title"]
[url=link]
[div class="header"]fever dreams[/div]
[/url]
[div class="numval"]10[/div]
[div class="jankbar janklvl#"][/div]
[/div]
[/comment]
[div class="title"]
[url=https://www.rpnation.com/threads/alterass-bbcode-workshop.390004/page-2#post-8804463]
[div class="header"]fever dreams[/div]
[/url]
[div class="numval"]10[/div]
[div class="jankbar janklvl#"][/div]
[/div]

[div class="title"]
[url=link]
[div class="header"]jank level 5[/div]
[/url]
[div class="numval"]5[/div]
[div class="jankbar janklvl5"][/div]
[/div]

[/div]
[/div]
[/div]
[div class="catchall"][/div]
[div class="container"]
[div class=filler][img]https://i.imgur.com/e230fSc.png[/img][/div]
[div class="charaholder bgimage"]
[div class="chara sugarvineimghold"][div class="sugarvineimg"][img]https://i.imgur.com/ElkmoCE.png[/img][/div][/div]
[div class="chara alterasimghold"][div class="alterasimg"][img]https://i.imgur.com/G47CF4P.png[/img][/div][/div]
[/div]
[div class="sugarvinecontenthold"]
[div class="speechbubble sugarvinebubble"][USER=32692][div=color: white;]sugarvine[/div][/user][div class=larrow][/div][/div]
[div class="content sugarvinecontent"]
[div class="subtitle sugarvinesubtitle"]MCDONALD TRASH[/div]
[div class="scroll"]
Is often responsible for the design side of things. I tend to think of really ambitious ideas for my works but then realize it’s beyond my capabilities. Then I run to Alteras crying for help. It’s something he’s used to at this point. In my spare time I like reverse-engineering the code he makes so I don’t have to ask for his help next time.
[br][/br][br][/br]
If you see me come up with a really great idea, it’s probably because I had Mcdonalds'. Actually, my worst ideas stem from Mcdonald’s too so uh, it can go one of two ways. At least it’s never boring whenever you feed me shitty fast food? Is that even a good thing?
[br][/br][br][/br]
Feel free to dissect the works we'll be presenting to get a better understanding of the thought process behind it. However, I highly discourage copy pasting as the shit we make is sensitive and very specific for the design. Learning for yourself is something I whole-heartedly support. Questions are very welcome, although considering the degree of jank in this thread, we'd recommend having a basic to medium understanding of CSS and BBScript.
[br][/br][br][/br]
If you want to grab some ideas for aesthetics, go right ahead? Just remember that being inspired is one thing, but copying is your death as an artist. You rob youself of developing your own style the moment you make this choice.
[/div]
[/div]
[/div]
[div class="alterascontenthold"]
[div class="speechbubble alterasbubble"][USER=34809][div=color: white;]alteras[/div][/user][div class=rarrow][/div][/div]
[div class="content alterascontent"]
[div class="subtitle alterassubtitle"]HOME COOKED DINNER?[br][/br]WHAT'S THAT?[/div]
[div class="scroll"]
is often responsible for the coding side of things. I tend to come up with ridiculous ideas, resulting in janky designs. When they get too janky, I rely on sugarvine to make it less janky. I honestly love how much more efficient her code is, not to mention the fact that all her designs are beautiful to the nth degree. I secretly want to steal half of her designs and call it my own... wait... this workshop is for doing just that!
[br][/br][br][/br]
I like to make each of my design unique, showcasing some new and crazy effect that can be achieved. Other times, I make my designs to fit a certain mood or feel, but I often need sugarvine's help to polish it up. My ideas are sometimes a bit too much, and just to show how "too much" it is, we decided to install the "Jank-o-Meter" to every one of our designs.
[br][/br][br][/br]
While I am a big fan of explaining things, I won't be giving away the code for the designs you see here, as per my partner's wishes. Most of the stuff you'll find here are the results of sweat, blood, and lots of tears that we poured into for days and weeks. I approve of you learning how to do things, but please don't steal our works.
[br][/br][br][/br]
And yes, I do have another workshop where I take requests, but I will absolutely not accept any requests that wish to adapt the designs in this workshop. Coding is painful, why do you think we partnered up?
[/div]
[/div]
[/div]
[div class="logo"][/div]
[/div]
[/div]

[comment][font=Poppins]font[/font][/comment]

[class name=root]
position: relative;
width: 100%;
background-color: #1d1d1d;
background-image: url('https://i.imgur.com/3QMnky3.gif');
background-blend-mode: soft-light;
overflow: hidden;
padding-top: 20px;
font-size: initial;
--speech-font-size: 1.5vh;
[/class]

[class name=catchall]
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 17;
[/class]

[class name=noclicking]
pointer-events: none;
[/class]

[class name=container]
position: relative;
width: 83vh;
max-width: 100%;
height: auto;
[/class]

[class name=filler]
position: relative;
width: 83vh;
max-width: 100%;
font-size: 0;
visibility: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
[/class]

[class name=bgimage]
background-image: url('https://i.imgur.com/6t7ZJix.png');
background-size: contain;
background-repeat: no-repeat;
[/class]

[class name=charaholder]
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-end;
font-size: 0;
[/class]

[class name=logo]
position: absolute;
top: 40%;
left: 50%;
width: 60%;
padding-top: calc(60% * 438/801);
transform: translateX(-50%) rotate(0deg) scale(1);
transform-origin: center;
z-index: 20;
background-image: url('https://i.imgur.com/tMbYAWW.png');
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transition: transform .5s 1.5s ease;
cursor: pointer;
[/class]

[class name=logo minWidth=100vh]
pointer-events: none;
[/class]

[class name=logohide]
transition: transform .5s ease;
transform: translateX(-50%) rotate(-90deg) scale(0);
[/class]

[class name=chara]
position: relative;
font-size: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
[/class]

[class name=sugarvineimghold]
width: 42.5%;
margin-right: -9%;
z-index: 13;
[/class]

[class name=alterasimghold]
width: 47.7%;
margin-left: -8.5%;
z-index: 12;
transition: z-index 3s;
[/class]

[class name=sugarvineimg]
pointer-events: none;
transition: filter .75s 1.25s;
filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%);
user-select: none;
[/class]

[class name=alterasimg]
pointer-events: none;
transition: filter .75s 1.25s;
filter: contrast(1) sepia(0%) hue-rotate(360deg) saturate(100%) brightness(100%);
user-select: none;
[/class]

[class name=imghide]
transition: filter .75s;
filter: contrast(0) sepia(100%) hue-rotate(204.5deg) saturate(4000%) brightness(78%);
[/class]

[class name=sugarvineforward]
animation-name: {post_id}swapsugarvineforward;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-delay: 1.25s;
animation-fill-mode: both;
[/class]

[class name=sugarvinebackwards]
animation-name: {post_id}swapsugarvinebackwards;
animation-duration: .75s;
animation-direction: normal;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasswap]
z-index: 14;
transition: z-index .375s;
[/class]

[class name=alterasforward]
animation-name: {post_id}swapalterasforward;
animation-direction: normal;
animation-duration: .75s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[class name=alterasbackwards]
animation-name: {post_id}swapalterasbackward;
animation-direction: normal;
animation-duration: .75s;
animation-delay: 1.25s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
animation-fill-mode: both;
[/class]

[animation=swapalterasforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapalterasbackward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(22%);
[/keyframe]
[keyframe=50]
transform: translateX(22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvineforward]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[animation=swapsugarvinebackwards]
[keyframe=0]
transform: translateX(0);
[/keyframe]
[keyframe=49]
transform: translateX(-22%);
[/keyframe]
[keyframe=50]
transform: translateX(-22%);
[/keyframe]
[keyframe=100]
transform: translateX(0);
[/keyframe]
[/animation]

[class name=sugarvinecontenthold]
position: absolute;
width: 22%;
min-width: 100px;
height: 60%;
top: calc(29.5% - 1em);
left: 42.5%;
z-index: 20;
font-size: var(--speech-font-size);
[/class]

[class name=alterascontenthold]
position: absolute;
width: 22%;
min-width: 100px;
height: 60%;
top: calc(29.5% - 1em);
right: 47%;
z-index: 20;
font-size: var(--speech-font-size);
[/class]

[class name=speechbubble]
display: block;
font-family: 'Poppins';
font-weight: 900;
font-size: 1.4em;
color: white;
position: relative;
background-color: #ff22c0;
padding: .5em;
text-align: center;
border-radius: .5em;
z-index: 22;
[/class]

[class name=sugarvinebubble]
transform-origin: -1em center;
transition: transform .5s .65s;
transform: rotate(90deg) scale(0);
[/class]

[class name=alterasbubble]
transform-origin: calc(100% + 1em) center;
transition: transform .5s .65s;
transform: rotate(-90deg) scale(0);
[/class]

[class name=bubbleexpansion]
transform: rotate(0) scale(1);
transition: transform .5s 1.25s;
[/class]

[class name=larrow]
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -.9em;
border: .5em solid transparent;
border-right: .5em solid #ff22c0;
width: 0;
height: 0;
[/class]

[class name=rarrow]
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -.9em;
border: .5em solid transparent;
border-left: .5em solid #ff22c0;
width: 0;
height: 0;
[/class]

[class name=content]
position: absolute;
top: 1em;
padding: 1.25em;
padding-top: 3em;
width: 150%;
height: 100%;
box-sizing: border-box;
background-color: rgba(0,0,0,0.8);
border-radius: .5em;
color: white;
z-index: 21;
overflow: hidden;
text-align: justify;
font-size: var(--speech-font-size);
transition: transform .5s ease-in-out;
transform: scale(0);
font-weight: 100;
[/class]

[class name=sugarvinecontent]
left: 1em;
transform-origin: top left;
[/class]

[class name=alterascontent]
right: 1em;
transform-origin: top right;
[/class]

[class name=contentexpansion]
transition: transform .5s ease-in-out 1.9s;
transform: scale(1);
[/class]

[class name=subtitle]
position: absolute;
width: 40%;
height: 7%;
top: 0;
text-align: left;
box-sizing: border-box;
font-size: .4em;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 5px 5px 5px;
font-weight: bold;
[/class]

[class name=sugarvinesubtitle]
right: 0;
[/class]

[class name=alterassubtitle]
left: 0;
[/class]

[class name=scroll]
font-size: .8em;
font-weight: normal;
font-family: 'Poppins';
overflow-X: scroll;
padding-right: 150px;
position: relative;
width: 100%;
height: 100%;
[/class]

[class name=titleshold]
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-flow: row wrap;
justify-content: stretch;
align-content: start;
[/class]

[class name=titlefiller]
position: relative;
width: 83vh;
max-width: calc(100% - 50px);
height: 0;
[/class]

[class name=titlescontainer]
position: relative;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 100px;
[/class]

[class name=titlescroll]
position: absolute;
height: 65%;
width: 100%;
padding-right: 150px;
overflow-Y: scroll;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: start;
align-content: start;
font-size: calc(1.4 * var(--speech-font-size) );
z-index: 10;
pointer-events: none;
margin-left: -7.5%;
[/class]

[class name=titlescroll maxWidth=100vh]
z-index: -1;
transform: scale(0);
transition: all .75s;
align-items: center;
align-content: center;
margin-left: 0px;
[/class]

[class name=titlescrollshow]
z-index: 30;
transform: scale(1);
transition: transform .75s;
[/class]

[class name=title]
position: relative;
width: 500px;
max-width: calc(100% - 20px);
box-sizing: border-box;
height: auto;
margin-bottom: 10px;
padding: 25px 15px;
display: grid;
background-color: rgba(29, 29, 29,0.8);
border: 0px solid black;
border-radius: 10px;
grid-template-columns: calc(1.5em + 5px) 1fr;
grid-template-rows: 1.5em 5px;
grid-template-areas:
'num title'
'num bar';
grid-column-gap: 10px;
pointer-events: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
white-space: nowrap;
[/class]

[class name=numval]
position: relative;
grid-area: num;
display: flex;
justify-content: center;
align-items: center;
border: 0 solid black;
border-radius: 50%;
background-color: #ff22c0;
color: white;
font-family: 'Poppins';
font-weight: 900;
font-size: 1em;
line-height: 2em;
[/class]

[class name=header]
position: relative;
grid-area: title;
color: white;
font-family: 'Poppins';
font-weight: 900;
padding-left: .5%;
[/class]

[class name=jankbar]
position: relative;
grid-area: bar;
border-radius: 5px;
--block1: #b9fc49;
--block2: #a7f55a;
--block3: #95ee6c;
--block4: #83e77d;
--block5: #71e08f;
--block6: #5ed8a0;
--block7: #4cd1b2;
--block8: #3acac3;
--block9: #28c3d5;
--block10: #16bce6;
--blocknul: #989898;
background-image:
linear-gradient(to right,
var(--block1) calc(10% - 2px),
transparent calc(10% - 2px), transparent 10%,
var(--block2) 10%, var(--block2) calc(20% - 2px),
transparent calc(20% - 2px), transparent 20%,
var(--block3) 20%, var(--block3) calc(30% - 2px),
transparent calc(30% - 2px), transparent 30%,
var(--block4) 30%, var(--block4) calc(40% - 2px),
transparent calc(40% - 2px), transparent 40%,
var(--block5) 40%, var(--block5) calc(50% - 2px),
transparent calc(50% - 2px), transparent 50%,
var(--block6) 50%, var(--block6) calc(60% - 2px),
transparent calc(60% - 2px), transparent 60%,
var(--block7) 60%, var(--block7) calc(70% - 2px),
transparent calc(70% - 2px), transparent 70%,
var(--block8) 70%, var(--block8) calc(80% - 2px),
transparent calc(80% - 2px), transparent 80%,
var(--block9) 80%, var(--block9) calc(90% - 2px),
transparent calc(90% - 2px), transparent 90%,
var(--block10) 90%);
[/class]

[class name=janklvl0]
--block1: var(--blocknul);
--block2: var(--blocknul);
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl1]
--block2: var(--blocknul);
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl2]
--block3: var(--blocknul);
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl3]
--block4: var(--blocknul);
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl4]
--block5: var(--blocknul);
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl5]
--block6: var(--blocknul);
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl6]
--block7: var(--blocknul);
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl7]
--block8: var(--blocknul);
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl8]
--block9: var(--blocknul);
--block10: var(--blocknul);
[/class]

[class name=janklvl9]
--block10: var(--blocknul);
[/class]

[script class=loadin version=2]
(addClass "noclicking" "sugarvinecontenthold")
(addClass "noclicking" "alterascontenthold")
(addClass "noclicking" "catchall")
[/script]

[script class=logo version=2 on=click]
(addClass "logohide" "logo")
(addClass "titlescrollshow" "titlescroll")
(removeClass "noclicking" "catchall")
[/script]

[script class=alterasimghold version=2 on=click]
(addClass "logohide" "logo")

(removeClass "sugarvineforward" "sugarvineimghold")
(addClass "sugarvinebackwards" "sugarvineimghold")
(addClass "alterasforward" "alterasimghold")
(addClass "alterasswap" "alterasimghold")
(removeClass "alterasbackwards" "alterasimghold")
(addClass "imghide" "sugarvineimg")

(addClass "bubbleexpansion" "alterasbubble")
(addClass "contentexpansion" "alterascontent")

(removeClass "noclicking" "alterascontenthold")
(removeClass "noclicking" "catchall")
[/script]

[script class=sugarvineimghold version=2 on=click]
(addClass "logohide" "logo")

(removeClass "sugarvineforward" "sugarvineimghold")
(addClass "sugarvinebackwards" "sugarvineimghold")
(addClass "alterasforward" "alterasimghold")
(removeClass "alterasbackwards" "alterasimghold")
(addClass "imghide" "alterasimg")

(addClass "bubbleexpansion" "sugarvinebubble")
(addClass "contentexpansion" "sugarvinecontent")

(removeClass "noclicking" "sugarvinecontenthold")
(removeClass "noclicking" "catchall")
[/script]

[script class=catchall version=2 on=click]
(removeClass "logohide" "logo")

(removeClass "titlescrollshow" "titlescroll")

(removeClass "sugarvinebackwards" "sugarvineimghold")
(addClass "sugarvineforward" "sugarvineimghold")
(addClass "alterasbackwards" "alterasimghold")
(removeClass "alterasswap" "alterasimghold")
(removeClass "alterasforward" "alterasimghold")
(removeClass "imghide" "sugarvineimg")
(removeClass "imghide" "alterasimg")

(removeClass "bubbleexpansion" "alterasbubble")
(removeClass "contentexpansion" "alterascontent")
(removeClass "bubbleexpansion" "sugarvinebubble")
(removeClass "contentexpansion" "sugarvinecontent")

(addClass "noclicking" "sugarvinecontenthold")
(addClass "noclicking" "alterascontenthold")
(addClass "noclicking" "catchall")
[/script]
[/nobr][/div]

[/div][/div][/div][/div][/div] [class name=root] position: relative; width: 100%; background-color: #1d1d1d; background-image: url('https://i.imgur.com/3QMnky3.gif'); background-blend-mode: soft-light; overflow: hidden; font-size: initial; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; [/class] [class name=flexwrapper] display: block; box-sizing: border-box; height: 100%; overflow: hidden; [/class] [class name=scroll] display: block; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 150px; [/class] [class name=scrollitem] display: block; width: 100%; height: auto; position: relative; overflow: hidden; [/class] [class name=leftside] flex: 1 0 300px; max-width: 700px; background: url('https://i.imgur.com/DvQYu9V.jpg') no-repeat bottom right; background-size: cover; height: 80vh; overflow: hidden; text-align: center; [/class] [class name=title] display: block; position: sticky; position: -webkit-sticky; top: 0px; left: 0px; box-sizing: border-box; background: #ffca00; padding: 10px 20px; width: 100%; color: #1d1d1d; font-weight: bold; font-size: 2vh; [/class] [class name=dialogueblock] display: block; width: 100%; padding: 5px; box-sizing: border-box; margin: 15px 0px; [/class] [class name=textarea] display: inline-block; vertical-align: top; width: calc(100% - 105px); font-size: initial; overflow: hidden; [/class] [class name=textbox] display: block; width: 100%; border-radius: 10px; border: 0px solid transparent; box-sizing: border-box; padding: 15px; background: rgba(0, 0, 0, .75); min-height: 75px; color: #FFFFFF; text-align: justify; font-size: .8em; [/class] [class name=textbox2] min-height: 0px; margin-top: 10px; [/class] [class name=alticon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-right: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/me1I7BR.jpg') no-repeat center; [/class] [class name=monoicon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-left: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/IqFIsad.jpg') no-repeat center; [/class] [class name=name] font-size: 4vh; letter-spacing: -2px; width: calc(95% - 30px); margin: auto; color: #ff1ea6; text-shadow: 1px 1px 2px rgba(0,0,0,.8); font-weight: bold; font-family: 'Poppins', sanserif; margin-bottom: -2vh; white-space: nowrap; overflow: hidden; [/class] [class name=alt] text-align: left; [/class] [class name=mono] text-align: right; [/class] [class name=rightside] flex: 3 0 300px; height: 80vh; overflow: hidden; color: #FFFFFF; font-size: .8em; [/class] [class name=codebutton] padding: 10px 15px; display: inline-block; margin: 10px 0px 0px 10px; box-sizing: border-box; font-weight: bold; background: #ff1ea6; border-radius: 5px; width: auto; cursor: pointer; [/class] [class name=code] padding: 5px 15px 5px 15px; width: calc(100% - 20px); margin: 15px 0px 0px 20px; border-left: 1px solid #ffcd00; box-sizing: border-box; display: none; font-size: .95em; font-family: 'IBM Plex Mono', monospace; [/class] [script class=codebutton version=2 on=click] (= spoiler (index (split (getText) "spoil") 0 ) ) (slideToggle 1000 (+ spoiler "spoil") ) [/script]

Nano · Apr 17, 2018

THE MACCAS IS HEREEEEEEEEEEEEEE

RI.a · Apr 17, 2018

Sen... Senpai....
TWO SENPAIS...!

ICONIC. · Apr 17, 2018

THE TWO BEST CODERS WTF

peachuu · Apr 17, 2018

OMG THE WORLD IS NOT READY FOR THIS

Alteras · May 15, 2018

[class name=root] width: 100%; position: relative; background-image: url('https://i.imgur.com/VkcW7TQ.jpg'); background-repeat: no-repeat; background-size: 1250px; background-position: center; background-color: #e6e1d8; background-blend-mode: color-burn; [/class] [class name=root maxWidth=799px] --containerw: 95%; --borderw: 15px; --boundw: 15px; padding: 2.5%; [/class] [class name=root minWidth=800px] --containerw: 600px; --borderw: 30px; --boundw: 25px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; [/class] [class name=root minWidth=1000px] --containerw: 800px; --borderw: 50px; --boundw: 45px; [/class] [class name=root minWidth=1280px] --containerw: 1050px; --borderw: 50px; --boundw: 45px; [/class] [class name=container] position: relative; margin: 100px; max-width: 100%; width: var(--containerw); height: calc(9.25/16 * var(--containerw)); background-color: #e6e1d8; border: var(--borderw) solid #e6e1d8; box-sizing: border-box; overflow: hidden; [/class] [class name=container maxWidth=799px] margin: 0; height: 0; padding-bottom: calc(1036/540 * 95%); [/class] [class name=filler] position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: #e6e1d8; z-index: 4; [/class] [class name=flower] position: absolute; top: -41.5%; margin-left: -50%; width: 200%; padding-bottom: calc(2406/1779 * 90%); opacity: .85; transform-origin: center; transform: translate(0%,0%); background-blend-mode: darken; background-color: #e6e1d8; background-image: url('https://i.imgur.com/jHLDotq.jpg'); background-size: 45%; background-position: center; background-repeat: no-repeat; [/class] [class name=flower maxWidth=799px] padding-bottom: 0; height: 100%; top: 0; margin-left: 0; left: 0; width: 100%; background-size: 200%; background-position: 40% 35%; transition: background-color 1s; [/class] [class name=flower minWidth=800px] animation-duration: 3.5s; animation-delay: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; [/class] [class name=image] width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('https://i.imgur.com/IBcJZcb.jpg'); background-repeat: no-repeat; background-size: 120%; background-position: 50% 18%; background-color: #e6e1d8; background-blend-mode: multiply; opacity: .9; z-index: 5; [/class] [class name=image maxWidth=799px] background-size: 230%; background-position: 60% 18%; [/class] [class name=mainnav] position: absolute; top: 0; left:0; width: 100%; height: 100%; font-size: initial; opacity: .9; transition: opacity .5s ease 2.1s; [/class] [class name=mainnav maxWidth=799px] display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: opacity .5s ease .5s [/class] [class name=navhide] opacity: 0; transition: opacity .5s; [/class] [class name=tab] text-transform: uppercase; color: #564743; font-size: .9em; font-family: 'Averia Serif Libre'; position: absolute; transform: translate(-50%,-50%); text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8; cursor: pointer; z-index: 3; [/class] [class name=tab maxWidth=799px] position: relative; font-size: 4.5vh; transform: translate(0,0); margin: 1vh; [/class] [class name=tabbasics minWidth=800px] top: 10%; left: 25%; [/class] [class name=tabpersonal minWidth=800px] top: 55%; left: 14%; [/class] [class name=tabphysical minWidth=800px] top: 30%; left: 78%; [/class] [class name=tabfluff minWidth=800px] top: 62%; left: 78%; [/class] [class name=tabappearance minWidth=800px] top: 89%; left: 42%; [/class] [class name=content] position: absolute; top: var(--boundw); left: var(--boundw); right: var(--boundw); bottom: var(--boundw); opacity: 0; transition: opacity .5s ease; pointer-events: none; [/class] [class name=contentreveal] opacity: .75; transition: opacity 1.25s ease 3s; pointer-events: auto; [/class] [class name=contentreveal maxWidth=799px] transition: opacity .5s ease .5s; [/class] [class name=tabnavbox] position: relative; align-self: stretch; display: flex; flex-flow: row nowrap; justify-content: flex-end; font-size: initial; [/class] [class name=tabnavbox maxWidth=799px] order: -1; [/class] [class name=tabnav] position: relative; display: inline-block; color: #564743; margin: .8em; margin-bottom: .5em; font-size: .75em; font-family: 'Averia Serif Libre'; cursor: pointer; text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8; [/class] [class name=selected] pointer-events: none; [/class] [class name=return minWidth=800px] animation-name: {post_id}return; animation-delay: 0s; animation-duration: 2s; [/class] [animation=return] [keyframe=5] background-color: #d1caba; [/keyframe] [keyframe=50] background-color: #e6e1d8; [/keyframe] [keyframe=100] background-color: #e6e1d8; transform: translate(0%, 0%); [/keyframe] [/animation] [class name=mobilebg maxWidth=799px] background-color: #d1caba; [/class] [class name=scrollbox] display: block; width: 100%; margin-top: 10px; padding-right: 150px; overflow-x: visible; overflow-y: scroll; box-sizing: content-box; flex: 1; [/class] [class name=infotitle] font-family: 'Averia Serif Libre', serif; text-transform: uppercase; color: #564743; font-size: 1.25em; margin-bottom: 5px; [/class] [class name=inforow] width: 95%; padding-left: 5%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; overflow: hidden; font-size: .9em; margin: 0px -2px; [/class] [class name=inforow maxWidth=799px] margin: 0px -2px 5px -2px; [/class] [class name=infoq] flex: 1 0 120px; text-transform: uppercase; font-family: 'Poppins', sanserif; color: #7e7371; margin: 0px 2px; [/class] [class name=infor] flex: 2 0 120px; font-family: 'Averia Serif Libre', serif; color: #564743; margin: 0px 2px; [/class] [class name=flexcontent] background-color: #e6e1d8; overflow: hidden; border: calc(.9 * var(--boundw)) solid #e6e1d8; box-sizing: border-box; position: relative; display: flex; flex-flow: column nowrap; justify-stretch; [/class] [class name=titleflex] display: inline-flex; flex-flow: row wrap; justify-content: start; [/class] [class name=hideunhide] animation-name: {post_id}hideunhide; animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: both; [/class] [animation=hideunhide] [keyframe=0] opacity: 1; [/keyframe] [keyframe=40] opacity: 0; [/keyframe] [keyframe=60] opacity: 0; [/keyframe] [keyframe=100] opacity: 1; [/keyframe] [/animation] [class name=contitle] display: inline-block; margin-right: 10px; font-family: 'Averia Serif Libre', serif; text-transform: uppercase; font-size: .95em; color: rgba(86, 71, 67, 0.68); cursor: pointer; order: 1; transition: all 0s ease .5s; [/class] [class name=activecontitle] margin-right: 30px; color: #564743; order: 0; pointer-events: none; [/class] [class name=contenttext] display: block; font-family: 'Poppins', sanserif; color: #7e7371; text-align: justify; font-size: .85em; [/class] [class name=contentholder] display: flex; width: 100%; position: relative; flex: 1; flex-flow: column nowrap; justify-content: stretch; overflow: hidden; [/class] [class name=insidecontenthold] position: absolute; top: 0; left: 0; height: 100%; [/class] [class name=bgbasics minWidth=800px] animation-name: {post_id}bgbasic; [/class] [class name=anchorbasics minWidth=800px] transform: translate(-6.5%,16.25%); background-color: #d1caba; [/class] [animation=bgbasic] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(4.5%,16.25%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(4.5%,16.25%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-6.5%,16.25%); [/keyframe] [/animation] [class name=basics] display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; [/class] [class name=basics maxWidth=799px] align-items: stretch; justify-content: start; [/class] [class name=basicinfo] width: 46.5%; height: 65%; [/class] [class name=basicinfo maxWidth=799px] width: 100%; flex: 1; [/class] [class name=bgpersonal minWidth=800px] animation-name: {post_id}bgpersonal; [/class] [class name=anchorpersonal minWidth=800px] transform: translate(12.5%,5.5%); background-color: #d1caba; [/class] [animation=bgpersonal] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(12.5%,0%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(12.5%,0%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(12.5%,5.5%); [/keyframe] [/animation] [class name=personal] display: flex; flex-flow: column wrap-reverse; justify-content: start; align-items: end; align-content: space-between; [/class] [class name=personal maxWidth=799px] flex-flow: column nowrap; align-items: stretch; [/class] [class name=personalinfo] width: 45%; height: 63%; [/class] [class name=personalinfo maxWidth=799px] width: 100%; height: 30%; margin-bottom: 2.5%; [/class] [class name=personalcontent] width: 49.5%; height: 100%; [/class] [class name=personalcontent maxWidth=799px] width: 100%; height: 60%; flex: 1; [/class] [class name=bgphysical minWidth=800px] animation-name: {post_id}bgphysical; [/class] [class name=anchorphysical minWidth=800px] transform: translate(-14.25%, 3.8%); background-color: #d1caba; [/class] [animation=bgphysical] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(-5%, 10%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(-5%, 10%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-14.25%, 3.8%); [/keyframe] [/animation] [class name=physical] display: flex; flex-flow: column wrap; justify-content: end; align-items: end; align-content: space-between; [/class] [class name=physical maxWidth=799px] flex-flow: column nowrap; justify-content: start; align-items: stretch; [/class] [class name=physicalinfo] width: 45%; height: 62%; margin-bottom: -2.5%; [/class] [class name=physicalinfo maxWidth=799px] width: 100%; height: 30%; margin-bottom: 2.5%; [/class] [class name=physicalcontent] width: 49.5%; height: 100%; [/class] [class name=physicalcontent maxWidth=799px] width: 100%; height: 60%; flex: 1; [/class] [class name=bgfluff minWidth=800px] animation-name: {post_id}bgfluff; [/class] [class name=anchorfluff minWidth=800px] transform: translate(-6.5%, -5%); background-color: #d1caba; [/class] [animation=bgfluff] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(0%, -6.75%); [/keyframe] [keyframe=52] background-color: #e6e1d8 transform: translate(0%, -6.75%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-6.5%, -5%); [/keyframe] [/animation] [class name=fluff] display: flex; flex-flow: row nowrap; justify-content: space-between; [/class] [class name=fluff maxWidth=799px] flex-flow: column nowrap; align-items: stretch; justify-content: start; [/class] [class name=fluffleft] position: relative; height: 100%; width: 36.5%; display: flex; flex-flow: column nowrap; justify-content: start; align-content: stretch; [/class] [class name=fluffleft maxWidth=799px] width: 100%; height: 45%; flex: 1; justify-content: stretch; align-items: stretch; margin-bottom: 2.5%; [/class] [class name=fluffinfo] height: 35%; margin-bottom: 3.5%; [/class] [class name=fluffinfo maxWidth=799px] flex: 1; margin-bottom: 5%; [/class] [class name=fluffhobbies] height: 50%; [/class] [class name=fluffhobbies maxWidth=799px] width: 100%; flex: 1; [/class] [class name=fluffright] position: relative; height: 100%; width: 36.5%; display: flex; flex-flow: column nowrap; justify-content: end; align-content: stretch; [/class] [class name=fluffright maxWidth=799px] width: 100%; height: 45%; flex: 1; justify-content: stretch; align-items: stretch; [/class] [class name=fluffnotes] height: 38%; margin-bottom: 3.5%; [/class] [class name=fluffnotes maxWidth=799px] flex: 1; margin-bottom: 5%; margin-top: 0; [/class] [class name=fluffquotes] height: 50%; [/class] [class name=fluffquotes maxWidth=799px] width: 100%; flex: 1; [/class] [script class=image on=click] fadeOut 1250 image fadeOut 1250 filler [/script] [script class=tab version=2 on=click] (= tabname (getText)) (if (== tabname "appearance") (group (fadeIn 1250 "image") (fadeIn 1250 "filler") (stop))) (addClass "navhide" "mainnav") (removeClass "return" "flower") (addClass (+ "bg" tabname) "flower") (addClass "contentreveal" tabname) (addClass "mobilebg" "flower") (setTimeout 4 (addClass (+ "anchor" tabname) "flower")) [/script] [script class=tabnav version=2 on=click] (= tabvar (getText)) (removeClass (+ "bg" tabname) "flower") (removeClass "contentreveal" "content") (if (== "home" tabvar) (group (removeClass "navhide" "mainnav") (addClass "return" "flower") (removeClass "mobilebg" "flower") (setTimeout 2 (removeClass (+ "anchor" tabname) "flower")) (stop))) (if (== "i" tabvar) (= tabnavname "basics")) (if (== "ii" tabvar) (= tabnavname "personal")) (if (== "iii" tabvar) (= tabnavname "physical")) (if (== "iv" tabvar) (= tabnavname "fluff")) (addClass (+ "bg" tabnavname) "flower") (addClass "contentreveal" tabnavname) (setTimeout 4 (group (addClass (+ "anchor" tabnavname) "flower") (removeClass (+ "anchor" tabname) "flower") (= tabname tabnavname))) [/script] [script class=personaltabs version=2 on=click] (= personaltabsel (getText)) (addClass "hideunhide" "titleflex") (setTimeout 1 (removeClass "hideunhide" "titleflex")) (if (== personaltabsel "personality") (fadeOut 1000 "backstory")) (if (== personaltabsel "backstory") (fadeOut 1000 "personality")) (removeClass "activecontitle" "personaltabs") (addClass "activecontitle") (fadeIn 1000 personaltabsel) [/script] [script class=physicaltabs version=2 on=click] (= physicaltabsel (getText)) (addClass "hideunhide" "titleflex") (setTimeout 1 (removeClass "hideunhide" "titleflex")) (if (!= physicaltabsel "skills") (fadeOut 1000 "skills")) (if (!= physicaltabsel "magic") (fadeOut 1000 "magic")) (if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses")) (removeClass "activecontitle" "physicaltabs") (addClass "activecontitle") (fadeIn 1000 physicaltabsel) [/script] [div class=root] [div class=container] [div class=filler][/div] [div class=image][/div] [div class="flower"][/div] [div class=mainnav] [div class="tab tabbasics"]basics[/div] [div class="tab tabpersonal"]personal[/div] [div class="tab tabphysical"]physical[/div] [div class="tab tabfluff"]fluff[/div] [div class="tab tabappearance"]appearance[/div] [/div] [div class="content basics"] [div class="flexcontent basicinfo"] [div class=infotitle]basic information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]name[/div] [div class=infor]Aster Elliston[/div] [/div] [div class=inforow] [div class=infoq]aliases[/div] [div class=infor]The Collector
Marquis Elliston[/div] [/div] [div class=inforow] [div class=infoq]age[/div] [div class=infor]Twenty-nine (29)[/div] [/div] [div class=inforow] [div class=infoq]gender[/div] [div class=infor]Male[/div] [/div] [div class=inforow] [div class=infoq]race[/div] [div class=infor]Human[/div] [/div] [div class=inforow] [div class=infoq]class[/div] [div class=infor]Quartermaster Assistant (Merchant Variant with a focus on military logistics)[/div] [/div] [/div] [/div] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [/div] [div class="content personal"] [div class="flexcontent personalinfo"] [div class=infotitle]personal information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]sexuality [/div] [div class=infor]Heterosexual[/div] [/div] [div class=inforow] [div class=infoq]high concept[/div] [div class=infor]Unkempt Negotiator & Quartermaster Assistant[/div] [/div] [div class=inforow] [div class=infoq]alignment[/div] [div class=infor]Neutral Good[/div] [/div] [div class=inforow] [div class=infoq]relatives[/div] [div class=infor]Mother
Father
Ellie[/div] [/div] [div class=inforow] [div class=infoq]affiliations[/div] [div class=infor]Guild of Heroes
Nobleman of Albion[/div] [/div] [/div] [/div] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [div class="flexcontent personalcontent"] [div class=titleflex] [div class="activecontitle contitle personaltabs"]personality[/div] [div class="contitle personaltabs"]backstory[/div] [/div] [div class=contentholder] [div class="scrollbox insidecontenthold contenttext personality"] Aster Elliston doesn't like people very much. He would much rather keep to himself and watch pretty mana do pretty things. While his professionalism is perfect, casual conversation is barely doable and intimacy is not happening anytime soon. He is pretty much reliant on Ellie Edelweiss to do anything daily life related, but he can pull through when he's motivated. He's a klutz, a walking embodiment of the noble disconnected from common sense, even though he's got good intuition when it comes to items and artifacts.

[/div] [div class="scrollbox insidecontenthold contenttext backstory" style="display: none"] Born to a noble family, Aster Elliston had some high standards placed on him since birth. Not only to succeed the title of Marquis, but to also live up to the source of the title, to become a Quartermaster of the Guild of Heroes. The Elliston Family traces their lineage to Robin Elliston-Clark, the one of the first Quartermasters of the Guild. Subsequent generations took on the role of Quartermaster and became an informal mediator between the Guild and the Court when the title of Marquis was bestowed to the family following some battle or another. In any case, Aster completely shirked these responsibilities, for the most part. Robin's specialized magic manifested in his Oculi Veritatis, making his childhood even more abnormal. He quickly became fascinated by magic objects and their mana flow. But the people around those magic objects were often times not pure at heart, something he sometimes caught glimpses of with his eyes. While initially not something important, he would later try to avoid people because of that. But what probably led him to avoid people was this:

When Aster got more and more consumed from watching the mana flow, he wouldn't really pay attention to anything else. This usually meant, that he either was in a mess, left a mess, or was the mess, be it not eating, not being organized, not keeping his appearances, etc. Of course, he usually had maids to take care of all of that and his parents were more focused on him training to be a Quartermaster, so he more or less got use to it. Unfortunately this carried over to adulthood, even after he became the Quartermaster.

That was when he met Ellie Edelweiss, the fork possessing ghost. During one of Aster's regular appointments with an arcane artifacts dealer, the dealer said he something for him. Opening the box, he was met with a fork and a ghost. The ghost gave him a life tip reminder, but he, still not liking people, decided to close the box and leave. Every time he came back, the ghost always gave him a reminder, something along the lines of "don't forget to eat your vegetables!" and "make sure to comb your hair!" This happened all the time that the dealer decided to stop him. "Aster, I've known you for a long time. Just take the fork. It'll do you some good." And so Ellie Edelweiss became his closest... mom friend? Either way, she's prob the only thing keeping his life together.

[/div] [/div] [/div] [/div] [div class="content physical"] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [div class="flexcontent physicalinfo"] [div class=infotitle]physical information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]weapons[/div] [div class=infor]Fork
Quill
Collection of Artifacts[/div] [/div] [div class=inforow] [div class=infoq]armor[/div] [div class=infor]a Slightly Unkempt Suit
Blazer
Undershirt.[/div] [/div] [div class=inforow] [div class=infoq]items[/div] [div class=infor]A fancy pen
Ellie?
An Extensive Collection[/div] [/div] [/div] [/div] [div class="flexcontent physicalcontent"] [div class=titleflex] [div class="activecontitle contitle physicaltabs"]skills[/div] [div class="contitle physicaltabs"]magic[/div] [div class="contitle physicaltabs"]weaknesses[/div] [/div] [div class="contentholder"] [div class="scrollbox insidecontenthold contenttext skills"] Connoisseur of All - He is well respected as an expert in many collections, most notably, antiquity. He can generally figure out what something does with a bit of time, and know its worth almost instantly.

Quartermaster Assistant - He may be the official Quartermaster, but he's more like the assistant. Has some skill in a variety of weapons, and can know the detail of any weapon he lays his eyes on. His skills mostly lie in magical items.

Collector - Has great organizational skills and a wealth of knowledge in many artifacts.

Negotiator - Has great negotiating skills and can make split second decisions. When it comes to the guild, he can thoroughly represent their wishes in the Royal Court, pushing forward a favorable position for the Guild. When it comes to himself, he will not compromise.

[/div] [div class="scrollbox insidecontenthold contenttext magic" style="display: none"] Oculi Veritatis - He has magic filled eyes that let him see the flow of mana, allowing him to make educated guesses about the nature of things, specifically magic items. He is also able to see mana flow during magic activation can generally guess what spell is being performed. Due to the nature of the Anatomy of Soul and the risks to his psyche on the off chance that he accidentally sees into one's soul, he tries to avoid doing that. Because of that, he's grown to not like other people, due to some childhood experiences. It is a passive and biological part of him.

Gnawing Negotiations - He is able to plant suggestions in the minds of his opponents as an inferior form of mind control. However, they're very weak and is usually only good for negotiations and trade. Not very effective in combat, but if applied many times and long enough, could result in some changes comparable to a proper mind control.

Military Standard Only - He can identify fakes, both item and people. He can temporarily dispel any negative effect on anything, but only for 5 minutes at most.

Fresh Supplies - He summons army supply boxes, enough to stock a small platoon. Contains anything and everything from rations to flags to explosives. It's very very taxing him and will prob knock him out for a good week or so, but the items summoned will be on the same level as the equipment one might see for Royal Elites. Sometimes there's even an magical item that can be categorized as an arcane artifact.

Basic Magic Spells - He's a nobleman, he should at least try to not embarrass himself.

[/div] [div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"] Ellie Edelweiss.

Daily Life Necessities.

Combat.

Interacting with people on an intimate level.

[/div] [/div] [/div] [/div] [div class="content fluff"] [div class=fluffleft] [div class="flexcontent fluffinfo"] [div class=infotitle]FLUFF[/div] [div class=scrollbox] [div class=inforow] [div class="infoq" style="flex: 1 0 75px;"]THEME[/div] [div class=infor]Voynich Manuscript[/div] [/div] [/div] [/div] [div class="flexcontent fluffhobbies"] [div class="contitle activecontitle"]hobbies[/div] [div class=scrollbox] [div class=contenttext] Collecting Artifacts

Watching Mana flow. [/div] [/div] [/div] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div] [/div] [div class=fluffright] [div class="flexcontent fluffnotes"] [div class="contitle activecontitle"]notes[/div] [div class=scrollbox] [div class=contenttext] notes here [/div] [/div] [/div] [div class="flexcontent fluffquotes"] [div class="contitle activecontitle"]quotes[/div] [div class=scrollbox] [div class=contenttext] "..." *ignores*

"Ellie!! Save me!!"

"Stop staring at me..."

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

fluticasone · May 15, 2018

[class name=root] width: 100%; position: relative; background-image: url('https://i.imgur.com/FUMoqzM.jpg'); background-repeat: no-repeat; background-size: 1250px; background-position: center; background-color: #e6e1d8; background-blend-mode: color-burn; [/class] [class name=root maxWidth=799px] --containerw: 95%; --borderw: 15px; --boundw: 15px; padding: 2.5%; [/class] [class name=root minWidth=800px] --containerw: 600px; --borderw: 30px; --boundw: 25px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; [/class] [class name=root minWidth=1000px] --containerw: 800px; --borderw: 50px; --boundw: 45px; [/class] [class name=root minWidth=1280px] --containerw: 1050px; --borderw: 50px; --boundw: 45px; [/class] [class name=container] position: relative; margin: 100px; max-width: 100%; width: var(--containerw); height: calc(9.25/16 * var(--containerw)); background-color: #e6e1d8; border: var(--borderw) solid #e6e1d8; box-sizing: border-box; overflow: hidden; [/class] [class name=container maxWidth=799px] margin: 0; height: 0; padding-bottom: calc(1036/540 * 95%); [/class] [class name=filler] position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: #e6e1d8; z-index: 4; [/class] [class name=flower] position: absolute; top: -8%; margin-left: -25%; width: 150%; padding-bottom: calc(712/1000 * 105%); transform-origin: center; transform: translate(0%,0%); background-blend-mode: multiply; background-color: #e6e1d8; background-image: url('https://i.imgur.com/QQLe4Iy.jpg'); background-size: 70%; background-position: center; background-repeat: no-repeat; [/class] [class name=flower maxWidth=799px] padding-bottom: 0; height: 100%; top: 0; margin-left: 0; left: 0; width: 100%; background-size: 170%; background-position: center; background-image: url('https://i.imgur.com/Cslz4KR.jpg'); transition: background-color 1s; [/class] [class name=flower minWidth=800px] animation-duration: 3.5s; animation-delay: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; [/class] [class name=image] width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('https://i.imgur.com/WXIk72m.jpg'); background-repeat: no-repeat; background-size: 210%; background-position: 45% 25%; background-color: #e6e1d8; background-blend-mode: multiply; opacity: .9; z-index: 5; [/class] [class name=image maxWidth=799px] background-size: 400%; background-position: 58% 33%; [/class] [class name=mainnav] position: absolute; top: 0; left:0; width: 100%; height: 100%; font-size: initial; opacity: .9; transition: opacity .5s ease 2.1s; [/class] [class name=mainnav maxWidth=799px] display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: opacity .5s ease .5s [/class] [class name=navhide] opacity: 0; transition: opacity .5s; [/class] [class name=tab] text-transform: uppercase; color: #564743; font-size: .9em; font-family: 'Averia Serif Libre'; position: absolute; transform: translate(-50%,-50%); text-shadow:2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8; cursor: pointer; z-index: 3; [/class] [class name=tab maxWidth=799px] position: relative; font-size: 4.5vh; transform: translate(0,0); margin: 1vh; [/class] [class name=tabbasics minWidth=800px] top: 46%; left: 10%; [/class] [class name=tabpersonal minWidth=800px] top: 68%; left: 30%; [/class] [class name=tabphysical minWidth=800px] top: 32%; left: 53%; [/class] [class name=tabfluff minWidth=800px] top: 64%; left: 89%; [/class] [class name=tabappearance minWidth=800px] top: 78.5%; left: 70%; [/class] [class name=content] position: absolute; top: var(--boundw); left: var(--boundw); right: var(--boundw); bottom: var(--boundw); opacity: 0; transition: opacity .5s ease; pointer-events: none; [/class] [class name=contentreveal] opacity: .75; transition: opacity 1.25s ease 3s; pointer-events: auto; [/class] [class name=contentreveal maxWidth=799px] transition: opacity .5s ease .5s; [/class] [class name=tabnavbox] position: relative; align-self: stretch; display: flex; flex-flow: row nowrap; justify-content: flex-end; font-size: initial; [/class] [class name=tabnavbox maxWidth=799px] order: -1; [/class] [class name=tabnav] position: relative; display: inline-block; color: #564743; margin: .8em; margin-bottom: .5em; font-size: .75em; font-family: 'Averia Serif Libre'; cursor: pointer; text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8; [/class] [class name=selected] pointer-events: none; [/class] [class name=return minWidth=800px] animation-name: {post_id}return; animation-delay: 0s; animation-duration: 2s; [/class] [animation=return] [keyframe=5] background-color: #d1caba; [/keyframe] [keyframe=50] background-color: #e6e1d8; [/keyframe] [keyframe=100] background-color: #e6e1d8; transform: translate(0%, 0%); [/keyframe] [/animation] [class name=mobilebg maxWidth=799px] background-color: #d1caba; [/class] [class name=bgbasics minWidth=800px] animation-name: {post_id}bgbasic; [/class] [class name=anchorbasics minWidth=800px] transform: translate(6%,2%); background-color: #d1caba; [/class] [animation=bgbasic] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(18%,0%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(18%,0%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(6%,2%); [/keyframe] [/animation] [class name=basics] display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; [/class] [class name=basics maxWidth=799px] align-items: stretch; justify-content: start; [/class] [class name=basicinfo] width: 46.5%; height: 65%; margin-right: 10%; [/class] [class name=basicinfo maxWidth=799px] width: 100%; flex: 1; [/class] [class name=basictabs minWidth=800px] margin-right: 10%; [/class] [class name=bgpersonal minWidth=800px] animation-name: {post_id}bgpersonal; [/class] [class name=anchorpersonal minWidth=800px] transform: translate(-2%,-16%); background-color: #d1caba; [/class] [animation=bgpersonal] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(0%,-20%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(0%,-20%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-2%,-16%); [/keyframe] [/animation] [class name=personal] display: flex; flex-flow: column wrap; justify-content: start; align-items: flex-end; align-content: space-between; [/class] [class name=personal maxWidth=799px] flex-flow: column nowrap; align-items: stretch; [/class] [class name=personalinfo] width: 45%; height: 63%; [/class] [class name=personalinfo maxWidth=799px] width: 100%; height: 30%; margin-bottom: 2.5%; [/class] [class name=personalcontent] width: 49.5%; height: 100%; [/class] [class name=personalcontent maxWidth=799px] width: 100%; height: 60%; flex: 1; [/class] [class name=bgphysical minWidth=800px] animation-name: {post_id}bgphysical; [/class] [class name=anchorphysical minWidth=800px] transform: translate(-8%, 5.75%); background-color: #d1caba; [/class] [animation=bgphysical] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(-13%, 5.75%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(-13%, 5.75%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-8%, 5.75%); [/keyframe] [/animation] [class name=physical] display: flex; flex-flow: column wrap-reverse; justify-content: flex-end; align-items: flex-end; align-content: space-between; [/class] [class name=physical maxWidth=799px] flex-flow: column nowrap; justify-content: start; align-items: stretch; [/class] [class name=physicalinfo] width: 45%; height: 62%; margin-bottom: -2.5%; [/class] [class name=physicalinfo maxWidth=799px] width: 100%; height: 30%; margin-bottom: 2.5%; [/class] [class name=physicalcontent] width: 49.5%; height: 100%; [/class] [class name=physicalcontent maxWidth=799px] width: 100%; height: 60%; flex: 1; [/class] [class name=bgfluff minWidth=800px] animation-name: {post_id}bgfluff; [/class] [class name=anchorfluff minWidth=800px] transform: translate(-14%, -9%); background-color: #d1caba; [/class] [animation=bgfluff] [keyframe=15] background-color: #e6e1d8; [/keyframe] [keyframe=47] background-color: #e6e1d8; transform: translate(-14%, 0%); [/keyframe] [keyframe=52] background-color: #e6e1d8; transform: translate(-14%, 0%); [/keyframe] [keyframe=100] background-color: #d1caba; transform: translate(-14%, -9%); [/keyframe] [/animation] [class name=fluff] display: flex; flex-flow: row nowrap; justify-content: space-between; [/class] [class name=fluff maxWidth=799px] flex-flow: column nowrap; align-items: stretch; justify-content: start; [/class] [class name=fluffleft] position: relative; height: 100%; width: 36.5%; display: flex; flex-flow: column nowrap; justify-content: start; align-content: stretch; [/class] [class name=fluffleft maxWidth=799px] width: 100%; height: 45%; flex: 1; justify-content: stretch; align-items: stretch; margin-bottom: 2.5%; [/class] [class name=fluffinfo] height: 35%; margin-bottom: 3.5%; margin-top: 2%; [/class] [class name=fluffinfo maxWidth=799px] flex: 1; margin-bottom: 5%; margin-top: 0; [/class] [class name=fluffhobbies] height: 50%; [/class] [class name=fluffhobbies maxWidth=799px] width: 100%; flex: 1; [/class] [class name=fluffright] position: relative; height: 100%; width: 33%; margin-left: 1.5%; display: flex; flex-flow: column nowrap; justify-content: flex-end; align-content: stretch; [/class] [class name=fluffright maxWidth=799px] width: 100%; height: 45%; flex: 1; justify-content: stretch; align-items: stretch; [/class] [class name=fluffnotes] height: 38%; margin-bottom: 3.5%; [/class] [class name=fluffnotes maxWidth=799px] flex: 1; margin-bottom: 5%; margin-top: 0; [/class] [class name=fluffquotes] height: 50%; [/class] [class name=fluffquotes maxWidth=799px] width: 100%; flex: 1; [/class] [class name=scrollbox] display: block; width: 100%; margin-top: 10px; padding-right: 150px; overflow-x: visible; overflow-y: scroll; box-sizing: content-box; flex: 1; [/class] [class name=infotitle] font-family: 'Averia Serif Libre', serif; text-transform: uppercase; color: #564743; font-size: 1.25em; margin-bottom: 5px; [/class] [class name=inforow] width: 95%; padding-left: 5%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: stretch; overflow: hidden; font-size: .9em; margin: 0px -2px; [/class] [class name=inforow maxWidth=799px] margin: 0px -2px 5px -2px; [/class] [class name=infoq] flex: 1 0 120px; text-transform: uppercase; font-family: 'Poppins', sanserif; color: #7e7371; margin: 0px 2px; [/class] [class name=infor] flex: 2 0 120px; font-family: 'Averia Serif Libre', serif; color: #564743; margin: 0px 2px; [/class] [class name=flexcontent] background-color: #e6e1d8; overflow: hidden; border: calc(.9 * var(--boundw)) solid #e6e1d8; box-sizing: border-box; position: relative; display: flex; flex-flow: column nowrap; justify-stretch; [/class] [class name=titleflex] display: inline-flex; flex-flow: row wrap; justify-content: start; [/class] [class name=hideunhide] animation-name: {post_id}hideunhide; animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: both; [/class] [animation=hideunhide] [keyframe=0] opacity: 1; [/keyframe] [keyframe=40] opacity: 0; [/keyframe] [keyframe=60] opacity: 0; [/keyframe] [keyframe=100] opacity: 1; [/keyframe] [/animation] [class name=contitle] display: inline-block; margin-right: 10px; font-family: 'Averia Serif Libre', serif; text-transform: uppercase; font-size: .95em; color: rgba(86, 71, 67, 0.68); cursor: pointer; order: 1; transition: all 0s ease .5s; [/class] [class name=activecontitle] margin-right: 30px; color: #564743; order: 0; pointer-events: none; [/class] [class name=contenttext] display: block; font-family: 'Poppins', sanserif; color: #7e7371; text-align: justify; font-size: .85em; [/class] [class name=contentholder] display: flex; width: 100%; position: relative; flex: 1; flex-flow: column nowrap; justify-content: stretch; overflow: hidden; [/class] [class name=insidecontenthold] position: absolute; top: 0; left: 0; height: 100%; [/class] [script class=image on=click] fadeOut 1250 image fadeOut 1250 filler [/script] [script class=tab version=2 on=click] (= tabname (getText)) (if (== tabname "appearance") (group (fadeIn 1250 "image") (fadeIn 1250 "filler") (stop))) (addClass "navhide" "mainnav") (removeClass "return" "flower") (addClass (+ "bg" tabname) "flower") (addClass "contentreveal" tabname) (addClass "mobilebg" "flower") (setTimeout 4 (addClass (+ "anchor" tabname) "flower")) [/script] [script class=tabnav version=2 on=click] (= tabvar (getText)) (removeClass (+ "bg" tabname) "flower") (removeClass "contentreveal" "content") (if (== "home" tabvar) (group (removeClass "navhide" "mainnav") (addClass "return" "flower") (removeClass "mobilebg" "flower") (setTimeout 2 (removeClass (+ "anchor" tabname) "flower")) (stop))) (if (== "i" tabvar) (= tabnavname "basics")) (if (== "ii" tabvar) (= tabnavname "personal")) (if (== "iii" tabvar) (= tabnavname "physical")) (if (== "iv" tabvar) (= tabnavname "fluff")) (addClass (+ "bg" tabnavname) "flower") (addClass "contentreveal" tabnavname) (setTimeout 4 (group (addClass (+ "anchor" tabnavname) "flower") (removeClass (+ "anchor" tabname) "flower") (= tabname tabnavname))) [/script] [script class=personaltabs version=2 on=click] (= personaltabsel (getText)) (addClass "hideunhide" "titleflex") (setTimeout 1 (removeClass "hideunhide" "titleflex")) (if (== personaltabsel "personality") (fadeOut 1000 "backstory")) (if (== personaltabsel "backstory") (fadeOut 1000 "personality")) (removeClass "activecontitle" "personaltabs") (addClass "activecontitle") (fadeIn 1000 personaltabsel) [/script] [script class=physicaltabs version=2 on=click] (= physicaltabsel (getText)) (addClass "hideunhide" "titleflex") (setTimeout 1 (removeClass "hideunhide" "titleflex")) (if (!= physicaltabsel "skills") (fadeOut 1000 "skills")) (if (!= physicaltabsel "magic") (fadeOut 1000 "magic")) (if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses")) (removeClass "activecontitle" "physicaltabs") (addClass "activecontitle") (fadeIn 1000 physicaltabsel) [/script] [div class=root] [div class=container] [div class=filler][/div] [div class="flower"][/div] [div class=image][/div] [div class=mainnav] [div class="tab tabbasics"]basics[/div] [div class="tab tabpersonal"]personal[/div] [div class="tab tabphysical"]physical[/div] [div class="tab tabfluff"]fluff[/div] [div class="tab tabappearance"]appearance[/div] [/div] [div class="content basics"] [div class="flexcontent basicinfo"] [div class=infotitle]basic information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]name[/div] [div class=infor]edelweiss[/div] [/div] [div class=inforow] [div class=infoq]aliases[/div] [div class=infor]ellie, fork ghost[/div] [/div] [div class=inforow] [div class=infoq]age[/div] [div class=infor]unknown[/div] [/div] [div class=inforow] [div class=infoq]gender[/div] [div class=infor]female[/div] [/div] [div class=inforow] [div class=infoq]race[/div] [div class=infor]ghost[/div] [/div] [div class=inforow] [div class=infoq]class[/div] [div class=infor]resident ghost[/div] [/div] [/div] [/div] [div class="tabnavbox basictabs"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [/div] [div class="content personal"] [div class="flexcontent personalinfo"] [div class=infotitle]personal information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]sexuality [/div] [div class=infor]Heterosexual[/div] [/div] [div class=inforow] [div class=infoq]high concept[/div] [div class=infor]Ghostly quartermaster who goes momfriend on everyone[/div] [/div] [div class=inforow] [div class=infoq]alignment[/div] [div class=infor]Neutral Good[/div] [/div] [div class=inforow] [div class=infoq]relatives[/div] [div class=infor]Aster[/div] [/div] [div class=inforow] [div class=infoq]affiliations[/div] [div class=infor]Guild of Heroes[/div] [/div] [/div] [/div] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [div class="flexcontent personalcontent"] [div class=titleflex] [div class="activecontitle contitle personaltabs"]personality[/div] [div class="contitle personaltabs"]backstory[/div] [/div] [div class=contentholder] [div class="scrollbox insidecontenthold contenttext personality"] Ellie is a cheerful individual whose death hasn't seemed to faze her in the least. If it weren't for the fact she literally goes through walls and is partially see-through, then one probably wouldn't realize she was a ghost. She's a frequently heard voice in the Guild, whether it's from nagging Ellie or sorting out the inventory. Laughter is an oft-heard sound in her presence.

Alongside her title of Quartermaster, she's also the guild's honorary mom. Taking care of others comes naturally to Ellie. As with any good mother figure, Ellie tends to be on the nosy side, asking questions at the expense of the recipient's comfort. She is incredibly trusting, often putting herself out there and opening up long before whoever she's talking to is ready to return the gesture. Naivety is commonly associated with her. It's easy to try and put up a wall against her friendly overtures, but Edelweiss is nothing if not persistent. Frankly if she's set her sights on you, you'd be better off just going along with it than trying to hide. It's near impossible to lock out a ghost after all.

[/div] [div class="scrollbox insidecontenthold contenttext backstory" style="display: none"] Edelweiss doesn't remember anything from before the afterlife. Her earliest memory is that of waking up in the arcane antiques shop, shocking the owner and almost giving the old man a heart attack. Thankfully she managed to calm him down before anything happened. When asked for a name, she was unable to give him any, which troubled her more than it did him. Eventually they decided on Edelweiss, after the flower embossed on the handle of the fork she was attached to. Not even Ellie herself knows why she would be bound to a fork of all things.

"Living" as a ghost wasn't too much of an adjustment. Considering she didn't remember of being alive, there wasn't much to adjust to. As the old man pointed out, she carried a few habits and quirks that were clearly of a former life, but their little forays into investigating the fork's past turned up nothing. She simply just became part of the shop, assisting the old man with his stock and keeping him company during his quieter days. When a customer came by that he didn't quite trust, it was up to Edelweiss to scare them out.

Unlike Ellie's status as undead, the artifacts dealer aged. And with his advanced years came the desire to retire. It wasn't a secret; he'd mentioned as much to his constant ghostly companion. Though reluctant to part ways, Edelweiss wasn't one to stop him from getting his much deserved rest. So she allowed him to vet potential new partners, eventually deciding on a nobleman named Aster Elliston. When the old man first broached the subject with him, the two were met with instant rejection. Ellie knew a lot of it had to do with how she scolded him during their first meeting, but she couldn't be blamed. The man was a mess. His coat had a rip, he looked to thin and his skin was sallow from lack of sun.

Aster came back frequently after that. Though Edelweiss could be annoying with her reminders, she meant well and the dealer had good stock. As the last of his items went up for sale, the Quartermaster came to see what he could get. Knowing this was probably the last time, the old man simply gave Aster the fork. With his manners too deeply ingrained to refute the gift or toss it behind his back, Aster was now stuck with Edelweiss the mom friend. Good timing too. The man looked ready to collapse after two nights of no eating or sleeping.

[/div] [/div] [/div] [/div] [div class="content physical"] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div] [div class="flexcontent physicalinfo"] [div class=infotitle]physical information[/div] [div class=scrollbox] [div class=inforow] [div class=infoq]weapons[/div] [div class=infor]fork[/div] [/div] [div class=inforow] [div class=infoq]armor[/div] [div class=infor]no physical presence[/div] [/div] [div class=inforow] [div class=infoq]items[/div] [div class=infor]notebook[/div] [/div] [/div] [/div] [div class="flexcontent physicalcontent"] [div class=titleflex] [div class="activecontitle contitle physicaltabs"]skills[/div] [div class="contitle physicaltabs"]magic[/div] [div class="contitle physicaltabs"]weaknesses[/div] [/div] [div class="contentholder"] [div class="scrollbox insidecontenthold contenttext skills"] Cooking - While she's by no means a culinary genius, her meals are more than just palatable. She has perfected a few choice meals, namely those that are favored by Aster that are also nutritious. Getting the man to eat when he's buried in something is no easy feat.

Multitasking - Edelweiss can cook, clean, sort the inventory and hold a conversation - all at the same time. The real miracle is that she's able to do it without making a mistake in any of them.

Organization - Being able to keep on top of the guild's many supplies requires ruthless management and record-keeping. Do not try to skim off the top of anything of the sort; Edelweiss will find out.

Memory - Organization requires a sharp memory, and Edelweiss has that. It's ironic she can remember who used what when, but can't seem to recall her own past.

[/div] [div class="scrollbox insidecontenthold contenttext magic" style="display: none"] Possession - Edelweiss has the ability to control up to 10 things, not including the item she's bound to which is the fork. This is limited to strictly inanimate and nonmagical objects.

Mana Reading - Although she can't see mana the way Aster can, Ellie can detect magical energy that enables her to tell if someone is predisposed to magic, or if there's a high concentration of it in a certain area.

Will of the Dead - She can speak to the souls of other dead people. This is only really applicable to ghosts who choose to be invisible to the living's eyes, unlike Ellie. There's not really much else.

[/div] [div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"] Edelweiss Fork - Damaging the fork causes excruciating pain for Ellie. Whoever has Ellie's fork basically owns her, which is why the dealer heavily vetted who would get the fork.

Sensitive to Magic - Areas of high mana concentration or powerful magic in general have the potential to corrupt her. If anyone blasted Edelweiss with a blast of telepathic magic, for example, there's a good chance they'll have complete access to her mind.

[/div] [/div] [/div] [/div] [div class="content fluff"] [div class=fluffleft] [div class="flexcontent fluffinfo"] [div class=infotitle]FLUFF[/div] [div class=scrollbox] [div class=inforow] [div class="infoq" style="flex: 1 0 75px;"]THEME[/div] [div class=infor]fakery tale[/div] [/div] [/div] [/div] [div class="flexcontent fluffhobbies"] [div class="contitle activecontitle"]hobbies[/div] [div class=scrollbox] [div class=contenttext] cooking, organizing supplies, nagging others, sewing, pranking newbies
[/div] [/div] [/div] [div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div] [/div] [div class=fluffright] [div class="flexcontent fluffnotes"] [div class="contitle activecontitle"]notes[/div] [div class=scrollbox] [div class=contenttext] people often hand Ellie any clothes that might have loose seams or rips so that she can sew them back up | if she's not doing inventory she's probably in the kitchen helping with the meals | or cleaning because few people actually tidy up in the guild
[/div] [/div] [/div] [div class="flexcontent fluffquotes"] [div class="contitle activecontitle"]quotes[/div] [div class=scrollbox] [div class=contenttext] "Aster if you don't eat, I'm going to burn your books down."

"Who left this sword on the floor?"

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

Alteras · May 15, 2018

[div class="root"][div class="leftside"] [div class="scroll"] [div class="flexwrapper"] [div class="scroll"] [div class="scrollitem"] [div class="title"] #aster&ellie [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]ahh, please come up with a way to return to main nav [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] Refresh the page [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]... [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"]Am i being judged [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]wats happening rn? i feel like crying and laughing at the joke [/div] [div class="textbox textbox2"] i think something just died in me [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"]i broke you [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]send help [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"]This is going to be the chat log [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"] i can actually feel my mouth turning into a smile but my eyes are starting to tear up... [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"]LOL I BROKE HIM [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"] i haven't been this emotionally confused since I watched Angel Beats [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div][div class="rightside"][div class="flexwrapper" style="padding: 30px;"][div class="scroll"][div class="scrollitem"]This is Aster and Ellie, a character pair we've wanted to do for a long time. This is actually one of the first designs we thought about when we started doing collabs. They both use the same basic code, but with different animation sequences. It has two central features, the moving around when it is in desktop mode, and the reorganized mobile version of the code. It took way too much out of me and sugarvine just broke me at one point. Everything has been done to make it as butter smooth as possible, and fully and completely deserves the ranking of Jank Level 9. As per usual, we'll be providing the code for learning purposes, but because of how much it took out of me, I absolutely refuse to adapt the code for anything else.

Sliding Animations
This is something we decided on very early on, that it would involve the user moving around the image of a flower. This actually required quite a bit of niftiness when coding. Because the user would be moving around alot, we wanted to make it butter smooth. We initially thought we could use background position and animate that, but that actually causes a lot of lag due to the way browser render objects. It all comes down to ways browser renders elements, Layout, Drawing, and Rendering (which are all oversimplifications and not at all what the proper technical term is, but it gets the point across). When using background position, it is drawing the image. And so for every frame that the animation goes through, it actually has to redraw and rerender it, making it choppy. If we used something like top: and left: or margin to animate it, we would be faced with the browser having to perform Layout rendering, once again heavily affecting the lag.

We got around this by using Transform. When a browser performs transform, it makes it its own layer, relieving the gpu of what it needs to spend time drawing. The animations for movement comes in two parts, the animation itself, and the anchoring.
[div class=codebutton]Aster's Animation[/div][div class="code asteranimationspoil"][comment]Basics Classes[/comment]
[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]
[class name=anchorbasics minWidth=800px]
transform: translate(-6.5%,16.25%);
background-color: #d1caba;
[/class]
[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%,16.25%);
[/keyframe]
[/animation]
[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]
[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]
[class name=basicinfo]
width: 46.5%;
height: 65%;
[/class]
[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Personal Classes[/comment]
[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]
[class name=anchorpersonal minWidth=800px]
transform: translate(12.5%,5.5%);
background-color: #d1caba;
[/class]
[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(12.5%,5.5%);
[/keyframe]
[/animation]
[class name=personal]
display: flex;
flex-flow: column wrap-reverse;
justify-content: start;
align-items: end;
align-content: space-between;
[/class]
[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]
[class name=personalinfo]
width: 45%;
height: 63%;
[/class]
[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]
[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]
[class name=anchorphysical minWidth=800px]
transform: translate(-14.25%, 3.8%);
background-color: #d1caba;
[/class]
[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14.25%, 3.8%);
[/keyframe]
[/animation]
[class name=physical]
display: flex;
flex-flow: column wrap;
justify-content: end;
align-items: end;
align-content: space-between;
[/class]
[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]
[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]
[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]
[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]
[class name=anchorfluff minWidth=800px]
transform: translate(-6.5%, -5%);
background-color: #d1caba;
[/class]
[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%, -5%);
[/keyframe]
[/animation]
[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]
[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]
[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]
[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]
[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
[/class]
[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
[/class]
[class name=fluffhobbies]
height: 50%;
[/class]
[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]
[class name=fluffright]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: end;
align-content: stretch;
[/class]
[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]
[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]
[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]
[class name=fluffquotes]
height: 50%;
[/class]
[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class][/div]
[div class=codebutton]Ellie's Animation[/div][div class="code ellieanimationspoil"][comment]Basics Classes[/comment]

[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]

[class name=anchorbasics minWidth=800px]
transform: translate(6%,2%);
background-color: #d1caba;
[/class]

[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(6%,2%);
[/keyframe]
[/animation]

[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]

[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]

[class name=basicinfo]
width: 46.5%;
height: 65%;
margin-right: 10%;
[/class]

[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=basictabs minWidth=800px]
margin-right: 10%;
[/class]

[comment]Personal Classes[/comment]

[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]

[class name=anchorpersonal minWidth=800px]
transform: translate(-2%,-16%);
background-color: #d1caba;
[/class]

[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-2%,-16%);
[/keyframe]
[/animation]

[class name=personal]
display: flex;
flex-flow: column wrap;
justify-content: start;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]

[class name=personalinfo]
width: 45%;
height: 63%;
[/class]

[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]

[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]

[class name=anchorphysical minWidth=800px]
transform: translate(-8%, 5.75%);
background-color: #d1caba;
[/class]

[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-8%, 5.75%);
[/keyframe]
[/animation]

[class name=physical]
display: flex;
flex-flow: column wrap-reverse;
justify-content: flex-end;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]

[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]

[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]

[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]

[class name=anchorfluff minWidth=800px]
transform: translate(-14%, -9%);
background-color: #d1caba;
[/class]

[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14%, -9%);
[/keyframe]
[/animation]

[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]

[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]

[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]

[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]

[class name=fluffinfo]
height: 28%;
margin-bottom: 3.5%;
margin-top: 2%;
[/class]

[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffhobbies]
height: 50%;
[/class]

[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=fluffright]
position: relative;
height: 100%;
width: 33%;
margin-left: 1.5%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-content: stretch;
[/class]

[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]

[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]

[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffquotes]
height: 50%;
[/class]

[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]
[/div]
[div class=codebutton]Animation Script[/div][div class="code animationscriptspoil"][script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]

[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script][/div]

Inside, you'll find that each and every class set has its own animation. The script provided shows that if you click on any of the tabs, it'll add the appropiate animation classes to the flower background. Something interesting you might notice is that there exists no keyframe=0. This is because keyframe=0 will be the properties of the original transform when it gets added. Unfortunately if we just add the animation classes, it won't smoothly flow from one tab to another, instead, it'll jump back to its original position before beginning the next animation. We could've used just made separate classes to return to the center and then move to the next tab, or make an animation to jump to other tabs, but that would require a lot more classes.

What we came up with instead is the anchor system. Using the bbscript+, we added an another class, carrying a transform that has the animation's final position, to the flower background the moment the animation ended. If we had used a transition delay property, it would have interrupted the animation, so we used the new bbscript function setTimeout to give us our delay. thankfully the animation occurs on full second intervals, so we didn't need to do some fancy math stuff to get the delay to work. This worked perfectly since when we removed the animation class and added in a different animation class to go to another tab, the background wouldn't jump, and in fact would move smoothly over to the new position. All we had to do was just remove the old anchor and add in the new one at the same time, and tada~, you have a system that lets you jump anywhere and only have to make one animation class for each section.

Mobile Perfection
When we designed it, we decided that for the mobile version, it would be too much to ask for all the pretty animations and the textboxes to occur. As such we decided to just use flexboxes and fit it all into shape when its own mobile. However one of the problems with that is the fact that on desktop, the tabs all are positioned absolutely. Likewise, the boxes were all sized based on percentages of the bounding box. This we got around with copious amounts of media queries. We made the boundary between mobile mode and desktop mode at 799px and 800px screen width. All the classes that were desktop specific were given the minWidth=800px argument in the class tag and everything that was mobile specific the maxWidth=799px argument in the class tag. That saved us a lot of room and meant that we only needed to add in properties that would change the class. We also made some shortcuts using class precedence and hierarchy. In the case of the tabs, we went over the top and made it so that only in mobile mode would it turn into a flexbox.
[div class=codebutton]Tab classes[/div][div class="code tabsspoil"][class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]

[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]

[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]

[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow:2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]

[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]

[class name=tabbasics minWidth=800px]
top: 46%;
left: 10%;
[/class]

[class name=tabpersonal minWidth=800px]
top: 68%;
left: 30%;
[/class]

[class name=tabphysical minWidth=800px]
top: 32%;
left: 53%;
[/class]

[class name=tabfluff minWidth=800px]
top: 64%;
left: 89%;
[/class]

[class name=tabappearance minWidth=800px]
top: 78.5%;
left: 70%;
[/class][/div]

As you can see, all those classes would only be applied when certain conditions were met, giving us a lot of control over how it looks over certain devices.

Closing Thoughts and Full Code
When I started to code this monster of a design, I thought it would only reach up to Jank 4 at most. Little did I know how crazy sugarvine's designs were. Literally, 24 hours after I said it would only reach Jank 4, I was coding in Jank 7 territory. It took me a whole week to figure out that animation anchoring system. A solid week was spent on repositioning all the tabs and box sizes. And don't get me started on how those inside box tabs work. They were their own nightmare on their own, forcing me to code more classes just to make it so that it would change positions when you switched, and the scrollboxes not playing nice with slideUp and slideDown. Agh!!!!

Next design better be a Jank 2, you hear me!!!!
[div class=codebutton]#aster[/div][div class="code astercodespoil"][nobr]

[comment][font=Averia Serif Libre]font[/font][font=Poppins]font[/font][/comment]

[class name=root]
width: 100%;
position: relative;
background-image: url('https://i.imgur.com/VkcW7TQ.jpg');
background-repeat: no-repeat;
background-size: 1250px;
background-position: center;
background-color: #e6e1d8;
background-blend-mode: color-burn;
[/class]
[class name=root maxWidth=799px]
--containerw: 95%;
--borderw: 15px;
--boundw: 15px;
padding: 2.5%;
[/class]
[class name=root minWidth=800px]
--containerw: 600px;
--borderw: 30px;
--boundw: 25px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
[/class]
[class name=root minWidth=1000px]
--containerw: 800px;
--borderw: 50px;
--boundw: 45px;
[/class]
[class name=root minWidth=1280px]
--containerw: 1050px;
--borderw: 50px;
--boundw: 45px;
[/class]
[class name=container]
position: relative;
margin: 100px;
max-width: 100%;
width: var(--containerw);
height: calc(9.25/16 * var(--containerw));
background-color: #e6e1d8;
border: var(--borderw) solid #e6e1d8;
box-sizing: border-box;
overflow: hidden;
[/class]
[class name=container maxWidth=799px]
margin: 0;
height: 0;
padding-bottom: calc(1036/540 * 95%);
[/class]
[class name=filler]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #e6e1d8;
z-index: 4;
[/class]
[class name=flower]
position: absolute;
top: -41.5%;
margin-left: -50%;
width: 200%;
padding-bottom: calc(2406/1779 * 90%);
opacity: .85;
transform-origin: center;
transform: translate(0%,0%);
background-blend-mode: darken;
background-color: #e6e1d8;
background-image: url('https://i.imgur.com/jHLDotq.jpg');
background-size: 45%;
background-position: center;
background-repeat: no-repeat;
[/class]
[class name=flower maxWidth=799px]
padding-bottom: 0;
height: 100%;
top: 0;
margin-left: 0;
left: 0;
width: 100%;
background-size: 200%;
background-position: 40% 35%;
transition: background-color 1s;
[/class]
[class name=flower minWidth=800px]
animation-duration: 3.5s;
animation-delay: .5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
[/class]
[class name=image]
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('https://i.imgur.com/IBcJZcb.jpg');
background-repeat: no-repeat;
background-size: 120%;
background-position: 50% 18%;
background-color: #e6e1d8;
background-blend-mode: multiply;
opacity: .9;
z-index: 5;
[/class]
[class name=image maxWidth=799px]
background-size: 230%;
background-position: 60% 18%;
[/class]
[class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]
[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]
[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]
[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]
[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]
[class name=tabbasics minWidth=800px]
top: 10%;
left: 25%;
[/class]
[class name=tabpersonal minWidth=800px]
top: 55%;
left: 14%;
[/class]
[class name=tabphysical minWidth=800px]
top: 30%;
left: 78%;
[/class]
[class name=tabfluff minWidth=800px]
top: 62%;
left: 78%;
[/class]
[class name=tabappearance minWidth=800px]
top: 89%;
left: 42%;
[/class]
[class name=content]
position: absolute;
top: var(--boundw);
left: var(--boundw);
right: var(--boundw);
bottom: var(--boundw);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
[/class]
[class name=contentreveal]
opacity: .75;
transition: opacity 1.25s ease 3s;
pointer-events: auto;
[/class]
[class name=contentreveal maxWidth=799px]
transition: opacity .5s ease .5s;
[/class]
[class name=tabnavbox]
position: relative;
align-self: stretch;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
font-size: initial;
[/class]
[class name=tabnavbox maxWidth=799px]
order: -1;
[/class]
[class name=tabnav]
position: relative;
display: inline-block;
color: #564743;
margin: .8em;
margin-bottom: .5em;
font-size: .75em;
font-family: 'Averia Serif Libre';
cursor: pointer;
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
[/class]
[class name=selected]
pointer-events: none;
[/class]
[class name=return minWidth=800px]
animation-name: {post_id}return;
animation-delay: 0s;
animation-duration: 2s;
[/class]
[animation=return]
[keyframe=5]
background-color: #d1caba;
[/keyframe]
[keyframe=50]
background-color: #e6e1d8;
[/keyframe]
[keyframe=100]
background-color: #e6e1d8;
transform: translate(0%, 0%);
[/keyframe]
[/animation]
[class name=mobilebg maxWidth=799px]
background-color: #d1caba;
[/class]

[comment]Formatting Classes[/comment]
[class name=scrollbox]
display: block;
width: 100%;
margin-top: 10px;
padding-right: 150px;
overflow-x: visible;
overflow-y: scroll;
box-sizing: content-box;
flex: 1;
[/class]
[class name=infotitle]
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
color: #564743;
font-size: 1.25em;
margin-bottom: 5px;
[/class]
[class name=inforow]
width: 95%;
padding-left: 5%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
overflow: hidden;
font-size: .9em;
margin: 0px -2px;
[/class]
[class name=inforow maxWidth=799px]
margin: 0px -2px 5px -2px;
[/class]
[class name=infoq]
flex: 1 0 120px;
text-transform: uppercase;
font-family: 'Poppins', sanserif;
color: #7e7371;
margin: 0px 2px;
[/class]
[class name=infor]
flex: 2 0 120px;
font-family: 'Averia Serif Libre', serif;
color: #564743;
margin: 0px 2px;
[/class]
[class name=flexcontent]
background-color: #e6e1d8;
overflow: hidden;
border: calc(.9 * var(--boundw)) solid #e6e1d8;
box-sizing: border-box;
position: relative;
display: flex;
flex-flow: column nowrap;
justify-stretch;
[/class]
[class name=titleflex]
display: inline-flex;
flex-flow: row wrap;
justify-content: start;
[/class]
[class name=hideunhide]
animation-name: {post_id}hideunhide;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
[/class]
[animation=hideunhide]
[keyframe=0]
opacity: 1;
[/keyframe]
[keyframe=40]
opacity: 0;
[/keyframe]
[keyframe=60]
opacity: 0;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]
[class name=contitle]
display: inline-block;
margin-right: 10px;
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
font-size: .95em;
color: rgba(86, 71, 67, 0.68);
cursor: pointer;
order: 1;
transition: all 0s ease .5s;
[/class]
[class name=activecontitle]
margin-right: 30px;
color: #564743;
order: 0;
pointer-events: none;
[/class]
[class name=contenttext]
display: block;
font-family: 'Poppins', sanserif;
color: #7e7371;
text-align: justify;
font-size: .85em;
[/class]
[class name=contentholder]
display: flex;
width: 100%;
position: relative;
flex: 1;
flex-flow: column nowrap;
justify-content: stretch;
overflow: hidden;
[/class]
[class name=insidecontenthold]
position: absolute;
top: 0;
left: 0;
height: 100%;
[/class]

[comment]Basics Classes[/comment]
[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]
[class name=anchorbasics minWidth=800px]
transform: translate(-6.5%,16.25%);
background-color: #d1caba;
[/class]
[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(4.5%,16.25%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%,16.25%);
[/keyframe]
[/animation]
[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]
[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]
[class name=basicinfo]
width: 46.5%;
height: 65%;
[/class]
[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Personal Classes[/comment]
[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]
[class name=anchorpersonal minWidth=800px]
transform: translate(12.5%,5.5%);
background-color: #d1caba;
[/class]
[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(12.5%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(12.5%,5.5%);
[/keyframe]
[/animation]
[class name=personal]
display: flex;
flex-flow: column wrap-reverse;
justify-content: start;
align-items: end;
align-content: space-between;
[/class]
[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]
[class name=personalinfo]
width: 45%;
height: 63%;
[/class]
[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]
[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]
[class name=anchorphysical minWidth=800px]
transform: translate(-14.25%, 3.8%);
background-color: #d1caba;
[/class]
[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-5%, 10%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14.25%, 3.8%);
[/keyframe]
[/animation]
[class name=physical]
display: flex;
flex-flow: column wrap;
justify-content: end;
align-items: end;
align-content: space-between;
[/class]
[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]
[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]
[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]
[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]
[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]
[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]
[class name=anchorfluff minWidth=800px]
transform: translate(-6.5%, -5%);
background-color: #d1caba;
[/class]
[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8
transform: translate(0%, -6.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-6.5%, -5%);
[/keyframe]
[/animation]
[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]
[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]
[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]
[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]
[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
[/class]
[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
[/class]
[class name=fluffhobbies]
height: 50%;
[/class]
[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]
[class name=fluffright]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: end;
align-content: stretch;
[/class]
[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]
[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]
[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]
[class name=fluffquotes]
height: 50%;
[/class]
[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]scripts[/comment]
[script class=image on=click]
fadeOut 1250 image
fadeOut 1250 filler
[/script]
[script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]
[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script]
[script class=personaltabs version=2 on=click]
(= personaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (== personaltabsel "personality") (fadeOut 1000 "backstory"))
(if (== personaltabsel "backstory") (fadeOut 1000 "personality"))
(removeClass "activecontitle" "personaltabs")
(addClass "activecontitle")
(fadeIn 1000 personaltabsel)
[/script]

[script class=physicaltabs version=2 on=click]
(= physicaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (!= physicaltabsel "skills") (fadeOut 1000 "skills"))
(if (!= physicaltabsel "magic") (fadeOut 1000 "magic"))
(if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses"))
(removeClass "activecontitle" "physicaltabs")
(addClass "activecontitle")
(fadeIn 1000 physicaltabsel)
[/script]

[div class=root]
[div class=container]
[div class=filler][/div]
[div class=image][/div]
[div class="flower"][/div]
[div class=mainnav]
[div class="tab tabbasics"]basics[/div]
[div class="tab tabpersonal"]personal[/div]
[div class="tab tabphysical"]physical[/div]
[div class="tab tabfluff"]fluff[/div]
[div class="tab tabappearance"]appearance[/div]
[/div]
[div class="content basics"]
[div class="flexcontent basicinfo"]
[div class=infotitle]basic information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]name[/div]
[div class=infor]Aster Elliston[/div]
[/div]
[div class=inforow]
[div class=infoq]aliases[/div]
[div class=infor]The Collector[br][/br]Marquis Elliston[/div]
[/div]
[div class=inforow]
[div class=infoq]age[/div]
[div class=infor]Twenty-nine (29)[/div]
[/div]
[div class=inforow]
[div class=infoq]gender[/div]
[div class=infor]Male[/div]
[/div]
[div class=inforow]
[div class=infoq]race[/div]
[div class=infor]Human[/div]
[/div]
[div class=inforow]
[div class=infoq]class[/div]
[div class=infor]Quartermaster Assistant (Merchant Variant with a focus on military logistics)[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class="content personal"]
[div class="flexcontent personalinfo"]
[div class=infotitle]personal information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]sexuality [/div]
[div class=infor]Heterosexual[/div]
[/div]
[div class=inforow]
[div class=infoq]high concept[/div]
[div class=infor]Unkempt Negotiator & Quartermaster Assistant[/div]
[/div]
[div class=inforow]
[div class=infoq]alignment[/div]
[div class=infor]Neutral Good[/div]
[/div]
[div class=inforow]
[div class=infoq]relatives[/div]
[div class=infor]Mother[br][/br]Father[br][/br]Ellie[/div]
[/div]
[div class=inforow]
[div class=infoq]affiliations[/div]
[div class=infor]Guild of Heroes[br][/br]Nobleman of Albion[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent personalcontent"]
[div class=titleflex]
[div class="activecontitle contitle personaltabs"]personality[/div]
[div class="contitle personaltabs"]backstory[/div]
[/div]
[div class=contentholder]
[div class="scrollbox insidecontenthold contenttext personality"]
Aster Elliston doesn't like people very much. He would much rather keep to himself and watch pretty mana do pretty things. While his professionalism is perfect, casual conversation is barely doable and intimacy is not happening anytime soon. He is pretty much reliant on Ellie Edelweiss to do anything daily life related, but he can pull through when he's motivated. He's a klutz, a walking embodiment of the noble disconnected from common sense, even though he's got good intuition when it comes to items and artifacts.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext backstory" style="display: none"]
Born to a noble family, Aster Elliston had some high standards placed on him since birth. Not only to succeed the title of Marquis, but to also live up to the source of the title, to become a Quartermaster of the Guild of Heroes. The Elliston Family traces their lineage to Robin Elliston-Clark, the one of the first Quartermasters of the Guild. Subsequent generations took on the role of Quartermaster and became an informal mediator between the Guild and the Court when the title of Marquis was bestowed to the family following some battle or another. In any case, Aster completely shirked these responsibilities, for the most part. Robin's specialized magic manifested in his Oculi Veritatis, making his childhood even more abnormal. He quickly became fascinated by magic objects and their mana flow. But the people around those magic objects were often times not pure at heart, something he sometimes caught glimpses of with his eyes. While initially not something important, he would later try to avoid people because of that. But what probably led him to avoid people was this:
[br][/br][br][/br]
When Aster got more and more consumed from watching the mana flow, he wouldn't really pay attention to anything else. This usually meant, that he either was in a mess, left a mess, or was the mess, be it not eating, not being organized, not keeping his appearances, etc. Of course, he usually had maids to take care of all of that and his parents were more focused on him training to be a Quartermaster, so he more or less got use to it. Unfortunately this carried over to adulthood, even after he became the Quartermaster.
[br][/br][br][/br]
That was when he met Ellie Edelweiss, the fork possessing ghost. During one of Aster's regular appointments with an arcane artifacts dealer, the dealer said he something for him. Opening the box, he was met with a fork and a ghost. The ghost gave him a life tip reminder, but he, still not liking people, decided to close the box and leave. Every time he came back, the ghost always gave him a reminder, something along the lines of "don't forget to eat your vegetables!" and "make sure to comb your hair!" This happened all the time that the dealer decided to stop him. "Aster, I've known you for a long time. Just take the fork. It'll do you some good." And so Ellie Edelweiss became his closest... mom friend? Either way, she's prob the only thing keeping his life together.[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content physical"]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent physicalinfo"]
[div class=infotitle]physical information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]weapons[/div]
[div class=infor]Fork[br][/br]Quill[br][/br]Collection of Artifacts[/div]
[/div]
[div class=inforow]
[div class=infoq]armor[/div]
[div class=infor]a Slightly Unkempt Suit[br][/br]Blazer[br][/br]Undershirt.[/div]
[/div]
[div class=inforow]
[div class=infoq]items[/div]
[div class=infor]A fancy pen[br][/br]Ellie?[br][/br]An Extensive Collection[/div]
[/div]
[/div]
[/div]
[div class="flexcontent physicalcontent"]
[div class=titleflex]
[div class="activecontitle contitle physicaltabs"]skills[/div]
[div class="contitle physicaltabs"]magic[/div]
[div class="contitle physicaltabs"]weaknesses[/div]
[/div]
[div class="contentholder"]
[div class="scrollbox insidecontenthold contenttext skills"]
[b]Connoisseur of All[/b] - He is well respected as an expert in many collections, most notably, antiquity. He can generally figure out what something does with a bit of time, and know its worth almost instantly.[br][/br][br][/br]
[b]Quartermaster Assistant[/b] - He may be the official Quartermaster, but he's more like the assistant. Has some skill in a variety of weapons, and can know the detail of any weapon he lays his eyes on. His skills mostly lie in magical items.[br][/br][br][/br]
[b]Collector[/b] - Has great organizational skills and a wealth of knowledge in many artifacts.[br][/br][br][/br]
[b]Negotiator[/b] - Has great negotiating skills and can make split second decisions. When it comes to the guild, he can thoroughly represent their wishes in the Royal Court, pushing forward a favorable position for the Guild. When it comes to himself, he will not compromise.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext magic" style="display: none"]
[b]Oculi Veritatis[/b] - He has magic filled eyes that let him see the flow of mana, allowing him to make educated guesses about the nature of things, specifically magic items. He is also able to see mana flow during magic activation can generally guess what spell is being performed. Due to the nature of the Anatomy of Soul and the risks to his psyche on the off chance that he accidentally sees into one's soul, he tries to avoid doing that. Because of that, he's grown to not like other people, due to some childhood experiences. It is a passive and biological part of him.[br][/br][br][/br]
[b]Gnawing Negotiations[/b] - He is able to plant suggestions in the minds of his opponents as an inferior form of mind control. However, they're very weak and is usually only good for negotiations and trade. Not very effective in combat, but if applied many times and long enough, could result in some changes comparable to a proper mind control.[br][/br][br][/br]
[b]Military Standard Only[/b] - He can identify fakes, both item and people. He can temporarily dispel any negative effect on anything, but only for 5 minutes at most.[br][/br][br][/br]
[b]Fresh Supplies[/b] - He summons army supply boxes, enough to stock a small platoon. Contains anything and everything from rations to flags to explosives. It's very very taxing him and will prob knock him out for a good week or so, but the items summoned will be on the same level as the equipment one might see for Royal Elites. Sometimes there's even an magical item that can be categorized as an arcane artifact.[br][/br][br][/br]
[b]Basic Magic Spells[/b] - He's a nobleman, he should at least try to not embarrass himself.[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"]
Ellie Edelweiss.[br][/br][br][/br]
Daily Life Necessities.[br][/br][br][/br]
Combat.[br][/br][br][/br]
Interacting with people on an intimate level.[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content fluff"]
[div class=fluffleft]
[div class="flexcontent fluffinfo"]
[div class=infotitle]FLUFF[/div]
[div class=scrollbox]
[div class=inforow]
[div class="infoq" style="flex: 1 0 75px;"]THEME[/div]
[div class=infor][url=https://www.youtube.com/watch?v=XSQ2uF6AxyY]Voynich Manuscript[/url][/div]
[/div]
[/div]
[/div]
[div class="flexcontent fluffhobbies"]
[div class="contitle activecontitle"]hobbies[/div]
[div class=scrollbox]
[div class=contenttext]
Collecting Artifacts[br][/br][br][/br]
Watching Mana flow.
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class=fluffright]
[div class="flexcontent fluffnotes"]
[div class="contitle activecontitle"]notes[/div]
[div class=scrollbox]
[div class=contenttext]
notes here
[/div]
[/div]
[/div]
[div class="flexcontent fluffquotes"]
[div class="contitle activecontitle"]quotes[/div]
[div class=scrollbox]
[div class=contenttext]
"..." *ignores*[br][/br][br][/br]
"Ellie!! Save me!!"[br][/br][br][/br]
"Stop staring at me..."[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr][/div]
[div class=codebutton]#ellie[/div][div class="code elliecodespoil"][nobr]

[nobr]

[comment][font=Averia Serif Libre]font[/font][font=Poppins]font[/font][/comment]

[class name=root]
width: 100%;
position: relative;
background-image: url('https://i.imgur.com/FUMoqzM.jpg');
background-repeat: no-repeat;
background-size: 1250px;
background-position: center;
background-color: #e6e1d8;
background-blend-mode: color-burn;
[/class]

[class name=root maxWidth=799px]
--containerw: 95%;
--borderw: 15px;
--boundw: 15px;
padding: 2.5%;
[/class]

[class name=root minWidth=800px]
--containerw: 600px;
--borderw: 30px;
--boundw: 25px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
[/class]

[class name=root minWidth=1000px]
--containerw: 800px;
--borderw: 50px;
--boundw: 45px;
[/class]

[class name=root minWidth=1280px]
--containerw: 1050px;
--borderw: 50px;
--boundw: 45px;
[/class]

[class name=container]
position: relative;
margin: 100px;
max-width: 100%;
width: var(--containerw);
height: calc(9.25/16 * var(--containerw));
background-color: #e6e1d8;
border: var(--borderw) solid #e6e1d8;
box-sizing: border-box;
overflow: hidden;
[/class]

[class name=container maxWidth=799px]
margin: 0;
height: 0;
padding-bottom: calc(1036/540 * 95%);
[/class]

[class name=filler]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #e6e1d8;
z-index: 4;
[/class]

[class name=flower]
position: absolute;
top: -8%;
margin-left: -25%;
width: 150%;
padding-bottom: calc(712/1000 * 105%);
transform-origin: center;
transform: translate(0%,0%);
background-blend-mode: multiply;
background-color: #e6e1d8;
background-image: url('https://i.imgur.com/QQLe4Iy.jpg');
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
[/class]

[class name=flower maxWidth=799px]
padding-bottom: 0;
height: 100%;
top: 0;
margin-left: 0;
left: 0;
width: 100%;
background-size: 170%;
background-position: center;
background-image: url('https://i.imgur.com/Cslz4KR.jpg');
transition: background-color 1s;
[/class]

[class name=flower minWidth=800px]
animation-duration: 3.5s;
animation-delay: .5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
[/class]

[class name=image]
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('https://i.imgur.com/WXIk72m.jpg');
background-repeat: no-repeat;
background-size: 210%;
background-position: 45% 25%;
background-color: #e6e1d8;
background-blend-mode: multiply;
opacity: .9;
z-index: 5;
[/class]

[class name=image maxWidth=799px]
background-size: 400%;
background-position: 58% 33%;
[/class]

[class name=mainnav]
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
font-size: initial;
opacity: .9;
transition: opacity .5s ease 2.1s;
[/class]

[class name=mainnav maxWidth=799px]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity .5s ease .5s
[/class]

[class name=navhide]
opacity: 0;
transition: opacity .5s;
[/class]

[class name=tab]
text-transform: uppercase;
color: #564743;
font-size: .9em;
font-family: 'Averia Serif Libre';
position: absolute;
transform: translate(-50%,-50%);
text-shadow:2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
cursor: pointer;
z-index: 3;
[/class]

[class name=tab maxWidth=799px]
position: relative;
font-size: 4.5vh;
transform: translate(0,0);
margin: 1vh;
[/class]

[class name=tabbasics minWidth=800px]
top: 46%;
left: 10%;
[/class]

[class name=tabpersonal minWidth=800px]
top: 68%;
left: 30%;
[/class]

[class name=tabphysical minWidth=800px]
top: 32%;
left: 53%;
[/class]

[class name=tabfluff minWidth=800px]
top: 64%;
left: 89%;
[/class]

[class name=tabappearance minWidth=800px]
top: 78.5%;
left: 70%;
[/class]

[class name=content]
position: absolute;
top: var(--boundw);
left: var(--boundw);
right: var(--boundw);
bottom: var(--boundw);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
[/class]

[class name=contentreveal]
opacity: .75;
transition: opacity 1.25s ease 3s;
pointer-events: auto;
[/class]

[class name=contentreveal maxWidth=799px]
transition: opacity .5s ease .5s;
[/class]

[class name=tabnavbox]
position: relative;
align-self: stretch;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
font-size: initial;
[/class]

[class name=tabnavbox maxWidth=799px]
order: -1;
[/class]

[class name=tabnav]
position: relative;
display: inline-block;
color: #564743;
margin: .8em;
margin-bottom: .5em;
font-size: .75em;
font-family: 'Averia Serif Libre';
cursor: pointer;
text-shadow: 2px 2px 1px #e6e1d8, -2px -2px 1px #e6e1d8, 2px -2px 1px #e6e1d8, -2px 2px 1px #e6e1d8;
[/class]

[class name=selected]
pointer-events: none;
[/class]

[class name=return minWidth=800px]
animation-name: {post_id}return;
animation-delay: 0s;
animation-duration: 2s;
[/class]

[animation=return]
[keyframe=5]
background-color: #d1caba;
[/keyframe]
[keyframe=50]
background-color: #e6e1d8;
[/keyframe]
[keyframe=100]
background-color: #e6e1d8;
transform: translate(0%, 0%);
[/keyframe]
[/animation]

[class name=mobilebg maxWidth=799px]
background-color: #d1caba;
[/class]

[comment]Basics Classes[/comment]

[class name=bgbasics minWidth=800px]
animation-name: {post_id}bgbasic;
[/class]

[class name=anchorbasics minWidth=800px]
transform: translate(6%,2%);
background-color: #d1caba;
[/class]

[animation=bgbasic]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(18%,0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(6%,2%);
[/keyframe]
[/animation]

[class name=basics]
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-end;
[/class]

[class name=basics maxWidth=799px]
align-items: stretch;
justify-content: start;
[/class]

[class name=basicinfo]
width: 46.5%;
height: 65%;
margin-right: 10%;
[/class]

[class name=basicinfo maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=basictabs minWidth=800px]
margin-right: 10%;
[/class]

[comment]Personal Classes[/comment]

[class name=bgpersonal minWidth=800px]
animation-name: {post_id}bgpersonal;
[/class]

[class name=anchorpersonal minWidth=800px]
transform: translate(-2%,-16%);
background-color: #d1caba;
[/class]

[animation=bgpersonal]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(0%,-20%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-2%,-16%);
[/keyframe]
[/animation]

[class name=personal]
display: flex;
flex-flow: column wrap;
justify-content: start;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=personal maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
[/class]

[class name=personalinfo]
width: 45%;
height: 63%;
[/class]

[class name=personalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=personalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=personalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Physical Classes[/comment]

[class name=bgphysical minWidth=800px]
animation-name: {post_id}bgphysical;
[/class]

[class name=anchorphysical minWidth=800px]
transform: translate(-8%, 5.75%);
background-color: #d1caba;
[/class]

[animation=bgphysical]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-13%, 5.75%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-8%, 5.75%);
[/keyframe]
[/animation]

[class name=physical]
display: flex;
flex-flow: column wrap-reverse;
justify-content: flex-end;
align-items: flex-end;
align-content: space-between;
[/class]

[class name=physical maxWidth=799px]
flex-flow: column nowrap;
justify-content: start;
align-items: stretch;
[/class]

[class name=physicalinfo]
width: 45%;
height: 62%;
margin-bottom: -2.5%;
[/class]

[class name=physicalinfo maxWidth=799px]
width: 100%;
height: 30%;
margin-bottom: 2.5%;
[/class]

[class name=physicalcontent]
width: 49.5%;
height: 100%;
[/class]

[class name=physicalcontent maxWidth=799px]
width: 100%;
height: 60%;
flex: 1;
[/class]

[comment]Fluff Classes[/comment]

[class name=bgfluff minWidth=800px]
animation-name: {post_id}bgfluff;
[/class]

[class name=anchorfluff minWidth=800px]
transform: translate(-14%, -9%);
background-color: #d1caba;
[/class]

[animation=bgfluff]
[keyframe=15]
background-color: #e6e1d8;
[/keyframe]
[keyframe=47]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=52]
background-color: #e6e1d8;
transform: translate(-14%, 0%);
[/keyframe]
[keyframe=100]
background-color: #d1caba;
transform: translate(-14%, -9%);
[/keyframe]
[/animation]

[class name=fluff]
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]

[class name=fluff maxWidth=799px]
flex-flow: column nowrap;
align-items: stretch;
justify-content: start;
[/class]

[class name=fluffleft]
position: relative;
height: 100%;
width: 36.5%;
display: flex;
flex-flow: column nowrap;
justify-content: start;
align-content: stretch;
[/class]

[class name=fluffleft maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
margin-bottom: 2.5%;
[/class]

[class name=fluffinfo]
height: 35%;
margin-bottom: 3.5%;
margin-top: 2%;
[/class]

[class name=fluffinfo maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffhobbies]
height: 50%;
[/class]

[class name=fluffhobbies maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[class name=fluffright]
position: relative;
height: 100%;
width: 33%;
margin-left: 1.5%;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-content: stretch;
[/class]

[class name=fluffright maxWidth=799px]
width: 100%;
height: 45%;
flex: 1;
justify-content: stretch;
align-items: stretch;
[/class]

[class name=fluffnotes]
height: 38%;
margin-bottom: 3.5%;
[/class]

[class name=fluffnotes maxWidth=799px]
flex: 1;
margin-bottom: 5%;
margin-top: 0;
[/class]

[class name=fluffquotes]
height: 50%;
[/class]

[class name=fluffquotes maxWidth=799px]
width: 100%;
flex: 1;
[/class]

[comment]Formatting Classes[/comment]
[class name=scrollbox]
display: block;
width: 100%;
margin-top: 10px;
padding-right: 150px;
overflow-x: visible;
overflow-y: scroll;
box-sizing: content-box;
flex: 1;
[/class]
[class name=infotitle]
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
color: #564743;
font-size: 1.25em;
margin-bottom: 5px;
[/class]
[class name=inforow]
width: 95%;
padding-left: 5%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: stretch;
overflow: hidden;
font-size: .9em;
margin: 0px -2px;
[/class]
[class name=inforow maxWidth=799px]
margin: 0px -2px 5px -2px;
[/class]
[class name=infoq]
flex: 1 0 120px;
text-transform: uppercase;
font-family: 'Poppins', sanserif;
color: #7e7371;
margin: 0px 2px;
[/class]
[class name=infor]
flex: 2 0 120px;
font-family: 'Averia Serif Libre', serif;
color: #564743;
margin: 0px 2px;
[/class]
[class name=flexcontent]
background-color: #e6e1d8;
overflow: hidden;
border: calc(.9 * var(--boundw)) solid #e6e1d8;
box-sizing: border-box;
position: relative;
display: flex;
flex-flow: column nowrap;
justify-stretch;
[/class]
[class name=titleflex]
display: inline-flex;
flex-flow: row wrap;
justify-content: start;
[/class]
[class name=hideunhide]
animation-name: {post_id}hideunhide;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
[/class]
[animation=hideunhide]
[keyframe=0]
opacity: 1;
[/keyframe]
[keyframe=40]
opacity: 0;
[/keyframe]
[keyframe=60]
opacity: 0;
[/keyframe]
[keyframe=100]
opacity: 1;
[/keyframe]
[/animation]
[class name=contitle]
display: inline-block;
margin-right: 10px;
font-family: 'Averia Serif Libre', serif;
text-transform: uppercase;
font-size: .95em;
color: rgba(86, 71, 67, 0.68);
cursor: pointer;
order: 1;
transition: all 0s ease .5s;
[/class]
[class name=activecontitle]
margin-right: 30px;
color: #564743;
order: 0;
pointer-events: none;
[/class]
[class name=contenttext]
display: block;
font-family: 'Poppins', sanserif;
color: #7e7371;
text-align: justify;
font-size: .85em;
[/class]
[class name=contentholder]
display: flex;
width: 100%;
position: relative;
flex: 1;
flex-flow: column nowrap;
justify-content: stretch;
overflow: hidden;
[/class]
[class name=insidecontenthold]
position: absolute;
top: 0;
left: 0;
height: 100%;
[/class]

[comment]Scripts[/comment]

[script class=image on=click]
fadeOut 1250 image
fadeOut 1250 filler
[/script]

[script class=tab version=2 on=click]
(= tabname (getText))
(if (== tabname "appearance") (group
(fadeIn 1250 "image")
(fadeIn 1250 "filler")
(stop)))

(addClass "navhide" "mainnav")
(removeClass "return" "flower")
(addClass (+ "bg" tabname) "flower")
(addClass "contentreveal" tabname)
(addClass "mobilebg" "flower")
(setTimeout 4 (addClass (+ "anchor" tabname) "flower"))
[/script]

[script class=tabnav version=2 on=click]
(= tabvar (getText))

(removeClass (+ "bg" tabname) "flower")
(removeClass "contentreveal" "content")

(if (== "home" tabvar) (group
(removeClass "navhide" "mainnav")
(addClass "return" "flower")
(removeClass "mobilebg" "flower")
(setTimeout 2 (removeClass (+ "anchor" tabname) "flower"))
(stop)))

(if (== "i" tabvar) (= tabnavname "basics"))
(if (== "ii" tabvar) (= tabnavname "personal"))
(if (== "iii" tabvar) (= tabnavname "physical"))
(if (== "iv" tabvar) (= tabnavname "fluff"))

(addClass (+ "bg" tabnavname) "flower")
(addClass "contentreveal" tabnavname)
(setTimeout 4 (group
(addClass (+ "anchor" tabnavname) "flower")
(removeClass (+ "anchor" tabname) "flower")
(= tabname tabnavname)))
[/script]

[script class=personaltabs version=2 on=click]
(= personaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (== personaltabsel "personality") (fadeOut 1000 "backstory"))
(if (== personaltabsel "backstory") (fadeOut 1000 "personality"))
(removeClass "activecontitle" "personaltabs")
(addClass "activecontitle")
(fadeIn 1000 personaltabsel)
[/script]

[script class=physicaltabs version=2 on=click]
(= physicaltabsel (getText))
(addClass "hideunhide" "titleflex")
(setTimeout 1 (removeClass "hideunhide" "titleflex"))
(if (!= physicaltabsel "skills") (fadeOut 1000 "skills"))
(if (!= physicaltabsel "magic") (fadeOut 1000 "magic"))
(if (!= physicaltabsel "weaknesses") (fadeOut 1000 "weaknesses"))
(removeClass "activecontitle" "physicaltabs")
(addClass "activecontitle")
(fadeIn 1000 physicaltabsel)
[/script]

[div class=root]
[div class=container]
[div class=filler][/div]
[div class="flower"][/div]
[div class=image][/div]
[div class=mainnav]
[div class="tab tabbasics"]basics[/div]
[div class="tab tabpersonal"]personal[/div]
[div class="tab tabphysical"]physical[/div]
[div class="tab tabfluff"]fluff[/div]
[div class="tab tabappearance"]appearance[/div]
[/div]
[div class="content basics"]
[div class="flexcontent basicinfo"]
[div class=infotitle]basic information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]name[/div]
[div class=infor]edelweiss[/div]
[/div]
[div class=inforow]
[div class=infoq]aliases[/div]
[div class=infor]ellie, fork ghost[/div]
[/div]
[div class=inforow]
[div class=infoq]age[/div]
[div class=infor]unknown[/div]
[/div]
[div class=inforow]
[div class=infoq]gender[/div]
[div class=infor]female[/div]
[/div]
[div class=inforow]
[div class=infoq]race[/div]
[div class=infor]ghost[/div]
[/div]
[div class=inforow]
[div class=infoq]class[/div]
[div class=infor]resident ghost[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox basictabs"][div class="tabnav"]home[/div][div class="tabnav selected"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class="content personal"]
[div class="flexcontent personalinfo"]
[div class=infotitle]personal information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]sexuality [/div]
[div class=infor]Heterosexual[/div]
[/div]
[div class=inforow]
[div class=infoq]high concept[/div]
[div class=infor]Ghostly quartermaster who goes momfriend on everyone[/div]
[/div]
[div class=inforow]
[div class=infoq]alignment[/div]
[div class=infor]Neutral Good[/div]
[/div]
[div class=inforow]
[div class=infoq]relatives[/div]
[div class=infor]Aster[/div]
[/div]
[div class=inforow]
[div class=infoq]affiliations[/div]
[div class=infor]Guild of Heroes[/div]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav selected"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent personalcontent"]
[div class=titleflex]
[div class="activecontitle contitle personaltabs"]personality[/div]
[div class="contitle personaltabs"]backstory[/div]
[/div]
[div class=contentholder]
[div class="scrollbox insidecontenthold contenttext personality"]
Ellie is a cheerful individual whose death hasn't seemed to faze her in the least. If it weren't for the fact she literally goes through walls and is partially see-through, then one probably wouldn't realize she was a ghost. She's a frequently heard voice in the Guild, whether it's from nagging Ellie or sorting out the inventory. Laughter is an oft-heard sound in her presence.
[br][/br][br][/br]
Alongside her title of Quartermaster, she's also the guild's honorary mom. Taking care of others comes naturally to Ellie. As with any good mother figure, Ellie tends to be on the nosy side, asking questions at the expense of the recipient's comfort. She is incredibly trusting, often putting herself out there and opening up long before whoever she's talking to is ready to return the gesture. Naivety is commonly associated with her. It's easy to try and put up a wall against her friendly overtures, but Edelweiss is nothing if not persistent. Frankly if she's set her sights on you, you'd be better off just going along with it than trying to hide. It's near impossible to lock out a ghost after all.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext backstory" style="display: none"]
Edelweiss doesn't remember anything from before the afterlife. Her earliest memory is that of waking up in the arcane antiques shop, shocking the owner and almost giving the old man a heart attack. Thankfully she managed to calm him down before anything happened. When asked for a name, she was unable to give him any, which troubled her more than it did him. Eventually they decided on Edelweiss, after the flower embossed on the handle of the fork she was attached to. Not even Ellie herself knows why she would be bound to a [i]fork[/i] of all things.
[br][/br][br][/br]
"Living" as a ghost wasn't too much of an adjustment. Considering she didn't remember of being alive, there wasn't much to adjust to. As the old man pointed out, she carried a few habits and quirks that were clearly of a former life, but their little forays into investigating the fork's past turned up nothing. She simply just became part of the shop, assisting the old man with his stock and keeping him company during his quieter days. When a customer came by that he didn't quite trust, it was up to Edelweiss to scare them out.
[br][/br][br][/br]
Unlike Ellie's status as undead, the artifacts dealer aged. And with his advanced years came the desire to retire. It wasn't a secret; he'd mentioned as much to his constant ghostly companion. Though reluctant to part ways, Edelweiss wasn't one to stop him from getting his much deserved rest. So she allowed him to vet potential new partners, eventually deciding on a nobleman named Aster Elliston. When the old man first broached the subject with him, the two were met with instant rejection. Ellie knew a lot of it had to do with how she scolded him during their first meeting, but she couldn't be blamed. The man was a mess. His coat had a rip, he looked to thin and his skin was sallow from lack of sun.
[br][/br][br][/br]
Aster came back frequently after that. Though Edelweiss could be annoying with her reminders, she meant well and the dealer had good stock. As the last of his items went up for sale, the Quartermaster came to see what he could get. Knowing this was probably the last time, the old man simply gave Aster the fork. With his manners too deeply ingrained to refute the gift or toss it behind his back, Aster was now stuck with Edelweiss the mom friend. Good timing too. The man looked ready to collapse after two nights of no eating or sleeping.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content physical"]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav selected"]iii[/div][div class="tabnav" style="margin-right: 1.5em;"]iv[/div][/div]
[div class="flexcontent physicalinfo"]
[div class=infotitle]physical information[/div]
[div class=scrollbox]
[div class=inforow]
[div class=infoq]weapons[/div]
[div class=infor]fork[/div]
[/div]
[div class=inforow]
[div class=infoq]armor[/div]
[div class=infor]no physical presence[/div]
[/div]
[div class=inforow]
[div class=infoq]items[/div]
[div class=infor]notebook[/div]
[/div]
[/div]
[/div]
[div class="flexcontent physicalcontent"]
[div class=titleflex]
[div class="activecontitle contitle physicaltabs"]skills[/div]
[div class="contitle physicaltabs"]magic[/div]
[div class="contitle physicaltabs"]weaknesses[/div]
[/div]
[div class="contentholder"]
[div class="scrollbox insidecontenthold contenttext skills"]
[b]Cooking[/b] - While she's by no means a culinary genius, her meals are more than just palatable. She has perfected a few choice meals, namely those that are favored by Aster that are also nutritious. Getting the man to eat when he's buried in something is no easy feat.
[br][/br][br][/br]
[b]Multitasking[/b] - Edelweiss can cook, clean, sort the inventory and hold a conversation - all at the same time. The real miracle is that she's able to do it without making a mistake in any of them.
[br][/br][br][/br]
[b]Organization[/b] - Being able to keep on top of the guild's many supplies requires ruthless management and record-keeping. Do not try to skim off the top of anything of the sort; Edelweiss will find out.
[br][/br][br][/br]
[b]Memory[/b] - Organization requires a sharp memory, and Edelweiss has that. It's ironic she can remember who used what when, but can't seem to recall her own past.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext magic" style="display: none"]
[b]Possession[/b] - Edelweiss has the ability to control up to 10 things, not including the item she's bound to which is the fork. This is limited to strictly inanimate and nonmagical objects.
[br][/br][br][/br]
[b]Mana Reading[/b] - Although she can't [i]see[/i] mana the way Aster can, Ellie can detect magical energy that enables her to tell if someone is predisposed to magic, or if there's a high concentration of it in a certain area.
[br][/br][br][/br]
[b]Will of the Dead[/b] - She can speak to the souls of other dead people. This is only really applicable to ghosts who choose to be invisible to the living's eyes, unlike Ellie. There's not really much else.
[br][/br][br][/br]
[/div]
[div class="scrollbox insidecontenthold contenttext weaknesses" style="display: none"]
[b]Edelweiss Fork[/b] - Damaging the fork causes excruciating pain for Ellie. Whoever has Ellie's fork basically owns her, which is why the dealer heavily vetted who would get the fork.
[br][/br][br][/br]
[b]Sensitive to Magic[/b] - Areas of high mana concentration or powerful magic in general have the potential to corrupt her. If anyone blasted Edelweiss with a blast of telepathic magic, for example, there's a good chance they'll have complete access to her mind.
[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[div class="content fluff"]
[div class=fluffleft]
[div class="flexcontent fluffinfo"]
[div class=infotitle]FLUFF[/div]
[div class=scrollbox]
[div class=inforow]
[div class="infoq" style="flex: 1 0 75px;"]THEME[/div]
[div class=infor][url=https://www.youtube.com/watch?v=2dzhAnOMTUU]fakery tale[/url][/div]
[/div]
[/div]
[/div]
[div class="flexcontent fluffhobbies"]
[div class="contitle activecontitle"]hobbies[/div]
[div class=scrollbox]
[div class=contenttext]
cooking, organizing supplies, nagging others, sewing, pranking newbies[br][/br]
[/div]
[/div]
[/div]
[div class="tabnavbox"][div class="tabnav"]home[/div][div class="tabnav"]i[/div][div class="tabnav"]ii[/div][div class="tabnav"]iii[/div][div class="tabnav selected" style="margin-right: 1.5em;"]iv[/div][/div]
[/div]
[div class=fluffright]
[div class="flexcontent fluffnotes"]
[div class="contitle activecontitle"]notes[/div]
[div class=scrollbox]
[div class=contenttext]
people often hand Ellie any clothes that might have loose seams or rips so that she can sew them back up | if she's not doing inventory she's probably in the kitchen helping with the meals | or cleaning because few people actually tidy up in the guild[br][/br]
[/div]
[/div]
[/div]
[div class="flexcontent fluffquotes"]
[div class="contitle activecontitle"]quotes[/div]
[div class=scrollbox]
[div class=contenttext]
"Aster if you don't eat, I'm going to burn your books down."[br][/br][br][/br]
"Who left this sword on the floor?"[br][/br][br][/br]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr][/div]

[/div][/div][/div][/div][/div] [class name=root] position: relative; width: 100%; background-color: #1d1d1d; background-image: url('https://i.imgur.com/3QMnky3.gif'); background-blend-mode: soft-light; overflow: hidden; font-size: initial; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; [/class] [class name=flexwrapper] display: block; box-sizing: border-box; height: 100%; overflow: hidden; [/class] [class name=scroll] display: block; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 150px; [/class] [class name=scrollitem] display: block; width: 100%; height: auto; position: relative; overflow: hidden; [/class] [class name=leftside] flex: 1 0 300px; max-width: 700px; background: url('https://i.imgur.com/DvQYu9V.jpg') no-repeat bottom right; background-size: cover; height: 80vh; overflow: hidden; text-align: center; [/class] [class name=title] display: block; position: sticky; position: -webkit-sticky; top: 0px; left: 0px; box-sizing: border-box; background: #ffca00; padding: 10px 20px; width: 100%; color: #1d1d1d; font-weight: bold; font-size: 2vh; [/class] [class name=dialogueblock] display: block; width: 100%; padding: 5px; box-sizing: border-box; margin: 15px 0px; [/class] [class name=textarea] display: inline-block; vertical-align: top; width: calc(100% - 105px); font-size: initial; overflow: hidden; [/class] [class name=textbox] display: block; width: 100%; border-radius: 10px; border: 0px solid transparent; box-sizing: border-box; padding: 15px; background: rgba(0, 0, 0, .75); min-height: 75px; color: #FFFFFF; text-align: justify; font-size: .8em; [/class] [class name=textbox2] min-height: 0px; margin-top: 10px; [/class] [class name=alticon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-right: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/me1I7BR.jpg') no-repeat center; [/class] [class name=monoicon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-left: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/IqFIsad.jpg') no-repeat center; [/class] [class name=name] font-size: 4vh; letter-spacing: -2px; width: calc(95% - 30px); margin: auto; color: #ff1ea6; text-shadow: 1px 1px 2px rgba(0,0,0,.8); font-weight: bold; font-family: 'Poppins', sanserif; margin-bottom: -2vh; white-space: nowrap; overflow: hidden; [/class] [class name=alt] text-align: left; [/class] [class name=mono] text-align: right; [/class] [class name=rightside] flex: 3 0 300px; height: 80vh; overflow: hidden; color: #FFFFFF; font-size: .8em; [/class] [class name=codebutton] padding: 10px 15px; display: inline-block; margin: 10px 0px 0px 10px; box-sizing: border-box; font-weight: bold; background: #ff1ea6; border-radius: 5px; width: auto; cursor: pointer; [/class] [class name=code] padding: 5px 15px 5px 15px; width: calc(100% - 20px); margin: 15px 0px 0px 20px; border-left: 1px solid #ffcd00; box-sizing: border-box; display: none; font-size: .95em; font-family: 'IBM Plex Mono', monospace; [/class] [script class=codebutton version=2 on=click] (= spoiler (index (split (getText) "spoil") 0 ) ) (slideToggle 1000 (+ spoiler "spoil") ) [/script]

cherub. · May 16, 2018

omg yes

fIora · May 16, 2018

this is goals - persona vibes honestly

fluticasone · Jun 8, 2018

[class name=aspectratio] display: block; width: 100%; padding-top: 60%; position: relative; [/class] [class name=aspectratio maxWidth=1000px] width: 100%; padding-top: 0px; [/class] [class name=root] --font: 'Hind', sanserif; display: block; margin: auto; overflow: hidden; background-color: #000000; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: var(--bgimg); background-blend-mode: soft-light, normal; background-size: var(--bgsize); background-position: var(--bgposition); [/class] [class name=root maxWidth=1000px] height: auto; min-height: 100px; position: relative; [/class] [class name=diagonal] position: absolute; top: 0px; left: 0px; display: block; width: 100%; margin-left: 13%; height: 100%; transform: skewX(52deg); transform-origin: 0px 0px; font-size: 0px; background-color: var(--bgcolor); [/class] [class name=diagonal maxWidth=1000px] width: 100%; height: 60vh; transform: skewY(20deg); transform-origin: 0px 0px; margin: 0px; margin-top: -50%; [/class] [class name=render] height: 100%; width: 100%; position: absolute; top: 0px; z-index: 6; pointer-events: none; font-size: 0px; background: var(--render); [/class] [class name=render maxWidth=1000px] display: none; [/class] [class name=invis] display: block; overflow: hidden; height: 100%; width: 100%; position: relative; z-index: 2; box-sizing: border-box; position: relative; [/class] [class name=translucentbox] display: flex; flex-wrap: row wrap; justify-content: flex-start; align-items: center; align-content: center; height: calc(100% - 200px); width: calc(100% - 200px); background: rgba(170, 170, 181, 0.2); color: #FFFFFF; overflow: hidden; box-sizing: border-box; padding: 30px; margin: 100px; [/class] [class name=translucentbox maxWidth=1000px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=mainnav] flex: 1 0 auto; max-width: 200px; overflow: hidden; font-size: initial; align-self: flex-start; margin: 5% 0px 0px 1%; position: relative; z-index: 7; [/class] [class name=mainnav maxWidth=1000px] display: block; flex: 0 0 0px; margin: 0px; margin-bottom: 10px; max-width: none; [/class] [class name=mainnavbtn] display: block; width: 100%; box-sizing: border-box; margin: 4px 0px; padding: 8px 12px; font-family: var(--font); font-size: .6em; letter-spacing: 2px; border-radius: 5px; text-transform: uppercase; cursor: pointer; position: relative; z-index: 7; color: #c2c2ca; background: #19221c; box-shadow: inset 0px 0px 5px #131b10; transition: background .8s ease-in-out 0s, color .8s ease-in-out 0s, box-shadow .8s ease-in-out 0s; [/class] [class name=mainnavbtn state=hover] background-color: var(--bgcolor); box-shadow: var(--boxshadow); color: #19221c; transition: background .8s ease-in-out 0s, color .8s ease-in-out 0s, box-shadow .3s ease-in-out 0s; [/class] [class name=mainnavbtnselected] background-color: var(--bgcolor); box-shadow: var(--boxshadow); color: #19221c; transition: background .8s ease-in-out 0, color .8s ease-in-out 0s, box-shadow .3s ease-in-out 0s; [/class] [class name=menubtn] display: none; margin-bottom: 0px; [/class] [class name=menubtn maxWidth=1000px] display: block; margin-bottom: 10px; [/class] [class name=menu] width: 100%; display: block; [/class] [class name=menu maxWidth=1000px] display: none; [/class] [class name=teambtn] display: none; [/class] [class name=teambtn maxWidth=1000px] display: block; [/class] [class name=teamsbtn] display: block; [/class] [class name=teamsbtn maxWidth=1000px] display: none; [/class] [class name=tabname] display: none; [/class] [class name=linkname] display: inline-block; width: 100%; color: #c2c2ca; transition: color .8s ease-in-out 0s; [/class] [class name=linkname state=hover] color: #19221c; transition: color .8s ease-in-out 0s; [/class] [class name=ocircle] position: absolute; top: 50%; left: 28%; transform: translate(-50%, -50%) rotate(0deg); border: 1px solid #c3c5d9; width: 40%; height: 0px; padding-bottom: 40%; font-size: 0px; border-radius: 50%; -webkit-clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0); clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0); pointer-events: none; transition: transform 1s linear 0s; [/class] [class name=ocircle maxWidth=1000px] display: none; [/class] [class name=ocircleshow] transform: translate(-50%, -50%) rotate(-80deg); transition: transform 1s linear .5s; [/class] [class name=navcircle] position: absolute; top: 50%; left: 28%; width: 40%; height: 0px; padding-bottom: 40%; border-radius: 50%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; align-content: flex-start; [/class] [class name=navcircle maxWidth=1000px] display: none; [/class] [class name=circlebtn] display: block; height: 0px; padding-top: 19px; width: 19px; border-radius: 100%; background: #FFFFFF; color: #FFFFFF; font-size: 0px; cursor: pointer; transition: background .6s linear 0s; pointer-events: none; [/class] [class name=circlebtn maxWidth=1000px] display: none; [/class] [class name=circlebtn state=hover] background: #19221c; [/class] [class name=plsclick] pointer-events: auto; [/class] [class name=anticircle] transform: translate(-50%, -50%) rotate(151.25deg); opacity: 0; transition: opacity .5s linear 1s, transform 1s linear 0s; [/class] [class name=antir] transform: translate(-50%, -50%) rotate(71.25deg); opacity: 1; transition: opacity .5s linear 0s, transform 1s linear .5s; [/class] [class name=zerocircle] transform: translate(-50%, -50%) rotate(139.5deg); opacity: 0; transition: opacity .5s linear 1s, transform 1s linear 0s; [/class] [class name=zeror] transform: translate(-50%, -50%) rotate(59.5deg); opacity: 1; transition: opacity .5s linear 0s, transform 1s linear .5s; [/class] [class name=galahadcircle] transform: translate(-50%, -50%) rotate(128.6deg); opacity: 0; transition: opacity .5s linear 1s, transform 1s linear 0s; [/class] [class name=galahadr] transform: translate(-50%, -50%) rotate(48.6deg); opacity: 1; transition: opacity .5s linear 0s, transform 1s linear .5s; [/class] [class name=loudercircle] transform: translate(-50%, -50%) rotate(118deg); opacity: 0; transition: opacity .5s linear 1s, transform 1s linear 0s; [/class] [class name=louderr] transform: translate(-50%, -50%) rotate(38deg); opacity: 1; transition: opacity .5s linear 0s, transform 1s linear .5s; [/class] [class name=icircle] position: absolute; top: 50%; left: 28%; transform: translate(-50%, -50%) rotate(0deg); width: 35%; height: 0px; padding-bottom: 35%; border-radius: 50%; pointer-events: none; opacity: .2; background: #c3c5d9; overflow: hidden; transition: background .5 linear 0s, opacity .5s linear 0s; [/class] [class name=icircle maxWidth=1000px] display: none; [/class] [class name=icircleshow] opacity: .5; background: transparent; transition: background .5 linear 0s, opacity .5s linear 0s; [/class] [class name=imagecontainer] position: relative; top: 0px; left: 0px; pointer-events: none; [/class] [class name=image] position: absolute; top: 0px; left: 0px; opacity: 0; transition: opacity .5s linear 0s; [/class] [class name=imageshow] opacity: 1; transition: opacity .5s linear 0s; [/class] [class name=textflex] flex: 1 0 100px; height: 100%; margin-left: auto; max-width: 50%; overflow: hidden; position: relative; font-size: initial; [/class] [class name=textflex maxWidth=1000px] display: block; flex: 0 0 0px; height: auto; width: 100%; max-width: none; [/class] [class name=scrollbox] display: block; height: 100%; max-height: 500vh; width: 100%; padding-right: 150px; overflow-x: hidden; overflow-y: scroll; font-family: var(--font); color: #FFFFFF; line-height: normal; pointer-events: auto; white-space: normal; position: relative; transition: height .5s ease-in-out 0s; [/class] [class name=scrollbox maxWidth=1000px] height: auto; max-height: 500vmax; width: 100%; box-sizing: border-box; color: #FFFFFF; margin-bottom: 0px; overflow-x: hidden; overflow-y: auto; padding: 0px; transition: max-height 1s ease-in-out 1s; [/class] [class name=hidebox] height: 0%; transition: height .5s ease-in-out 0s; [/class] [class name=hidebox maxWidth=1000px] max-height: 0vmax; transition: max-height 1s ease-in-out 0s; [/class] [class name=section] display: block; padding-bottom: 30px; text-align: justify; font-size: .9em; [/class] [class name=heading] display: block; position: sticky; position: -webkit-sticky; top: 0px; left: 0px; width: 100%; box-sizing: border-box; padding: 5px 10px 0px 10px; font-size: 5vh; letter-spacing: -2px; font-family: 'Share', sanserif; text-transform: uppercase; background: var(--heading); [/class] [class name=heading maxWidth=1000px] background: transparent; margin-bottom: 15px; padding: 5px 0px 0px 0px; [/class] [class name=teamstats] display: flex; width: calc(100% - 25px); flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; margin: -4px -4px 11px 21px; [/class] [class name=teamicon] flex: 0 0 100px; height: 100px; background-repeat: no-repeat; background-size: contain; background-position: center center; font-size: 0px; margin: 2px; [/class] [class name=teaminfo] flex: 2 0 175px; [/class] [class name=statblock] display: block; font-size: .7em; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; [/class] [class name=statname] display: inline; margin-right: 10px; background: #19221c; padding: 2px 8px; text-transform: uppercase; [/class] [class name=orangevar] --bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/J32gqXs.jpg); --bgsize: auto, auto 120%; --bgposition: center center, -55vh bottom; --bgcolor: #d67833; --render: url(https://i.imgur.com/aakHc1I.png) 13% bottom/auto 97.5% no-repeat; --boxshadow: inset 0px 0px 5px #8c4724; --heading: rgba(204, 130, 84, 0.5); [/class] [class name=redvar] --bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/sInq9zc.jpg); --bgsize: auto, auto 120%; --bgposition: center center, -20vh -10%; --bgcolor: #b23636; --render: url(https://i.imgur.com/Ss1GGHe.png) 20% -16%/auto 120% no-repeat; --boxshadow: inset 0px 0px 5px #6b231f; --heading: rgba(175, 78, 82, 0.5); [/class] [class name=tealvar] --bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/ViHpw1E.jpg); --bgsize: auto, cover; --bgposition: center center, left top; --bgcolor: #3a93b9; --render: url(https://i.imgur.com/z36QdKg.png) 10% 25%/auto 160% no-repeat; --boxshadow: inset 0px 0px 5px #28546d; --heading: rgba(84, 152, 182, 0.5); [/class] [class name=yellowvar] --bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/1H4Unh0.jpg); --bgsize: auto, auto 110%; --bgposition: center center, left top; --bgcolor: #e4a644; --render: url(https://i.imgur.com/mc9FhIq.png) 5% 5%/auto 110% no-repeat; --boxshadow: inset 0px 0px 5px #a1642e; --heading: rgba(216, 166, 98, 0.5); [/class] [script class="root" version=2] (= num (randomInt 1 5)) (if (== num 1) (addClass "orangevar" "root")) (if (== num 2) (addClass "redvar" "root")) (if (== num 3) (addClass "tealvar" "root")) (if (== num 5) (= num 4)) (if (== num 4) (addClass "yellowvar" "root")) [/script] [script class="mainnavbtn" version=2] (= currenttab "about") (addClass "mainnavbtnselected" (+ currenttab "btn")) [/script] [script class="mainnavbtn" on=click version=2] (removeClass "ocircleshow" "ocircle") (removeClass "plsclick" "circlebtn") (removeClass "antir" "anticircle") (removeClass "zeror" "zerocircle") (removeClass "galahadr" "galahadcircle") (removeClass "louderr" "loudercircle") (removeClass "mainnavbtnselected" "mainnavbtn") (addClass "mainnavbtnselected" "menubtn") (addClass "hidebox" "scrollbox") (= currenttab (index (split (getText) "TAB") 0 )) (addClass "mainnavbtnselected" (+ currenttab "btn")) (removeClass "hidebox" (+ currenttab "box")) [/script] [script class="link" on=click version=2] (removeClass "hidebox" (+ currenttab "box")) [/script] [script class="menubtn" version=2] (= clicks 0) [/script] [script class="menubtn" on=click version=2] (if (== clicks 0) (group (= clicks 1) (addClass "mainnavbtnselected")) (group (= clicks 0) (removeClass "mainnavbtnselected")) ) (slideToggle 1000 "menu") (removeClass "hidebox" (+ currenttab "box")) [/script] [script class="teamsbtn" on=click version=2] (removeClass "mainnavbtnselected" "mainnavbtn") (addClass "mainnavbtnselected") (addClass "ocircleshow" "ocircle") (addClass "plsclick" "circlebtn") (addClass "antir" "anticircle") (addClass "zeror" "zerocircle") (addClass "galahadr" "galahadcircle") (addClass "louderr" "loudercircle") [/script] [script class="circlebtn" on=mouseenter version=2] (= hovercircle (index (split (getText) "TAB") 0 )) (addClass "icircleshow" "icircle") (addClass "imageshow" (+ hovercircle "img")) [/script] [script class="circlebtn" on=mouseleave version=2] (removeClass "icircleshow" "icircle") (removeClass "imageshow" (+ hovercircle "img")) [/script] [script class="circlebtn" on=click version=2] (addClass "hidebox" "scrollbox") (= currentteam (index (split (getText) "TAB") 0 )) (removeClass "hidebox" (+ currentteam "box")) [/script] [div class="aspectratio"] [div class="root"] [div class="diagonal"]

fluticasone [/div] [div class=invis] [div class="ocircle"]

fluticasone [/div] [div class="icircle"] [div class=imagecontainer] [div class="image louderimg"]

[/div] [div class="image galahadimg"]

[/div] [div class="image zeroimg"]

[/div] [div class="image antiimg"]

[/div] [/div] [/div] [div class="navcircle anticircle"] [div class="circlebtn antibtn"][div class=tabname]antiTAB[/div][/div] [/div] [div class="navcircle zerocircle"] [div class="circlebtn zerobtn"][div class=tabname]zeroTAB[/div].[/div] [/div] [div class="navcircle galahadcircle"] [div class="circlebtn galahadbtn"][div class=tabname]galahadTAB[/div][/div] [/div] [div class="navcircle loudercircle"] [div class="circlebtn louderbtn"][div class=tabname]louderTAB[/div][/div] [/div] [div class="render"]

fluticasone [/div] [div class="translucentbox"] [div class=mainnav] [div class="mainnavbtn menubtn"][div class=tabname]menuTAB[/div]MAIN MENU[/div] [div class="menu"] [div class="mainnavbtn aboutbtn" style="margin-top: 0px;"][div class=tabname]aboutTAB[/div]about endgame[/div] [div class="mainnavbtn mechanicsbtn"][div class=tabname]mechanicsTAB[/div]endgame mechanics[/div] [div class="mainnavbtn rulesbtn"][div class=tabname]rulesTAB[/div]rules and regulations[/div] [div class="mainnavbtn teamsbtn"][div class=tabname]teamsTAB[/div]endgame teams[/div] [div class="mainnavbtn teambtn orangebtn louderbtn"][div class=tabname]louderTAB[/div]louder[/div] [div class="mainnavbtn teambtn orangebtn galahadbtn"][div class=tabname]galahadTAB[/div]galahad[/div] [div class="mainnavbtn teambtn orangebtn zerobtn"][div class=tabname]zeroTAB[/div]zero[/div] [div class="mainnavbtn teambtn orangebtn antibtn"][div class=tabname]antiTAB[/div]antiheroes[/div] [div class="mainnavbtn link discordbtn"][div class=tabname]discordTAB[/div][div class="linkname"]endgame community[/div][/div] [div class="mainnavbtn link appbtn"][div class=tabname]appTAB[/div][div class="linkname"]PLAYER REGISTRATION[/div][/div] [div class="mainnavbtn link csbtn"][div class=tabname]csTAB[/div][div class="linkname"]PRO PLAYERS[/div][/div] [/div] [/div] [div class=textflex] [div class="scrollbox aboutbox"] [div class="section"] [div class="heading"]*endgame[/div] ENDGAME originally began as a series of traditional FPS games that went by the name of 'Direct Hit'. It produced several titles across different platforms, each with its own competitive community. Praised for its immersiveness and enjoyable gameplay, the series enjoyed continued success. Its VR releases were supposed to be the best yet... but reality proved different. The company managed to stay afloat, but DH was no longer the FPS. Competition in the genre had peaked, and other games now occupied what was once DH's throne. Tomorrow Games was a sinking ship unless they either combined with a bigger company, or found a different avenue.

No one was surprised when TG's founder chose the latter. He'd always been known as a rather unique voice in the space, his individuality as appreciated as much as it was criticized. When he proclaimed on Chunmi he would "not be selling out" (verbatim), everyone was expecting something big in the works. Teasers of the game's development showed clips of soldiers midfight, players taking off their helmets after attaining either loss or victory. It looked to be another war game. Some expressed disappointment; it was Tomorrow Game's forte, certainly, but they were expecting something fresher thanks to the founder's wild proclamations.

When ENDGAME was first unveiled in a stream, viewers only saw the in-game environment. The initial reactions were negative to say the least; there was a lot of flaming in the chatbox about how this was just a re-branded Direct Hit. But a few minutes into the stream, the graphics were turned off to reveal the map for what it really was: a giant arena where digital and physical combined to create the most immersive experience yet.

Most had reserved the AR realm for corporate, social and marketing space; Tomorrow Games was the first gaming company to invest in such a large scale. The news wasn't well-received by everyone, and there were legitimate concerns about safety and the like, but it weathered through. ENDGAME's start was rocky, but in two short years, it earned a spot as one of the world's most highly-anticipated competitive scenes. In only three more, it became the biggest gaming competition in the world. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*competitive scene[/div] Tomorrow Games is no stranger to competitive scenes, and ENDGAME proved no different. Its first year's tourney was on a small but successful scale, confined to the limited number of cities where ENDGAME had amassed a following. Finding traction in its victory, construction for more areas of play began everywhere. They kept expanding until they reached a point where even overseas, ENDGAME arenas could be found many major cities. Ten years since it was first launched, ENDGAME was a now a game in everyone's vernacular.

ENDGAME has a player and team ranking system which notifies players which competitions they are eligible for. While community-hosted tourneys are common and are a good way to get practice, they don't affect ranking. The only way to climb the ladder is to participate in TG-sponsored competitions, notifying its registered teams and players of any tourneys in their area.

Games and tourneys are listed with an indication of its rank. Much like the Direct Hit games of the past, ENDGAME eventually came to adopt a similar but simplified stratification system.

[div class="statname"]OPEN LEAGUE[/div] The most casual level and where most of the playerbase ranks at. Most who play at this level are not even required to be ranked by the TG database.

[div class="statname"]MAIN LEAGUE[/div] Only players and teams ranked by TG are allowed to participate from now on. A higher level of play than the OPEN LEAGUE, but competition-specific teams are still a fairly common sight.

[div class="statname"]PREMIER LEAGUE[/div] Talented amateurs that have likely been vetted by the bigger names in the scene to gain experience, with hopes of having them join the PRO LEAGUE. The teams here are usually formed as sister teams to existing brands, often with their a coach, which explains the level of cohesion versus MAIN LEAGUE.

[div class="statname"]PRO LEAGUE[/div] The top percentage of players, rising to the top with a combination of skill, luck and networking. Pro players must be signed with a team to participate in PRO LEAGUE competitions.

A few aspiring pros even carry their teams from zero to hero, turning it into their own brand, although there’s considerably a lot more difficulty involved in doing this nowadays. Most talented amateurs are scouted and recruited into lower division sister teams of existing brands that were founded during ENDGAME's formative years. [/div] [/div] [div class="scrollbox hidebox mechanicsbox"] [div class="section"] [div class="heading"]*players[/div] To participate in ENDGAME, one must be at least 16 years old. This is due to the inherent risks involved in participating. All players, upon signing up for the first time in an ENDGAME arena, are asked to sign an agreement that they understand that danger remains, however minimized. Once they've understood the terms and conditions, players can then sign-up onsite with their preferred handle and other relevant information, including their gameplay avatar's appearance. This data is stored and updated on ENDGAME's database, so player information remains updated even when changing arenas. [/div] [div class="section"] [div class="heading"]*equipment[/div] ENDGAME has a lot of equipment involved in its gameplay, but the two pieces a player absolutely needs are the bodysuit and the AR helmet. The bodysuit is rented out at the arena, hence why they recommend wearing form-fitting clothes underneath. Both serve a dual purpose: for protection and for gameplay. The bodysuit reads interactions between players and the environment. Take, for example, a gunshot at the leg. Upon detecting a leg wound, the suit stiffens and weighs down the area, mimicking the difficulty one would have moving with such an injury. The AR helmet, meanwhile, deals with how a player views their environment.

Both pieces have variations and equippable tools, which can be set from a user's account on the ENDGAME database. Since a good part of the game is AR, there's no need for a physical change to wildly variate how either behaves. [/div] [div class="section"] [div class="heading"]*arenas and gyms[/div] Most major cities have one or two large arenas at which to host the local ENDGAME tourney. These arenas span around five soccer fields, while also boasting multi-floored areas. Aside from those, there are smaller arenas, better known as "gyms", for practice and casual play. These are typically half or less the size of a standard arena, making for quicker games.

There are different kinds of terrain and situations that players are able to play in, heavily affecting the strategies of anyone participating. Things like time of the day and visibility-scale are part of it. These are randomly selected during the beginning of the match, forcing players to adapt. As for maps, ENDGAME's default four boasts a decent variety, with arenas and gyms often making ones specific to their area.

[div class="statname"]CITY (outdoor 70% | indoor 30%)[/div] The area around Tomorrow Games' HQ has been recreated into a map for players to fight in. Plenty of areas to duck into and hide, as well as narrow gaps to take advantage of when teams are forced to bottleneck. A certain section is an indoor restaurant with tables, counters and a kitchen.

[div class="statname"]CRUISE SHIP (indoor 60% | outdoor 40%)[/div] A slightly narrower than usual map where getting pushed out of the play area means "death by drowning". Most of the map occurs within the ship itself with its myriad of hallways, but there's a large deck area at which there's nowhere to hide.

[div class="statname"]FOREST AND PLAINS (outdoor 100%)[/div] One of the maps where players will have to pray to RNJesus for weather and time. While parts of the map are heavily wooded, there are open tree line areas as well. As an incentive to come out of hiding, these are the places where the map spawns items for use of either team. It's not uncommon to see fights break out at these locations.

[div class="statname"]BUILDING (indoor 100%)[/div] The game picks from different building layouts. As for its purpose, this is also randomly chosen from presets. It could be an apartment complex, a bank, a mall... anything really. The most popular is a recreation of TG's offices. It includes a lobby, a corporate office level, cafeteria, and even a small rendition of a non AR-d ENDGAME arena.

They also make seasonal maps for fun. To avoid the default maps from going stale and sections of it abused, a good part of the map is randomized each time it's generated and set-up. Amongst the 4, the city is least varied as it's always forced to pick from different areas around TG's head office. On the opposite side of the spectrum, the Forest and Plains maps are never the same.

[/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*gamemodes[/div] ENDGAME is most famous for its 5v5 team death match wherein one group of players must eliminate the entire enemy team. These games typically last from 30 minutes to an hour, but have no real time limit. The 3v3 variation with its smaller map is a fairly popular choice as well. However, other modes exist, with arenas and gyms listing their schedules at least three days ahead of time.

[div class="statname"]ENDGAME (5v5 or 3v3)[/div] In a team vs team death match, one team must completely eliminate all members of the opposing group. It doesn't matter if there's only one member left on one and there are still five on the other; the game's not over until all are gone.

[div class="statname"]FLAGSHIP (5v5 or 3v3)[/div] Another team vs team mode, but this time each team must flag one of their players. Should the flagged player die, the team automatically loses. Neither team knows who is flagged on the other, so it's up to the team how they want to approach the road to victory.

[div class="statname"]BATTLE ROYALE (16+ or 9+)[/div] A more casual game mode where players fight for themselves, but can temporarily team up to get ahead of the pack. Players are blindly situated at random points in the arena. The map walls off some places after certain time points, eliminating anyone who isn't in the active play area. The map gets smaller and smaller as the timer counts down to zero. Your goal is to be the last one standing.

It's fairly common for players to professionally play more than one game mode. Some even use the exact same team for both ENDGAME and FLAGSHIP. [/div] [/div] [div class="scrollbox hidebox rulesbox"] [div class="section"] [div class="heading"]*RESPECT[/div] My philosophy on GMing is fairly relaxed: respect me, I respect you. As a GM, I'm in a position of authority over participants of my roleplays. If I reject someone, there's a reason for it, and I'm willing to take a second look if they decide to listen to my criticisms. In that same vein, if my players decide to (politely) criticize me for a decision I made, I will take it into account with no hard feelings. I'm willing to listen to discussion and disagreement, but when I draw a line, I don't budge it.

Respect extends to beyond the roleplay sphere however. If a player has a history of things like theft or character plagiarism, remaining unapologetic about such things, I reject them. I don't tolerate bad behavior in my roleplays. [/div] [div class="section"] [div class="heading"]*LITERACY[/div] I don't care much for labels. As long as you can post a cohesive paragraph, then you're good. We all start somewhere, so if we offer feedback on your writing, it's because we want to help you grow. Occasional misspellings are understandable, we all have those days. But if you can't get your their/they're consistent, then I think you should brush up a bit more on English before trying out here. [/div] [div class="section"] [div class="heading"]*RESERVATIONS[/div] Are non-existent, unless you've been personally invited to this roleplay. Everyone goes through a screening process; you submit a character concept, and we'll see if it's up to standards. Failure to comply with this will mean automatic rejection. Unlike most roleplays, ENDGAME will be operating on a roleplayer cap rather than character cap. Feel free to create as many as you can handle once you've passed the application. Head over to the APP thread for more information. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*COMMITMENT[/div] Should you fail to speak with me within a month, you're booted from the roleplay, no exceptions. I don't mind long absences so long as you keep us updated on your current status. Likewise, should you no longer feel like participating, I want to be informed instead of leaving us with question marks. I take more offence at being dropped like a hot potato than being told directly that you no long feel like you can commit. [/div] [/div] [div class="scrollbox hidebox louderbox"] [div class="section"] [div class="heading"]*LOUDER[/div] [div class="teamstats"] [div class="teamicon" style="background-image: url(https://i.imgur.com/gr631KH.png);"]

fluticasone [/div] [div class="teaminfo"] [div class="statblock"] [div class="statname"]TEAM NAME[/div] louder [/div] [div class="statblock"] [div class="statname"]ranking[/div] TWENTY-NINTH (29th) [/div] [div class="statblock"] [div class="statname"]SEASONS[/div] six (6) registered seasons [/div] [div class="statblock"] [div class="statname"]WIN/LOSS[/div] 1.01 [/div] [/div] [/div] LOUDER was formed during the 4th season of ENDGAME, originally comprised of a bunch of random individuals who needed a team to join the higher level leagues. Said group was lead by Lucas Kent, who went on to become one of ENDGAME's legendary players when he reverse-swept a 1v5 situation during the finals. Despite the loss, their popularity soared as clips of the play continue to be referenced even today. They decided to continue the team beyond one season (their original agreement was only for the fourth season), eventually forming a brand organization by the same name. Two of the original members continue to play. Two others, one of whom is Lucas, have taken on more administrative roles. The last member left during the 7th season to found Galahad.

The team has often featured a pivotal center within their lineup. They excel in hit-and-run tactics, often making good use of tools and terrain. Despite their expansion, they retain their independent philosophy, refusing company sponsorships for the team as a whole. Individual player sponsorships, however, are alright with them. [/div] [div class="section"] [div class="heading"]*STYLE[/div] As mentioned, LOUDER excels in guerilla warfare-like tactics. They make use of the tools and terrain available to them. A lot of people have commented that for such an attention-grabbing name, their extensive use of stealth and traps feel quite opposite to the brand's image. Due to their playstyle, they excel in maps with a lot of cover, such as the city area and certain variations of the building map.

The general vibe of the team is very relaxed, with an urban street flair to their outfits. Unlike ZER0 and Galahad, none of them members have any matching clothing items. However, they look more cohesive as a team than Antiheroes due to their singular style family. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*TRAINING[/div] The team holds individuals accountable for their own training. While it does hold group practice sessions, majority of training is free form and at your own time and pace. If you don't pull your own weight, you'll get relegated to the bench.

LOUDER is one of the teams that spends quite a bit of time studying their opponent's playstyles, second only to ZER0. They're willing to make more adjustments to take advantage of enemy weaknesses. As a result, most of their members have a fair amount of proficiency and reliance in the various tools made available to players by the game. Rather than outright training, LOUDER is the team that figures out weird interactions in the game to take advantage of. Take for example, the 'extra 10' bug from season 8. LOUDER was the one who figured out certain bullet types had an extra 10px hitbox outside the range indicated by the game. [/div] [/div] [div class="scrollbox hidebox galahadbox"] [div class="section"] [div class="heading"]*GALAHAD[/div] [div class="teamstats"] [div class="teamicon" style="background-image: url(https://i.imgur.com/pktHtLw.png);"]

fluticasone [/div] [div class="teaminfo"] [div class="statblock"] [div class="statname"]TEAM NAME[/div] galahad [/div] [div class="statblock"] [div class="statname"]ranking[/div] sixteenth (16th) [/div] [div class="statblock"] [div class="statname"]SEASONS[/div] three (3) registered seasons [/div] [div class="statblock"] [div class="statname"]WIN/LOSS[/div] 1.08 [/div] [/div] [/div] Gregers Lazarov was a member of the original LOUDER team until he eventually left due to a difference in opinion. He believed that company sponsorships could be used for the benefit of the team, whilst Lucas thought it was too close to selling out. Shortly after leaving of his own volition, he founded Galahad, recruiting players who'd found dissatisfaction in their current organizations. Other teams found it too close to poaching but remained silent; LOUDER, true to form, publicly called them out. Everyone watched with baited breath as the drama unfolded on Chunmi during the start of the 8th season.

Galahad is a disjointed team consisting of the most notable members of the competitive scene. These are either former star players of other teams, or simply players who have strong public appeal and large fanbases. It's rare to see a complete rookie amongst them. [/div] [div class="section"] [div class="heading"]*STYLE[/div] Galahad has a very individualistic approach to the game, with players typically moving on their own. Whereas LOUDER has some coordination involved in their strategy, Galahad is literally five different people doing their own thing. Teamwork isn't exactly their thing, but due to the skill of each individual player, they're able to win games. Divide-and-conquer is a strategy they lean heavily towards.

ENDGAME's following often refers to Galahad as the princes/princesses, whether they're being sarcastic or just an honest-to-goodness fan. Their uniforms remind people of Japanese prince/ss idol costumes, complete with differing color schemes. They were going for a more royal look, but considering the fact many of their players are widely considered to be good-looking, that's what ended up happening. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*TRAINING[/div] Galahad's training is even more relaxed than LOUDER's, if that's even possible. Due to the myriad of teams the members originated from, the organization can't agree on any one method that fits for everyone. As a result, most training is individual, with some group training sessions and frequent scrimmages against other teams.

While most teams keep most of their training secret, with a few scattered glimpses via monitored streams, Galahad tends to be open with theirs. This is mostly because there usually isn't much of a plan in the first place, with strategies created on the fly. Gameplay wise, if there's one thing to note about their players is that they're very adaptable. Despite their independent tendencies, most know how to cooperate if the situation calls for it. [/div] [/div] [div class="scrollbox hidebox zerobox"] [div class="section"] [div class="heading"]*ZERO[/div] [div class="teamstats"] [div class="teamicon" style="background-image: url(https://i.imgur.com/nbVgWHF.png);"]

fluticasone [/div] [div class="teaminfo"] [div class="statblock"] [div class="statname"]TEAM NAME[/div] zer0 [/div] [div class="statblock"] [div class="statname"]ranking[/div] FIRST (1st) [/div] [div class="statblock"] [div class="statname"]SEASONS[/div] eight (8) registered seasons [/div] [div class="statblock"] [div class="statname"]WIN/LOSS[/div] 1.19 [/div] [/div] [/div] ZER0 is considered one of the original teams that helped form the competitive scene of ENDGAME. Five of the top players of the time formed a team from the bottom up, going from open league to pro league. Three members continue to play. Two were forced to retire due to injuries, but only one left the scene completely to pursue other goals. The other one chose to stay and act as strategist and coach for others.

Amongst the teams, ZER0 is the one most alike to how actual military behaves. When on the field, they wait for their captain's orders before taking individual action. Their philosophy revolves around them as one unit. [/div] [div class="section"] [div class="heading"]*STYLE[/div] In contrast with LOUDER which has a very self-reliant style, ZER0 has a defined chain of command. Some call it rigid, but considering how the team sits at the top of the rankings, they had to be doing something right. Members of the team know that they're able to trust the others to have their back. Communication is key to ZER0.

Fitting with the team's militaristic vibe, the team wears the same base uniform with personal flairs in the form of color scheme and accessories. However, the colors members choose tend to be very muted and suited to camouflage such as blacks, greys and browns. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*TRAINING[/div] Members of ZER0 do everything together. From eating together to practicing as a team, they spend a good part of the day in close quarters. Everyone monitors each other's progress; feedback is given regardless of rank. The team trains its members to take these criticisms graciously. Another advantage of the team is their myriad of benched members. Unlike other teams, they're comfortable with switching between their main roster and reserves with no threat of disrupting the group's teamwork.

Like LOUDER, ZER0 researches their opponents on upcoming matches, exploiting weaknesses they find. There isn't any one map the team is good at. As an all-rounder, they tend to perform well in any terrain, thought admittedly they're rarely able to really maximize it for their use. Much of their training time is spent doing drills and recreating situations that they might find themselves in at some point in a game. [/div] [/div] [div class="scrollbox hidebox antibox"] [div class="section"] [div class="heading"]*ANTIHEROES[/div] [div class="teamstats"] [div class="teamicon" style="background-image: url(https://i.imgur.com/zDUBM9K.png);"]

fluticasone [/div] [div class="teaminfo"] [div class="statblock"] [div class="statname"]TEAM NAME[/div] antiheroes [/div] [div class="statblock"] [div class="statname"]ranking[/div] fortieth (40th) [/div] [div class="statblock"] [div class="statname"]SEASONS[/div] ten (10) registered seasons [/div] [div class="statblock"] [div class="statname"]WIN/LOSS[/div] 0.95 [/div] [/div] [/div] Antiheroes is one of the oldest teams in ENDGAME's competitive scene, having been a participant since the first season. Their founder, Eliza Pollux, is an iconic figure in ENDGAME's history. She lead her team to victory in the finals during the game's first two seasons, bouncing back from Lucas' match reverse-sweep in their best of five. After ten years in the business, the four of which was coach work, Eliza abrupt left the scene. Antiheroes is now struggling with their new leader as they try to find their new identity.

Eliza's philosophy on ENDGAME was very simple: "It's a game, have fun with it." She became friends with TG's founder and was pivotal to many of the quality of life changes in early patches of the game. Despite not making it out of groups since the second season, the game has a small but loyal fanbase primarily comprised of followers who'd been with them since season one. Others, however, have criticized the organization for not taking the game seriously enough. Whatever the case, people are curious to see what's Antiheroes without an Eliza. [/div] [div class="section"] [div class="heading"]*STYLE[/div] Like ZER0, they're an all-rounder that performs well enough in most maps and terrain. Unlike them however, Antiheroes is structured to be more democratic than leader-biased, which could mean for some very unexpected turns in their strategy. That's what often makes Antiheroes matches so interesting to watch. On the flipside, delays in communication and disagreements on what plan of action to take are oftentimes their downfall.

The only thing that makes Antiheroes cohesive is their lack of cohesion. Avatar outfits can range from military to casual wear, making for some interesting combinations when on the field. One of the most hilarious was during World's Groups stage, which occurs during October. The team dressed as various characters. One was Phoenix Wright from Ace Attorney, and beside him was Goku. [/div] [div class="section" style="padding-bottom: 125px;"] [div class="heading"]*TRAINING[/div] While ZER0 values teamwork above all else, Antiheroes values camaraderie. You could coordinate with someone you disliked on ZER0, but that simply doesn't work in a team like Antiheroes. While not everyone's best friends, people are amicable enough to each other and are close enough to call each other a casual friend. They often eat meals together, and in-house team versus team matches are a common occurence to get some practice in.

Training in the Antiheroes house is fairly well-rounded. There's a fitness regime, actual drills, and then the in-house battles, usually for a casual reward like who's paying for dinner that night. While their players are willing to work hard, they don't turn the game into their life like other teams. They take the time to enjoy ENDGAME and the process of getting good at it. Like Galahad, one of their strong points is the myriad of personalities in their roster. Someone was bound to make an interesting way to deal with an enemy's strength. [/div] [/div] [/div] [/div] [/div] [/div] [/div]

fluticasone · Jun 8, 2018

[div class="root"][div class="leftside"] [div class="scroll"] [div class="flexwrapper"] [div class="scroll"] [div class="scrollitem"] [div class="title"] #endgame [/div] [div class="dialogueblock monotalk"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] i can play around with the ratio a bit more and make it wider? [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]it's fine as is, any more and you'd be making for a TV[/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] LMAO
i guess that means
the coding part of the int check is done
[/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"] yup
this harbinger of coding doom can't find anything else to break[/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div][div class="rightside"][div class="flexwrapper" style="padding: 30px;"][div class="scroll"][div class="scrollitem"]Hello, welcome to ENDGAME, a roleplay project of mine that's been in the works for over a year. If you'll recall from my past workshop, I've posted two different layouts for it with similar vibes, but ultimately decided on a widely different aesthetic... or four different aesthetics. Unlike the two other projects posted above, this was largely designed and coded by me, with some assistance from Alteras.

Random Image and Color Select
Originally the design had only the orange version. Thanks to a suggestion of Alteras in one of our calls, I wound up rendering many different images and ultimately settled on four colors and four images to represent the four teams present in the roleplay. If you don't know what I'm talking about, try repeatedly refreshing this page to see it.

The code to achieve this is very simple. It requires using the randomInt bbscipt and classes filled with variables. Adding said classes to the main div forces all the children inherit the variable values.
[div class=codebutton]Random Integer Code[/div][div class="code randomintspoil"][class name=orangevar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/J32gqXs.jpg);
--bgsize: auto, auto 120%;
--bgposition: center center, -55vh bottom;
--bgcolor: #d67833;
--render: url(https://i.imgur.com/aakHc1I.png) 13% bottom/auto 97.5% no-repeat;
--boxshadow: inset 0px 0px 5px #8c4724;
--heading: rgba(204, 130, 84, 0.5);
[/class]
[class name=redvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/sInq9zc.jpg);
--bgsize: auto, auto 120%;
--bgposition: center center, -20vh -10%;
--bgcolor: #b23636;
--render: url(https://i.imgur.com/Ss1GGHe.png) 20% -16%/auto 120% no-repeat;
--boxshadow: inset 0px 0px 5px #6b231f;
--heading: rgba(175, 78, 82, 0.5);
[/class]
[class name=tealvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/ViHpw1E.jpg);
--bgsize: auto, cover;
--bgposition: center center, left top;
--bgcolor: #3a93b9;
--render: url(https://i.imgur.com/z36QdKg.png) 10% 25%/auto 160% no-repeat;
--boxshadow: inset 0px 0px 5px #28546d;
--heading: rgba(84, 152, 182, 0.5);
[/class]
[class name=yellowvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/1H4Unh0.jpg);
--bgsize: auto, auto 110%;
--bgposition: center center, left top;
--bgcolor: #e4a644;
--render: url(https://i.imgur.com/mc9FhIq.png) 5% 5%/auto 110% no-repeat;
--boxshadow: inset 0px 0px 5px #a1642e;
--heading: rgba(216, 166, 98, 0.5);
[/class]

[script class="root" version=2]
(= num (randomInt 1 5))
(if (== num 1) (addClass "orangevar" "root"))
(if (== num 2) (addClass "redvar" "root"))
(if (== num 3) (addClass "tealvar" "root"))
(if (== num 5) (= num 4))
(if (== num 4) (addClass "yellowvar" "root"))
[/script][/div]

Rotating Navigation
Achieving the rotating navigation was simpler than it looks, although I needed Alteras' help to do the clip-path. It's a mess down there. For each button, I created a circle that was the exact same size as the clip-path circular border. Then I used transform: rotate to lock it into the gaps. To have everything move in unity, I rotated everything by -80 degrees running at the exact same transition times. Since at some points the circles would be visible, I added a pointer-events: none and reduced their opacity when it wasn't the active tab in the main menu to disable clicking them.
[div class=codebutton]Team Navigation[/div][div class="code teamnavspoil"][comment]team nav[/comment]
[class name=ocircle]
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%, -50%) rotate(0deg);
border: 1px solid #c3c5d9;
width: 40%;
height: 0px;
padding-bottom: 40%;
font-size: 0px;
border-radius: 50%;
-webkit-clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0);
clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0);
pointer-events: none;
transition: transform 1s linear 0s;
[/class]
[class name=ocircle maxWidth=1000px]
display: none;
[/class]
[class name=ocircleshow]
transform: translate(-50%, -50%) rotate(-80deg);
transition: transform 1s linear .5s;
[/class]
[class name=navcircle]
position: absolute;
top: 50%;
left: 28%;
width: 40%;
height: 0px;
padding-bottom: 40%;
border-radius: 50%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
align-content: flex-start;
[/class]
[class name=navcircle maxWidth=1000px]
display: none;
[/class]
[class name=circlebtn]
display: block;
height: 0px;
padding-top: 19px;
width: 19px;
border-radius: 100%;
background: #FFFFFF;
color: #FFFFFF;
font-size: 0px;
cursor: pointer;
transition: background .6s linear 0s;
pointer-events: none;
[/class]
[class name=circlebtn maxWidth=1000px]
display: none;
[/class]
[class name=circlebtn state=hover]
background: #19221c;
[/class]
[class name=plsclick]
pointer-events: auto;
[/class]
[class name=anticircle]
transform: translate(-50%, -50%) rotate(151.25deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=antir]
transform: translate(-50%, -50%) rotate(71.25deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=zerocircle]
transform: translate(-50%, -50%) rotate(139.5deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=zeror]
transform: translate(-50%, -50%) rotate(59.5deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=galahadcircle]
transform: translate(-50%, -50%) rotate(128.6deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=galahadr]
transform: translate(-50%, -50%) rotate(48.6deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=loudercircle]
transform: translate(-50%, -50%) rotate(118deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=louderr]
transform: translate(-50%, -50%) rotate(38deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class][/div]

Mobile Readability
When on mobile or smaller screens, the layout becomes incredibly simplified and reduced to a simple drop down menu with text. I decided to prioritize readability, so I disabled the image of the girls, the circular nav and any of the unnecessary fluff visible. I also disabled scrolling on mobile, instead having the height set on auto. The team buttons that were once on the circular nav become part of the main menu when on mobile.

You can catch a glimpse of what it looks like by resizing the window into something smaller if you're on a desktop/laptop. The code provided below is incomplete as to everything I used media queries on, but should give you a decent idea of how I achieved the layout. You can look up the rest in the complete code.
[div class=codebutton]Some Media Queries[/div][div class="code mediaquespoil"][class name=render]
height: 100%;
width: 100%;
position: absolute;
top: 0px;
z-index: 6;
pointer-events: none;
font-size: 0px;
background: var(--render);
[/class]
[class name=render maxWidth=1000px]
display: none;
[/class]

[class name=mainnav]
flex: 1 0 auto;
max-width: 200px;
overflow: hidden;
font-size: initial;
align-self: flex-start;
margin: 5% 0px 0px 1%;
position: relative;
z-index: 7;
[/class]
[class name=mainnav maxWidth=1000px]
display: block;
flex: 0 0 0px;
margin: 0px;
margin-bottom: 10px;
max-width: none;
[/class]

[class name=teambtn]
display: none;
[/class]
[class name=teambtn maxWidth=1000px]
display: block;
[/class]
[class name=teamsbtn]
display: block;
[/class]
[class name=teamsbtn maxWidth=1000px]
display: none;
[/class][/div]

Closing Thoughts and Full Code
This is nowhere near the level of jank the other two are on, but it will require some basic knowledge of how BBScript+ and CSS works. Overall, I'm pleased with the final result of this layout, and I'll be using what I've learned on my future works. I told myself to stick to a max of jank level 2, and while I was fully expecting to surpass it, it's nice to note it hasn't reached beyond a level 4.
[div class=codebutton]ENDGAME[/div][div class="code endgamecodespoil"][nobr]

[comment][font=Hind]font call[/font][font=Share]font call[/font][/comment]

[comment]general divs[/comment]
[class name=aspectratio]
display: block;
width: 100%;
padding-top: 60%;
position: relative;
[/class]
[class name=aspectratio maxWidth=1000px]
width: 100%;
padding-top: 0px;
[/class]
[class name=root]
--font: 'Hind', sanserif;
display: block;
margin: auto;
overflow: hidden;
background-color: #000000;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: var(--bgimg);
background-blend-mode: soft-light, normal;
background-size: var(--bgsize);
background-position: var(--bgposition);
[/class]
[class name=root maxWidth=1000px]
height: auto;
min-height: 100px;
position: relative;
[/class]
[class name=diagonal]
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100%;
margin-left: 13%;
height: 100%;
transform: skewX(52deg);
transform-origin: 0px 0px;
font-size: 0px;
background-color: var(--bgcolor);
[/class]
[class name=diagonal maxWidth=1000px]
width: 100%;
height: 60vh;
transform: skewY(20deg);
transform-origin: 0px 0px;
margin: 0px;
margin-top: -50%;
[/class]

[comment]main img[/comment]
[class name=render]
height: 100%;
width: 100%;
position: absolute;
top: 0px;
z-index: 6;
pointer-events: none;
font-size: 0px;
background: var(--render);
[/class]
[class name=render maxWidth=1000px]
display: none;
[/class]

[comment]main container[/comment]
[class name=invis]
display: block;
overflow: hidden;
height: 100%;
width: 100%;
position: relative;
z-index: 2;
box-sizing: border-box;
position: relative;
[/class]
[class name=translucentbox]
display: flex;
flex-wrap: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
height: calc(100% - 200px);
width: calc(100% - 200px);
background: rgba(170, 170, 181, 0.2);
color: #FFFFFF;
overflow: hidden;
box-sizing: border-box;
padding: 30px;
margin: 100px;
[/class]
[class name=translucentbox maxWidth=1000px]
display: block;
width: 90%;
height: auto;
margin: 5%;
[/class]

[comment]main nav[/comment]
[class name=mainnav]
flex: 1 0 auto;
max-width: 200px;
overflow: hidden;
font-size: initial;
align-self: flex-start;
margin: 5% 0px 0px 1%;
position: relative;
z-index: 7;
[/class]
[class name=mainnav maxWidth=1000px]
display: block;
flex: 0 0 0px;
margin: 0px;
margin-bottom: 10px;
max-width: none;
[/class]
[class name=mainnavbtn]
display: block;
width: 100%;
box-sizing: border-box;
margin: 4px 0px;
padding: 8px 12px;
font-family: var(--font);
font-size: .6em;
letter-spacing: 2px;
border-radius: 5px;
text-transform: uppercase;
cursor: pointer;
position: relative;
z-index: 7;
color: #c2c2ca;
background: #19221c;
box-shadow: inset 0px 0px 5px #131b10;
transition: background .8s ease-in-out 0s, color .8s ease-in-out 0s, box-shadow .8s ease-in-out 0s;
[/class]
[class name=mainnavbtn state=hover]
background-color: var(--bgcolor);
box-shadow: var(--boxshadow);
color: #19221c;
transition: background .8s ease-in-out 0s, color .8s ease-in-out 0s, box-shadow .3s ease-in-out 0s;
[/class]
[class name=mainnavbtnselected]
background-color: var(--bgcolor);
box-shadow: var(--boxshadow);
color: #19221c;
transition: background .8s ease-in-out 0, color .8s ease-in-out 0s, box-shadow .3s ease-in-out 0s;
[/class]
[class name=menubtn]
display: none;
margin-bottom: 0px;
[/class]
[class name=menubtn maxWidth=1000px]
display: block;
margin-bottom: 10px;
[/class]
[class name=menu]
width: 100%;
display: block;
[/class]
[class name=menu maxWidth=1000px]
display: none;
[/class]
[class name=teambtn]
display: none;
[/class]
[class name=teambtn maxWidth=1000px]
display: block;
[/class]
[class name=teamsbtn]
display: block;
[/class]
[class name=teamsbtn maxWidth=1000px]
display: none;
[/class]
[class name=tabname]
display: none;
[/class]
[class name=linkname]
display: inline-block;
width: 100%;
color: #c2c2ca;
transition: color .8s ease-in-out 0s;
[/class]
[class name=linkname state=hover]
color: #19221c;
transition: color .8s ease-in-out 0s;
[/class]

[comment]team nav[/comment]
[class name=ocircle]
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%, -50%) rotate(0deg);
border: 1px solid #c3c5d9;
width: 40%;
height: 0px;
padding-bottom: 40%;
font-size: 0px;
border-radius: 50%;
-webkit-clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0);
clip-path: polygon(82% 0, 72% 18%, 81% 28%, 100% 19%, 100% 74%, 91% 67%, 71% 65%, 100% 80%, 100% 85%, 79% 70%, 77% 79%, 100% 90%, 94% 95%, 75% 76%, 75% 85%, 85% 95%, 83% 100%, 71% 85%, 67% 88%, 74% 100%, 15% 100%, 26% 88%, 14% 73%, 0 86%, 0 18%, 16% 26%, 29% 15%, 15% 0);
pointer-events: none;
transition: transform 1s linear 0s;
[/class]
[class name=ocircle maxWidth=1000px]
display: none;
[/class]
[class name=ocircleshow]
transform: translate(-50%, -50%) rotate(-80deg);
transition: transform 1s linear .5s;
[/class]
[class name=navcircle]
position: absolute;
top: 50%;
left: 28%;
width: 40%;
height: 0px;
padding-bottom: 40%;
border-radius: 50%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
align-content: flex-start;
[/class]
[class name=navcircle maxWidth=1000px]
display: none;
[/class]
[class name=circlebtn]
display: block;
height: 0px;
padding-top: 19px;
width: 19px;
border-radius: 100%;
background: #FFFFFF;
color: #FFFFFF;
font-size: 0px;
cursor: pointer;
transition: background .6s linear 0s;
pointer-events: none;
[/class]
[class name=circlebtn maxWidth=1000px]
display: none;
[/class]
[class name=circlebtn state=hover]
background: #19221c;
[/class]
[class name=plsclick]
pointer-events: auto;
[/class]
[class name=anticircle]
transform: translate(-50%, -50%) rotate(151.25deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=antir]
transform: translate(-50%, -50%) rotate(71.25deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=zerocircle]
transform: translate(-50%, -50%) rotate(139.5deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=zeror]
transform: translate(-50%, -50%) rotate(59.5deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=galahadcircle]
transform: translate(-50%, -50%) rotate(128.6deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=galahadr]
transform: translate(-50%, -50%) rotate(48.6deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]
[class name=loudercircle]
transform: translate(-50%, -50%) rotate(118deg);
opacity: 0;
transition: opacity .5s linear 1s, transform 1s linear 0s;
[/class]
[class name=louderr]
transform: translate(-50%, -50%) rotate(38deg);
opacity: 1;
transition: opacity .5s linear 0s, transform 1s linear .5s;
[/class]

[comment]smaller circle[/comment]
[class name=icircle]
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%, -50%) rotate(0deg);
width: 35%;
height: 0px;
padding-bottom: 35%;
border-radius: 50%;
pointer-events: none;
opacity: .2;
background: #c3c5d9;
overflow: hidden;
transition: background .5 linear 0s, opacity .5s linear 0s;
[/class]
[class name=icircle maxWidth=1000px]
display: none;
[/class]
[class name=icircleshow]
opacity: .5;
background: transparent;
transition: background .5 linear 0s, opacity .5s linear 0s;
[/class]
[class name=imagecontainer]
position: relative;
top: 0px;
left: 0px;
pointer-events: none;
[/class]
[class name=image]
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transition: opacity .5s linear 0s;
[/class]
[class name=imageshow]
opacity: 1;
transition: opacity .5s linear 0s;
[/class]

[comment]text area[/comment]
[class name=textflex]
flex: 1 0 100px;
height: 100%;
margin-left: auto;
max-width: 50%;
overflow: hidden;
position: relative;
font-size: initial;
[/class]
[class name=textflex maxWidth=1000px]
display: block;
flex: 0 0 0px;
height: auto;
width: 100%;
max-width: none;
[/class]
[class name=scrollbox]
display: block;
height: 100%;
max-height: 500vh;
width: 100%;
padding-right: 150px;
overflow-x: hidden;
overflow-y: scroll;
font-family: var(--font);
color: #FFFFFF;
line-height: normal;
pointer-events: auto;
white-space: normal;
position: relative;
transition: height .5s ease-in-out 0s;
[/class]
[class name=scrollbox maxWidth=1000px]
height: auto;
max-height: 500vmax;
width: 100%;
box-sizing: border-box;
color: #FFFFFF;
margin-bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
padding: 0px;
transition: max-height 1s ease-in-out 1s;
[/class]
[class name=hidebox]
height: 0%;
transition: height .5s ease-in-out 0s;
[/class]
[class name=hidebox maxWidth=1000px]
max-height: 0vmax;
transition: max-height 1s ease-in-out 0s;
[/class]
[class name=section]
display: block;
padding-bottom: 30px;
text-align: justify;
font-size: .9em;
[/class]
[class name=heading]
display: block;
position: sticky;
position: -webkit-sticky;
top: 0px;
left: 0px;
width: 100%;
box-sizing: border-box;
padding: 5px 10px 0px 10px;
font-size: 5vh;
letter-spacing: -2px;
font-family: 'Share', sanserif;
text-transform: uppercase;
background: var(--heading);
[/class]
[class name=heading maxWidth=1000px]
background: transparent;
margin-bottom: 15px;
padding: 5px 0px 0px 0px;
[/class]
[class name=teamstats]
display: flex;
width: calc(100% - 25px);
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
margin: -4px -4px 11px 21px;
[/class]
[class name=teamicon]
flex: 0 0 100px;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
font-size: 0px;
margin: 2px;
[/class]
[class name=teaminfo]
flex: 2 0 175px;
[/class]
[class name=statblock]
display: block;
font-size: .7em;
letter-spacing: 1px;
margin-bottom: 6px;
text-transform: uppercase;
[/class]
[class name=statname]
display: inline;
margin-right: 10px;
background: #19221c;
padding: 2px 8px;
text-transform: uppercase;
[/class]

[class name=orangevar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/J32gqXs.jpg);
--bgsize: auto, auto 120%;
--bgposition: center center, -55vh bottom;
--bgcolor: #d67833;
--render: url(https://i.imgur.com/aakHc1I.png) 13% bottom/auto 97.5% no-repeat;
--boxshadow: inset 0px 0px 5px #8c4724;
--heading: rgba(204, 130, 84, 0.5);
[/class]
[class name=redvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/sInq9zc.jpg);
--bgsize: auto, auto 120%;
--bgposition: center center, -20vh -10%;
--bgcolor: #b23636;
--render: url(https://i.imgur.com/Ss1GGHe.png) 20% -16%/auto 120% no-repeat;
--boxshadow: inset 0px 0px 5px #6b231f;
--heading: rgba(175, 78, 82, 0.5);
[/class]
[class name=tealvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/ViHpw1E.jpg);
--bgsize: auto, cover;
--bgposition: center center, left top;
--bgcolor: #3a93b9;
--render: url(https://i.imgur.com/z36QdKg.png) 10% 25%/auto 160% no-repeat;
--boxshadow: inset 0px 0px 5px #28546d;
--heading: rgba(84, 152, 182, 0.5);
[/class]
[class name=yellowvar]
--bgimg: url(https://i.imgur.com/N0uts0y.png), url(https://i.imgur.com/1H4Unh0.jpg);
--bgsize: auto, auto 110%;
--bgposition: center center, left top;
--bgcolor: #e4a644;
--render: url(https://i.imgur.com/mc9FhIq.png) 5% 5%/auto 110% no-repeat;
--boxshadow: inset 0px 0px 5px #a1642e;
--heading: rgba(216, 166, 98, 0.5);
[/class]

[comment]nav script[/comment]
[script class="root" version=2]
(= num (randomInt 1 5))
(if (== num 1) (addClass "orangevar" "root"))
(if (== num 2) (addClass "redvar" "root"))
(if (== num 3) (addClass "tealvar" "root"))
(if (== num 5) (= num 4))
(if (== num 4) (addClass "yellowvar" "root"))
[/script]
[script class="mainnavbtn" version=2]
(= currenttab "about")
(addClass "mainnavbtnselected" (+ currenttab "btn"))
[/script]
[script class="mainnavbtn" on=click version=2]
(removeClass "ocircleshow" "ocircle")
(removeClass "plsclick" "circlebtn")
(removeClass "antir" "anticircle")
(removeClass "zeror" "zerocircle")
(removeClass "galahadr" "galahadcircle")
(removeClass "louderr" "loudercircle")

(removeClass "mainnavbtnselected" "mainnavbtn")
(addClass "mainnavbtnselected" "menubtn")
(addClass "hidebox" "scrollbox")

(= currenttab (index (split (getText) "TAB") 0 ))
(addClass "mainnavbtnselected" (+ currenttab "btn"))
(removeClass "hidebox" (+ currenttab "box"))
[/script]
[script class="link" on=click version=2]
(removeClass "hidebox" (+ currenttab "box"))
[/script]
[script class="menubtn" version=2]
(= clicks 0)
[/script]
[script class="menubtn" on=click version=2]
(if (== clicks 0) (group (= clicks 1) (addClass "mainnavbtnselected")) (group (= clicks 0) (removeClass "mainnavbtnselected")) )
(slideToggle 1000 "menu")
(removeClass "hidebox" (+ currenttab "box"))
[/script]

[script class="teamsbtn" on=click version=2]
(removeClass "mainnavbtnselected" "mainnavbtn")
(addClass "mainnavbtnselected")
(addClass "ocircleshow" "ocircle")
(addClass "plsclick" "circlebtn")
(addClass "antir" "anticircle")
(addClass "zeror" "zerocircle")
(addClass "galahadr" "galahadcircle")
(addClass "louderr" "loudercircle")
[/script]
[script class="circlebtn" on=mouseenter version=2]
(= hovercircle (index (split (getText) "TAB") 0 ))
(addClass "icircleshow" "icircle")
(addClass "imageshow" (+ hovercircle "img"))
[/script]
[script class="circlebtn" on=mouseleave version=2]
(removeClass "icircleshow" "icircle")
(removeClass "imageshow" (+ hovercircle "img"))
[/script]
[script class="circlebtn" on=click version=2]
(addClass "hidebox" "scrollbox")
(= currentteam (index (split (getText) "TAB") 0 ))
(removeClass "hidebox" (+ currentteam "box"))
[/script]

[div class="aspectratio"]
[div class="root"]
[div class="diagonal"][USER=32692]@sugarvine[/USER][/div]
[div class=invis]
[div class="ocircle"][USER=32692]@sugarvine[/USER][/div]
[div class="icircle"]
[div class=imagecontainer]
[div class="image louderimg"][img]https://i.imgur.com/qVGxuPj.jpg[/img][/div]
[div class="image galahadimg"][img]https://i.imgur.com/RUDX7P5.jpg[/img][/div]
[div class="image zeroimg"][img]https://i.imgur.com/PGE3EGP.jpg[/img][/div]
[div class="image antiimg"][img]https://i.imgur.com/z7ujoqO.jpg[/img][/div]
[/div]
[/div]
[div class="navcircle anticircle"]
[div class="circlebtn antibtn"][div class=tabname]antiTAB[/div][/div]
[/div]
[div class="navcircle zerocircle"]
[div class="circlebtn zerobtn"][div class=tabname]zeroTAB[/div].[/div]
[/div]
[div class="navcircle galahadcircle"]
[div class="circlebtn galahadbtn"][div class=tabname]galahadTAB[/div][/div]
[/div]
[div class="navcircle loudercircle"]
[div class="circlebtn louderbtn"][div class=tabname]louderTAB[/div][/div]
[/div]
[div class="render"][USER=32692]@sugarvine[/USER][/div]
[div class="translucentbox"]
[div class=mainnav]
[div class="mainnavbtn menubtn"][div class=tabname]menuTAB[/div]MAIN MENU[/div]
[div class="menu"]
[div class="mainnavbtn aboutbtn" style="margin-top: 0px;"][div class=tabname]aboutTAB[/div]about endgame[/div]
[div class="mainnavbtn mechanicsbtn"][div class=tabname]mechanicsTAB[/div]endgame mechanics[/div]
[div class="mainnavbtn rulesbtn"][div class=tabname]rulesTAB[/div]rules and regulations[/div]
[div class="mainnavbtn teamsbtn"][div class=tabname]teamsTAB[/div]endgame teams[/div]
[div class="mainnavbtn teambtn orangebtn louderbtn"][div class=tabname]louderTAB[/div]louder[/div]
[div class="mainnavbtn teambtn orangebtn galahadbtn"][div class=tabname]galahadTAB[/div]galahad[/div]
[div class="mainnavbtn teambtn orangebtn zerobtn"][div class=tabname]zeroTAB[/div]zero[/div]
[div class="mainnavbtn teambtn orangebtn antibtn"][div class=tabname]antiTAB[/div]antiheroes[/div]
[div class="mainnavbtn link discordbtn"][div class=tabname]discordTAB[/div][url=https://discord.gg/tCev69d][div class="linkname"]endgame community[/div][/url][/div]
[div class="mainnavbtn link appbtn"][div class=tabname]appTAB[/div][url=https://i.imgur.com/qWSSeHe.jpg][div class="linkname"]PLAYER REGISTRATION[/div][/url][/div]
[div class="mainnavbtn link csbtn"][div class=tabname]csTAB[/div][url=https://i.imgur.com/qWSSeHe.jpg][div class="linkname"]PRO PLAYERS[/div][/url][/div]
[/div]
[/div]
[div class=textflex]
[div class="scrollbox aboutbox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]endgame[/i][/div]
ENDGAME originally began as a series of traditional FPS games that went by the name of 'Direct Hit'. It produced several titles across different platforms, each with its own competitive community. Praised for its immersiveness and enjoyable gameplay, the series enjoyed continued success. Its VR releases were supposed to be the best yet... but reality proved different. The company managed to stay afloat, but DH was no longer [i]the[/i] FPS. Competition in the genre had peaked, and other games now occupied what was once DH's throne. Tomorrow Games was a sinking ship unless they either combined with a bigger company, or found a different avenue.
[br][/br][br][/br]
No one was surprised when TG's founder chose the latter. He'd always been known as a rather unique voice in the space, his individuality as appreciated as much as it was criticized. When he proclaimed on Chunmi he would "not be selling out" (verbatim), everyone was expecting something big in the works. Teasers of the game's development showed clips of soldiers midfight, players taking off their helmets after attaining either loss or victory. It looked to be another war game. Some expressed disappointment; it was Tomorrow Game's forte, certainly, but they were expecting something fresher thanks to the founder's wild proclamations.
[br][/br][br][/br]
When ENDGAME was first unveiled in a stream, viewers only saw the in-game environment. The initial reactions were negative to say the least; there was a lot of flaming in the chatbox about how this was just a re-branded Direct Hit. But a few minutes into the stream, the graphics were turned off to reveal the map for what it really was: a giant arena where digital and physical combined to create the most immersive experience yet.
[br][/br][br][/br]
Most had reserved the AR realm for corporate, social and marketing space; Tomorrow Games was the first gaming company to invest in such a large scale. The news wasn't well-received by everyone, and there were legitimate concerns about safety and the like, but it weathered through. ENDGAME's start was rocky, but in two short years, it earned a spot as one of the world's most highly-anticipated competitive scenes. In only three more, it became [i]the[/i] biggest gaming competition in the world.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]competitive scene[/i][/div]
Tomorrow Games is no stranger to competitive scenes, and ENDGAME proved no different. Its first year's tourney was on a small but successful scale, confined to the limited number of cities where ENDGAME had amassed a following. Finding traction in its victory, construction for more areas of play began everywhere. They kept expanding until they reached a point where even overseas, ENDGAME arenas could be found many major cities. Ten years since it was first launched, ENDGAME was a now a game in everyone's vernacular.
[br][/br][br][/br]
ENDGAME has a player and team ranking system which notifies players which competitions they are eligible for. While community-hosted tourneys are common and are a good way to get practice, they don't affect ranking. The only way to climb the ladder is to participate in TG-sponsored competitions, notifying its registered teams and players of any tourneys in their area.
[br][/br][br][/br]
Games and tourneys are listed with an indication of its rank. Much like the Direct Hit games of the past, ENDGAME eventually came to adopt a similar but simplified stratification system.
[br][/br][br][/br]
[indent]
[div class="statname"]OPEN LEAGUE[/div] [i]The most casual level and where most of the playerbase ranks at. Most who play at this level are not even required to be ranked by the TG database.[/i]
[br][/br][br][/br]
[div class="statname"]MAIN LEAGUE[/div] [i]Only players and teams ranked by TG are allowed to participate from now on. A higher level of play than the OPEN LEAGUE, but competition-specific teams are still a fairly common sight.[/i]
[br][/br][br][/br]
[div class="statname"]PREMIER LEAGUE[/div] [i]Talented amateurs that have likely been vetted by the bigger names in the scene to gain experience, with hopes of having them join the PRO LEAGUE. The teams here are usually formed as sister teams to existing brands, often with their a coach, which explains the level of cohesion versus MAIN LEAGUE.[/i]
[br][/br][br][/br]
[div class="statname"]PRO LEAGUE[/div] [i]The top percentage of players, rising to the top with a combination of skill, luck and networking. Pro players must be signed with a team to participate in PRO LEAGUE competitions.[/i]
[/indent]
[br][/br]
A few aspiring pros even carry their teams from zero to hero, turning it into their own brand, although there’s considerably a lot more difficulty involved in doing this nowadays. Most talented amateurs are scouted and recruited into lower division sister teams of existing brands that were founded during ENDGAME's formative years.
[/div]
[/div]
[div class="scrollbox hidebox mechanicsbox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]players[/i][/div]
To participate in ENDGAME, one must be at least 16 years old. This is due to the inherent risks involved in participating. All players, upon signing up for the first time in an ENDGAME arena, are asked to sign an agreement that they understand that danger remains, however minimized. Once they've understood the terms and conditions, players can then sign-up onsite with their preferred handle and other relevant information, including their gameplay avatar's appearance. This data is stored and updated on ENDGAME's database, so player information remains updated even when changing arenas.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]equipment[/i][/div]
ENDGAME has a lot of equipment involved in its gameplay, but the two pieces a player absolutely needs are the bodysuit and the AR helmet. The bodysuit is rented out at the arena, hence why they recommend wearing form-fitting clothes underneath. Both serve a dual purpose: for protection and for gameplay. The bodysuit reads interactions between players and the environment. Take, for example, a gunshot at the leg. Upon detecting a leg wound, the suit stiffens and weighs down the area, mimicking the difficulty one would have moving with such an injury. The AR helmet, meanwhile, deals with how a player views their environment.
[br][/br][br][/br]
Both pieces have variations and equippable tools, which can be set from a user's account on the ENDGAME database. Since a good part of the game is AR, there's no need for a physical change to wildly variate how either behaves.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]arenas and gyms[/i][/div]
Most major cities have one or two large arenas at which to host the local ENDGAME tourney. These arenas span around five soccer fields, while also boasting multi-floored areas. Aside from those, there are smaller arenas, better known as "gyms", for practice and casual play. These are typically half or less the size of a standard arena, making for quicker games.
[br][/br][br][/br]
There are different kinds of terrain and situations that players are able to play in, heavily affecting the strategies of anyone participating. Things like time of the day and visibility-scale are part of it. These are randomly selected during the beginning of the match, forcing players to adapt. As for maps, ENDGAME's default four boasts a decent variety, with arenas and gyms often making ones specific to their area.
[br][/br][br][/br]
[indent]
[div class="statname"]CITY (outdoor 70% | indoor 30%)[/div] [i]The area around Tomorrow Games' HQ has been recreated into a map for players to fight in. Plenty of areas to duck into and hide, as well as narrow gaps to take advantage of when teams are forced to bottleneck. A certain section is an indoor restaurant with tables, counters and a kitchen.[/i]
[br][/br][br][/br]
[div class="statname"]CRUISE SHIP (indoor 60% | outdoor 40%)[/div] [i]A slightly narrower than usual map where getting pushed out of the play area means "death by drowning". Most of the map occurs within the ship itself with its myriad of hallways, but there's a large deck area at which there's nowhere to hide.[/i]
[br][/br][br][/br]
[div class="statname"]FOREST AND PLAINS (outdoor 100%)[/div] [i]One of the maps where players will have to pray to RNJesus for weather and time. While parts of the map are heavily wooded, there are open tree line areas as well. As an incentive to come out of hiding, these are the places where the map spawns items for use of either team. It's not uncommon to see fights break out at these locations.[/i]
[br][/br][br][/br]
[div class="statname"]BUILDING (indoor 100%)[/div] [i]The game picks from different building layouts. As for its purpose, this is also randomly chosen from presets. It could be an apartment complex, a bank, a mall... anything really. The most popular is a recreation of TG's offices. It includes a lobby, a corporate office level, cafeteria, and even a small rendition of a non AR-d ENDGAME arena.[/i]
[br][/br][br][/br]
They also make seasonal maps for fun. To avoid the default maps from going stale and sections of it abused, a good part of the map is randomized each time it's generated and set-up. Amongst the 4, the city is least varied as it's always forced to pick from different areas around TG's head office. On the opposite side of the spectrum, the Forest and Plains maps are never the same.
[/indent]
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]gamemodes[/i][/div]
ENDGAME is most famous for its 5v5 team death match wherein one group of players must eliminate the entire enemy team. These games typically last from 30 minutes to an hour, but have no real time limit. The 3v3 variation with its smaller map is a fairly popular choice as well. However, other modes exist, with arenas and gyms listing their schedules at least three days ahead of time.
[br][/br][br][/br]
[indent]
[div class="statname"]ENDGAME (5v5 or 3v3)[/div] [i]In a team vs team death match, one team must completely eliminate all members of the opposing group. It doesn't matter if there's only one member left on one and there are still five on the other; the game's not over until all are gone.[/i]
[br][/br][br][/br]
[div class="statname"]FLAGSHIP (5v5 or 3v3)[/div] [i]Another team vs team mode, but this time each team must flag one of their players. Should the flagged player die, the team automatically loses. Neither team knows who is flagged on the other, so it's up to the team how they want to approach the road to victory.[/i]
[br][/br][br][/br]
[div class="statname"]BATTLE ROYALE (16+ or 9+)[/div] [i]A more casual game mode where players fight for themselves, but can temporarily team up to get ahead of the pack. Players are blindly situated at random points in the arena. The map walls off some places after certain time points, eliminating anyone who isn't in the active play area. The map gets smaller and smaller as the timer counts down to zero. Your goal is to be the last one standing.[/i]
[/indent]
[br][/br]
It's fairly common for players to professionally play more than one game mode. Some even use the exact same team for both ENDGAME and FLAGSHIP.
[/div]
[/div]
[div class="scrollbox hidebox rulesbox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]RESPECT[/i][/div]
My philosophy on GMing is fairly relaxed: respect me, I respect you. As a GM, I'm in a position of authority over participants of my roleplays. If I reject someone, there's a reason for it, and I'm willing to take a second look if they decide to listen to my criticisms. In that same vein, if my players decide to (politely) criticize me for a decision I made, I will take it into account with no hard feelings. I'm willing to listen to discussion and disagreement, but when I draw a line, I don't budge it.
[br][/br][br][/br]
Respect extends to beyond the roleplay sphere however. If a player has a history of things like theft or character plagiarism, remaining unapologetic about such things, I reject them. I don't tolerate bad behavior in my roleplays.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]LITERACY[/i][/div]
I don't care much for labels. As long as you can post a cohesive paragraph, then you're good. We all start somewhere, so if we offer feedback on your writing, it's because we want to help you grow. Occasional misspellings are understandable, we all have those days. But if you can't get your their/they're consistent, then I think you should brush up a bit more on English before trying out here.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]RESERVATIONS[/i][/div]
Are non-existent, unless you've been personally invited to this roleplay. Everyone goes through a screening process; you submit a character concept, and we'll see if it's up to standards. Failure to comply with this will mean automatic rejection. Unlike most roleplays, ENDGAME will be operating on a roleplayer cap rather than character cap. Feel free to create as many as you can handle once you've passed the application. Head over to the APP thread for more information.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]COMMITMENT[/i][/div]
Should you fail to speak with me within a month, you're booted from the roleplay, no exceptions. I don't mind long absences so long as you keep us updated on your current status. Likewise, should you no longer feel like participating, I want to be informed instead of leaving us with question marks. I take more offence at being dropped like a hot potato than being told directly that you no long feel like you can commit.
[/div]
[/div]
[div class="scrollbox hidebox louderbox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]LOUDER[/i][/div]
[div class="teamstats"]
[div class="teamicon" style="background-image: url(https://i.imgur.com/gr631KH.png);"][USER=32692]@sugarvine[/USER][/div]
[div class="teaminfo"]
[div class="statblock"]
[div class="statname"]TEAM NAME[/div]
louder
[/div]
[div class="statblock"]
[div class="statname"]ranking[/div]
TWENTY-NINTH (29th)
[/div]
[div class="statblock"]
[div class="statname"]SEASONS[/div]
six (6) registered seasons
[/div]
[div class="statblock"]
[div class="statname"]WIN/LOSS[/div]
1.01
[/div]
[/div]
[/div]
LOUDER was formed during the 4th season of ENDGAME, originally comprised of a bunch of random individuals who needed a team to join the higher level leagues. Said group was lead by Lucas Kent, who went on to become one of ENDGAME's legendary players when he reverse-swept a 1v5 situation during the finals. Despite the loss, their popularity soared as clips of the play continue to be referenced even today. They decided to continue the team beyond one season (their original agreement was only for the fourth season), eventually forming a brand organization by the same name. Two of the original members continue to play. Two others, one of whom is Lucas, have taken on more administrative roles. The last member left during the 7th season to found Galahad.
[br][/br][br][/br]
The team has often featured a pivotal center within their lineup. They excel in hit-and-run tactics, often making good use of tools and terrain. Despite their expansion, they retain their independent philosophy, refusing company sponsorships for the team as a whole. Individual player sponsorships, however, are alright with them.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]STYLE[/i][/div]
As mentioned, LOUDER excels in guerilla warfare-like tactics. They make use of the tools and terrain available to them. A lot of people have commented that for such an attention-grabbing name, their extensive use of stealth and traps feel quite opposite to the brand's image. Due to their playstyle, they excel in maps with a lot of cover, such as the city area and certain variations of the building map.
[br][/br][br][/br]
The general vibe of the team is very relaxed, with an urban street flair to their outfits. Unlike ZER0 and Galahad, none of them members have any matching clothing items. However, they look more cohesive as a team than Antiheroes due to their singular style family.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]TRAINING[/i][/div]
The team holds individuals accountable for their own training. While it does hold group practice sessions, majority of training is free form and at your own time and pace. If you don't pull your own weight, you'll get relegated to the bench.
[br][/br][br][/br]
LOUDER is one of the teams that spends quite a bit of time studying their opponent's playstyles, second only to ZER0. They're willing to make more adjustments to take advantage of enemy weaknesses. As a result, most of their members have a fair amount of proficiency and reliance in the various tools made available to players by the game. Rather than outright training, LOUDER is the team that figures out weird interactions in the game to take advantage of. Take for example, the 'extra 10' bug from season 8. LOUDER was the one who figured out certain bullet types had an extra 10px hitbox outside the range indicated by the game.
[/div]
[/div]
[div class="scrollbox hidebox galahadbox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]GALAHAD[/i][/div]
[div class="teamstats"]
[div class="teamicon" style="background-image: url(https://i.imgur.com/pktHtLw.png);"][USER=32692]@sugarvine[/USER][/div]
[div class="teaminfo"]
[div class="statblock"]
[div class="statname"]TEAM NAME[/div]
galahad
[/div]
[div class="statblock"]
[div class="statname"]ranking[/div]
sixteenth (16th)
[/div]
[div class="statblock"]
[div class="statname"]SEASONS[/div]
three (3) registered seasons
[/div]
[div class="statblock"]
[div class="statname"]WIN/LOSS[/div]
1.08
[/div]
[/div]
[/div]
Gregers Lazarov was a member of the original LOUDER team until he eventually left due to a difference in opinion. He believed that company sponsorships could be used for the benefit of the team, whilst Lucas thought it was too close to selling out. Shortly after leaving of his own volition, he founded Galahad, recruiting players who'd found dissatisfaction in their current organizations. Other teams found it too close to poaching but remained silent; LOUDER, true to form, publicly called them out. Everyone watched with baited breath as the drama unfolded on Chunmi during the start of the 8th season.
[br][/br][br][/br]
Galahad is a disjointed team consisting of the most notable members of the competitive scene. These are either former star players of other teams, or simply players who have strong public appeal and large fanbases. It's rare to see a complete rookie amongst them.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]STYLE[/i][/div]
Galahad has a very individualistic approach to the game, with players typically moving on their own. Whereas LOUDER has some coordination involved in their strategy, Galahad is literally five different people doing their own thing. Teamwork isn't exactly their thing, but due to the skill of each individual player, they're able to win games. Divide-and-conquer is a strategy they lean heavily towards.
[br][/br][br][/br]
ENDGAME's following often refers to Galahad as the princes/princesses, whether they're being sarcastic or just an honest-to-goodness fan. Their uniforms remind people of Japanese prince/ss idol costumes, complete with differing color schemes. They were going for a more royal look, but considering the fact many of their players are widely considered to be good-looking, that's what ended up happening.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]TRAINING[/i][/div]
Galahad's training is even more relaxed than LOUDER's, if that's even possible. Due to the myriad of teams the members originated from, the organization can't agree on any one method that fits for everyone. As a result, most training is individual, with some group training sessions and frequent scrimmages against other teams.
[br][/br][br][/br]
While most teams keep most of their training secret, with a few scattered glimpses via monitored streams, Galahad tends to be open with theirs. This is mostly because there usually isn't much of a plan in the first place, with strategies created on the fly. Gameplay wise, if there's one thing to note about their players is that they're very adaptable. Despite their independent tendencies, most know how to cooperate if the situation calls for it.
[/div]
[/div]
[div class="scrollbox hidebox zerobox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]ZERO[/i][/div]
[div class="teamstats"]
[div class="teamicon" style="background-image: url(https://i.imgur.com/nbVgWHF.png);"][USER=32692]@sugarvine[/USER][/div]
[div class="teaminfo"]
[div class="statblock"]
[div class="statname"]TEAM NAME[/div]
zer0
[/div]
[div class="statblock"]
[div class="statname"]ranking[/div]
FIRST (1st)
[/div]
[div class="statblock"]
[div class="statname"]SEASONS[/div]
eight (8) registered seasons
[/div]
[div class="statblock"]
[div class="statname"]WIN/LOSS[/div]
1.19
[/div]
[/div]
[/div]
ZER0 is considered one of the original teams that helped form the competitive scene of ENDGAME. Five of the top players of the time formed a team from the bottom up, going from open league to pro league. Three members continue to play. Two were forced to retire due to injuries, but only one left the scene completely to pursue other goals. The other one chose to stay and act as strategist and coach for others.
[br][/br][br][/br]
Amongst the teams, ZER0 is the one most alike to how actual military behaves. When on the field, they wait for their captain's orders before taking individual action. Their philosophy revolves around them as one unit.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]STYLE[/i][/div]
In contrast with LOUDER which has a very self-reliant style, ZER0 has a defined chain of command. Some call it rigid, but considering how the team sits at the top of the rankings, they had to be doing something right. Members of the team know that they're able to trust the others to have their back. Communication is key to ZER0.
[br][/br][br][/br]
Fitting with the team's militaristic vibe, the team wears the same base uniform with personal flairs in the form of color scheme and accessories. However, the colors members choose tend to be very muted and suited to camouflage such as blacks, greys and browns.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]TRAINING[/i][/div]
Members of ZER0 do everything together. From eating together to practicing as a team, they spend a good part of the day in close quarters. Everyone monitors each other's progress; feedback is given regardless of rank. The team trains its members to take these criticisms graciously. Another advantage of the team is their myriad of benched members. Unlike other teams, they're comfortable with switching between their main roster and reserves with no threat of disrupting the group's teamwork.
[br][/br][br][/br]
Like LOUDER, ZER0 researches their opponents on upcoming matches, exploiting weaknesses they find. There isn't any one map the team is good at. As an all-rounder, they tend to perform well in any terrain, thought admittedly they're rarely able to really maximize it for their use. Much of their training time is spent doing drills and recreating situations that they might find themselves in at some point in a game.
[/div]
[/div]
[div class="scrollbox hidebox antibox"]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]ANTIHEROES[/i][/div]
[div class="teamstats"]
[div class="teamicon" style="background-image: url(https://i.imgur.com/zDUBM9K.png);"][USER=32692]@sugarvine[/USER][/div]
[div class="teaminfo"]
[div class="statblock"]
[div class="statname"]TEAM NAME[/div]
antiheroes
[/div]
[div class="statblock"]
[div class="statname"]ranking[/div]
fortieth (40th)
[/div]
[div class="statblock"]
[div class="statname"]SEASONS[/div]
ten (10) registered seasons
[/div]
[div class="statblock"]
[div class="statname"]WIN/LOSS[/div]
0.95
[/div]
[/div]
[/div]
Antiheroes is one of the oldest teams in ENDGAME's competitive scene, having been a participant since the first season. Their founder, Eliza Pollux, is an iconic figure in ENDGAME's history. She lead her team to victory in the finals during the game's first two seasons, bouncing back from Lucas' match reverse-sweep in their best of five. After ten years in the business, the four of which was coach work, Eliza abrupt left the scene. Antiheroes is now struggling with their new leader as they try to find their new identity.
[br][/br][br][/br]
Eliza's philosophy on ENDGAME was very simple: "It's a game, have fun with it." She became friends with TG's founder and was pivotal to many of the quality of life changes in early patches of the game. Despite not making it out of groups since the second season, the game has a small but loyal fanbase primarily comprised of followers who'd been with them since season one. Others, however, have criticized the organization for not taking the game seriously enough. Whatever the case, people are curious to see what's Antiheroes without an Eliza.
[/div]
[div class="section"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]STYLE[/i][/div]
Like ZER0, they're an all-rounder that performs well enough in most maps and terrain. Unlike them however, Antiheroes is structured to be more democratic than leader-biased, which could mean for some very unexpected turns in their strategy. That's what often makes Antiheroes matches so interesting to watch. On the flipside, delays in communication and disagreements on what plan of action to take are oftentimes their downfall.
[br][/br][br][/br]
The only thing that makes Antiheroes cohesive is their lack of cohesion. Avatar outfits can range from military to casual wear, making for some interesting combinations when on the field. One of the most hilarious was during World's Groups stage, which occurs during October. The team dressed as various characters. One was Phoenix Wright from Ace Attorney, and beside him was Goku.
[/div]
[div class="section" style="padding-bottom: 125px;"]
[div class="heading"][b][color=#19221c]*[/color][/b][i]TRAINING[/i][/div]
While ZER0 values teamwork above all else, Antiheroes values camaraderie. You could coordinate with someone you disliked on ZER0, but that simply doesn't work in a team like Antiheroes. While not everyone's best friends, people are amicable enough to each other and are close enough to call each other a casual friend. They often eat meals together, and in-house team versus team matches are a common occurence to get some practice in.
[br][/br][br][/br]
Training in the Antiheroes house is fairly well-rounded. There's a fitness regime, actual drills, and then the in-house battles, usually for a casual reward like who's paying for dinner that night. While their players are willing to work hard, they don't turn the game into their life like other teams. They take the time to enjoy ENDGAME and the process of getting good at it. Like Galahad, one of their strong points is the myriad of personalities in their roster. Someone was bound to make an interesting way to deal with an enemy's strength.
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]

[/nobr][/div]

[/div][/div][/div][/div][/div][export] [class name=root] position: relative; width: 100%; background-color: #1d1d1d; background-image: url('https://i.imgur.com/3QMnky3.gif'); background-blend-mode: soft-light; overflow: hidden; font-size: initial; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; [/class] [class name=flexwrapper] display: block; box-sizing: border-box; height: 100%; overflow: hidden; [/class] [class name=scroll] display: block; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 150px; [/class] [class name=scrollitem] display: block; width: 100%; height: auto; position: relative; overflow: hidden; [/class] [class name=leftside] flex: 1 0 300px; max-width: 700px; background: url('https://i.imgur.com/DvQYu9V.jpg') no-repeat bottom right; background-size: cover; height: 80vh; overflow: hidden; text-align: center; [/class] [class name=title] display: block; position: sticky; position: -webkit-sticky; top: 0px; left: 0px; box-sizing: border-box; background: #ffca00; padding: 10px 20px; width: 100%; color: #1d1d1d; font-weight: bold; font-size: 2vh; [/class] [class name=dialogueblock] display: block; width: 100%; padding: 5px; box-sizing: border-box; margin: 15px 0px; [/class] [class name=textarea] display: inline-block; vertical-align: top; width: calc(100% - 105px); font-size: initial; overflow: hidden; [/class] [class name=textbox] display: block; width: 100%; border-radius: 10px; border: 0px solid transparent; box-sizing: border-box; padding: 15px; background: rgba(0, 0, 0, .75); min-height: 75px; color: #FFFFFF; text-align: justify; font-size: .8em; [/class] [class name=textbox2] min-height: 0px; margin-top: 10px; [/class] [class name=alticon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-right: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/me1I7BR.jpg') no-repeat center; [/class] [class name=monoicon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-left: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/IqFIsad.jpg') no-repeat center; [/class] [class name=name] font-size: 4vh; letter-spacing: -2px; width: calc(95% - 30px); margin: auto; color: #ff1ea6; text-shadow: 1px 1px 2px rgba(0,0,0,.8); font-weight: bold; font-family: 'Poppins', sanserif; margin-bottom: -2vh; white-space: nowrap; overflow: hidden; [/class] [class name=alt] text-align: left; [/class] [class name=mono] text-align: right; [/class] [class name=rightside] flex: 3 0 300px; height: 80vh; overflow: hidden; color: #FFFFFF; font-size: .8em; [/class] [class name=codebutton] padding: 10px 15px; display: inline-block; margin: 10px 0px 0px 10px; box-sizing: border-box; font-weight: bold; background: #ff1ea6; border-radius: 5px; width: auto; cursor: pointer; [/class] [class name=code] padding: 5px 15px 5px 15px; width: calc(100% - 20px); margin: 15px 0px 0px 20px; border-left: 1px solid #ffcd00; box-sizing: border-box; display: none; font-size: .95em; font-family: 'IBM Plex Mono', monospace; [/class] [script class=codebutton version=2 on=click] (= spoiler (index (split (getText) "spoil") 0 ) ) (slideToggle 1000 (+ spoiler "spoil") ) [/script] [/export]

eclipsa · Jun 8, 2018

this is so amazing i think i'm dead

Alteras · Jul 2, 2018

[class=container] width: 100%; max-width: 1200px; margin: 5px auto; position: relative; background-color: rgb(240,240,240); border: 1px solid gray; border-radius: 10px; box-shadow: 0 0 5px black; color: black; padding: 10px; box-sizing: border-box; [/class] [class=title] position: relative; width: 100%; font-size: 40px; font-family: 'Oxygen Mono'; text-align: center; [/class] [class=intro] position: relative; width: 100%; max-width: 700px; margin: 10px auto; font-family: 'Roboto'; color: gray; [/class] [class=inputFields] position: relative; width: 100%; display: flex; flex-flow: row wrap; justify-content: space-around; [/class] [class=inputs] position: relative; width: 100%; max-width: 355px; margin-bottom: 10px; [/class] [class=inputTitle] position: relative; font-size: 1.25em; text-align: center; width: 100%; text-decoration: underline; font-weight: bold; [/class] [class=tabinput] width: 200px; display: inline-block; box-sizing: border-box; color: black; [/class] [class=field] display: inline-block; width: 150px; [/class] [class=TabNameGen] width: 100%; max-width: 700px; margin: 0 auto; [/class] [class=tabNameField] position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; min-height: 100px; border: 1px solid gray; border-radius: 15px; padding: 10px; box-sizing: border-box; [/class] [class=tabNameInput] width: 100px; display: inline-block; margin: 5px auto; width: 100%; max-width: 700px; text-align: center; [/class] [class=layoutselect] display: inline-flex; flex-flow: row nowrap; justify-content: space-between; [/class] [class=layoutselectbutton] cursor: pointer; display: inline-block; --yes: none; --no: inline; [/class] [class=selectlayout] pointer-events: none; --yes: inline; --no: none; [/class] [class=yes] display: var(--yes); [/class] [class=no] display: var(--no); [/class] [class=GENERATE] margin: 0 auto; position: relative; display: block; color: black; [/class] [class=output] margin: 10px auto; position: relative; display: block; border: 5px solid black; border-radius: 15px; max-width: 1000px; width: 100%; box-sizing: border-box; padding: 20px; background-color: #222945; color: white; white-space: pre-wrap; [/class] [class=codefield] display: none; [/class] [class name=codevalue] display: inline; [/class] [div class=codefield]
[div class="codeheader"] [div class="tab selected"][div class=tabID]1Tab[/div][div class="codevalue tabnamecode1"]TabName[/div][/div]
[/div]

[div class="tabnamecode"] [div class=tab][div class=tabID][div class="codevalue tabnamecodenum"]2Tab[/div]TabName[/div][/div]
[/div]

[div class="codecontent"] [div class="codevalue codetabcontentvalue"]1[/div]
[div class="codevalue codetabcontent"][/div] tab content
[/div]
[/div]

[div class="codebuilderfinal"][nobr]
[import]8786706[/import]
[comment][div class="codevalue codetabfontcalling"]font[/div][/comment]
[class=values]
--tabStyle: [div class="codevalue codetabstyle1"]row wrap[/div];
--contentStyle: [div class="codevalue codetabstyle2"]column nowrap[/div];
--tab-txt-align: [div class="codevalue codetabstyle3"]center[/div];
--tab-txt-color: [div class="codevalue codetabcolor"]white[/div];
--bg-color: [div class="codevalue codetabbg"]#2c3e50[/div];
--fontFamily: '[div class="codevalue codetabfont"]Play[/div]';
--fontSize: [div class="codevalue codetabsize"]20px[/div];
--tab-hover-color: [div class="codevalue codetabhcolor"]white[/div];
--tab-hover-bg: [div class="codevalue codetabhbg"]#2980b9[/div];
--tab-select-color: [div class="codevalue codetabscolor"]white[/div];
--tab-select-bg: [div class="codevalue codetabsbg"]#2980b9[/div];
[/class]

[/nobr][div class="tabContainer values"][nobr]
[div class=tabHolder]
[div class="codevalue codebuilder1"][/div] [/div][/nobr]
[div class=tabContentHolder]
[div class="codevalue codebuilder2"][/div] [/div]
[/div]
[/div]
[/div] [export] [class=tabContainer] width: 100%; position: relative; display: flex; flex-flow: var(--contentStyle); [/class] [class=tabHolder] min-width: 200px; position: relative; display: flex; flex-flow: var(--tabStyle); border: 0px solid transparent; border-radius: 10px; overflow: hidden; [/class] [class=tab] font-size: var(--fontSize , 18px); font-family: var(--fontFamily , 'Roboto'); background-color: var(--bg-color, #2c3e50); color: var(--tab-txt-color, white); padding: calc( var(--fontSize , 18px) / 3 ); position: relative; flex:1; text-align: var(--tab-txt-align, center); cursor: pointer; transition: all .25s; [/class] [class name=tab state=hover] background-color: var(--tab-hover-bg, #2980b9); color: var(--tab-hover-color, white); [/class] [class=selected] text-decoration: underline; background-color: var(--tab-select-bg, #2980b9); color: var(--tab-select-color, white); cursor: default; pointer-events: none; [/class] [class=tabID] display: none; [/class] [class=tabContentHolder] flex: 1; align-self: stretch; position: relative; min-width: 200px; [/class] [class=tabContent] position: relative; padding: 5px; [/class] [script class=tab version=2] (hide "tabContent") (show "1") [/script] [script class=tab version=2 on=click] (= currenttab (index (split (getText) "Tab") 0)) (removeClass "selected" "tab") (hide "tabContent") (show currenttab) (addClass "selected") [/script] [/export] [script class=layoutselectbutton version=2 on=click] (removeClass "selectlayout" "layoutselectbutton") (addClass "selectlayout") [/script] [script class=GENERATE version=2 on=click] (hide "output") (= raw (getVal "tabNameField")) (if (== (count raw) 0) (stop)) (= rawArray (split raw "%") ) (= rareArray [ ]) (each rawArray (append rareArray (trim _ ) ) ) (= trimArray [ ]) (each rareArray (if (!= (count _ ) 0) (append trimArray _ ) ) ) (setText "" "codebuilder1") (setText "" "codebuilder2") (= tabnumber 0) (each trimArray (group (++ tabnumber) (if (== tabnumber 1) (group (setText _ "tabnamecode1") (= codesnippet (getText "codeheader")))) (if (!= tabnumber 1) (group (setText (+ tabnumber "Tab[/div]" _ "[/div]") "tabnamecodenum") (= codesnippet (getText "tabnamecode")))) (= codesnippet (+ (getText "codebuilder1") codesnippet)) (setText codesnippet "codebuilder1") (setText (+ "[div class=\"tabContent " tabnumber "\"]" ) "codetabcontentvalue") (setText _ "codetabcontent") (= codesnippet (+ (getText "codebuilder2") (getText "codecontent"))) (setText codesnippet "codebuilder2") )) (if (== (getText "selectlayout") "Horizontal") (group (setText "row wrap" "codetabstyle1") (setText "column nowrap" "codetabstyle2") (setText "center" "codetabstyle3"))) (if (== (getText "selectlayout") "Vertical") (group (setText "column nowrap" "codetabstyle1") (setText "row wrap" "codetabstyle2") (setText "left" "codetabstyle3"))) (if (!= 0 (count (trim (getVal "TabNameColor")))) (setText (trim (getVal "TabNameColor")) "codetabcolor")) (if (!= 0 (count (trim (getVal "TabBGColor")))) (setText (trim (getVal "TabBGColor")) "codetabbg")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (trim (getVal "TabFont")) "codetabfont")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (+ "[font=" (trim (getVal "TabFont")) "]font[/font]") "codetabfontcalling")) (if (!= 0 (count (trim (getVal "TabFontSize")))) (setText (trim (getVal "TabFontSize")) "codetabsize")) (if (!= 0 (count (trim (getVal "TabHoverNameColor")))) (setText (trim (getVal "TabHoverNameColor")) "codetabhcolor")) (if (!= 0 (count (trim (getVal "TabHoverBGColor")))) (setText (trim (getVal "TabHoverBGColor")) "codetabhbg")) (if (!= 0 (count (trim (getVal "TabSelNameColor")))) (setText (trim (getVal "TabSelNameColor")) "codetabscolor")) (if (!= 0 (count (trim (getVal "TabSelBGColor")))) (setText (trim (getVal "TabSelBGColor")) "codetabsbg")) (setText (getText "codebuilderfinal") "output") (slideDown 500 "output") [/script] [div class=container][div class=title] Tab Code Generator 1.0[/div] [div class=intro] This is the Tab Code Generator 1.0!!! Due to the limitations of BBscript 2 (and my motivation), the options that you have is somewhat limited. However, it should be able to accept CSS code and easily prepare it in the code printout, such as calc(5vmax + 5px). Unfortunately, the way it is set up, everything will be squished together into one line when you copy and paste it. There is no way around it at this moment. That will have to wait for version 2 (if I'm ever motivated).

When you are creating a new tab, use the % to separate between your tab names. It is fine to use the enter key, as it will not be picked up. You can also use emojis and font awesome (and even some bbcode of your own) when you are making the tab names.

I will be posting an explanation for the generator in Resource - ¬ FEVERDREAMS ⸥ alt sugar [/div] [div class=inputFields] [div class=inputs] [div class=inputTitle]Tab Styling[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabBGColor" maxlength=25 placeholder="Navy, #2c3e50, rgb(44, 62, 80), etc."][/input]
[div class=field]Tab Font: [/div] [input type=text class="tabinput TabFont" maxlength=50 placeholder="Play"][/input]
[div class=field]Font size: [/div] [input type=text class="tabinput TabFontSize" maxlength=20 placeholder="20px"][/input] [div class=field]Tab Layout:[/div] [div class="layoutselect tabinput"][div class="layoutselectbutton selectlayout"][div class=yes][/div][div class=no][/div]Horizontal[/div][div class="layoutselectbutton"][div class=yes][/div][div class=no][/div]Vertical[/div][/div] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Hovering[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabHoverNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabHoverBGColor" maxlength=25 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Selected[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabSelNameColor" maxlength=20 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabSelBGColor" maxlength=20 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=TabNameGen] [div class=inputTitle]Tabs and Tab Names[/div] [div class=tabNameInput] [input type=textarea class="tabNameField TabName"][/input] Separate tabs using %. So an example would be "Tab Name 1 % Tab Name 2" [/div] [input type=button class="GENERATE"]Generate Code[/input] [/div] [/div][div class=output style="display: none"][/div][/div]

Alteras · Jul 2, 2018

[div class="root"][div class="leftside"] [div class="scroll"] [div class="flexwrapper"] [div class="scroll"] [div class="scrollitem"] [div class="title"] #tabcodegen [/div] [div class="dialogueblock monotalk"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] no what im going to do [/div] [div class="textbox textbox2"] is submit to you my design [/div] [div class="textbox textbox2"] and you fix everything [/div] [div class="textbox textbox2"] tahnk you [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]T-T [/div] [div class="textbox textbox2"] lol, I'd actually accept that rn [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] LOL [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]This tab code Gen is causing me more headaches [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] rip [/div] [/div] [div class="monoicon"] [/div] [/div] [/div] [/div] [/div] [/div] [/div][div class="rightside"][div class="flexwrapper" style="padding: 30px;"][div class="scroll"][div class="scrollitem"]I present to you, the tab code generator 1.0!!!! I've been working on this project for the longest period of time, often complaining to sugarvine about it. I have released it to the site here: Resource - BBCode Tab Generator. And now I'll explain how it works!

This project completely destroyed me. It wasn't actually feasible until bbscript 2 was released, alongside some hidden bbcode features that are under the works. Be prepared for poor formatting to make this thing work.

Tab Name Field
The key feature of this generator is the ability to put in any amount of tabs you wants with nearly any name and it'll pre-format it for you. Here was the biggest stumbling block, being able to pickup all those names. After several design revisions, I decided to use a big text area and have the user just separate it manually. Currently there is no support for adding inputs using bbscript, so I couldn't make individual separations. Here is the BBscript involved with the tab names:
[div class=codebutton]Tab Name Field Generator[/div][div class="code tabnamespoil"][script class=GENERATE version=2 on=click]
(= raw (getVal "tabNameField"))
(if (== (count raw) 0) (stop))
(= rawArray (split raw "%") )
(= rareArray [ ])
(each rawArray (append rareArray (trim _ ) ) )
(= trimArray [ ])
(each rareArray (if (!= (count _ ) 0) (append trimArray _ ) ) )[/div]
Utilizing the split function, we turn the single string of the text into a list separated by %. Then inside each one, we trim it down and correct the text so that it doesn't come out weird, using the trim function. It is able to go through everything in the list using the each function. Unfortunately bbscript doesn't handle line breaks well, so we couldn't separate the tab names by line.

Building the Code
This was just a mess, trying to get this to work. Essentially is came down to taking each tab name, dropping it into a div that is next to all the pre-formatted code, copying it all together, and pasting it in a new place. Here is the code:
[div class=codebutton]BBScript[/div][div class="code codebuilderspoil"] (each trimArray (group
(++ tabnumber)
(if (== tabnumber 1) (group
(setText _ "tabnamecode1")
(= codesnippet (getText "codeheader"))))
(if (!= tabnumber 1) (group
(setText (+ tabnumber "Tab[/div]" _ "[/div]") "tabnamecodenum")
(= codesnippet (getText "tabnamecode"))))
(= codesnippet (+ (getText "codebuilder1") codesnippet))
(setText codesnippet "codebuilder1")
(setText (+ "[div class=\"tabContent " tabnumber "\"]" ) "codetabcontentvalue")
(setText _ "codetabcontent")
(= codesnippet (+ (getText "codebuilder2") (getText "codecontent")))
(setText codesnippet "codebuilder2") ))
(if (== (getText "selectlayout") "Horizontal") (group
(setText "row wrap" "codetabstyle1")
(setText "column nowrap" "codetabstyle2")
(setText "center" "codetabstyle3")))
(if (== (getText "selectlayout") "Vertical") (group
(setText "column nowrap" "codetabstyle1")
(setText "row wrap" "codetabstyle2")
(setText "left" "codetabstyle3")))
(if (!= 0 (count (trim (getVal "TabNameColor")))) (setText (trim (getVal "TabNameColor")) "codetabcolor"))
(if (!= 0 (count (trim (getVal "TabBGColor")))) (setText (trim (getVal "TabBGColor")) "codetabbg"))
(if (!= 0 (count (trim (getVal "TabFont")))) (setText (trim (getVal "TabFont")) "codetabfont"))
(if (!= 0 (count (trim (getVal "TabFont")))) (setText (+ "[font=" (trim (getVal "TabFont")) "]font[/font]") "codetabfontcalling"))
(if (!= 0 (count (trim (getVal "TabFontSize")))) (setText (trim (getVal "TabFontSize")) "codetabsize"))
(if (!= 0 (count (trim (getVal "TabHoverNameColor")))) (setText (trim (getVal "TabHoverNameColor")) "codetabhcolor"))
(if (!= 0 (count (trim (getVal "TabHoverBGColor")))) (setText (trim (getVal "TabHoverBGColor")) "codetabhbg"))
(if (!= 0 (count (trim (getVal "TabSelNameColor")))) (setText (trim (getVal "TabSelNameColor")) "codetabscolor"))
(if (!= 0 (count (trim (getVal "TabSelBGColor")))) (setText (trim (getVal "TabSelBGColor")) "codetabsbg"))
(setText (getText "codebuilderfinal") "output")
(slideDown 500 "output")[/div]

[div class=codebutton]Pre-formatted Divs[/div][div class="code codebuildspoil" style="color: black"]

Code:

[div class=codefield]
	[div class="codeheader"][plain]	[div class="tab selected"][div class=tabID]1Tab[/div][/plain][div class="codevalue tabnamecode1"]TabName[/div][plain][/div]
[/plain][/div]

	[div class="tabnamecode"][plain]		[div class=tab][div class=tabID][/plain][div class="codevalue tabnamecodenum"][plain]2Tab[/div]TabName[/div][/plain][/div]
[/div]
	
	[div class="codecontent"]		[div class="codevalue codetabcontentvalue"]1[/div]
		[div class="codevalue codetabcontent"][/div][plain] tab content
		[/div]
[/plain][/div]
	
	[div class="codebuilderfinal"][plain][nobr]
[import]8786706[/import]
[comment][/plain][div class="codevalue codetabfontcalling"][font=Play]font[/font][/div][plain][/comment]
[class=values]
	--tabStyle: [/plain][div class="codevalue codetabstyle1"]row wrap[/div][plain];
	--contentStyle: [/plain][div class="codevalue codetabstyle2"]column nowrap[/div][plain];
	--tab-txt-align: [/plain][div class="codevalue codetabstyle3"]center[/div][plain];
	--tab-txt-color: [/plain][div class="codevalue codetabcolor"]white[/div][plain];
	--bg-color: [/plain][div class="codevalue codetabbg"]#2c3e50[/div][plain];
	--fontFamily: '[/plain][div class="codevalue codetabfont"]Play[/div][plain]';
	--fontSize: [/plain][div class="codevalue codetabsize"]20px[/div][plain];
	--tab-hover-color: [/plain][div class="codevalue codetabhcolor"]white[/div][plain];
	--tab-hover-bg: [/plain][div class="codevalue codetabhbg"]#2980b9[/div][plain];
	--tab-select-color: [/plain][div class="codevalue codetabscolor"]white[/div][plain];
	--tab-select-bg: [/plain][div class="codevalue codetabsbg"]#2980b9[/div][plain];
[/class]

[/nobr][div class="tabContainer values"][nobr]
	[div class=tabHolder][/plain]
	[div class="codevalue codebuilder1"][/div][plain]	[/div][/nobr]
	[div class=tabContentHolder][/plain]
[div class="codevalue codebuilder2"][/div][plain]	[/div]
[/div]
[/plain][/div]
[/div]

[/div]

All this would then be copied and pasted into the Output Div at the end. Unfortunately, HTML linebreak isn't the same as a linebreak character, so the output div had a whitespace: pre-wrap; property.

Import and Export
Something you may notice is that there is an import and an export tag. This was actually part of a secret update that was released for bbcode+, which basically allows us to store classes and scripts in another post and use it in another post. The way to use is is to surround what you want to export in the export tag, and with the import tag, type in the post ID number (which you can find in the url) inside it.

In anycase, this was thoroughly exhausting. Here is the full code for you usage.

[div class=codebutton]#tabcodegen[/div][div class="code codespoil" style="color: black"]

Code:

[nobr]
[class=container]
width: 100%;
max-width: 1200px;
margin: 5px auto;
position: relative;
background-color: rgb(240,240,240);
border: 1px solid gray;
border-radius: 10px;
box-shadow: 0 0 5px black;
color: black;
padding: 10px;
box-sizing: border-box;
[/class]

[class=title]
position: relative;
width: 100%;
font-size: 40px;
font-family: 'Oxygen Mono';
text-align: center;
[/class]

[class=intro]
position: relative;
width: 100%;
max-width: 700px;
margin: 10px auto;
font-family: 'Roboto';
color: gray;
[/class]

[class=inputFields]
position: relative;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
[/class]

[class=inputs]
position: relative;
width: 100%;
max-width: 355px;
margin-bottom: 10px;
[/class]

[class=inputTitle]
position: relative;
font-size: 1.25em;
text-align: center;
width: 100%;
text-decoration: underline;
font-weight: bold;
[/class]

[class=tabinput]
width: 200px;
display: inline-block;
box-sizing: border-box;
color: black;
[/class]

[class=field]
display: inline-block;
width: 150px;
[/class]

[class=TabNameGen]
width: 100%;
max-width: 700px;
margin: 0 auto;
[/class]

[class=tabNameField]
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
min-height: 100px;
border: 1px solid gray;
border-radius: 15px;
padding: 10px;
box-sizing: border-box;
[/class]

[class=tabNameInput]
width: 100px;
display: inline-block;
margin: 5px auto;
width: 100%;
max-width: 700px;
text-align: center;
[/class]

[class=layoutselect]
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]

[class=layoutselectbutton]
cursor: pointer;
display: inline-block;
--yes: none;
--no: inline;
[/class]

[class=selectlayout]
pointer-events: none;
--yes: inline;
--no: none;
[/class]

[class=yes]
display: var(--yes);
[/class]

[class=no]
display: var(--no);
[/class]

[class=GENERATE]
margin: 0 auto;
position: relative;
display: block;
color: black;
[/class]

[class=output]
margin: 10px auto;
position: relative;
display: block;
border: 5px solid black;
border-radius: 15px;
max-width: 1000px;
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: #222945;
color: white;
white-space: pre-wrap;
[/class]

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

[class name=codevalue]
display: inline;
[/class]

[/nobr][div class=codefield]
	[div class="codeheader"][plain]	[div class="tab selected"][div class=tabID]1Tab[/div][/plain][div class="codevalue tabnamecode1"]TabName[/div][plain][/div]
[/plain][/div]

	[div class="tabnamecode"][plain]		[div class=tab][div class=tabID][/plain][div class="codevalue tabnamecodenum"][plain]2Tab[/div]TabName[/div][/plain][/div]
[/div]
	
	[div class="codecontent"]		[div class="codevalue codetabcontentvalue"]1[/div]
		[div class="codevalue codetabcontent"][/div][plain] tab content
		[/div]
[/plain][/div]
	
	[div class="codebuilderfinal"][plain][nobr]
[import]8786706[/import]
[comment][/plain][div class="codevalue codetabfontcalling"][font=Play]font[/font][/div][plain][/comment]
[class=values]
	--tabStyle: [/plain][div class="codevalue codetabstyle1"]row wrap[/div][plain];
	--contentStyle: [/plain][div class="codevalue codetabstyle2"]column nowrap[/div][plain];
	--tab-txt-align: [/plain][div class="codevalue codetabstyle3"]center[/div][plain];
	--tab-txt-color: [/plain][div class="codevalue codetabcolor"]white[/div][plain];
	--bg-color: [/plain][div class="codevalue codetabbg"]#2c3e50[/div][plain];
	--fontFamily: '[/plain][div class="codevalue codetabfont"]Play[/div][plain]';
	--fontSize: [/plain][div class="codevalue codetabsize"]20px[/div][plain];
	--tab-hover-color: [/plain][div class="codevalue codetabhcolor"]white[/div][plain];
	--tab-hover-bg: [/plain][div class="codevalue codetabhbg"]#2980b9[/div][plain];
	--tab-select-color: [/plain][div class="codevalue codetabscolor"]white[/div][plain];
	--tab-select-bg: [/plain][div class="codevalue codetabsbg"]#2980b9[/div][plain];
[/class]

[/nobr][div class="tabContainer values"][nobr]
	[div class=tabHolder][/plain]
	[div class="codevalue codebuilder1"][/div][plain]	[/div][/nobr]
	[div class=tabContentHolder][/plain]
[div class="codevalue codebuilder2"][/div][plain]	[/div]
[/div]
[/plain][/div]
[/div][nobr]

[export][nobr]
[class=tabContainer]
width: 100%;
position: relative;
display: flex;
flex-flow: var(--contentStyle);
[/class]

[class=tabHolder]
min-width: 200px;
position: relative;
display: flex;
flex-flow: var(--tabStyle);
border: 0px solid transparent;
border-radius: 10px;
overflow: hidden;
[/class]

[class=tab]
font-size: var(--fontSize , 18px);
font-family: var(--fontFamily , 'Roboto');
background-color: var(--bg-color, #2c3e50);
color: var(--tab-txt-color, white);
padding: calc( var(--fontSize , 18px) / 3 );
position: relative;
flex:1;
text-align: var(--tab-txt-align, center);
cursor: pointer;
transition: all .25s;
[/class]

[class name=tab state=hover]
background-color: var(--tab-hover-bg, #2980b9);
color: var(--tab-hover-color, white);
[/class]

[class=selected]
text-decoration: underline;
background-color: var(--tab-select-bg, #2980b9);
color: var(--tab-select-color, white);
cursor: default;
pointer-events: none;
[/class]

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

[class=tabContentHolder]
flex: 1;
align-self: stretch;
position: relative;
min-width: 200px;
[/class]

[class=tabContent]
position: relative;
padding: 5px;
[/class]

[script class=tab version=2]
(hide "tabContent")
(show "1")
[/script]

[script class=tab version=2 on=click]
(= currenttab (index (split (getText) "Tab") 0))
(removeClass "selected" "tab")
(hide "tabContent")
(show currenttab)
(addClass "selected")
[/script]
[/nobr][/export]


[script class=layoutselectbutton version=2 on=click]
(removeClass "selectlayout" "layoutselectbutton")
(addClass "selectlayout")
[/script]

[script class=GENERATE version=2 on=click]
	(hide "output")
	(= raw (getVal "tabNameField"))
	(if (== (count raw) 0) (stop))
	(= rawArray (split raw "%") )
	(= rareArray [ ])
	(each rawArray (append rareArray (trim _ ) ) )
	(= trimArray [ ])
	(each rareArray (if (!= (count _ ) 0) (append trimArray _ ) ) )
	(setText "" "codebuilder1")
	(setText "" "codebuilder2")
	(= tabnumber 0)
	(each trimArray (group
		(++ tabnumber)
		(if (== tabnumber 1) (group 
			(setText _ "tabnamecode1")
			(= codesnippet (getText "codeheader"))))
		(if (!= tabnumber 1) (group
			(setText (+ tabnumber "Tab[/div]" _ "[/div]") "tabnamecodenum")
			(= codesnippet (getText "tabnamecode"))))
		(= codesnippet (+ (getText "codebuilder1") codesnippet))
		(setText codesnippet "codebuilder1")
		(setText (+ "[div class=\"tabContent " tabnumber "\"]" ) "codetabcontentvalue")
		(setText _ "codetabcontent")
		(= codesnippet (+ (getText "codebuilder2") (getText "codecontent")))
		(setText codesnippet "codebuilder2")		))
    (if (== (getText "selectlayout") "Horizontal") (group
        (setText "row wrap" "codetabstyle1")
        (setText "column nowrap" "codetabstyle2")
        (setText "center" "codetabstyle3")))
    (if (== (getText "selectlayout") "Vertical") (group
        (setText "column nowrap" "codetabstyle1")
        (setText "row wrap" "codetabstyle2")
        (setText "left" "codetabstyle3")))
    (if (!= 0 (count (trim (getVal "TabNameColor")))) (setText (trim (getVal "TabNameColor")) "codetabcolor"))
    (if (!= 0 (count (trim (getVal "TabBGColor")))) (setText (trim (getVal "TabBGColor")) "codetabbg"))
    (if (!= 0 (count (trim (getVal "TabFont")))) (setText (trim (getVal "TabFont")) "codetabfont"))
    (if (!= 0 (count (trim (getVal "TabFont")))) (setText (+ "[font=" (trim (getVal "TabFont")) "]font[/font]") "codetabfontcalling"))
    (if (!= 0 (count (trim (getVal "TabFontSize")))) (setText (trim (getVal "TabFontSize")) "codetabsize"))
    (if (!= 0 (count (trim (getVal "TabHoverNameColor")))) (setText (trim (getVal "TabHoverNameColor")) "codetabhcolor"))
    (if (!= 0 (count (trim (getVal "TabHoverBGColor")))) (setText (trim (getVal "TabHoverBGColor")) "codetabhbg"))
    (if (!= 0 (count (trim (getVal "TabSelNameColor")))) (setText (trim (getVal "TabSelNameColor")) "codetabscolor"))
    (if (!= 0 (count (trim (getVal "TabSelBGColor")))) (setText (trim (getVal "TabSelBGColor")) "codetabsbg"))
	(setText (getText "codebuilderfinal") "output")
	(slideDown 500 "output")
[/script]

[comment][font=Oxygen Mono]font[/font][font=Roboto]font[/font][/comment]

[/nobr][div class=container][nobr][div class=title][fa]fa-bars[/fa] Tab Code Generator 1.0[/div]
	[div class=intro]
		This is the Tab Code Generator 1.0!!! Due to the limitations of BBscript 2 (and my motivation), the options that you have is somewhat limited. However, it should be able to accept CSS code and easily prepare it in the code printout, such as [icode]calc(5vmax + 5px)[/icode]. Unfortunately, the way it is set up, everything will be squished together into one line when you copy and paste it. There is no way around it at this moment. That will have to wait for version 2 (if I'm ever motivated).
[br][/br][br][/br]
When you are creating a new tab, use the [icode]%[/icode] to separate between your tab names. It is fine to use the enter key, as it will not be picked up. You can also use emojis and font awesome (and even some bbcode of your own) when you are making the tab names.
[br][/br][br][/br]
I will be posting an explanation for the generator in [URL="https://www.rpnation.com/threads/%E2%80%83%E2%80%83%C2%AC-feverdreams-%E2%B8%A5%E2%80%83alt-%F0%90%84%82-sugar.398388/"]Resource -   ¬ FEVERDREAMS ⸥ alt  sugar[/URL]
	[/div]
	[div class=inputFields]
		[div class=inputs]
			[div class=inputTitle]Tab Styling[/div]
			[div class=field]Tab Name Color: [/div]
			[input type=text class="tabinput TabNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
			[br][/br]
			[div class=field]Background Color: [/div]
			[input type=text class="tabinput TabBGColor" maxlength=25 placeholder="Navy, #2c3e50, rgb(44, 62, 80), etc."][/input]
			[br][/br]
			[div class=field]Tab Font: [/div]
			[input type=text class="tabinput TabFont" maxlength=50 placeholder="Play"][/input]
			[br][/br]
			[div class=field]Font size: [/div]
			[input type=text class="tabinput TabFontSize" maxlength=20 placeholder="20px"][/input]
			[div class=field]Tab Layout:[/div]
			[div class="layoutselect tabinput"][div class="layoutselectbutton selectlayout"][div class=yes][fa]fa-check-square-o fa-fw[/fa][/div][div class=no][fa]fa-square-o fa-fw[/fa][/div]Horizontal[/div][div class="layoutselectbutton"][div class=yes][fa]fa-check-square-o fa-fw[/fa][/div][div class=no][fa]fa-square-o fa-fw[/fa][/div]Vertical[/div][/div]
		[/div]
		[div class=inputs]
			[div class=inputTitle]Tab Styling When Hovering[/div]
			[div class=field]Tab Name Color: [/div]
			[input type=text class="tabinput TabHoverNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
			[br][/br]
			[div class=field]Background Color: [/div]
			[input type=text class="tabinput TabHoverBGColor" maxlength=25 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input]
		[/div]
		[div class=inputs]
			[div class=inputTitle]Tab Styling When Selected[/div]
			[div class=field]Tab Name Color: [/div]
			[input type=text class="tabinput TabSelNameColor" maxlength=20 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
			[br][/br]
			[div class=field]Background Color: [/div]
			[input type=text class="tabinput TabSelBGColor" maxlength=20 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input]
		[/div]
		[div class=TabNameGen]
			[div class=inputTitle]Tabs and Tab Names[/div]
			[div class=tabNameInput]
				[input type=textarea class="tabNameField TabName"][/input]
				Separate tabs using %. So an example would be "Tab Name 1 % Tab Name 2"
			[/div]
			[input type=button class="GENERATE"]Generate Code[/input]
		[/div]
	[/div][/nobr][div class=output style="display: none"][/div][/div]

[/div]

P.S. I'm sorry for the ugly spoilers this time around, BBCode doesn't like nested plain tags.
[/div][/div][/div][/div][/div]

[class name=root] position: relative; width: 100%; background-color: #1d1d1d; background-image: url('https://i.imgur.com/3QMnky3.gif'); background-blend-mode: soft-light; overflow: hidden; font-size: initial; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; [/class] [class name=flexwrapper] display: block; box-sizing: border-box; height: 100%; overflow: hidden; [/class] [class name=scroll] display: block; height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; padding-right: 150px; [/class] [class name=scrollitem] display: block; width: 100%; height: auto; position: relative; overflow: hidden; [/class] [class name=leftside] flex: 1 0 300px; max-width: 700px; background: url('https://i.imgur.com/DvQYu9V.jpg') no-repeat bottom right; background-size: cover; height: 80vh; overflow: hidden; text-align: center; [/class] [class name=title] display: block; position: sticky; position: -webkit-sticky; top: 0px; left: 0px; box-sizing: border-box; background: #ffca00; padding: 10px 20px; width: 100%; color: #1d1d1d; font-weight: bold; font-size: 2vh; [/class] [class name=dialogueblock] display: block; width: 100%; padding: 5px; box-sizing: border-box; margin: 15px 0px; [/class] [class name=textarea] display: inline-block; vertical-align: top; width: calc(100% - 105px); font-size: initial; overflow: hidden; [/class] [class name=textbox] display: block; width: 100%; border-radius: 10px; border: 0px solid transparent; box-sizing: border-box; padding: 15px; background: rgba(0, 0, 0, .75); min-height: 75px; color: #FFFFFF; text-align: justify; font-size: .8em; [/class] [class name=textbox2] min-height: 0px; margin-top: 10px; [/class] [class name=alticon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-right: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/me1I7BR.jpg') no-repeat center; [/class] [class name=monoicon] display: inline-block; vertical-align: top; height: 75px; width: 75px; margin-top: 2vh; box-sizing: border-box; margin-left: 10px; border-radius: 50%; overflow: hidden; background: url('https://i.imgur.com/IqFIsad.jpg') no-repeat center; [/class] [class name=name] font-size: 4vh; letter-spacing: -2px; width: calc(95% - 30px); margin: auto; color: #ff1ea6; text-shadow: 1px 1px 2px rgba(0,0,0,.8); font-weight: bold; font-family: 'Poppins', sanserif; margin-bottom: -2vh; white-space: nowrap; overflow: hidden; [/class] [class name=alt] text-align: left; [/class] [class name=mono] text-align: right; [/class] [class name=rightside] flex: 3 0 300px; height: 80vh; overflow: hidden; color: #FFFFFF; font-size: .8em; [/class] [class name=codebutton] padding: 10px 15px; display: inline-block; margin: 10px 0px 0px 10px; box-sizing: border-box; font-weight: bold; background: #ff1ea6; border-radius: 5px; width: auto; cursor: pointer; [/class] [class name=code] padding: 5px 15px 5px 15px; width: calc(100% - 20px); margin: 15px 0px 0px 20px; border-left: 1px solid #ffcd00; box-sizing: border-box; display: none; font-size: .95em; font-family: 'IBM Plex Mono', monospace; [/class] [script class=codebutton version=2 on=click] (= spoiler (index (split (getText) "spoil") 0 ) ) (slideToggle 1000 (+ spoiler "spoil") ) [/script]

Lexielai · Aug 12, 2018

Hello! I'm trying to dissect your Endgame code, but I'm running into some issues (probably because I'm too dense to understand). Could you answer a few of my questions about it? I've put together the things I don't understand in the spoilers below. Sorry in advance for the barrage of questions!

(My attempt at understanding how to build the code)

I am attempting to recreate a more basic version of your code, and checking my understanding at each step of the road there. So far, from studying your code, I've gotten a crash course on media queries, flex boxes, variables, and alternate unit lengths like vh or vmax. But my attempt below doesn't quite look like what I want it to.

The main issues are that the invisible scroll does not work, and the translucent box in the middle is skewed towards the left for some reason. I've tried adjusting the margins, but for some reason the translucent box only seems to consider the left bound and not the right. So, for example, margin: 100px skewed it 100px from the left with no regard to how far it was from the right. I've also tried making the scrollbox an almost direct replica of yours, but it still does not seem to work.

Could I please have a couple pointers on where I'm going wrong? The (amateurish) attempt and its source code are below.

[class name=aspectRatio] display: block; position: relative; width: 100%; height: 80vh; padding-top: 60%; [/class] [class name=aspectRatio maxWidth = 1000px] width: 100%; padding-top: 0px; [/class] [class name=root] display: block; position: relative; margin: auto; overflow: hidden; background-color: #000000; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=mainContainer] display: block; position: relative; overflow: hidden; height: 100%; width: 100%; box-sizing: border-box; z-index: 2; [/class] [class name=translucentBox] display: flex; position: relative; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: center; flex: 1 0 auto; height: 80%; width: 80%; background-color: rgba(255, 255, 255, 0.2); box-sizing: border-box; padding: 100px; margin: 5%; overflow: hidden; [/class] [class name=translucentBox maxWidth=1000px] display: block; width: 90%; height: auto; margin: 5%; [/class] [class name=standardText] --font: 'Roboto', sansserif; [/class] [class name=backgroundSettings] --bgsize: auto, auto 120%; [/class] [class name=textBox] position: relative; height: 100%; max-width: 100%; overflow: hidden; [/class] [class name=textBox maxWidth=1000px] display: block; height: auto; width: 100%; max-width: none; [/class] [class name=scrollBox] display: block; position: relative; height: 100%; width: 100%; max-height: 500vh; padding-right: 100px; overflow-x: hidden; overflow-y: scroll; line-height: 1.5em; pointer-events: auto; white-space: normal; [/class] [class name=scrollBox maxWidth=1000px] width: 100%; height: auto; max-height: 500vmax; box-sizing: border-box; margin-bottom: 0px; overflow-x: hidden; overflow-y: auto; padding: 0px; [/class] [class name=mainText] display: block; position: relative; text-align: justify; font-family: var(--font); font-size: .8 em; color: #FFFFFF; overflow: hidden; [/class] [div class=aspectRatio] [div class=root] [div class=mainContainer] [div class=translucentBox] [div class=standardText] [div class=textBox] [div class=scrollBox aboutBox] [div class=mainText] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non imperdiet leo, sagittis volutpat ipsum. Suspendisse convallis eu urna in maximus. Pellentesque ultricies, metus in posuere feugiat, magna justo finibus nunc, consequat suscipit elit purus vitae leo. Nunc tincidunt ornare libero nec eleifend. Nam ac tempor purus, et consectetur nunc. Nam consequat faucibus ante. Donec et auctor libero, ultricies lacinia neque. Aliquam augue purus, sollicitudin a sagittis tincidunt, dignissim ac ante.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi. [/div][/div][/div] [/div][/div][/div][/div][/div]

Code:

[nobr]
[comment][font=Roboto]font reference[/font][font=Share]font reference[/font][/comment]

[comment]general divs[/comment]
[class name=aspectRatio]
    display: block;
    position: relative;
    width: 100%;
    height: 80vh;
    padding-top: 60%;
[/class]

[class name=aspectRatio maxWidth = 1000px]
    width: 100%;
    padding-top: 0px;
[/class]

[class name=root]
    display: block;
    position: relative;
    margin: auto;
    overflow: hidden;
    background-color: #000000;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom 0px;
[/class]


[comment]main menu[/comment]
[class name=mainContainer]
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
[/class]

[class name=translucentBox]
    display: flex;
    position: relative;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex: 1 0 auto;
    height: 80%;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 100px;
    margin: 5%;
    overflow: hidden;
[/class]

[class name=translucentBox maxWidth=1000px]
    display: block;
    width: 90%;
    height: auto;
    margin: 5%;
[/class]


[comment]variables[/comment]
[class name=standardText]
    --font: 'Roboto', sansserif;
[/class]

[class name=backgroundSettings]
    --bgsize: auto, auto 120%;
[/class]


[comment]text formatting divs[/comment]
[class name=textBox]
    position: relative;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
[/class]

[class name=textBox maxWidth=1000px]
    display: block;
    height: auto;
    width: 100%;
    max-width: none;
[/class]

[class name=scrollBox]
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    max-height: 500vh;
    padding-right: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1.5em;
    pointer-events: auto;
    white-space: normal;
[/class]

[class name=scrollBox maxWidth=1000px]
    width: 100%;
    height: auto;
    max-height: 500vmax;
    box-sizing: border-box;
    margin-bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
[/class]

[class name=mainText]
    display: block;
    position: relative; 
    text-align: justify;
    font-family: var(--font);
    font-size: .8 em;
    color: #FFFFFF;
    overflow: hidden;
[/class]

[div class=aspectRatio]
[div class=root]
[div class=mainContainer]
[div class=translucentBox]
[div class=standardText]
[div class=textBox]
[div class=scrollBox aboutBox]
[div class=mainText]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non imperdiet leo, sagittis volutpat ipsum. Suspendisse convallis eu urna in maximus. Pellentesque ultricies, metus in posuere feugiat, magna justo finibus nunc, consequat suscipit elit purus vitae leo. Nunc tincidunt ornare libero nec eleifend. Nam ac tempor purus, et consectetur nunc. Nam consequat faucibus ante. Donec et auctor libero, ultricies lacinia neque. Aliquam augue purus, sollicitudin a sagittis tincidunt, dignissim ac ante.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
[/div][/div][/div] [comment]*mainText, scrollBox textBox*[/comment]
[/div][/div][/div][/div][/div] [comment]*standardText, translucentBox mainContainer, root, aspectRatio*[/comment]
[/nobr]

(My questions about the thought process behind some design decisions)

1) In your classes for the text, you used the flex command in a class called textflex. However, as far as I can tell, you do not declare it to be a flexbox with display: flex. So my question is, what is this command doing here? Is display: flex not necessary to declare a flex box? And how come we need to give a flex command to a text container?

Code:

[class name=textflex]
flex: 1 0 100px;
height: 100%;
margin-left: auto;
max-width: 50%;
overflow: hidden;
position: relative;
font-size: initial;
[/class]

[class name=textflex maxWidth=1000px]
display: block;
flex: 0 0 0px;
height: auto;
width: 100%;
max-width: none;
[/class]

2) What function do the aspectratio and root classes perform? I understand they seem to be some sort of container, but I'd like to more precisely understand what our goal is with them. Are they establishing limits on the size of the output, or something like that?

Code:

[class name=aspectratio]
display: block;
width: 100%;
padding-top: 60%;
position: relative;
[/class]

[class name=aspectratio maxWidth=1000px]
width: 100%;
padding-top: 0px;
[/class]

[class name=root]
--font: 'Hind', sanserif;
display: block;
margin: auto;
overflow: hidden;
background-color: #000000;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image: var(--bgimg);
background-blend-mode: soft-light, normal;
background-size: var(--bgsize);
background-position: var(--bgposition);
[/class]

[class name=root maxWidth=1000px]
height: auto;
min-height: 100px;
position: relative;
[/class]

3) Lastly, what function does the invis class perform? It seems to be a container of some sort for the translucentbox class, but it doesn't seem like its operations are very special. Couldn't invis and translucentbox be grouped into one class? If not, then how come?

Code:

[comment]main container[/comment]
[class name=invis]
display: block;
overflow: hidden;
height: 100%;
width: 100%;
position: relative;
z-index: 2;
box-sizing: border-box;
position: relative;
[/class]

[class name=translucentbox]
display: flex;
flex-wrap: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
height: calc(100% - 200px);
width: calc(100% - 200px);
background: rgba(170, 170, 181, 0.2);
color: #FFFFFF;
overflow: hidden;
box-sizing: border-box;
padding: 30px;
margin: 100px;
[/class]

[class name=translucentbox maxWidth=1000px]
display: block;
width: 90%;
height: auto;
margin: 5%;
[/class]

fluticasone · Aug 12, 2018

Whoo a meaty post. I'll tackle the questions as a lot of them answer the errors in your code and then present a fixed version.

Lexielai said:
1) In your classes for the text, you used the flex command in a class called textflex. However, as far as I can tell, you do not declare it to be a flexbox with display: flex. So my question is, what is this command doing here? Is display: flex not necessary to declare a flex box? And how come we need to give a flex command to a text container?

This is actually related as to why your textbox is skewed left in your attempt at the code. You misunderstood how flexboxes work, as well as using the wrong attribute for justify-content. Essentially, display: flex/justify-content/etc is used on the container div. The flex property, meanwhile, is used on the boxes inside the flexbox container. For a better understanding, I recommend studying this link. This is the reason why the text container has the flex property. As a further note, flexboxes tend to be wonky with paddings/margins and I'd recommend studying how flexboxes themselves work first without either before attempting to use them.

Code:

[nobr]
[class name=container]
    width: 100%;
    height: 60vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
background: green;
[/class]

[class name=box]
height: 80%;
background: pink;
[/class]

[div class="container"]
[div class="box" style="flex: 1 0 200px;"]
im the contained box1
[/div]
[div class="box" style="flex: 3 0 200px; background: blue;"]
im the contained box2
[/div]
[div class="box" style="max-width: 50px; background: red;"]
im the contained box3
[/div]
[/div]
[/nobr]

[class name=container] width: 100%; height: 60vh; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; background: green; [/class] [class name=box] width: 80%; height: 80%; background: pink; [/class] [div class="container"] [div class="box" style="flex: 1 0 200px;"] im the contained box1 [/div] [div class="box" style="flex: 3 0 200px; background: blue;"] im the contained box2 [/div] [div class="box" style="max-width: 50px; background: red;"] im the contained box3 [/div] [/div]

2) What function do the aspectratio and root classes perform? I understand they seem to be some sort of container, but I'd like to more precisely understand what our goal is with them. Are they establishing limits on the size of the output, or something like that?

The aspectratio class is literally what it's defined as: the ratio of the width to the height of an image or screen. This means that as long as it hasn't hit the media query, it will maintain that aspect ratio regardless of screen size. The root class fills that entire area and basically acts as a container for everything that you want your design to have. This makes it easy to maintain your design regardless of screen size.

3) Lastly, what function does the invis class perform? It seems to be a container of some sort for the translucentbox class, but it doesn't seem like its operations are very special. Couldn't invis and translucentbox be grouped into one class? If not, then how come?

In other circumstances, I could've grouped them, but in this instance, nope. This is because the invis class has a position: relative. What this means is that everything inside the invis class will be sized and positioned relative to the invis class, including translucentbox. If you study the code, there are things other than translucentbox inside the invis class, such as the the navigation and the renders of the girls. Invis class allows me to use layer, position and size them as I want within it.

I had to do quite a bit of studying and deconstructing on your code, but these are the things I fixed which I remember doing. There are probably other changes I did.

you had a lot of unnecessary classes, which I deleted.
i moved the translucent box's display: flex and other attributes to the mainContainer
the main reason why the scroll wasn't working was because you had an overflow: hidden on the mainText div
i rewrote your scrollBox code entirely
deleted the 80vh off of your aspectratio div as it ruined the point of having aspectratio there
root class should be position: absolute; Also added a mediaquery for it that turned it into relative when it hit 1000px, otherwise it would be invisible when on mobile

Code:

[nobr]
[comment][font=Roboto]font reference[/font][font=Share]font reference[/font][/comment]

[comment]general divs[/comment]
[class name=aspectRatio]
    display: block;
    position: relative;
    width: 100%;
    padding-top: 60%;
    height: 0px;
[/class]

[class name=aspectRatio maxWidth=1000px]
    width: 100%;
    padding-top: 0px;
    display: block;
    height: auto;
[/class]

[class name=root]
    display: block;
    position: absolute;
    overflow: hidden;
    background-color: #000000;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom 0px;
[/class]

[class name=root maxWidth=1000px]
position: relative;
height: auto;
[/class]


[comment]main menu[/comment]
[class name=mainContainer]
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
[/class]

[class name=translucentBox]
    height: 80%;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    padding: 100px;
    overflow: hidden;
    display: block;
[/class]

[class name=translucentBox maxWidth=1000px]
    display: block;
    width: 90%;
    height: auto;
    margin: 5%;
    padding: 10%;
[/class]


[comment]variables[/comment]
[class name=standardText]
    --font: 'Roboto', sansserif;
[/class]


[comment]text formatting divs[/comment]
[class name=mainText]
    display: block;
    position: relative; 
    text-align: justify;
    font-family: var(--font);
    font-size: .8 em;
    color: #FFFFFF;
[/class]
[class name=scrollBox]
    display: block;
    padding-right: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
[/class]
[class name=scrollBox maxWidth=1000px]
    height: auto;
    overflow-y: visible;
[/class]

[div class=aspectRatio]
[div class=root]
[div class=mainContainer]
[div class=translucentBox]
[div class=scrollBox]
[div class=mainText]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non imperdiet leo, sagittis volutpat ipsum. Suspendisse convallis eu urna in maximus. Pellentesque ultricies, metus in posuere feugiat, magna justo finibus nunc, consequat suscipit elit purus vitae leo. Nunc tincidunt ornare libero nec eleifend. Nam ac tempor purus, et consectetur nunc. Nam consequat faucibus ante. Donec et auctor libero, ultricies lacinia neque. Aliquam augue purus, sollicitudin a sagittis tincidunt, dignissim ac ante.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
    [br][/br][br][/br]
Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.
    [br][/br][br][/br]
Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.
[/div][/div][/div][/div][/div][/div]
[/nobr]

[class name=aspectRatio] display: block; position: relative; width: 100%; padding-top: 60%; height: 0px; [/class] [class name=aspectRatio maxWidth=1000px] width: 100%; padding-top: 0px; display: block; height: auto; [/class] [class name=root] display: block; position: absolute; overflow: hidden; background-color: #000000; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; width: 100%; top: 0px; left: 0px; right: 0px; bottom 0px; [/class] [class name=root maxWidth=1000px] position: relative; height: auto; [/class] [class name=mainContainer] display: block; position: relative; overflow: hidden; height: 100%; width: 100%; box-sizing: border-box; z-index: 2; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; [/class] [class name=translucentBox] height: 80%; width: 80%; background-color: rgba(255, 255, 255, 0.2); box-sizing: border-box; padding: 100px; overflow: hidden; display: block; [/class] [class name=translucentBox maxWidth=1000px] display: block; width: 90%; height: auto; margin: 5%; padding: 10%; [/class] [class name=standardText] --font: 'Roboto', sansserif; [/class] [class name=mainText] display: block; position: relative; text-align: justify; font-family: var(--font); font-size: .8 em; color: #FFFFFF; [/class] [class name=scrollBox] display: block; padding-right: 150px; overflow-x: hidden; overflow-y: scroll; width: 100%; height: 100%; [/class] [class name=scrollBox maxWidth=1000px] height: auto; overflow-y: visible; [/class]

[div class=aspectRatio] [div class=root] [div class=mainContainer] [div class=translucentBox] [div class=scrollBox] [div class=mainText] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non imperdiet leo, sagittis volutpat ipsum. Suspendisse convallis eu urna in maximus. Pellentesque ultricies, metus in posuere feugiat, magna justo finibus nunc, consequat suscipit elit purus vitae leo. Nunc tincidunt ornare libero nec eleifend. Nam ac tempor purus, et consectetur nunc. Nam consequat faucibus ante. Donec et auctor libero, ultricies lacinia neque. Aliquam augue purus, sollicitudin a sagittis tincidunt, dignissim ac ante.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi.

Proin sit amet sem nisi. Nullam tincidunt suscipit lorem, ac luctus eros tincidunt ut. Vestibulum nec turpis lacinia, mattis ipsum at, tempus nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent a fermentum nunc. Cras scelerisque egestas cursus. Curabitur at diam ipsum. Fusce laoreet enim non interdum ornare. Aliquam vel feugiat augue. Etiam non tellus ut augue euismod accumsan eget efficitur enim. Curabitur facilisis ipsum mi, ac aliquet odio pellentesque id. Nunc vulputate id purus eget interdum. Nulla ornare feugiat porttitor. Sed sagittis sem a dictum lacinia.

Phasellus ac dignissim nulla. Aliquam nec quam risus. Maecenas et turpis vel sem porta consectetur. Nulla ut suscipit metus. Curabitur pretium nisl et massa tristique, quis imperdiet nisl mattis. Cras venenatis semper dapibus. Sed euismod est nisl, vitae lacinia ex vehicula vel. Nam ut mauris eu lectus feugiat sagittis. Nunc elementum arcu ipsum, vel mollis eros maximus vitae. Duis ut lectus ac nulla dapibus lacinia id in nisi. [/div][/div][/div][/div][/div][/div]

Lexielai I hope this helped you! o:

Lexielai · Aug 12, 2018

fluticasone Yes! Thank you!

fluticasone · Sep 5, 2018

expect a new jank 10 explanation soon bec man that was way too jank not to share

Alteras

Alteras · Sep 5, 2018

fluticasone it's beautiful ???

fluticasone · Sep 5, 2018

[import]9128156[/import][div class="maincontainer"][div class="pagetitle"]LINK TO CHARACTER SHEET GENERATOR[/div][div class="textarea"]Please go to this link to see the code in action.[/div][/div]

fluticasone · Sep 5, 2018

[import]8963812[/import][div class="root"][div class="leftside"] [div class="scroll"] [div class="flexwrapper"] [div class="scroll"] [div class="scrollitem"] [div class="title"] #csgenerator [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]I think I can safely say this is a jank 10
might even be an 11 [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] as short as it is
it's a jank 10 [/div] [div class="textbox textbox2"] two lines of code for a jank 10 [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]not even I would be able to come up with this

?

[/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] my cs classes are actually teaching me something

?

[/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]I'm not sure if they're teaching the right things tho [/div] [/div] [/div] [div class="dialogueblock"] [div class="textarea alt"] [div class="name mono"] sugarvine [/div] [div class="textbox"] me neither [/div] [/div] [div class="monoicon"] [/div] [/div] [div class="dialogueblock alttalk"] [div class="alticon"] [/div] [div class="textarea alt"] [div class="name alt"] alteras [/div] [div class="textbox"]

?

[/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div][div class="rightside"][div class="flexwrapper" style="padding: 30px;"][div class="scroll"][div class="scrollitem"]So I somehow managed to beat Alteras at his own game: jank. If you don't know what arrays or recursions are, you probably won't understand what's going on and what makes this code so magical.

Anyway, welcome to my explanation of Hokusei's CS Generator. Because I didn't want to clog this thread with how long it is, I've just left a link to it in the post above this one. While the design and everything about it is simple, the BBScript that runs the entire thing took a little bit of creative thinking on my part. Despite the jank 10 warning, the output script is just two lines:
[div class=codebutton][div style="display:none;"]genarrayscriptspoil[/div]#genarrayscript[/div][div class="code genarrayscriptspoil"](= infoarray (split (getText "infoarray") "#"))
(each infoarray (group (= current _) (setText (getVal current) current)))
[/div]

Arrays are My Best Friend
To get started, I created an invisible array at the beginning of my post which contained all my class names. What's important is that I used the same class name for both the input class and the output class. This works because of how getVal and setText work; getVal can only be used on input classes, while setText can only work on normal divs. As a result, I could recycle the name and condense my code into such a short form.

I didn't include all the classes, but basically assume that every single element in the array has an equivalent input and output class.
[div class=codebutton][div style="display:none;"]genarrayspoil[/div]#genarray[/div][div class="code genarrayspoil"][div class="infoarray"]mainimg#iconimg#fullname#chunmi#role#age#gender#personality#biography#miscellaneous#setone#settwo#setthree#setfour#setfive#setsix[/div]

[input class="inputarea mainimg" type="text"][/input]
[input class="inputarea iconimg" type="text"][/input]
[input class="inputarea fullname" type="text"][/input]

[div class="outputtxt mainimg"][/div]
[div class="outputtxt iconimg"][/div]
[div class="outputtxt fullname"][/div]
[/div]

Using the "each" Function
A rarely used tool by most BBCoders on rpn is, understandably, the each function. It requires knowledge of arrays and recursion to use it after all. What it does is that for each element in the array, it repeats the function at the end. Meanwhile the underscore (_) is a special variable that indicates the current element's value.

In CS, we call this a recursion, as it repeats the steps for each element. If there are only a few elements, doing it manually is fine, but since I had a quite a number, using an array was much more efficient. If I hadn't used an array, the manual code for it would be something like below.
[div class=codebutton][div style="display:none;"]geneachspoil[/div]#geneach[/div][div class="code geneachspoil"](setText (getVal "mainimg") "mainimg")
(setText (getVal "iconimg") "iconimg")
(setText (getVal "fullname") "fullname")
(setText (getVal "chunmi") "chunmi")
[/div]

Export/Import
So with the export/import tag, you can include an entire post into your div with only a few characters. This includes content, bbcode classes, texts and scripts. I decided to make use of this as the shell of the CS has a lot of code, and newbies to BBCoding have a good chance of getting confused. Through this method, I can even edit in any corrections and update any relevant information through only one post, and it will update for everyone else's.

The exported Character Sheet is an empty Character Sheet - it has no information. Using scripts and arrays, we'll be filling in the blanks! Below is what the base output code looks like without any information. If you filled out the input classes from earlier correctly, these should have the information in the appropriate areas. The "rrolearray" class is a special case, and we'll touch on that later.
[div class=codebutton][div style="display:none;"]geneximspoil[/div]#export #import[/div][div class="code geneximspoil"][import]9147092[/import][div class="output"][class name=variables]--mainimg: #fdfdfd url() center center/cover no-repeat; --iconimg: #fdfdfd url() center center/cover no-repeat;[/class]
[div class="output fullnameoutput"][/div]
[div class="output chunmioutput"][/div]
[div class="output roleoutput"][/div]
[div class="output ageoutput"][/div]
[div class="output genderoutput"][/div]
[div class="output personalityoutput"][/div]
[div class="output biographyoutput"][/div]
[div class="output miscellaneousoutput"][/div]
[div class="output rrolearray"]$#$#$#$#$#$[/div]
[/div]
[/div]

"Server Call"
Using the information in our fake database, we have to call it using a script in our CS. Again, I used an array and an array script to do this. Our array contains the base names. Our "database" classes have the base name + the word "output". The place where we want our information to go has the base name + the word "content". Using that knowledge, I made a short script, once again using the "each" function. It gets the text inside basenameoutput and changes the text inside basenamecontent into whatever was inside basenameoutput.
[div class=codebutton][div style="display:none;"]csserverspoil[/div]#servercall[/div][div class="code csserverspoil"][div class="infoarray"]fullname#chunmi#role#age#gender#personality#biography#miscellaneous[/div]

[script class="aspectratio" version=2]
(= basics (split (getText "infoarray") "#"))
(each basics (group
(= cvalue (getText (+ _ "output")))
(setText cvalue (+ _ "content"))
))
[/script]

[div class="data fullnamecontent"]name[/div]
[div class="reqtext chunmicontent"]NAME HERE[/div]
[/div]

Relationships
The relationships tab presented a unique challenge. Since the relationships differ for each person (aka, they're not allowed to relation with themself), I had to get creative on how to do it. Instead of chucking everything into one array, I decided to add a new separator "$". So what ended up happening is that the resulting output for the roles was different. The resulting code looks something like this:
[div class=codebutton][div style="display:none;"]genrelationspoil[/div]#genrelations[/div][div class="code genrelationspoil"][div class="output rrolearray"]freesia$freesia r's#daffodil$daffodil r's#gardenia$gardenia r's#iris$iris r's#hydrangea$hydrangea r's#primrose$primrose r's[/div]
[/div]
[/div]

This is where it begins to get a little crazy. Technically speaking, we can only create 1D arrays using our current bbscript system. But I managed to create a 2D array by putting an array inside an array. So when it splits the text using the separator "#", it's still technically divided into role$roledescription. For each element that uses the "#", I can further split it by using "$" as my separator.
[div class=codebutton][div style="display:none;"]cssplitspoil[/div]#cssplit[/div][div class="code cssplitspoil"][script class="aspectratio" version=2]
(hide "rblock")

(= rarray (split (getText "rrolearray") "#"))
(each rarray (group
(= rvalue (lower (trim (index (split _ "$") 0))))
(addClass rvalue (+ rvalue "block"))
(show (+ rvalue "block"))
(= rtext (trim (index (split _ "$") 1)))
(setText rtext (+ rvalue "text"))
))
[/script]
[/div]

Since the CS contained ALL the relationship blocks, I hid them by default. I only had them show up for each "rvalue". This means that as long as a user didn't input their own role while they were filling out the form, the relationship block pertaining to their role would remain invisible. The user doesn't have to worry about accidentally deleting anything the way they usually would have if they had access to the character sheet's full bbcode.

Final Thoughts
In my quest to make this CS as idiot-proof as possible, I accidentally unlocked a whole slew of things and created a jank 10. Instead of providing the code here like I usually do, I'll be linking the CS thread and pastebin links to both the cs generator and the cs shell. The beauty of this code is that as long as you know what you're doing, repeating my success shouldn't be difficult. If I hadn't included the relationships code, the total number of lines of this bbscript would be less than 10.
[div class=codebutton][div style="display:none;"]csgenspoil[/div]#csgen[/div][div class="code csgenspoil"]✿ hgc ［cs gen］
✿ hgc ［cs shell］
✿ hgc ［cs thread］
[/div]

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

jaylen · Sep 29, 2018

I will forever be in love with this thread and with you two.

Resource ¬ FEVERDREAMS ⸥ alt × sugar

mushy canele

The Sleepy Prisoner

procrastination symphony

"愛を知りたいのです."

.

*:･ﾟ✧𝓈𝓌𝑒𝑒𝓉*:･ﾟ✧

The Sleepy Prisoner

mushy canele

The Sleepy Prisoner

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

❀❁❀❁❀❁❀

mushy canele

mushy canele

faerie sightings

The Sleepy Prisoner

The Sleepy Prisoner

Cal Bear

mushy canele

Cal Bear

mushy canele

The Sleepy Prisoner

mushy canele

mushy canele

Gamer Girl

Users who are viewing this thread

Similar threads

:･ﾟ✧𝓈𝓌𝑒𝑒𝓉:･ﾟ✧