Menu
What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource It's Showtime~☆

Nano

Nano

artistic shrimp
Heyo~ Just a casual coder here who finally decided to set up a new coding thread after my old one decided to have a meltdown after all the site updates. Please umm...don’t search that one up. They look terribad ahahaha...worse than this one anyway. Without further ado, this thread will be dedicated to both new codes or older ones that I decided to improve! They’re all coded on the default theme, so I’m sorry if anything looks awkward on the night theme. Also, all these codes are supposed to be mobile friendly (or mobile compatible), so please please please tell me if anything looks off or strange in that regard!

I just have a few house rules:

1. Anything in this thread is free to use as long as you leave my credits untouched (I swear they’re not very intrusive). As for any codes of mine not posted here, ask first. I’ll probably say yes anyway, but some of them may be broken and in need of updates.

2. Feel free to take apart my codes to learn how they work, but do not copy-paste, frankenstitch parts of my codes, or use them as templates to base your codes off of. Even with credit, it’s not ok. Be your own creative. If you aren’t sure about what you may or may not change or wish to request for something to be added/to add something into the code, feel free to drop me a PM to ask!

I hope I’m not asking for too much, but if I find anyone violating my terms of usage, I will personally kick them six ways from Sunday. Anyway, hope you enjoy using these!

Cheers~
 
Last edited:
Nano

Nano

artistic shrimp
Code: 
[nobr]


[div class="emain"]
     [div class="ewrap"]
          [div class="eicon"]
          [/div]
          [div class="edescription"]
               [div class="esubheader"]
                    Act 01: Shogi
               [/div]
               [div class="etext"]
                    And here's the very first code for this thread! This CS features some sliding animations as well as a cover page of sorts which doesn't necessarily have to be a definition. I might edit in a link for a version of this code that excludes the definition portion in the future, but we'll see!

                    [br][/br][br][/br]

                    Update (2/10/2020): Changed the code a bit. The old version of the code is [URL=https://pastebin.com/TE4M5M7s]HERE[/URL] for those who still want it.
               [/div]
               [div class="etags"]
                    [URL=https://pastebin.com/3iaUGU0v]CODE LINK[/URL][br][/br]
                    mobile friendly | character sheet | 4 tabs | scroll | nobr
               [/div]
          [/div]
     [/div]
[/div]

[comment]
     [font=Roboto].[/font]
     [font=Roboto Condensed].[/font]
[/comment]

[class name="emain"]
     box-sizing: border-box;
     margin: 0 auto 50px;
     padding: 20px;
     width: calc(100% - 40px);
     max-width: 600px;
     font-size: initial;
     background: #fdfdfd;
     border: 1px solid #eaeaea;
[/class]

[class name="ewrap"]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
[/class]

[class name="eicon"]
     flex: 1 0 150px;
     margin-left: 20px;
     width: 100%;
     max-width: 150px;
     background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]

[class name="edescription"]
     flex: 5 0 200px;
     margin-left: 20px;
     max-width: 400px;
[/class]

[class name="esubheader"]
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 1.0em;
     color: #777777;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="etext"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9em;
     color: #777777;
     line-height: 135%;
     text-align: justify;
[/class]

[class name="etags"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.8em;
     line-height: 125%;
     color: #777777;
     text-align: justify;
[/class]


[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
Asking for permission before use is very much appreciated!

Art by: AiRM
[URL unfurl="true"]https://twitter.com/AiRM320/media[/URL]
[/comment]


[comment]--------------------CS Details--------------------[/comment]

[div class="root"]
     [div class="flexcontainer"]
          [div class="flexbox"]
               [div class="seikamainL"]
                    [div class="seikaIMG clicker" style="background: url('https://dl.dropboxusercontent.com/s/yg07rosap2zk9yb/SeikaMain.jpg') 50% 25%/400px 600px no-repeat;"]
                         [div class="name"]
                              [div class="JP"]
                                   鈴鳴盛夏
                              [/div]
                              [div class="EN"]
                                   suzunari seika
                              [/div]
                         [/div]
                    [/div]
               [/div]



               [div class="tabarea"]
                    [div class="tabs basicstabs tabselect"][div=display: none;]basics#[/div]
                         [div class="tabtitle"]
                              Basics
                         [/div]
                         [div class="tabsubtitle"]
                              general info[color=transparent]xx[/color]appearance[color=transparent]xx[/color]personality
                         [/div]
                    [/div]
                    [div class="tabs detailstabs"][div=display: none;]details#[/div]
                         [div class="tabtitle"]
                              Details
                         [/div]
                         [div class="tabsubtitle"]
                              history[color=transparent]xx[/color]relationships[color=transparent]xx[/color]skills
                         [/div]
                    [/div]
                    [div class="tabs skillstabs"][div=display: none;]skills#[/div]
                         [div class="tabtitle"]
                              Abilities
                         [/div]
                         [div class="tabsubtitle"]
                              skills
                         [/div]
                    [/div]
                    [div class="tabs extratabs"][div=display: none;]extra#[/div]
                         [div class="tabtitle"]
                              Extra
                         [/div]
                         [div class="tabsubtitle"]
                              notes[color=transparent]xx[/color]gallery
                         [/div]
                    [/div]
               [/div]
          [/div]



          [div class="flexbox"]
               [div class="scrollbox1"]
                    [div class="JP" style="margin-top: 25px;"]
                         将棋
                    [/div]
                    [div class="EN"]
                         shōgi
                    [/div]
                    [div class="indented" style="font-style: italic; margin-top: 25px;"]
                         sho·gi | \ ˈshōgē \[br][/br]
                         plural -s[br][/br][br][/br]
                    [/div]
                    [div class="bodytext" style="font-style: italic;"]
                         noun[br][/br][br][/br]
                    [/div]
                    [div class="indented"]
                         A Japanese two-player strategy board game in the same family as chess, makruk, shatranj, janggi and xiangqi.
                         [br][/br][br][/br]
                         Shōgi means general's (shō 将) board game (gi 棋).
                    [/div]
               [/div]



               [div class="scrollbox2"]
                    [div class="content basicsinfo"]
                         [div class="line" style="margin-top: 6px;"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]general information .
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   name
                              [/div]
                              [div class="answer"]
                                   seika suzunari
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   nickname
                              [/div]
                              [div class="answer"]
                                   n/a
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   age
                              [/div]
                              [div class="answer"]
                                   eighteen (18)
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   D.O.B.
                              [/div]
                              [div class="answer"]
                                   august 11[div style="display: inline-block; text-transform: lowercase;"][sup]th[/sup][/div]
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   hometown
                              [/div]
                              [div class="answer"]
                                   hakodate, hokkaido, japan
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   residence
                              [/div]
                              [div class="answer"]
                                   tokyo, japan
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   languages
                              [/div]
                              [div class="answer"]
                                   japanese, chinese, english
                              [/div]
                         [/div]

                         [div class="line"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]appearance .
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   height
                              [/div]
                              [div class="answer"]
                                   172cm
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   weight
                              [/div]
                              [div class="answer"]
                                   60kg
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   lenses
                              [/div]
                              [div class="answer"]
                                   n/a
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   style
                              [/div]
                              [div class="answer"]
                                   modern casual, traditional
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   diseases
                              [/div]
                              [div class="answer"]
                                   n/a
                              [/div]
                         [/div]
                         [div class="listwrap"]
                              [div class="question"]
                                   habits
                              [/div]
                              [div class="answer"]
                                   staring blankly when nervous
                              [/div]
                         [/div]
                         [div class="bodytext"][br][/br]
                              Having focused wholly on shōgi for eighteen years, Seika’s skin is a pallor unmarked by sunlight, and his body’s frame, though average, is far from that of a dedicated athlete’s. Coupled with his tousled and overgrown fringe and preference for simple clothes that lack any sort of dramatic flair, he is evidently someone who doesn’t spend much time fretting over his appearance. The lack of defined edges yet to be developed on his youthful facial features gives off the impression of an unsullied naivete. Still, his prim posture and placid gaze manage to salvage a dignified air unique to the young prodigy, especially when dressed in traditional garb during official matches. However, to some, his perpetual lack of expressiveness on his face is a particularly unnerving contrast against his near-gold eyes which oppress his opponent on the other side of the shōgi board like a ravenous predator.
                         [/div]


                         [div class="line"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]personality .
                              [/div]
                         [/div]

                         [div class="accentheader"]
                              TRAITS
                         [/div]
                         [div class="indented"]
                              + prodigy + perceptive + honest + polite +[br][/br]
                              - withdrawn - indecisive - diffident - listless -[br][/br][br][/br]
                         [/div]

                         [div class="bodytext"]
                             Given Seika's heavily aggressive style and the decisiveness of his moves, the shōgi world’s wunderkind is generally imagined to be a self-assured and cutthroat individual. None question his genius, and his gelid, deep gaze bears a maturity and wisdom well beyond his years—or so the articles say.

                             [br][/br][br][/br]

                             Though he is a profound strategist, what hides behind his lofty facade is a modest and timorous nature. His polite but brief exchanges exist not as proof of an aloof character but act as a wall to keep outsiders from his personal space. As a result of his reclusive childhood hiding away in his grandfather’s study, the so-called tyrant of shōgi’s current generation is, in actuality, an adolescent so uncertain in his interactions that he can only comfortably speak with the grannies and grandpas at the local café back in Hakodate with a few other exceptions. Magnified by the expectations carelessly heaped on his shoulders along with a few offhand comments over the years, he’s grown to shy away from others to such an extreme degree that his younger brother has mentioned that it’s akin to an allergy.

                             [br][/br][br][/br]

                              However, he is ultimately someone insecure not about his abilities but of himself as a person and the aimlessness of his nonexistent goals and desires. Typically, this trait manifests itself as a ruthless adversary before a shōgi table board, but he’s willing to put forth the effort towards other interactions so long as it is deemed as a necessity within his capabilities. Unfortunately, he is pathetically limited to maintaining a tactful minimum of 3 feet of space between himself and others, lest his fight or flight instincts kick in.
                         [/div]
                    [/div]



                    [div class="content detailsinfo hidecontent"]
                         [div class="line" style="margin-top: 6px;"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]history .
                              [/div]
                         [/div]
                         [div class="bodytext"]
                              Since a young age, he’s been lauded as the most promising talent of his generation. With a staggering win rate of 86.2 percent in official matches, his skill in shōgi exceeds even those many years his senior, and becoming a lifetime titleholder isn’t a mere pipedream for the adolescent. However, to the public he is still a child born with a wealth of advantages in the field, namely that of having been supposedly groomed and polished by a former three-time Mejin himself. He was never [i]Suzunari Seika[/i] but [i]Suzunari Tsuzuru’s son[/i]—the son of a man who didn’t give his family so much as a single glance.

                              [br][/br][br][/br]

                              In truth, his career began over a humble tea table for two. As a child, he spent much of his time sitting in his grandfather’s lap, whimsically tapping and sliding the wooden pieces about the smooth board. Rather than go out with his brother’s friends to play, he preferred sitting in that small tea room with his tiny palm being guided by his grandfather’s large, rough one. In time, his immature manner of thoughtless plays morphed into decisive attacks, and he moved from his grandfather’s lap to being his opponent on the other side of the board. Day after day, the child would suffer an unbroken chain of defeat, yet simply playing the game had already become a deeply ingrained spring of happiness.

                              [br][/br][br][/br]

                              Eventually, he began to accompany his grandfather to the café he frequented and became exposed to the unique playing styles of the other elderly who gathered to play shōgi there. From there, he gradually became acquainted with a man who urged him to apply to the JSA’s Apprentice School. Though formally accepted as the man’s apprentice as well as enrolled in the Apprentice School, it wasn’t until a year into his enrollment that he determined that obtaining professional status was a goal worth fighting for.

                              [br][/br][br][/br]

                              However, his rapid rising through the ranks and debut as a professional at the young age of 12 brought about an explosive amount of attention and pressure, particularly the news of “the young Suzunari Seika succeeding his father.” No matter which games he won or lost, his father’s name began to follow him everywhere. His love and attention to the mind sport slowly transformed into him dreading every upcoming match. Even when he seized his greatest victory as the year 2017’s Ryūō at his grandfather and master’s behest, the question of why he had loved shōgi so much in the past continued to plague his mind.

                              [br][/br][br][/br]

                              His growing doubts were further aggravated by his grandfather’s death in 2018, to the point that he suffered a 0-4 defeat in the final title match of the 2018 Ryūō Tournament and lost the title. Upon the conclusion of the match, his master, who was almost angered to death, scolded the boy until his ears nearly bled, stating that he was shocked that his grandfather hadn’t crawled out of his grave to reproach his grandson for such a shameful manner of defeat unbecoming of his true capabilities.

                              [br][/br][br][/br]

                              Since then, he reclaimed the title in 2019 and was promoted to 9-dan, though he continues to face the future with a great degree of uncertainty.
                         [/div]


                         [div class="line"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]relationships .
                              [/div]
                         [/div]

                         [div class="accentheader"]
                              ???
                         [/div]
                         [div class="indented"]
                                   Servant.
                         [/div]

                         [div class="accentheader"]
                              Suzunari Manatsu
                         [/div]
                         [div class="indented"]
                              Seika’s fraternal twin whom he shares a close relationship with. Manatsu is also just about the only person Seika's age that he can speak casually to. Their hair is noticeably a "reverse ombre" where Seika's hair starts lighter at the top and gets darker at its tips while Manatsu's starts dark and becomes lighter at the tips.
                         [/div]

                         [div class="accentheader"]
                              Suzunari Yuzuru
                         [/div]
                         [div class="indented"]
                              Affectionately referred to as Gramps/Jii by Seika, Seika's late paternal grandfather was a pivotal figure in the development of the Seika's career path. Though he was not officially registered as a professional shōgi player, he was even more skilled than Seika’s father (Seika refers to him as a “casual player but a king slayer”) and taught Seika shōgi after finding the four-year-old playing around with the pieces. The young prodigy also adopted his aggressive style from his grandfather.
                         [/div]

                         [div class="accentheader"]
                              Suzunari Tsuyuri
                         [/div]
                         [div class="indented"]
                              Seika’s paternal grandmother and a sweet old lady with a fondness for baking sweets for the children in the neighborhood. He doesn’t understand how his father turned out the way he did despite having his grandmother for a mother.
                         [/div]

                         [div class="accentheader"]
                              Suzunari Tsuzuru
                         [/div]
                         [div class="indented"]
                              Former Mejin title holder from 2005 to 2007 and now a retired professional shōgi player. Though he was unable to become a lifetime title holder, his skill and status causes many to attribute Seika's success to Tsuzuru. This only exacerbated his son's disdain towards him, as he had left the majority of his children's care to their grandparents.
                         [/div]

                         [div class="accentheader"]
                              Honjou Iori
                         [/div]
                         [div class="indented"]
                              Seika and Manatsu's mother. As a journalist, she flies around a lot, so she doesn't get opportunities to visit the two very often. Additionally, she favors Manatsu heavily due to her disapproval of Seika's dedication to shōgi, so the two aren't very close.
                         [/div]

                         [div class="accentheader"]
                              Mikan
                         [/div]
                         [div class="indented"]
                              The Suzunari Family’s beloved household cat. She was left in the care of Seika’s grandmother when he left for Tokyo.
                         [/div]

                         [div class="accentheader"]
                              Café Yuzuriha
                         [/div]
                         [div class="indented"]
                              A local café that’s family run by the Yuzurihas. Due to its quiet and lowkey location, it’s become a popular spot for the elderly to gather and play board games such as go, xianqi, and shōgi. Even after his grandfather passed away, Seika continued to pass much of his time after school [s]terrorizing the oldfolk[/s] playing shōgi at the café.
                         [/div]

                         [div class="accentheader"]
                              Moriuchi Yasuharu
                         [/div]
                         [div class="indented"]
                              Seika’s first impression of his future mentor was that of a suspicious and stubbornly pushy man. The teen now sincerely appreciates his mentor’s efforts in picking up where his grandfather left off. However, his mentor occasionally regrets pushing for Seika to become a professional, as the child appeared to have the most fun when playing casually.
                         [/div]
                    [/div]



                    [div class="content skillsinfo hidecontent"]
                         [div class="line" style="margin-top: 6px;"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]skills .
                              [/div]
                         [/div]
                         [div class="accentheader"]
                              shōgi
                         [/div]
                         [div class="indented"]
                              As the current Ryūō title holder and a 9-dan currently grouped within Class A in the Meijin League, Seika’s record as a professional shōgi player speaks much of his talent in spite of his young age. Though he puts on a sour expression whenever the mind sport is mentioned, he nevertheless takes it seriously, ruthlessly crushing his opponents with his aggressive style even in casual matches.
                         [/div]

                         [div class="accentheader"]
                              academics
                         [/div]
                         [div class="indented"]
                              While having top grades in his school means little to him, Seika is still a genius who doesn’t hide his fangs. He might not reign 1st in academics, but he is more often than not consistently within the top 5 in his grade due to his outstanding memory and problem solving skills.
                         [/div]

                         [div class="accentheader"]
                              cooking
                         [/div]
                         [div class="indented"]
                              Seika, though far from a kitchen god, is capable enough to make dishes considered delicious. He doesn't have enough interest in it to make an active effort to improve more than he already has, but he cooks regularly out of habit due to his grandparents having been extremely fussy about consuming primarily homemade food.
                         [/div]

                         [div class="accentheader"]
                              mask of apathy(?)
                         [/div]
                         [div class="indented"]
                              When nervous, Seika’s facial muscles tend to default to an entirely blank expression. On the outside, he may appear to be wholly unfazed by the situation. However, his thoughts are likely zooming past at mach 20. Occasionally, he may even faint with his eyes open without others realizing.
                         [/div]
                    [/div]



                    [div class="content extrainfo hidecontent"]
                         [div class="line" style="margin-top: 6px;"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]notes .
                              [/div]
                         [/div]
                         [div class="accentheader"]
                              name meanings
                         [/div]
                         [div class="indented"]
                               The meanings differ slightly, but both Suzunari Seika and Suzunari Manatsu’s names mean “the echo of a bell during midsummer.”
                         [/div]

                         [div class="accentheader"]
                              fast food
                         [/div]
                         [div class="indented"]
                               He's walked into fast food restaurants on several occasions out of curiosity, but he's ultimately never tasted fast food due to getting cold feet while standing in line. His grandmother also heavily disapproved of Manatsu's offers of bringing a burger home on the way, and if he ever did, it always ended up straight into the trash bin.
                         [/div]

                         [div class="accentheader"]
                              inadvertent miser
                         [/div]
                         [div class="indented"]
                               His earnings from his numerous victories have accumulated into a fairly impressive sum. However, he isn’t very good at coming up with ways to spend it other than on living expenses and a handful of leisurely goods, so a majority of it continues to sit in his bank account.
                         [/div]

                         [div class="accentheader"]
                              people allergy
                         [/div]
                         [div class="indented"]
                               When speaking with others, Seika re-imagines the person he is speaking to as the grannies and grandpas from Café Yuzuriha to hold a relatively steady conversation and get by.
                         [/div]

                         [div class="line"]
                              [div class="lineheader"]
                                   [color=transparent]x[/color]gallery .
                              [/div]
                         [/div]
                    [URL="https://twitter.com/AiRM320/status/1037720939570507781"]
                         [IMG]
                              https://pbs.twimg.com/media/Dma5dqPUwAABUWv?format=jpg
                         [/IMG]
                    [/URL]
                    [/div]
               [/div]
          [/div]
     [/div]
[/div]
[div=display: block; margin: -60px auto 60px; width: 100%; max-width: 820px; font-size: 9px; color: #aaaaaa;]code by [USER=20950]@Nano[/USER][/div]

[comment]
     [font=Work Sans]font[/font]
     [font=Sawarabi Mincho]font[/font]
[/comment]

[comment]--------------------CSS--------------------[/comment]

[class name="root"]
     --bg: #fefefe;
     --accent: #b54434;
     --grey1: #656765;
     --grey2: #aaaaaa;
     --grey3: #e8e8e8;
     --text: #878787;
     --s1: 45px;
     --s2: 35px;
     --s3: 25px;
     --s4: 1.0em;
     --s5: 0.9em;
     --JP: 'Sawarabi Mincho', sans-serif;
     --EN: 'Work Sans', sans-serif;
     --LH: 125%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin: 0 auto;
     padding: 50px 0;
     background-color: var(--bg);
     font-size: initial;
[/class]

[class name="flexcontainer"]
     flex: 1 0 100%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin-left: -20px;
     width: 100%;
     max-width: 840px;
[/class]

[class name="flexbox"]
     flex: 1 0 300px;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 20px;
     width: 100%;
     max-width: 400px;
     height: 650px;
     background-color: var(--bg);
     overflow: hidden;
     position: relative;
[/class]

[class name="seikamainL"]
     box-sizing: border-box;
     padding: 25px;
     border: 1px solid var(--grey3);
     background-color: var(--bg);
[/class]

[class name="seikaIMG"]
     display: flex;
     flex-flow: column-reverse nowrap;
     width: 100%;
     max-width: 348px;
     height: 598px;
     background: url('') 50% 25%/400px 600px no-repeat;
     cursor: pointer;
     transition: height 1.5s ease-in-out 0.4s;
[/class]

[class name="IMGselect"]
     height: 348px;
     transition: height 1.5s ease-in-out 0.4s;
[/class]

[class name="name"]
     flex: 1 0 100%;
     margin-bottom: 15px;
     margin-left: 20px;
     width: calc(100% - 40px);
     max-height: 75px;
[/class]

[class name="JP"]
     font-size: var(--s1);
     font-family: var(--JP);
     font-weight: 500;
     color: var(--accent);
     line-height: 100%;
[/class]

[class name="EN"]
     font-size: var(--s2);
     font-family: var(--EN);
     font-weight: 900;
     color: var(--grey1);
     line-height: 100%;
[/class]

[class name="scrollbox1"]
     padding-right: 18px;
     height: 650px;
     width: 100%;
     max-width: 400px;
     background-color: var(--bg);
     overflow-y: auto;
     position: absolute;
     top: 0px;
     transition: top 1.5s ease-in-out 1.5s;
[/class]

[class name="scrollbox2"]
     height: 650px;
     width: 100%;
     max-width: 400px;
     background-color: var(--bg);
     overflow: hidden;
     position: absolute;
     top: -650px;
     transition: top 1.5s ease-in-out 0.4s;
[/class]

[class name="slideUP"]
     top: -650px;
     transition: top 1.5s ease-in-out 0.4s;
[/class]

[class name="slideDOWN"]
     top: 0;
     transition: top 1.5s ease-in-out 1.5s;
[/class]


[class name="bodytext"]
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="indented"]
     margin-left: 20px;
     width: calc(100% - 20px);
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="tabarea"]
     margin-top: 10px;
     height: 240px;
     width: 100%;
     max-width: 400px;
[/class]

[class name="tabs"]
     box-sizing: border-box;
     padding: 10px;
     height: 60px;
     width: 100%;
     background-color: var(--bg);
     cursor: pointer;
     transition: background-color .8s ease .1s;
[/class]

[class name="tabs" state="hover"]
     background-color: var(--grey3);
     transition: background-color: .8s ease .1s;
[/class]

[class name="hometab"]
     box-sizing: border-box;
     padding: 10px;
     height: 60px;
     width: 100%;
     background-color: var(--bg);
     cursor: pointer;
     transition: background-color .8s ease .1s;
[/class]

[class name="hometab" state="hover"]
     background-color: var(--grey3);
     transition: background-color: .8s ease .1s;
[/class]

[class name="tabselect"]
     background-color: var(--grey3);
     cursor: default;
     pointer-events: none;
[/class]

[class name="tabtitle"]
     font-family: var(--EN);
     font-size: var(--s3);
     font-weight: 900;
     color: var(--grey1);
     line-height: 100%;
     text-transform: uppercase;
     pointer-events: none;
[/class]

[class name="tabsubtitle"]
     font-family: var(--EN);
     font-size: var(--s4);
     color: var(--grey2);
     line-height: 100%;
     text-transform: lowercase;
     pointer-events: none;
[/class]

[class name="content"]
     position: absolute;
     padding-right: 18px;
     height: 650px;
     width: 100%;
     max-width: 400px;
     background-color: var(--bg);
     overflow-y: auto;
     top: 0;
     transition: top 1.5s ease-in-out 1.5s;
[/class]

[class name="hidecontent"]
      top: -650px;
     transition: top 1.5s ease-in-out;
[/class]

[class name="line"]
     margin-top: 26px;
     margin-bottom: 20px;
     width: 100%;
     height: 2px;
     background-color: var(--grey3);
[/class]

[class name="lineheader"]
     display: inline-block;
     float: right;
     margin-top: -12px;
     font-family: var(--EN);
     font-size: var(--s4);
     color: var(--accent);
     background-color: var(--bg);
[/class]

[class name="listwrap"]
     display: flex;
     flex-flow: row wrap;
     width: 100%;
[/class]

[class name="question"]
     flex: 1 0 100px;
     font-family: var(--EN);
     font-size: var(--s5);
     color: var(--text);
     line-height: (--LH);
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="answer"]
     flex: 5 0 100px;
     font-family: var(--EN);
     font-size: var(--s5);
     color: var(--text);
     line-height: (--LH);
     text-transform: uppercase;
[/class]

[class name="accentheader"]
     display: inline-block;
     font-family: var(--EN);
     font-size: var(--s4);
     line-height: (--LH);
     color: var(--accent);
     text-transform: uppercase;
[/class]

[comment]--------------------SCRIPTS--------------------[/comment]

[script class="pre"]
     set seikaIMG 1
[/script]

[script class="clicker" on=click]
     if (eq ${seikaIMG} 0) (set seikaIMG 1) (set seikaIMG 0)
     if (eq ${seikaIMG} 0) (addClass IMGselect seikaIMG) (removeClass IMGselect seikaIMG)
     if (eq ${seikaIMG} 0) (addClass slideUP scrollbox1) (removeClass slideUP scrollbox1)
     if (eq ${seikaIMG} 0) (addClass slideDOWN scrollbox2) (removeClass slideDOWN scrollbox2)
[/script]

[script class="tabs" version=2]
     (= select "basics")
[/script]
[script class="tabs" version=2 on=click]
     (addClass "hidecontent" "content")
     (removeClass "tabselect" "tabs")

     (= select (index (split (getText) "#") 0 ))

     (addClass "tabselect" (+ select "tabs"))
     (removeClass "hidecontent" (+ select "info"))
[/script]

[/nobr]
 
Last edited:
Nano

Nano

artistic shrimp
Code: 
[nobr]



[div class="emain"]
     [div class="ewrap"]
          [div class="eicon"]
          [/div]
          [div class="edescription"]
               [div class="esubheader"]
                    Act 02: Suzunari
               [/div]
               [div class="etext"]
                    Here's the matching IC post format for the code in the post right before this one! Unlike it's CS counterpart, there's nothing fancy here except for a basic scroll for the text.
               [/div]
               [div class="etags"]
                    [URL=https://pastebin.com/Nx845AvP]CODE LINK[/URL][br][/br]
                    mobile friendly | in character post | scroll | simple | nobr
               [/div]
          [/div]
     [/div]
[/div]


[comment]
     [font=Roboto].[/font]
     [font=Roboto Condensed].[/font]
[/comment]

[class name="emain"]
     box-sizing: border-box;
     margin: 0 auto 50px;
     padding: 20px;
     width: calc(100% - 40px);
     max-width: 600px;
     font-size: initial;
     background: #fdfdfd;
     border: 1px solid #eaeaea;
[/class]

[class name="ewrap"]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
[/class]

[class name="eicon"]
     flex: 1 0 150px;
     margin-left: 20px;
     width: 100%;
     max-width: 150px;
     background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]

[class name="edescription"]
     flex: 5 0 200px;
     margin-left: 20px;
     max-width: 400px;
[/class]

[class name="esubheader"]
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 1.0em;
     color: #777777;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="etext"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9em;
     color: #777777;
     line-height: 135%;
     text-align: justify;
[/class]

[class name="etags"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.8em;
     line-height: 125%;
     color: #777777;
     text-align: justify;
[/class]




[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.

Art by: AiRM
[URL unfurl="true"]https://twitter.com/AiRM320/media[/URL]
[/comment]


[comment]--------------------CS Details--------------------[/comment]

[div class="root"]
     [div class="flexcontainer"]
          [div class="flexbox"]
               [div class="seikamainL"]
                    [div class="seikaIMG" style="background: url('https://dl.dropboxusercontent.com/s/yg07rosap2zk9yb/SeikaMain.jpg') 50% 25%/400px 600px no-repeat;"]
                    [/div]
               [/div]
          [/div]
          [div class="flexbox"]
               [div class="scrollbox"]
                    [div class="JP" style="margin-top: 25px;"]
                         鈴鳴盛夏
                    [/div]
                    [div class="EN"]
                         suzunari seika
                    [/div]
                    [div class="indented"]
                         [div class="accentheader"]
                              location
                         [/div]
                              blep[br][/br]
                         [div class="accentheader"]
                              tags
                         [/div]
                              blep
                    [/div]
                    [div class="bodytext"]
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie dictum risus, vel tincidunt urna iaculis id. Morbi sit amet augue finibus, viverra velit in, egestas tellus. Vivamus quis scelerisque mi, at ornare odio. Donec eget cursus nisl. Aenean suscipit, purus nec fringilla imperdiet, massa arcu malesuada turpis, quis consequat justo odio nec velit. Vestibulum dui ante, aliquet ut nisl nec, vulputate efficitur justo. Cras eros arcu, ultrices ac scelerisque accumsan, posuere vitae nisi. Donec eleifend porta vehicula. Morbi et aliquam justo, facilisis luctus elit. Suspendisse vel lacus rhoncus, tincidunt leo ut, maximus sem. Sed id quam non nisl vehicula finibus. Nullam eleifend sit amet purus id pulvinar. In hac habitasse platea dictumst. Donec gravida neque ac dolor bibendum varius porta at urna. Nullam lacinia tempor augue, at iaculis urna posuere quis. Praesent quis tellus malesuada, malesuada mi at, consequat libero.

                         [br][/br][br][/br]

                         Ut malesuada dignissim risus non congue. Suspendisse tristique sapien enim, ut rutrum urna interdum et. Sed feugiat orci sed nulla ultricies rhoncus sed eu tellus. Maecenas gravida porttitor turpis eget dapibus. Mauris ac tortor mauris. Ut posuere non magna in eleifend. Nunc a mauris vulputate, facilisis lectus eu, ultricies augue. Aenean eget rhoncus magna, nec interdum velit. Cras vel urna ut ligula condimentum venenatis. Praesent posuere urna non ullamcorper viverra. Fusce aliquam, ante nec facilisis commodo, urna turpis tincidunt neque, ac fringilla ipsum nunc sit amet tortor.

                         [br][/br][br][/br]

                         Fusce in dolor elementum, euismod tellus et, placerat diam. Nam scelerisque ante sed odio mattis, at placerat lorem rutrum. Nullam in lacinia nisi. Aenean varius commodo arcu, sed laoreet neque tempor auctor. Vestibulum lobortis tincidunt neque. Quisque fringilla metus eget rutrum ornare. Maecenas euismod urna libero, et blandit leo pulvinar et.
                    [/div]
               [/div]
          [/div]
     [/div]
[/div]
[div=display: block; margin: -60px auto 60px; width: 100%; max-width: 820px; font-size: 9px; color: #aaaaaa;]code by [USER=20950]@Nano[/USER][/div]

[comment]
     [font=Work Sans]font[/font]
     [font=Sawarabi Mincho]font[/font]
[/comment]

[comment]--------------------CSS--------------------[/comment]

[class name="root"]
     --bg: #fefefe;
     --accent: #b54434;
     --grey1: #656765;
     --grey2: #aaaaaa;
     --grey3: #e8e8e8;
     --text: #878787;
     --s1: 45px;
     --s2: 35px;
     --s3: 25px;
     --s4: 1.0em;
     --s5: 0.9em;
     --JP: 'Sawarabi Mincho', sans-serif;
     --EN: 'Work Sans', sans-serif;
     --LH: 125%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin: 0 auto;
     padding: 50px 0;
     background-color: var(--bg);
     font-size: initial;
[/class]

[class name="flexcontainer"]
     flex: 1 0 100%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin-left: -20px;
     width: 100%;
     max-width: 840px;
[/class]

[class name="flexbox"]
     flex: 1 0 300px;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 20px;
     width: 100%;
     max-width: 400px;
     height: 70vh;
     max-height: 650px;
     background-color: var(--bg);
     overflow: hidden;
     position: relative;
[/class]

[class name="seikamainL"]
     box-sizing: border-box;
     padding: 25px;
     border: 1px solid var(--grey3);
     background-color: var(--bg);
[/class]

[class name="seikaIMG"]
     display: flex;
     flex-flow: column-reverse nowrap;
     width: 100%;
     max-width: 348px;
     height: calc(70vh - 52px);
     max-height: 598px;
     background: url('') 50% 25%/400px 600px no-repeat;
[/class]

[class name="JP"]
     font-size: var(--s1);
     font-family: var(--JP);
     font-weight: 500;
     color: var(--accent);
     line-height: 100%;
[/class]

[class name="EN"]
     font-size: var(--s2);
     font-family: var(--EN);
     font-weight: 900;
     color: var(--grey1);
     line-height: 100%;
[/class]

[class name="scrollbox"]
     padding-right: 18px;
     width: 100%;
     max-width: 400px;
     height: 70vh;
     max-height: 650px;
     background-color: var(--bg);
     overflow-y: auto;
[/class]

[class name="bodytext"]
     margin-top: 25px;
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="indented"]
     margin-top: 25px;
     margin-left: 20px;
     width: calc(100% - 20px);
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="accentheader"]
     display: inline-block;
     font-family: var(--EN);
     font-size: var(--s4);
     line-height: (--LH);
     color: var(--accent);
     text-transform: uppercase;
[/class]



[/nobr]
 
Last edited:
Nano

Nano

artistic shrimp
Code: 
[nobr]



[div class="emain"]
     [div class="ewrap"]
          [div class="eicon"]
          [/div]
          [div class="edescription"]
               [div class="esubheader"]
                    Act 03: Operative
               [/div]
               [div class="etext"]
                    Apologies for the mess, and it looks a bit strange on mobile, but hopefully it isn't too unbearable >__<;;; Please note that for this CS, you need to paste the main image in twice: once for desktop in [i][color=#b72c27][plain][class name="imgmain" minWidth=750px][/plain][/color][/i] and once for mobile in [i][color=#b72c27][plain][class name="imgmain" maxWidth=749px][/plain][/color][/i]. This code prefers for the image to be 550 x 500px, but you may adjust at your own discretion.
               [/div]
               [div class="etags"]
                    [URL=https://pastebin.com/4Gts51rq]CODE LINK[/URL][br][/br]
                    mobile friendly (?) | character sheet | 4 tabs |  scroll | nobr
               [/div]
          [/div]
     [/div]
[/div]


[comment]
     [font=Roboto].[/font]
     [font=Roboto Condensed].[/font]
[/comment]

[class name="emain"]
     box-sizing: border-box;
     margin: 0 auto 50px;
     padding: 20px;
     width: calc(100% - 40px);
     max-width: 600px;
     font-size: initial;
     background: #fdfdfd;
     border: 1px solid #eaeaea;
[/class]

[class name="ewrap"]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
[/class]

[class name="eicon"]
     flex: 1 0 150px;
     margin-left: 20px;
     width: 100%;
     max-width: 150px;
     background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]

[class name="edescription"]
     flex: 5 0 200px;
     margin-left: 20px;
     max-width: 400px;
[/class]

[class name="esubheader"]
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 1.0em;
     color: #777777;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="etext"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9em;
     color: #777777;
     line-height: 135%;
     text-align: justify;
[/class]

[class name="etags"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.8em;
     line-height: 125%;
     color: #777777;
     text-align: justify;
[/class]



[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
Asking for permission before use is very much appreciated!

Art by: neco
[URL unfurl="true"]https://www.pixiv.net/en/users/777703[/URL]
[/comment]


[comment]--------------------CS Details--------------------[/comment]

[div class="borderline"]
     [div class="bgmain"]
          [div class="flexwrap"]
               [div class="imgwrapper"]
                    [div class="imgmain"]
                         [div class="nameplate clicker"]
                              [div class="name"]
                                   elise friedhelm
                              [/div]
                              [div class="instruct"]
                                   click to access files
                              [/div]
                         [/div]
                    [/div]
               [/div]
               [div class="rwrapper"]
                    [div class="tabwrap"]
                         [div class="tabs basicstabs tabselect" style="max-width: 49px;"][div=display: none;]basics#[/div]
                              basics
                         [/div]
                         [div class="tabs historytabs" style="max-width: 61px;"][div=display: none;]history#[/div]
                              history
                         [/div]
                         [div class="tabs abilitytabs" style="max-width: 54px;"][div=display: none;]ability#[/div]
                              ability
                         [/div]
                         [div class="tabs extratabs" style="max-width: 45px;"][div=display: none;]extra#[/div]
                              extra
                         [/div]
                         [div class="hometab unclicker"]
                              home
                         [/div]
                    [/div]
                    [div class="contentbox"]
                         [div class="content basicsinfo"]
                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        basic information
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             name
                                        [/div]
                                        [div class="answer"]
                                             elise friedhelm
                                        [/div]
                                   [/div]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             nicknames
                                        [/div]
                                        [div class="answer"]
                                             ellie
                                        [/div]
                                   [/div]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             age
                                        [/div]
                                        [div class="answer"]
                                             nineteen (19)
                                        [/div]
                                   [/div]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             role
                                        [/div]
                                        [div class="answer"]
                                             2nd generation student
                                        [/div]
                                   [/div]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             marking
                                        [/div]
                                        [div class="answer"]
                                             back of hand (left)
                                        [/div]
                                   [/div]
                              [/div]

                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        appearance
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             height
                                        [/div]
                                        [div class="answer"]
                                             5'0" (153cm)
                                        [/div]
                                   [/div]
                                   [div class="listwrap"]
                                        [div class="question"]
                                             weight
                                        [/div]
                                        [div class="answer" style="margin-bottom: 10px;"]
                                             119lbs (54kg);
                                        [/div]
                                   [/div]
                                   In spite of her mature demeanor, Elise is neither particularly blessed in height nor does her subtle muscle tone show through her clothes. With every fiber of her clothes and strand of her ash blonde hair perfectly set, she comes off as more so an elegant young lady than a warrior. However, as a true specialist, any who have seen her use those deceptively thin arms to hoist up her near-comically massive shield know her as one of the best amongst her peers when it comes to defensive counters.

                                   [br][/br][br][/br]

                                   As a side note, she tends to wear a pair of open palm black gloves to cover the mark on the back of her left hand without obstructing her grip on her shield.
                              [/div]

                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        personality
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   Shy but optimistic and compassionate, Elise was often compared to the likes of a sunflower that always faced the sunlit path. Her reserved nature and crybaby tendencies thoroughly convinced her that she was the least outstanding of the seven 2nd generation OtherWorlders, yet all knew and acknowledged her merits both on and off of the battlefield. In spite of her lack of offensive contributions, her specialty as a stalwart defensive pillar and moral support served as one of the backbones of her generation. No matter how much her spirit was shaken, she never despaired and her determination burned brilliantly—until the events from a year ago.

                                   [br][/br][br][/br]

                                   In one night, the crybaby lost her ability to shed tears; her naive expressions were forcibly moulded into ones that were much more mature. It wasn’t as if she had devolved into a cold tyrant, yet there was a sense of a subtle change in the girl who had once smiled so freely. If someone came up to her, her words were still as gentle as before, but there was a much more placid quality to her tone, not out of shyness but weariness. Gradually, the barriers increased, and she began to refuse to consult even her old friends and comrades about her internal conflicts. It was as if she believed that it was a weight she could not afford to burden others with ever again: her shield was hers alone to bear.

                                   [br][/br][br][/br]

                                   Most notably, the girl who had seemed to be oblivious to fury and resentment acquired the taste of bitterness and anger. Where she would have once mediated between two incenses individuals, there now exists moments in which she may impulsively fan the flames or start the altercation herself. This behavior is most often roused when the topic of [i]The Incident[/i] from a year ago arises. She is particularly unforgiving towards those who badmouth her fallen comrades, especially Rei Fey and the Professor. For they were people who had sacrificed themselves for this foreign land. Nothing they had done deserved public scorn.
                              [/div]

                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        preferences
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [div class="listwrap"]
                                        [div class="column"]
                                             [b]LIKES[/b][br][/br]
                                             - glass marbles[br][/br]
                                             - floral accessories[br][/br]
                                             - muscat oolong[br][/br]
                                             - curry[br][/br]
                                             - dalgona[br][/br]
                                             - making sweets[br][/br]
                                             - the book thief
                                        [/div]
                                        [div class="column"]
                                             [b]DISLIKES[/b][br][/br]
                                             - gossipmongers[br][/br]
                                             - hypocrites[br][/br]
                                             - chewing noises[br][/br]
                                             - insects[br][/br]
                                             - cilantro[br][/br]
                                             - bitter melon[br][/br]
                                             - wool sweaters
                                        [/div]
                                   [/div]
                              [/div]

                              [div class="spacer"]
                              [/div]
                         [/div]
                         [div class="content historyinfo hidecontent"]
                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        background
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   Her father was a highly acclaimed screenwriter, her mother was an employee at a top tech firm, her elder brother was an academic genius, and her elder sister was a musical virtuoso. Then, there was the Friedhelm’s mediocre youngest child, as if their blood’s talent had run dry.

                                   [br][/br][br][/br]

                                   “Such a pity,” said many with a sigh, feeling sorry for the Elise who was the very definition of mediocrity born into a house of geniuses. However, the small girl would meet their patronizing gazes with a gentle smile free of worries. She didn’t covet her siblings’ trophies; no ribbon on her bedroom wall could amount to her family’s unconditional love. Towards the Elise who cheered them on while radiating happiness, her family asked for nothing more than just that. Regardless of her shortcomings, she was their precious daughter and youngest sibling, and the child herself felt content with her lot in life as long as she could continue to smile by her family’s side.

                                   [br][/br][br][/br]

                                   When had that changed? No, when had she finally noticed? Having grown complacent with her lack of talent and desire, she had long convinced herself that her mediocrity was inevitable. Like a harsh slap, someone, with a look of disgust distorting their face, rebuked her with the words, “in the end, that’s just an excuse to avoid failure instead of putting in your best effort.” Yet her epiphany arrived far too late, for she was a child who had developed neither hobbies nor ambitions.

                                   [br][/br][br][/br]

                                   Still, she understood that the startline, no matter how late, was the turning point of every development. Though completely aimless, she strove to increase her grades and made other small goals for herself as the first step. Enlisting her parents and siblings for aid in her studies, she began to see steady improvements in her grades—and an observation that she would have rather never noticed.

                                   [br][/br][br][/br]

                                   Her family loved and accepted her for who she was, yet she could finally tell that behind their smiles hid subtle sighs and hints of disappointment in their eyes, expressing thoughts of, “why can’t she understand something so simple?” It was as if she were but a puppy in their eyes: affectionate and perfectly lovable, but a creature incapable of reaching the same view of the world that they possessed. Instead of words of encouragement, questions asking whether she was pushing herself too hard and statements that she should stay as is were haphazardly tossed her way.

                                   [br][/br][br][/br]

                                   Was this truly how it felt to “belong?” To be treated as a precious decoration?

                                   [br][/br][br][/br]

                                   She had grown past her false sense of fulfillment in indolence, only to learn that the people she loved most had never trusted her as an equal.

                                   [br][/br][br][/br]

                                   As if symbolizing the closing off of her heart, she then discovered her ability to create invisible walls around herself. For a year, she used this power as discreetly as she possibly could to avoid people. However, as soon as she began to bear the thoughts of isolating herself forever, she found herself in a strange place: a foreign world.

                                   [br][/br][br][/br]

                                   Despite her reserved and passive nature, she quickly found herself settling comfortably into the ranks of her fellow otherworlders. To them, she was just “Elise,” not a Friedhelm or the disappointing daughter of a genius. Away from the judging eyes of her original world, the girl began to thrive for the first time. Though her achievements as a defensive support weren’t nearly as highly praised as her comrades, she was proud of both herself and her friends nonetheless. However, no one expected the tragedy of the Fangen Theater incident.

                                   [br][/br][br][/br]

                                   "I'll be fine! Focus on shielding the civilians!"

                                   [br][/br][br][/br]

                                   Those were the last words she heard from Luri, her best friend since her arrival in the world. Though Elise had been left shell-shocked by Rei Fey’s sudden mania, Luri’s words and confidence snapped her focus back to the matter at hand. With a nod of her head, she headed back towards the crowd, setting up boundaries and raising her shield to fend off the falling rubble and monsters alike.

                                   [br][/br][br][/br]

                                   Though exhausted by the overuse of her powers, Elise, noticing her friend was still missing, made a final trip back into the building. However, her panic had left her blind to the debris crashing down from above, thus deploying her shield far too late. It was then that she laid her eyes upon her friend being overwhelmed by monsters amidst the rubble. Yet no matter how she willed her body, it refused to move.

                                   [br][/br][br][/br]

                                   The last thing she could recall before blacking out was Luri being devoured.

                                   [br][/br][br][/br]

                                   A day later, Elise learned that by some miracle, she had remained undetected by the monsters, and a student had managed to drag her back out of the building in time. Unfortunately, what she had seen before losing consciousness was the hard truth—her friend had not shared in her fortune.

                                   [br][/br][br][/br]

                                   Ever since, the questionable details of the incident never left her mind. She’d discover the truth for Professor Yue, for Rei Fey and the other late 2nd generation students, and, most importantly, for Luri.
                              [/div]

                              [div class="spacer"]
                              [/div]
                         [/div]
                         [div class="content abilityinfo hidecontent"]
                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        powers
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [b][MAJOR: BOUNDARY][/b] For what she lacks in offensive power, Elise is blessed with a high aptitude for supporting her team brought about by her unique ability to “draw boundaries” as she calls it. At its core, this ability merely exists as a singular action: to create a line that separates. However, years of experience has cultivated various techniques derived from this singular action, making it a truly flexible ability.

                                   [br][/br][br][/br]

                                   As an ability whose sole purpose is to separate, Elise’s boundaries strictly adhere to that law of separation. Though it has led to certain interesting applications such as using the act of “separating the feet from the ground” to use a boundary’s repulsive force to aid a target’s jump, the ability is hence accompanied by the rule that it requires at least one “anchor” at all times. That is, Elise cannot draw a boundary without the intention to separate or completely isolate “something” from “other things.” Furthermore, Elise’s current level of stamina and familiarity with the anchor is directly proportional to the maximum applicable strength of her boundaries. As a result, friends and close comrades are always granted stronger remote shielding as compared to complete strangers. She is also far more proficient at caging monsters whose type she has run into several times rather than at her first encounter with them. Even then, her boundaries are not completely shatter-proof.

                                   [br][/br][br][/br]

                                   Due to the aforementioned stipulations, Elise’s ability was limited to reinforcing her shield and creating a barrier before it at the start of her first year at the academy, and her shield still remains as the anchor capable of hosting her most sturdy boundaries. However, the gradual increase in her understanding and command over her boundaries has nurtured the ability to remotely cast barriers over allies and later utilize her boundaries to entrap targets within cages should the need arise. This finer control over her ability has also expanded to manipulating the exact shape her boundaries take, such as spike-like structures on the outer walls of her boundaries to further discourage things from attacking her boundaries, though they provide very little damage coverage. Other resultant physical applications consist of creating a soundproof (and potentially other senses) bubble, and, at its most malicious of uses, an airtight bubble. However, she feels the latter application is both immoral and difficult to pull off due to the energy consumption and expectation that whoever is trapped inside should be able to break the boundary after just a few hits.

                                   [br][/br][br][/br]

                                   During her Sophomore year, she also discovered that this ability to separate was not limited to the physical when she found out that she could use her boundary to separate the mind from outside influences, theoretically shielding them from mental abilities such as mind control. However, her current level of control over this type of boundary is shaky and is more to stall for time rather than completely prevent it. Incidentally, she regrets that she had not discovered and developed this facet of her power sooner...

                                   [br][/br][br][/br]

                                   Furthermore, her power is a preventative measure and not a cure. If the proposed anchor is already connected to something else, she cannot create a boundary to forcefully separate the two. For example, if she wished to create a boundary around a weapon to prevent someone from accessing it, someone else would have to knock it out of that person’s hand first. She also cannot use another boundary as an anchor, meaning that she currently cannot stack barriers, leaving her at a disadvantage when using her more fragile boundaries.

                                   [br][/br][br][/br]

                                   [b][MINOR: STRENGTH][/b] Though its effects are minimal compared to others with strength augmenting abilities, Elise’s boosted strength allows her to carry and deploy her shield with ease in spite of its weight. Because she isn’t suited for martial arts, she doesn’t use her strength for much else.
                              [/div]

                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        weapons
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [b][ANDRASTE][/b] Andraste, meaning “indestructible” or “unconquerable”, is the weapon that was custom made for Elise Friedhelm upon her initiation into the academy. True to its name, Andraste is a black mechanical shield forged with special alloys and a particular structure meant to defend against heavy impacts. Though its drawback is that it’s heavy to the point where the average civilian cannot lift it, Elise’s natural ability and further training allows her to carry and swing around her shield seemingly with little effort in spite of her petite stature and demure looks.

                                   [br][/br][br][/br]

                                   Due to its full size nearly reaching Elise’s own height, Andraste was built with the intention of being collapsed into a rectangular mass approximately the size of a violin case. Complete with a shoulder strap, the shield is often seen slung over the girl’s shoulder when in transit, ready to be deployed at a moment’s notice.

                                   [br][/br][br][/br]

                                   Incidentally, Elise has used her shield to sled down a snowy slope at some point on a childish whim. She received a lengthy lecture from Professor Yue afterwards.
                              [/div]

                              [div class="spacer"]
                              [/div]
                         [/div]
                         [div class="content extrainfo hidecontent"]
                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        notes
                                   [/div]
                              [/div]
                              [div class="categorybox"]
                                   [b][1][/b] The flower accessory that Elise always wears in her hair was a pre-graduation gift from Luri. She considers it to be a good luck charm for missions, as well as a reminder of her past failures.
                              [/div]

                              [div class="categorywrap"]
                                   [div class="circle"]
                                   [/div]
                                   [div class="category"]
                                        gallery
                                   [/div]
                              [/div]
                              [div class="categorybox" style="text-align: left;"]
                                   [IMG]https://i.imgur.com/EzwysM6.jpg[/IMG]
                              [/div]

                              [div class="spacer"]
                              [/div]
                         [/div]
                    [/div]
               [/div]
          [/div]
     [/div]
[/div]
[div=margin: -5px auto 25px; width: 100%; max-width: 1050px; text-align: right; opacity: 0.6;][size=1]code by [USER=20950]@Nano[/USER][color=transparent]x[/color][/size][/div]

[comment]
     [font=Expletus Sans]font[/font]
     [font=Roboto]font[/font]
[/comment]

[comment]--------------------CSS--------------------[/comment]

[class name="borderline"]
     --accent: #b72c27;
     --hcolor: #282828;
     --bcolor: #fcfcfc;
     --header: 'Expletus Sans', cursive;
     --body: 'Roboto', sans-serif;
     --h1: 35px;
     --h2: 25px;
     --s1: 14px;
     --s2: .8em;
     --fa: 30px;
     --LH: 150%;
     margin: 25px auto 0;
     padding: 25px;
     width: calc(100% - 52px);
     max-width: 1000px;
     height: 500px;
     border: 1px solid #e8e8e8;
     font-size: initial;
[/class]

[class name="bgmain"]
     margin: 0 auto;
     width: 100%;
     max-width: 1000px;
     height: 500px;
     background: url('https://i.imgur.com/UWdpTmY.jpg') right center/1000px 500px no-repeat;
[/class]

[class name="flexwrap" minWidth=750px]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
     max-width: 1020px;
     height: 500px;
[/class]

[class name="flexwrap" maxWidth=749px]
     width: 100%;
     max-width: 550px;
     height: 500px;
[/class]

[class name="imgwrapper" minWidth=750px]
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-left: 20px;
     flex: 1 0 300px;
     width: calc(100% - 20px);
     max-width: 1000px;
     height: 500px;
     overflow: hidden;
[/class]

[class name="imgmain" minWidth=750px]
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-left: 0px;
     width: 100%;
     max-width: 550px;
     height: 500px;
     background: url('https://i.imgur.com/uINparG.png') right center/550px 500px no-repeat;
     position: relative;
[/class]

[class name="imgmain" maxWidth=749px]
     display: flex;
     flex-direction: row;
     justify-content: center;
     width: 100%;
     max-width: 550px;
     height: 500px;
     background: url('https://i.imgur.com/uINparG.png') 65% 50%/550px 500px no-repeat;
     opacity: 1;
     position: relative;
     transition: opacity 0.7s ease-in-out 2.1s, height 0.1s ease 2.0s, width 0.1s ease 2.0s;
[/class]

[class name="fade" maxWidth=749px]
     opacity: 0;
     height: 0;
     width: 0;
     transition: opacity 0.7s ease-in-out 1.0s, height 1.7s step-end, width 1.7s step-end;
[/class]

[class name="nameplate" minWidth=750px]
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-left: 50px;
     top: calc(50% - 50px);
     width: calc(90% - 50px);
     max-width: 400px;
     height: 100px;
     background-color: rgba(252, 252, 252, 0.7);
     opacity: 1.0;
     position: relative;
     cursor: pointer;
     transition: opacity 0.7s ease-in-out 3.8s, height 0.1s ease 3.7s, width 0.1s ease 3.7s;
[/class]

[class name="nameplate" maxWidth=749px]
     display: flex;
     flex-direction: column;
     justify-content: center;
     top: calc(50% - 50px);
     width: 90%;
     max-width: 300px;
     height: 100px;
     background-color: rgba(252, 252, 252, 0.7);
     opacity: 1.0;
     position: relative;
     cursor: pointer;
     transition: opacity 0.7s ease-in-out 2.9s, height 0.1s ease 2.8s, width 0.1s ease 2.8s;
[/class]

[class name="nameselect"]
     height: 0;
     width: 0;
     opacity: 0;
     transition: opacity 0.7s ease-in-out 0.2s, height 0.9s step-end, width 0.9s step-end;
[/class]

[class name="name"]
     width: 100%;
     font-family: var(--header);
     font-size: var(--h1);
     color: var(--accent);
     text-transform: uppercase;
     text-align: center;
     font-weight: bold;
     line-height: 100%;
[/class]

[class name="instruct"]
     width: 100%;
     font-family: var(--header);
     font-size: var(--s2);
     color: var(--hcolor);
     text-transform: uppercase;
     text-align: center;
     font-weight: bold;
     line-height: 100%;
[/class]

[class name="rwrapper" minWidth=750px]
     box-sizing: border-box;
     margin-left: 20px;
     padding: 20px 20px 20px 0;
     flex: 0;
     width: 0;
     max-width: 1000px;
     height: 500px;
     opacity: 0;
     position: relative;
     transition: width 2.0s ease-in-out 1.7s, flex 2.0s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.0s;
[/class]

[class name="rwrapper" maxWidth=749px]
     box-sizing: border-box;
     padding: 20px;
     width: 0;
     max-width: 1000px;
     height: 500px;
     opacity: 0;
     transition: width 0.1s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.0s;
[/class]

[class name="shift" minWidth=750px]
     flex: 5 0 300px;
     width: 100%;
     opacity: 1;
     transition: width 2.0s ease-in-out 0.9s, flex 2.0s ease-in-out 0.9s, opacity 0.7s ease-in-out 2.9s;
[/class]

[class name="shift" maxWidth=749px]
     width: 100%;
     opacity: 1;
     transition: width 0.1s ease-in-out 1.7s, opacity 0.7s ease-in-out 1.9s;
[/class]

[class name="tabwrap"]
     margin-left: -5%;
     display: flex;
     flex-flow: row wrap;
     justify-content: flex-end;
     width: 100%;
     height: 30px;
     position: relative;
     z-index: 2;
[/class]

[class name="tabs"]
     margin-left: 15px;
     flex: 1 0 30px;
     max-width: 50px;
     font-size: var(--s1);
     line-height: 200%;
     color: var(--bcolor);
     text-transform: uppercase;
     font-weight: bold;
     cursor: pointer;
     transition: color .7s ease .2s;
[/class]

[class name="tabs" state=hover]
     color: var(--accent);
     transition: color .7s ease .2s;
[/class]

[class name="tabselect"]
     color: var(--accent);
     transition: color .7s ease .2s;
[/class]

[class name="hometab"]
     margin-left: 15px;
     flex: 1 0 30px;
     max-width: 43px;
     font-size: var(--s1);
     line-height: 200%;
     color: var(--bcolor);
     text-transform: uppercase;
     font-weight: bold;
     cursor: pointer;
     transition: color .7s ease .2s, max-width .7s ease .2s;
[/class]

[class name="hometab" state=hover]
     color: var(--accent);
     transition: color .7s ease .2s;
[/class]

[class name="contentbox"]
     margin-top: 15px;
     width: 0;
     height: 0;
     opacity: 0;
     overflow: hidden;
     position: relative;
     transition: opacity 0.7s ease-in-out 0.2s, height 0.9s step-end, width 0.9s step-end;
[/class]

[class name="unfade" minWidth=750px]
     width: 100%;
     height: 415px;
     opacity: 1;
     transition: opacity 0.7s ease-in-out 3.7s, height 0.1s ease 3.6s, width 0.1s ease 3.6s;
[/class]

[class name="unfade" maxWidth=749px]
     width: 100%;
     height: 415px;
     opacity: 1;
     transition: opacity 0.7s ease-in-out 2.7s, height 0.1s ease 2.6s, width 0.1s ease 2.6s;
[/class]

[class name="content"]
     padding: 20px 38px 0px 20px;
     width: calc(100% - 40px);
     height: 415px;
     background: rgba(40, 40, 40, 0.6);
     overflow-y: auto;
     opacity: 1;
     position: absolute;
     transition: opacity 0.7s ease-in-out 0.9s;
[/class]

[class name="hidecontent"]
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.7s ease-in-out 0.1s;
[/class]

[class name="categorywrap"]
     display: flex;
     flex-flow: row nowrap;
     margin-left: -15px;
     width: 100%;
     height: 40px;
[/class]

[class name="circle"]
     margin-left: 15px;
     flex: 1 0 40px;
     max-width: 40px;
     height: 40px;
     border-radius: 20px;
     background-color: var(--accent);
[/class]

[class name="category"]
     margin-left: 15px;
     flex: 5 0 100px;
     width: 100%:
     font-family: var(--header);
     font-size: var(--h2);
     color: var(--hcolor);
     line-height: 150%;
     text-transform: uppercase;
     font-weight: bold;
[/class]

[class name="categorybox"]
     margin-top: -5px;
     margin-left: 20px;
     padding: 20px 20px 25px 20px;
     width: calc(100% - 42px);
     border-left: 3px solid var(--accent);
     font-family: var(--text);
     font-size: var(--s1);
     color: var(--bcolor);
     line-height: var(--LH);
     text-align: justify;
[/class]

[class name="spacer"]
     height: 60px;
[/class]

[class name="listwrap"]
     display: flex;
     flex-flow: row wrap;
     width: 100%;
     text-align: left;
[/class]

[class name="question"]
     flex: 1 0 100px;
     font-family: var(--text);
     font-size: var(--s1);
     color: var(--text);
     line-height: (--LH);
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="answer"]
     flex: 5 0 100px;
     font-family: var(--text);
     font-size: var(--s1);
     color: var(--text);
     line-height: var(--LH);
     text-transform: uppercase;
[/class]

[class name="column"]
     flex: 1 0 100px;
     font-family: var(--text);
     font-size: var(--s1);
     color: var(--text);
     line-height: var(--LH);
[/class]

[comment]--------------------SCRIPTS--------------------[/comment]

[script class=clicker on=click]
     addClass nameselect nameplate
     addClass fade imgmain
     addClass shift rwrapper
     addClass unfade contentbox
     fadeOut 900 name
     fadeOut 900 instruct
[/script]

[script class=unclicker on=click]
     removeClass nameselect nameplate
     removeClass fade imgmain
     removeClass shift rwrapper
     removeClass unfade contentbox
     fadeIn 900 name
     fadeIn 900 instruct
[/script]

[script class="tabs" version=2]
     (= select "basics")
[/script]

[script class="tabs" version=2 on=click]
     (addClass "hidecontent" "content")
     (removeClass "tabselect" "tabs")

     (= select (index (split (getText) "#") 0 ))

     (addClass "tabselect" (+ select "tabs"))
     (removeClass "hidecontent" (+ select "info"))
[/script]


[/nobr]
 
Last edited:
mindheist

mindheist

your vibes, m’lord
i was so awed by your cs layout when you posted it and was like.... oh my god, if only i could have an ounce of such coding talent
thank you so much for sharing this with us!! they're absolutely amazing, and i'll definitely look forward to using these codes in the future!!
 
Nano

Nano

artistic shrimp
Code: 
[nobr]



[div class="emain"]
     [div class="ewrap"]
          [div class="eicon"]
          [/div]
          [div class="edescription"]
               [div class="esubheader"]
                    Act 04: Letters
               [/div]
               [div class="etext"]
                    Kind of wasn't sure about putting this one out considering how messy everything is + the number of images required considering it's an older code, but here you go. This was originally from a Noragami rp, but it should fit anything that uses older japanese or chinese themes.
               [/div]
               [div class="etags"]
                    [URL=https://pastebin.com/uarDAdSX]CODE LINK[/URL][br][/br]
                    jp theme | mobile friendly | character sheet | 4 tabs | scroll | nobr
               [/div]
          [/div]
     [/div]
[/div]


[comment]
     [font=Roboto].[/font]
     [font=Roboto Condensed].[/font]
[/comment]

[class name="emain"]
     box-sizing: border-box;
     margin: 0 auto 50px;
     padding: 20px;
     width: calc(100% - 40px);
     max-width: 600px;
     font-size: initial;
     background: #fdfdfd;
     border: 1px solid #eaeaea;
[/class]

[class name="ewrap"]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
[/class]

[class name="eicon"]
     flex: 1 0 150px;
     margin-left: 20px;
     width: 100%;
     max-width: 150px;
     background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]

[class name="edescription"]
     flex: 5 0 200px;
     margin-left: 20px;
     max-width: 400px;
[/class]

[class name="esubheader"]
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 1.0em;
     color: #777777;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="etext"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9em;
     color: #777777;
     line-height: 135%;
     text-align: justify;
[/class]

[class name="etags"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.8em;
     line-height: 125%;
     color: #777777;
     text-align: justify;
[/class]



[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
Asking for permission before use is very much appreciated!
[/comment]


[comment]<------------------------- main ------------------------->[/comment]


[div class=bgBefore]
     [div class=bg]
          [div class=wrapOuter]
               [div class=wrapInner]
                    [div class=left]
                        [div class=main]
                         [/div]
                         [div class=mainUnder]
                              [div class=buttonWrap]
                                   [div class="buttonFirst" style="margin-left: 0;"][div class="button mainbutton selectButton"][div=display: none;]main#[/div][/div][/div]
                                   [div class=buttonFirst][div class="button vesselbutton"][div=display: none;]vessel#[/div][/div][/div]
                                   [div class=buttonFirst][div class="button historiabutton"][div=display: none;]historia#[/div][/div][/div]
                                   [div class=buttonFirst][div class="button notesbutton"][div=display: none;]notes#[/div][/div][/div]
                             [/div]
                         [/div]
                    [/div]
                    [div class=right]
                         [div class="content maintab reveal"]
                              [div class=scroll]
                                   [div class="post" style="margin-bottom: 20px;"]
                                        [div class=postWrap]
                                             [div class=tile]
                                                  [div class=title]
                                                       三[br][/br]雲
                                                  [/div]
                                             [/div]
                                             [div class=headerBase]
                                                  [div class="image" style="background: url('https://dl.dropboxusercontent.com/s/c65l5lvhu76dkmx/texture.05.image.png') repeat, url('https://dl.dropboxusercontent.com/s/rgdhmpnb362vh7n/Image.02.jpg') 20% 5% no-repeat;"]
                                                  [/div]
                                             [/div]
                                        [/div]
                                        [div class=basics]
                                             [div class=basicsInfo]
name..............mikumo (三雲)[br][/br]
vessel name..............unki (雲器)[br][/br]
real name..............suou hifumi (朱桜 一二三)[br][/br]
                                             [/div]
                                             [div class=basicsInfo]
age..............23 (at death), 106 (in total)[br][/br]
gender..............male[br][/br]
affiliation..............masuyo, god of wealth[br][/br]
                                             [/div]
                                        [/div]
[b]personality.[/b] Under the influence of his mother, Mikumo as Hifumi was seldom seen with an expression of negativity, the only memorable instances being his mother’s death and the moment during which he faced his own. Earnestly believing in the inherent good of things, Hifumi, in spite of his arrogant nature, was someone whose gentle demeanor towards those whom his goodwill was due did not appear to be capable of being led astray. His increasing cynicism, however, provides a stark contrast from the past.
[br][/br][br][/br]
With his mother’s glorified vision of the world long forgotten, the man reborn as Akitsu—and later Mikumo—instead dwells on a particular bitterness left over from his untimely death. But a man jaded by his distrust in others never wears his heart on his sleeve, nor is he keen on showing his true colors. On the surface, he appears polite while spinning playful words, as if he truly enjoys the company of people. His impassive gaze and vulpine smile, however, draws a clear line between his personal space and others’. In fiction, gods may live forever while the dead cannot face death for a second time. Yet in a world where even lies can end up as lies, nothing can be taken for granted. When he was inadvertently taught this lesson the hard way by Misumi, he chose to remain aloof and unfettered, barely cultivating mere shallow and passing relationships at best. Even towards the most stubborn people, the glare of suspicion hidden under his calm mask is typically enough to keep them at bay. What lies under that gentle facade is nothing but a pit of sarcastic words reserved for those that attempt to pry deep enough.
[br][/br][br][/br]
Likewise, his precarious situation as an ex-shinki without a god suits him just fine. From his past to his present, pride has always been his defining quality. Coupled with his stubbornness and a carefully tempered wit, he comes off as someone who is extremely self-sufficient, and for the most part, he is. Yet due to having quietly spent away several decades secluded in an abandoned, rundown shrine, he is unexpectedly clumsy in regards to affairs concerning the modern world. It isn’t infrequent to see a trace of surprise in his eyes upon encountering things that others may view minor and of little importance, and he may, on occasion, go out of his way to approach someone—given a set distance—in order to satisfy his curiosity.
[br][/br][br][/br]
Regardless, his god was and will only ever be the land god Misumi. His fealty is not cheap—or so he claims. These past decades, were they filled with indignation, or was it fear?
                                   [/div]
                                   [div class="post" style="margin-bottom: 20px;"]
                                        [div class=postWrap]
                                             [div class="tile" style="margin: 0 5px;"]
                                                  [div class=title]
                                                       趣[br][/br]味
                                                  [/div]
                                             [/div]
                                             [div class="headerBase" style="box-sizing: border-box; padding: 7px 0 8px 10px; margin: 0 5px;"]
[b]interests.[/b] Due to having pursued the study of medicine over his personal interests, Mikumo never developed many hobbies with the exception of calligraphy. Having always admired his mother’s graceful script, the boy would often imitate his mother for his amusement. Though he had to drop this past time during his university years, his afterlife gave him plenty of time to pick it up once again. His natural knack as well as his dedication has resulted in the cultivation of an elegant and individualistic style.
[br][/br][br][/br]
Recently, he's picked up an interest in photography. Though his camera is a discarded model he just happened to come across, as a person who used to only know of bulky cameras that could only produce images in black and white, he certainly has no complaints whatsoever. As a result of the matter of charging the device requiring him to sneak into libraries to leech off of their outlets, he's also gotten back into the habit of leisurely reading books. It's not like loose spirits have much else to do.
                                             [/div]
                                        [/div]
                                   [/div]
                                   [div class=post]
                                        [div class=postWrap]
                                             [div class="tile" style="margin: 0 5px;"]
                                                  [div class=title]
                                                       見[br][/br]え
                                                  [/div]
                                             [/div]
                                             [div class="headerBase" style="box-sizing: border-box; padding: 7px 0 8px 10px; margin: 0 5px;"]
                                                  [div class="basics" style="margin: 8px 3% 10px;"]
face claim..............migiwa shizuru[br][/br]
artist..............satoi[br][/br]
voice claim..............ishida akira[br][/br]
                                                  [/div]
[b]appearance.[/b] Born during the onset of the Taisho Era, Mikumo’s choice in dress clearly deviates from that of the shinki who’ve spent their short-lived lives during modern times. Typically seen sporting traditional wear, the man appears as if he’s two steps in the past, which—granted his situation—isn’t necessarily wrong. That said, when the necessity arises, he isn’t completely opposed to donning a simple sweater or jacket to blend in, but some minor complaints are inevitable. Not only does the restrictive clothing make him feel uncomfortable, but he believes that western clothes emphasize the features derived from what he assumes is the foreign half of his blood.
[br][/br][br][/br]
In fact, a delicate blend between eastern and western genes gives Mikumo a balanced appearance which presents itself as japanese with a foreign touch. Though his mother’s eyes and hair were a deep onyx, his own eyes are a faded gold with an almost silvery sheen, and his hair, a light brown with an auburn touch. To his dismay, his unknown father did not contribute much in the height department, leaving him at a mere 5’9”—just barely missing the cut for the average height of a westerner. Regardless of his shortcomings, his posture falls nothing short of exuding a great deal of dignity. Like a proud fox, his upturned gaze invokes both a sense of craftiness and an arrogant indifference, a quality further accentuated by the gold rimming each iris.
                                             [/div]
                                        [/div]
                                   [/div]
                              [/div]
                         [/div]
                         [div class="content vesseltab"]
                              [div class=scroll]
                                   [div class="post" style="margin-bottom: 20px;"]
                                        [div class=postWrap]
                                             [div class=tile]
                                                  [div class=title]
                                                       神[br][/br]器
                                                  [/div]
                                             [/div]
                                             [div class=headerBase]
                                                  [div class="image" style="background: url('https://dl.dropboxusercontent.com/s/c65l5lvhu76dkmx/texture.05.image.png') repeat, url('https://dl.dropboxusercontent.com/s/t5t9oxklrqd885j/Image.03.jpg') left top no-repeat;"]
                                                  [/div]
                                             [/div]
                                        [/div]
[b]vessel.[/b] Though gentle to lost travelers, the land god Misumi eradicated evil ayakashi with the wild brutality of an autumnal gale. Complimentary to his god’s as well as his own temperaments, Mikumo, as a vessel, took on the form of a deceptively delicate fan decorated with the pattern of maple leaves. The fan’s outermost panels are encased in a gold patterning with two red tassels left to trail off the ends, giving it an ornate appearance, both when folded and unfolded.
[br][/br][br][/br]
Mikumo’s vessel form’s primary purpose was to create gusts of wind. With the surrounding air at the user’s command, anything from a blunt (or soft) force to a sharp cutting edge could be materialized at will. However, despite Misumi's seemingly effortless manner of handling her shinki's abilities, he's been mentioned to be noticeably tricky to handle. The winds are versatile but fickle. Likewise, the ability to call on it is based on a delicate balance between the god and the shinki. Not only must the shinki's consciousness be clear, but the pair's thoughts must also be in harmony, lest the wind become turbulent and uncontrollable or refuse to manifest at all.
[br][/br][br][/br]
In retrospect, Mikumo's vessel form itself is fairly simplistic and adds another dimension to his versatility. While the wind is wild and works best at a set distance, the body of the fan can be used at close range and is quite durable in spite of its delicate appearance. Though deflecting projectiles is its more common use, getting hit with it while folded can easily feel like being assaulted with a steel pipe.
                                   [/div]
                                   [div class=post]
                                        [div class=postWrap]
                                             [div class="tile" style="margin: 0 5px;"]
                                                  [div class=title]
                                                       技[br][/br]術
                                                  [/div]
                                             [/div]
                                             [div class="headerBase" style="box-sizing: border-box; padding: 7px 0 8px 10px; margin: 0 5px;"]
[b]skills.[/b]
[br][/br]
[[i]Deciphering Handwriting[/i]] Years of dealing with cursive/grass script and Misumi’s impossibly messy handwriting has made Mikumo extremely proficient in successfully deciphering the random squiggles that those with poor penmanship call words. Unfortunately, said handwriting is still highly displeasing to his eyes, making him slowly suffer on the inside as he continues reading. Expect him to burn the note afterwards.
[br][/br][br][/br]
[[i]Deceit[/i]] Given that he’s no longer bound to any god, Mikumo’s current philosophy is survival of the fittest. Though he may not necessarily say blatant lies, half-truths and suggestions are his specialty. It is this domain of subtly pushing others towards a particular false conclusion that he finds the most success. After all, people are most convinced by the answers that they come up with themselves. This skill is also useful in playing upon the instincts of ayakashi as well, which is the very tool he had used to elude possession and corruption all those past decades.
[br][/br][br][/br]
[[i]Borderline/Prison[/i]] (Shinki only) Like all other shinki, Mikumo is capable of drawing a borderline as a means to protect himself from malicious ayakashi. Naturally, he is capable of forming a prison as well, granted that there are two other shinki alongside him.
                                             [/div]
                                        [/div]
                                   [/div]
                              [/div]
                         [/div]
                         [div class="content historiatab"]
                              [div class=scroll]
                                   [div class=post]
                                        [div class=postWrap]
                                             [div class=tile]
                                                  [div class=title]
                                                       記[br][/br]憶
                                                  [/div]
                                             [/div]
                                             [div class=headerBase]
                                                  [div class="image" style="background: url('https://dl.dropboxusercontent.com/s/c65l5lvhu76dkmx/texture.05.image.png') repeat, url('https://dl.dropboxusercontent.com/s/5u8d9fked1usg88/Image.04.jpg') center no-repeat;"]
                                                  [/div]
                                             [/div]
                                        [/div]
[b]memories pt.I - befall[/b]
[br][/br][br][/br]
[i]“...with this name and its alternative, I use my life to make thee a Divine Instrument. The name, Aki. The vessel, Shuu. Come, Shuuki!”[/i]
[br][/br][br][/br]
The imprint of his first memory contained the childish face of Misumi. As the girl announced his “name,” he scowled in protest—only to find that he could not recall the name he had been born with. He could not recall any memories of the past, for that matter. All that was left was a sense of emptiness, one that spoke of a bitter memory that he no longer knew of.
[br][/br][br][/br]
He was a deceased spirit. She was a god. Misumi’s blunt words left no room for confusion or speculation. Those facts, he could accept, albeit reluctantly. What he could not, however, was the name that bound him to her will. This god who did as she pleased, he would never be able to place his faith in her.
[br][/br][br][/br]
In spite of his wary gaze, the god was quick to drag him around against his will. “I’ll show you that this world is beautiful,” she had once said, words that tickled a sense of nostalgia in his heart, though he did not know why.
[br][/br][br][/br]
Unexpectedly, the god was sensitive to the desires of her patrons. From those who lost their child in the woods to retrieving lost money pouches, this god of “things lost” fulfilled the requests of any who came to pray at her shrine in the sacred spring. Then, as the forest and village’s land god, she skillfully eradicated any ayakashi that dared to encroach on her territory.
[br][/br][br][/br]
As the years passed, he slowly came to accept the name and purpose she had given him. Whether it was Misumi’s ability to accept anyone and anything or the warmth of the villagers who had their “most precious thing” returned to them, he did not know. What he did was that this was the place he’d hope to call home for a long while, even when society advanced and humanity’s belief in their once cherished land gods began to fade.
[br][/br][br][/br]
Yet Misumi ended up abandoning him in the end.
[br][/br][br][/br]
Releasing his name, the land god of the sacred spring banished him from her forest. Initially shocked and in denial, the former shinki asked for an explanation, only to be given the cold shoulder. It was not until a few years of wandering did he return once again to find that his once beloved god had vanished without a trace. Her birth had been facilitated by the belief of the village people, but with their faith gone, she no longer had a reason to exist. In the end, she had simply not wished to give him the memory of seeing her die.
[br][/br][br][/br]
Nevertheless, the bitterness in his heart did not settle. And so he remained in her shrine until the day it was demolished decades later…
[br][/br][br][/br]
In this world, there are meddlesome people and countless more nosy gods. With his reason to stay at his former home gone, the shinki formerly named Akitsu begrudgingly followed the next wind—that of the god of industry and business and, most importantly, Misumi’s friend.
[br][/br][br][/br]
[br][/br][br][/br]
[b]memories pt.II - severance[/b]
[br][/br][br][/br]
His mother, a naive woman who had eloped and entangled herself with a foreign devil before being cast aside. His father, a scum who had left as soon as he had learned of their child’s conception. There was no need to inquire which of the two held Hifumi’s enmity while the other, all his sympathy and love.
[br][/br][br][/br]
“Even so, I want to believe that this world is beautiful,” his mother would whisper into his ear. Foolishly, she sincerely eulogized the world, earnestly believing that good things always followed the bad. Though she had been abandoned by her lover and her health had deteriorated after his birth, she had loved her child regardless of his origins. Raised under her happiness in simplicity, Hifumi grew up following the same doctrine. Even these simple things, however, were quickly snatched away.
[br][/br][br][/br]
Many times, the young boy had spoken of his aspirations to study medicine in order to cure his mother, yet these dreams were cruelly crushed, for death is never patient. Though he had not understood it at the time, his mother had been disowned the moment she had decided to follow his scum father. It had only been through the support of a close friend and her overexertion that she had managed to clothe and feed the two-person household. The Hifumi who was six at the time naturally had been blind to it all.
[br][/br][br][/br]
As if she had bestowed all the blessings that belonged to her onto him, her death left him in the care of his mother’s close friend, a wealthy man who had grown up with his mother as childhood friends. It was there that he had met the man’s son, Kotobuki Seishirou, for the very first time.
[br][/br][br][/br]
Sei, who was older only by a year, took it upon himself to look after the newly orphaned boy. Supposedly, he had felt a kinship with the child, with both having lost their mothers at a young age. Laughing together while seeking out the other to speak of their doubts, they quickly developed a close bond. Where father Kotobuki failed to accompany the two, the pair would amuse and look after each other, as if they were real siblings.
[br][/br][br][/br]
However, the peace was yet again doomed to deteriorate into nothing. Hifumi, in his attempts to reduce the burden on his adoptive family, would always garner the praise of the stoic Kotobuki. Though he had had countless talks with Sei that his father was merely stricter on Sei as his blood-related son, their relationship slowly but surely turned sour. As the pressure on Sei built up, Hifumi became more and more estranged until eventually the two hardly even spoke anymore. Before he even realized it, the older boy began to look at him with contempt, as if he were the person he hated most in this world.
[br][/br][br][/br]
Deep down, Hifumi knew that there was something that Sei knew that he did not. After all, the extent of the damage was not something that a father’s favoritism could invoke. The Hifumi who feared that their relationship would truly become something irreparable, however, chose to ignore the signs. Until he was called out for the first time in years.
[br][/br][br][/br]
Seishirou’s face held a smile, one that acted as though the tension between them had never existed. As if sensing something wrong, Hifumi hesitated. A second later, he boldly stepped forward. To continue to run away meant to acknowledge the estrangement between them. Yet his sincerity was never expressed in the end. Instead, his words were cut short by a sharp pain in his abdomen.
[br][/br][br][/br]
Blood fell like the autumn leaves under their feet. Slowly, he brought his gaze downwards and trembled, not out of the realization that he had just been stabbed, but rather because of the person who had done it.
[br][/br][br][/br]
He had once trusted this man like no one else. The person whom he had once seen as an older brother, however, wore an ugly expression as he mercilessly spewed words dripping with hatred. There, he finally learned of the story he had never known. What Sei had once referred to as kinship had eventually become his greatest grievance. Unknowingly, the man’s mother had not died of natural causes but had taken her own life...all due to the paranoia that her normally cold husband who cared so much about Hifumi’s mother, his ex-fiance, had loved that woman more than his own lawful wife.
[br][/br][br][/br]
In the end, nothing in this world was ever right. Even so, he briefly wondered that if he could be given a second chance, would something have changed?
[br][/br][br][/br]
But with a cruel twist of Sei’s wrist, the cold steel severed their ties once and for all.
                                   [/div]
                              [/div]
                         [/div]
                         [div class="content notestab"]
                              [div class=scroll]
                                   [div class=post]
                                        [div class=postWrap]
                                             [div class=tile]
                                                  [div class=title]
                                                       注[br][/br]釈
                                                  [/div]
                                             [/div]
                                             [div class=headerBase]
                                                  [div class="image" style="background: url('https://dl.dropboxusercontent.com/s/c65l5lvhu76dkmx/texture.05.image.png') repeat, url('https://dl.dropboxusercontent.com/s/nrcpio9p0fsgdfo/Image.05.jpg') right top no-repeat;"]
                                                  [/div]
                                             [/div]
                                        [/div]
[b]extras.[/b]
[br][/br][br][/br]
[[b]1[/b]] He was born on March 1, 1913.
[br][/br][br][/br]
[[b]2[/b]] Suou Hifumi is written as 朱桜 一二三 while Akitsu and Shuuki are written as 秋津 and 秋器, respectively. Mikumo is written as 三雲 while the vessel name using the same character, if he had one, would be 雲器 (Unki). Misumi is 水澄.
[br][/br][br][/br]
[[b]3[/b]] His tastes are often noted to be odd due to his obsession with ochazuke, fondness of natto, and tendency to carry around weird-tasting pear candy. He dislikes oily foods to the point where just the scent is enough to make him nauseous.
[br][/br][br][/br]
[[b]4[/b]] Is much more of a tea person. The last time someone handed him coffee, they served it to him black, prompting him to liken the experience to drinking a cup of boiled mud water.
[br][/br][br][/br]
[[b]5[/b]] He hasn't realized that memory cards are a thing and hence does not know that the number of photos he can take is technically limited. However, he doesn't bother to record videos (not that he knows how to), meaning that he won't run out of space for a while.
[br][/br][br][/br]
[[b]6[/b]] Due to his former god's laziness, Mikumo used to be in charge of the shrine's finances and recording prayers/requests in the shrine's logbooks among other tasks.
[br][/br][br][/br]
[[b]7[/b]] In spite of being born to an age prolific in distinguished writers and poets, Mikumo’s calligraphy is phenomenally elegant while his taste in poems is inversely horrendous. His photography, on the other hand, is quite good for an amateur, making it a mystery as to why his artistic sense suddenly tanks in the face of poetry.
                                   [/div]
                              [/div]
                         [/div]
                    [/div]
              [/div]
          [/div]
[div=box-sizing: border-box; margin: -20px auto 5px; padding-right: calc(1% + 7px); width: 90%; max-width: 1300px; min-width: 300px; height: 15px; color: #666666; font-size: 0.6em; text-align: right;]— code by [USER=20950]nano[/USER][/div]
     [/div]
[/div]


[comment]<------------------------- CSS ------------------------->[/comment]


[class=bgBefore]
     background-color: #dac9a6;
[/class]
[class=bg]
     padding: 5% 0 calc(5% - 20px);
     width: 100%;
     background: url('https://dl.dropboxusercontent.com/s/jk2ea2mvose6qd8/texture.01.gloss.png') repeat-x, url('https://dl.dropboxusercontent.com/s/g6p88b8jukoahn5/texture.02.BG.png') repeat;
     background-size: 20px 100%, 128px 128px;
     font-size: initial;
[/class]
[class=wrapOuter]
     margin: 0 auto;
     width: 90%;
     max-width: 1300px;
     min-width: 300px;
[/class]
[class=wrapInner]
     margin: 0 -10px;
     width: calc(100% + 20px);
     max-width: 1300px;
     min-width: 300px;
     display: flex;
     flex-flow: row wrap;
[/class]


[comment]<---------- left ---------->[/comment]


[class=left]
     margin: 0 10px 20px;
     flex: 1 1 300px;
     max-width: 800px;
     height: 75vh;
     max-height: 700px;
     min-height: 300px;
[/class]
[class=main]
     width: 100%;
     height: calc(75vh - 30px);
     max-height: calc(700px - 30px);
     min-height: calc(300px - 30px);
     background: url('https://dl.dropboxusercontent.com/s/fkioejz4ip8g1sn/Image.01v3.jpg') top left no-repeat;
[/class]
[class=mainUnder]
     width: 100%;
     height: 30px;
     background: #b54434 url('https://dl.dropboxusercontent.com/s/0y672c8rxd521y6/texture.04.tilev3.png') repeat;
[/class]
[class=buttonWrap]
     position: relative;
     margin: 0 auto;
     width: 100%;
     max-width: 198px;
     height: 0;
[/class]
[class=buttonFirst]
     display: inline-block;
     position: relative;
     margin-top: -21px;
     margin-left: 10px;
     width: 38px;
     height: 42px;
[/class]
[class=button]
     position: absolute;
     margin: 6px 0px 0px 6px;
     width: 20px;
     height: 20px;
     border: 5px solid #f3ecde;
     background: #b54434 url('https://dl.dropboxusercontent.com/s/g6p88b8jukoahn5/texture.02.BG.png');
     transform: rotate(45deg);

     color: transparent;
     font-size: 1px;
     line-height: 0;
     transition: background-color .5s ease-in-out;
[/class]


[comment]<---------- right ---------->[/comment]


[class=right]
     position: relative;
     margin: 0 10px 20px;
     flex: 20 1 500px;
     max-width: 1000px;
     height: 75vh;
     max-height: 700px;
     min-height: 300px;
[/class]
[class=content]
     position: absolute;
     pointer-events: none;
     height: 100%;
     width: 100%;
     overflow: hidden;
     opacity: 0;
     transition: opacity .75s ease-in-out;
[/class]
[class=scroll]
     padding-right: 100px;
     width: 100%;
     height: 75vh;
     max-height: 700px;
     overflow-y: scroll;
     overflow-x: hidden;
[/class]
[class=post]
     padding: 5%;
     width: 90%;
     background: #f3ecde url('https://dl.dropboxusercontent.com/s/e0jzbzym83cbgl3/texture.03.content.png') repeat;
     font-family: Book Antiqua;
     color: #554236;
     font-size: 1em;
     line-height: 130%;
     text-align: justify;
[/class]
[class=postWrap]
     margin: 0 -5px;
     display: flex;
     flex-flow: row wrap;
     width: calc(100% + 10px);
[/class]
[class=tile]
     margin: 0 5px 20px;
     flex: 1 1 200px;
     display: flex;
     align-items: center;
     background: #554236 url('https://dl.dropboxusercontent.com/s/0y672c8rxd521y6/texture.04.tilev3.png') repeat;
[/class]
[class=title]
     width: 100%;
     color: #ffffff;
     font-size: 5em;
     line-height: 125%;
     font-family: Arial;
     text-align: center;
[/class]
[class=headerBase]
     margin: 0 5px 20px;
     flex: 30 1 200px;
     max-width: 765px;
     border-left: 15px solid #b54434;
[/class]
[class=image]
     width: 100%;
     height: 80vh;
     max-height: 400px;
     background: url('https://dl.dropboxusercontent.com/s/c65l5lvhu76dkmx/texture.05.image.png') repeat, url('https://dl.dropboxusercontent.com/s/rgdhmpnb362vh7n/Image.02.jpg') 20% 5% no-repeat;
[/class]
[class=basics]
     display: flex;
     flex-flow: row wrap;
     margin: 0 3% 16px;
     padding-left: 5px;
     border-left: 2px solid #554236;
     width: calc(90% - 7x);
     font-size: .9em;
     line-height: 110%;
     text-align: left;
     font-style: italic;
[/class]
[class=basicsInfo]
     flex: 1 1 150px;
     max-width: 375px;
[/class]



[comment]<------------------------- animations ------------------------->[/comment]


[class=hoverButton]
     background-color: #554236;
     transition: background-color .5s ease-in-out;
[/class]
[class=selectButton]
     background-color: #554236;
     transition: background-color .5s ease-in-out;
[/class]
[class=reveal]
     pointer-events: auto;
     opacity: 1;
     transition: opacity .75s ease-in-out .75s;
[/class]


[comment]<------------------------- scripts ------------------------->[/comment]


[script class="button" version=2]
     (= select "main")
[/script]
[script class="button" version=2 on=mouseenter]
     (removeClass "hoverButton" "button")
     (= hover (index (split (getText) "#") 0 ))
     (addClass "hoverButton" (+ hover "button"))
[/script]
[script class="button" version=2 on=mouseleave]
     (removeClass "hoverButton" "button")
[/script]
[script class="button" version=2 on=click]
     (removeClass "reveal" "content")
     (removeClass "selectButton" "button")

     (= select (index (split (getText) "#") 0 ))
     (addClass "selectButton" (+ select "button"))
     (addClass "reveal" (+ select "tab"))
[/script]


[/nobr]
 
Last edited:
Nano

Nano

artistic shrimp
Code: 
[nobr]



[div class="emain"]
     [div class="ewrap"]
          [div class="eicon"]
          [/div]
          [div class="edescription"]
               [div class="esubheader"]
                    Act 05: Versus
               [/div]
               [div class="etext"]
                    Decided to make a 2 character format for characters whose CSs I never got to complete in an RP by [USER=23601]@Aster[/USER] (hope you don't mind the tag). This was...a bit disappointing? I nearly had an aneurysm between keeping everything mobile friendly and trying to keep everything transitioning smoothly at the same time, so I feel like the results were a tad underwhelming for all that trouble. ; w ;

[br][/br][br][/br]

Anyway! The colors for this code are all extremely easy to change (edit them once in the "root" and it'll change them throughout the code) and all images are located directly in the CS, so there's no need to dig through the messy CSS portion! Please just make sure to insert the "spacer"/"triviaspacer" and line-breaks accordingly. Additionally, if there's still something funky going around or breaking, please inform me! Your feedback is greatly appreciated~

[br][/br][br][/br]

Update (4/03/2020): A friend mentioned the "top" button being too subtle, so I just did a quick edit so that you can press either the main image or "top" to revert it back to the 2 character screen.
               [/div]
               [div class="etags"]
                    [URL=https://pastebin.com/Jry4v8vj]CODE LINK[/URL][br][/br]
                    mobile friendly | character sheet | 2 character format | 4 tabs | scroll | nobr
               [/div]
          [/div]
     [/div]
[/div]


[comment]
     [font=Roboto].[/font]
     [font=Roboto Condensed].[/font]
[/comment]

[class name="emain"]
     box-sizing: border-box;
     margin: 0 auto 50px;
     padding: 20px;
     width: calc(100% - 40px);
     max-width: 600px;
     font-size: initial;
     background: #fdfdfd;
     border: 1px solid #eaeaea;
[/class]

[class name="ewrap"]
     display: flex;
     flex-flow: row wrap;
     margin-left: -20px;
     width: calc(100% + 20px);
[/class]

[class name="eicon"]
     flex: 1 0 150px;
     margin-left: 20px;
     width: 100%;
     max-width: 150px;
     max-height: 150px;
     background: url('https://dl.dropboxusercontent.com/s/6y45o6wdebuq8qe/EmmaIcon.jpg') top left/150px 225px no-repeat;
[/class]

[class name="edescription"]
     flex: 5 0 200px;
     margin-left: 20px;
     max-width: 400px;
[/class]

[class name="esubheader"]
     font-family: 'Roboto Condensed', sans-serif;
     font-size: 1.0em;
     color: #777777;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="etext"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.9em;
     color: #777777;
     line-height: 135%;
     text-align: justify;
[/class]

[class name="etags"]
     margin-top: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: 0.8em;
     line-height: 125%;
     color: #777777;
     text-align: justify;
[/class]








[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.
Asking for permission before use is very much appreciated!

Image Sources:
Shinrei Tantei Yakumo
hen-tie (artist)
[/comment]


[comment]--------------------CS Details--------------------[/comment]


[div class="root"]
     [div class="shell"]
          [div class="fullbg"]
               [div class="placeholder"]
                    [div class="placeholderA"]
                    [/div]
                    [div class="placeholderB"]
                    [/div]
               [/div]
          [/div]

[comment]---------- cover/landing page ----------[/comment]

          [div class="RIGHTimg" style="background: url('https://i.imgur.com/a6FZf6e.jpg') right top/900px 600px no-repeat;"]
          [/div]
          [div class="LEFTdivider"]
               [div class="LEFTimg" style="background: url('https://i.imgur.com/fR5peKI.jpg') center top/900px 600px no-repeat;"]
               [/div]
          [/div]
          [div class="bannerpos"]
               [div class="bannerwrap"]
                    [div class="nameplate"]
                         [div class="line"]
                         [/div]
                         [div class="name"]
                              [div=display: inline-block; visibility: hidden;].[/div]sette durante[div=display: inline-block; visibility: hidden;]x[/div]
                         [/div]
                    [/div]
                    [div class="banner7 hoveron7 hoveroff7 select7" style="background: url('https://i.imgur.com/IL2S2yL.jpg') 15% 100%/450px 150px no-repeat;"]
                    [/div]
                    [div class="bannerS hoveronS hoveroffS selectS" style="background: url('https://i.imgur.com/HSYpy17.jpg') 65% 0%/450px 150px no-repeat;"]
                    [/div]
                    [div class="nameplate"]
                         [div class="name"]
                              [div=display: inline-block; visibility: hidden;]x[/div]spica sokolova[div=display: inline-block; visibility: hidden;].[/div]
                         [/div]
                         [div class="line"]
                         [/div]
                    [/div]
               [/div]
          [/div]

[comment]---------- Character 1 CS starts here ----------[/comment]

          [div class="CSwrap7"]
               [div class="SetteWrap"]
                    [div class="SetteRight"]
                         [div class="MainWrap" style="border: 1px solid var(--border1);"]
                              [div class="MainIMG deselect7" style="background: url('https://i.imgur.com/TYNMvrx.jpg') center top/470px 470px no-repeat;"]
                              [/div]
                              [div class="SetteTabWrap"]
                                   [div class="tabwrap7"]
                                        [div class="home7 deselect7"]
                                             top
                                        [/div]
                                        [div class="tabs7 settemaintabs7 tabselect7"][div=display: none;]settemain#[/div]
                                             main
                                        [/div]
                                        [div class="tabs7 settestorytabs7"][div=display: none;]settestory#[/div]
                                             story
                                        [/div]
                                        [div class="tabs7 setteskillstabs7"][div=display: none;]setteskills#[/div]
                                             skills
                                        [/div]
                                        [div class="tabs7 setteextratabs7"][div=display: none;]setteextra#[/div]
                                             extra
                                        [/div]
                                   [/div]
                              [/div]
                         [/div]
                    [/div]
                    [div class="SetteLeft"]
                         [div class="SetteContentWrap"]
                              [div class="content7 settemaininfo7"]
                                   [div class="scrollbox"]

                                        [div class="settebox"]
                                             [div class="topcover7"]
                                             [/div]

                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       name
                                                  [/div]
                                                  [div class="answer7"]
                                                       sette durante
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       age
                                                  [/div]
                                                  [div class="answer7"]
                                                       nineteen
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       position
                                                  [/div]
                                                  [div class="answer7"]
                                                       student
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       gender
                                                  [/div]
                                                  [div class="answer7"]
                                                       male
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       sexuality
                                                  [/div]
                                                  [div class="answer7"]
                                                       ...
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       affiliation
                                                  [/div]
                                                  [div class="answer7"]
                                                       genesis
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       status
                                                  [/div]
                                                  [div class="answer7"]
                                                       initiated
                                                  [/div]
                                             [/div]

                                             [div class="bottomcover7"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="setteheader"]
                                             appearance
                                        [/div]
                                        [div class="settebody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="setteheader"]
                                             personality
                                        [/div]
                                        [div class="settebody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

                                             [br][/br][br][/br]

                                             Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.

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

                                   [/div]
                              [/div]


                              [div class="content7 settestoryinfo7 hidecontent7"]
                                   [div class="scrollbox"]
                                        [div class="settebox"]
                                             [div class="topcover7"]
                                             [/div]
                                             [div class="storyimage" style="background: url('https://i.imgur.com/WMhBX6w.jpg') right top/600px 200px no-repeat;"]
                                             [/div]
                                             [div class="bottomcover7"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="setteheader"]
                                             backstory
                                        [/div]
                                        [div class="settebody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

                                             [br][/br][br][/br]

                                             Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.

                                             [br][/br][br][/br]

                                             Nullam rhoncus, nisi eget suscipit tincidunt, odio erat tristique nisi, aliquet posuere eros mauris nec eros. Nulla aliquet tortor in diam tempus, eget tincidunt augue gravida. Maecenas eu nunc eu libero cursus egestas sed sed turpis. Pellentesque erat odio, molestie sit amet ante quis, feugiat faucibus tellus. Maecenas in luctus nibh.

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

                                   [/div]
                              [/div]
                              [div class="content7 setteskillsinfo7 hidecontent7"]
                                   [div class="scrollbox"]

                                        [div class="settebox"]
                                             [div class="topcover7"]
                                             [/div]

                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       anima
                                                  [/div]
                                                  [div class="answer7"]
                                                       reset (arcane)
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       insignia
                                                  [/div]
                                                  [div class="answer7"]
                                                       right collarbone
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       regalia
                                                  [/div]
                                                  [div class="answer7"]
                                                       pocket watch
                                                  [/div]
                                             [/div]
                                             [div class="listwrap7"]
                                                  [div class="question7"]
                                                       weaponry
                                                  [/div]
                                                  [div class="answer7"]
                                                       ???
                                                  [/div]
                                             [/div]

                                             [div class="bottomcover7"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="setteheader"]
                                             anima
                                        [/div]
                                        [div class="settebody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="setteheader"]
                                             weaknesses
                                        [/div]
                                        [div class="settebody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

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

                                   [/div]
                              [/div]


                              [div class="content7 setteextrainfo7 hidecontent7"]
                                   [div class="scrollbox"]
                                        [div class="setteheader"]
                                             trivia
                                        [/div]
                                        [div class="listwrap7"]
                                             [div class="topic7"]
                                                  likes:
                                             [/div]
                                             [div class="description7"]
                                                  instant food, plain bread, old buildings, literature, games, orderly workspaces, naps
                                             [/div]
                                        [/div]

                                        [div class="triviaspacer"]
                                        [/div]

                                        [div class="listwrap7"]
                                             [div class="topic7"]
                                                  dislikes:
                                             [/div]
                                             [div class="description7"]
                                                  his anima, sadists, training, sugar, leeks, mirrors, being praised
                                             [/div]
                                        [/div]

                                        [div class="triviaspacer"]
                                        [/div]

                                        [div class="listwrap7"]
                                             [div class="topic7"]
                                                  topic:
                                             [/div]
                                             [div class="description7"]
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat.
                                             [/div]
                                        [/div]

                                        [br][/br][br][/br]

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

[comment]---------- Character 1 CS ends here ----------[/comment]

[comment]---------- Character 2 CS starts here ----------[/comment]

          [div class="CSwrapS"]
               [div class="SpicaWrap"]
                    [div class="SpicaLeft"]
                         [div class="MainWrap" style="border: 1px solid var(--border2);"]
                              [div class="MainIMG deselectS" style="background: url('https://i.imgur.com/noav5BV.jpg') center top/470px 470px no-repeat;"]
                              [/div]
                              [div class="SpicaTabWrap"]
                                   [div class="tabwrapS"]
                                        [div class="homeS deselectS"]
                                             top
                                        [/div]
                                        [div class="tabsS spicamaintabsS tabselectS"][div=display: none;]spicamain#[/div]
                                             main
                                        [/div]
                                        [div class="tabsS spicastorytabsS"][div=display: none;]spicastory#[/div]
                                             story
                                        [/div]
                                        [div class="tabsS spicaskillstabsS"][div=display: none;]spicaskills#[/div]
                                             skills
                                        [/div]
                                        [div class="tabsS spicaextratabsS"][div=display: none;]spicaextra#[/div]
                                             extra
                                        [/div]
                                   [/div]
                              [/div]
                         [/div]
                    [/div]
                    [div class="SpicaRight"]
                         [div class="SpicaContentWrap"]
                              [div class="contentS spicamaininfoS"]
                                   [div class="scrollbox"]

                                        [div class="spicabox"]
                                             [div class="topcoverS"]
                                             [/div]

                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       name
                                                  [/div]
                                                  [div class="answerS"]
                                                       spica sokolova
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       age
                                                  [/div]
                                                  [div class="answerS"]
                                                       sixteen
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       position
                                                  [/div]
                                                  [div class="answerS"]
                                                       student
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       gender
                                                  [/div]
                                                  [div class="answerS"]
                                                       female
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       sexuality
                                                  [/div]
                                                  [div class="answerS"]
                                                       ¯\_(ツ)_/¯
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       affiliation
                                                  [/div]
                                                  [div class="answerS"]
                                                       pandora
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       status
                                                  [/div]
                                                  [div class="answerS"]
                                                       initiated
                                                  [/div]
                                             [/div]

                                             [div class="bottomcoverS"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="spicaheader"]
                                             appearance
                                        [/div]
                                        [div class="spicabody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="spicaheader"]
                                             personality
                                        [/div]
                                        [div class="spicabody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

                                             [br][/br][br][/br]

                                             Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.

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

                                   [/div]
                              [/div]


                              [div class="contentS spicastoryinfoS hidecontentS"]
                                   [div class="scrollbox"]

                                        [div class="spicabox"]
                                             [div class="topcoverS"]
                                             [/div]
                                             [div class="storyimage" style="background: url('https://i.imgur.com/edUxCeL.jpg') center top/600px 200px no-repeat;"]
                                             [/div]
                                             [div class="bottomcoverS"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="spicaheader"]
                                             backstory
                                        [/div]
                                        [div class="spicabody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

                                             [br][/br][br][/br]

                                             Suspendisse maximus iaculis ante, et rutrum urna lobortis sed. Praesent elementum sit amet tellus non pretium. Fusce quis diam fringilla, placerat est nec, pulvinar nisl. Etiam mauris ligula, facilisis vitae sapien a, sodales hendrerit dolor. Donec ut justo condimentum, laoreet risus eu, tincidunt metus. Sed pharetra at nulla vitae placerat. Sed mi elit, iaculis in felis sed, facilisis commodo sapien.

                                             [br][/br][br][/br]

                                             Nullam rhoncus, nisi eget suscipit tincidunt, odio erat tristique nisi, aliquet posuere eros mauris nec eros. Nulla aliquet tortor in diam tempus, eget tincidunt augue gravida. Maecenas eu nunc eu libero cursus egestas sed sed turpis. Pellentesque erat odio, molestie sit amet ante quis, feugiat faucibus tellus. Maecenas in luctus nibh.

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

                                   [/div]
                              [/div]


                              [div class="contentS spicaskillsinfoS hidecontentS"]
                                   [div class="scrollbox"]

                                        [div class="spicabox"]
                                             [div class="topcoverS"]
                                             [/div]

                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       anima
                                                  [/div]
                                                  [div class="answerS"]
                                                       acceleration (arcane)
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       insignia
                                                  [/div]
                                                  [div class="answerS"]
                                                       nape
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       regalia
                                                  [/div]
                                                  [div class="answerS"]
                                                       ???
                                                  [/div]
                                             [/div]
                                             [div class="listwrapS"]
                                                  [div class="questionS"]
                                                       weaponry
                                                  [/div]
                                                  [div class="answerS"]
                                                       various
                                                  [/div]
                                             [/div]

                                             [div class="bottomcoverS"]
                                             [/div]
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="spicaheader"]
                                             anima
                                        [/div]
                                        [div class="spicabody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.
                                        [/div]

                                        [div class="spacer"]
                                        [/div]

                                        [div class="spicaheader"]
                                             weaknesses
                                        [/div]
                                        [div class="spicabody"]
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat. Proin varius convallis libero, eu maximus ligula efficitur sed. In massa mauris, posuere gravida massa et, semper porta dui. Nam tincidunt vestibulum mauris. Pellentesque enim mauris, ultricies sed congue vitae, sagittis vitae ipsum. Donec augue nunc, convallis sed erat id, sollicitudin hendrerit turpis. Ut quis nunc auctor, imperdiet magna ut, mollis felis. Aliquam erat volutpat.

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

                                   [/div]
                              [/div]


                              [div class="contentS spicaextrainfoS hidecontentS"]
                                   [div class="scrollbox"]

                                        [div class="spicaheader"]
                                             trivia
                                        [/div]
                                        [div class="listwrapS"]
                                             [div class="topicS"]
                                                  likes:
                                             [/div]
                                             [div class="descriptionS"]
                                                  juice, interesting things, bears, collecting bottle caps
                                             [/div]
                                        [/div]

                                        [div class="triviaspacer"]
                                        [/div]

                                        [div class="listwrapS"]
                                             [div class="topicS"]
                                                  dislikes:
                                             [/div]
                                             [div class="descriptionS"]
                                                  nothing in particular
                                             [/div]
                                        [/div]

                                        [div class="triviaspacer"]
                                        [/div]

                                        [div class="listwrapS"]
                                             [div class="topicS"]
                                                  topic:
                                             [/div]
                                             [div class="descriptionS"]
                                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra venenatis turpis varius maximus. Integer a orci sit amet enim sagittis sollicitudin quis ut erat.
                                             [/div]
                                        [/div]

                                        [br][/br][br][/br]

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

[comment]---------- Character 2 CS ends here ----------[/comment]

     [/div]
[/div]
[div=margin: -5px auto 25px; width: 100%; max-width: 900px; text-align: right; opacity: 0.5;][size=1]code by [USER=20950]@Nano[/USER][color=transparent]x[/color][/size][/div]


[comment]
     [font=Playfair Display]font[/font]
     [font=Roboto]font[/font]
[/comment]


[comment]--------------------CSS--------------------[/comment]


[comment]IMPORTANT NOTE: please edit colors through the accents in the "root" (e.g. --bg1, --bg2, etc). If you choose to touch the other divs and break the code, I may offer my assistance, but I am under no obligation to help you fix it if I'm too busy/tired to.[/comment]

[class name="root"]
     --bg1: #222222;
     --bg2: #fdfdfd;
     --line: #cccccc;
     --border1: #aaaaaa;
     --border2: #dadada;
     --color1: #f2f2f2;
     --color2: #929292;
     --accent1: #9fa4c4;
     --accent2: #ffb6c1;
     --hfont: 'Playfair Display', serif;
     --hsize: 2.0em;
     --bfont: 'Roboto', sans-serif;
     --bsize: .9em;
[/class]

[class name="shell" minWidth=750px]
     margin: 0 auto;
     width: 100%;
     max-width: 900px;
     max-height: 600px;
     background: var(--bg2);
     position: relative;
     font-size: initial;
     overflow: hidden;
     transition: max-height 1s ease-in-out .3s, width 1s ease-in-out .3s;
[/class]

[class name="shell" maxWidth=749px]
     margin: 0 auto;
     width: 100%;
     max-width: 900px;
     max-height: 450px;
     background: var(--bg2);
     position: relative;
     font-size: initial;
     overflow: hidden;
     transition: max-height 1s ease-in-out .3s, width 1s ease-in-out .3s;
[/class]

[class name="shellexpand" minWidth=750px]
     max-height: 1200px;
     transition: height 1s ease-in-out 5.3s, max-height 1s ease-in-out 5.3s;
[/class]

[class name="shellexpand" maxWidth=749px]
     max-height: 900px;
     transition: height 1s ease-in-out 5.3s, max-height 1s ease-in-out 5.3s;
[/class]

[class name="fullbg" minWidth=750px]
     width: 0;
     max-height: 600px;
     background: var(--bg1);
     position: absolute;
     transition: width 1.7s ease-in-out 1.6s, max-height 1s ease-in-out .3s;
[/class]

[class name="fullbg" maxWidth=749px]
     width: 0;
     max-height: 450px;
     background: var(--bg1);
     position: absolute;
     transition: width 1.7s ease-in-out 1.6s, max-height 1s ease-in-out .3s;
[/class]

[class name="bgexpand" minWidth=750px]
     width: 100%;
     max-height: 1200px;
     transition: width 1.7s ease-in-out .9s, max-height 1s ease-in-out 5.3s;
[/class]

[class name="bgexpand" maxWidth=749px]
     width: 100%;
     max-height: 900px;
     transition: width 1.7s ease-in-out .9s, max-height 1s ease-in-out 5.3s;
[/class]

[class name="LEFTdivider" minWidth=750px]
     left: 0;
     width: 75%;
     height: 600px;
     max-height: 600px;
     background: var(--bg1);
     overflow: hidden;
     clip-path: polygon(0 0, 100% 0%, 30% 100%, 0% 100%);
     position: absolute;
     transition: left 1.7s ease-in-out 1.5s;
[/class]

[class name="LEFTdivider" maxWidth=749px]
     left: 0;
     width: 75%;
     height: 450px;
     max-height: 450px;
     background: var(--bg1);
     overflow: hidden;
     clip-path: polygon(0 0, 100% 0%, 30% 100%, 0% 100%);
     position: absolute;
     transition: left 1.7s ease-in-out 1.5s;
[/class]

[class name="LEFTslide1"]
     left: 100%;
     transition: left 1.7s ease-in-out 1s;
[/class]

[class name="RIGHTslide1"]
     left: -100%;
     transition: left 1.7s ease-in-out 1s;
[/class]

[class name="LEFTimg" minWidth=750px]
     width: 100%;
     height: 600px;
     max-height: 600px;
     opacity: 0;
     position: absolute;
     transition: opacity .7s ease-in-out;
[/class]

[class name="LEFTimg" maxWidth=749px]
     width: 100%;
     height: 450px;
     max-height: 450px;
     opacity: 0;
     position: absolute;
     transition: opacity .7s ease-in-out;
[/class]

[class name="RIGHTimg" minWidth=750px]
     width: 100%;
     height: 600px;
     max-height: 600px;
     opacity: 0;
     position: absolute;
     transition: opacity .7s ease-in-out;
[/class]

[class name="RIGHTimg" maxWidth=749px]
     width: 100%;
     height: 450px;
     max-height: 450px;
     opacity: 0;
     position: absolute;
     transition: opacity .7s ease-in-out;
[/class]

[class name="GETimg"]
     opacity: .1;
     transition: opacity .7s ease-in-out;
[/class]

[class name="bannerpos" minWidth=750px]
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     max-width: 900px;
     height: 600px;
     max-height: 600px;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out 3.5s, height .1s ease-in-out 1.3s, max-height .1s ease-in-out 1.3s, width .1s ease-in-out 3.4s;
[/class]

[class name="bannerpos" maxWidth=749px]
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     max-width: 900px;
     height: 450px;
     max-height: 450px;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out 3.5s, height .1s ease-in-out 1.3s, max-height .1s ease-in-out 1.3s, width .1s ease-in-out 3.4s;
[/class]

[class name="bannerwrap"]
     margin: 0 10px;
     flex: 1;
     max-width: 450px;
     width: calc(100% - 20px);
     height: 385px;
     overflow: hidden;
[/class]

[class name="nameplate"]
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 25px;
[/class]

[class name="name"]
     margin-top: -7px;
     flex: 0 1 auto;
     height: 20px;
     font-family: var(--hfont);
     font-size: 25px;
     font-weight: bold;
     text-transform: lowercase;
     line-height: 100%;
     color: var(--bg1);
     text-shadow:
          -1px -1px 1px var(--bg2),
          1px -1px 1px var(--bg2),
          -1px 1px 1px var(--bg2),
          1px 1px 1px var(--bg2);
     position: relative;
[/class]

[class name="line"]
     margin-top: 5px;
     flex: 1;
     height: 1px;
     background: var(--line);
     position: relative;
[/class]

[class name="namefade"]
     opacity: 0;
     transition: opacity .5s ease-in-out .2s;
[/class]

[class name="banner7"]
     top: 0;
     right: 0;
     margin-top: 10px;
     width: 100%;
     height: 150px;
     filter: grayscale(100%);
     transition: filter .7s ease-in-out;
     cursor: pointer;
     position: relative;
[/class]

[class name="bannerS"]
     top: 0;
     left: 0;
     margin-top: 15px;
     margin-bottom: 5px; 
     width: 100%;
     height: 150px;
     filter: grayscale(100%);
     transition: filter .7s ease-in-out;
     cursor: pointer;
     position: relative;
[/class]

[class name="bannercolor"]
     filter: grayscale(0%);
     transition: filter .7s ease-in-out;
[/class]

[class name="bannercolor2"]
     filter: grayscale(0%);
[/class]

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

[class name="bannershift7"]
     right: -100%;
     transition: right 1.7s ease-in-out 1s;
[/class]

[class name="bannershift7v2"]
     top: 82px;
     transition: top 1s ease-in-out 2.7s;
[/class]

[class name="bannershiftS"]
     left: -100%;
     transition: left 1.7s ease-in-out 1s;
[/class]

[class name="bannershiftSv2"]
     top: -82px;
     transition: top 1s ease-in-out 2.7s;
[/class]

[class name="covererase"]
     height: 0;
     max-height: 0;
     width: 0;
     opacity: 0;
     transition: opacity 1s ease-in-out 4.0s, height .1s ease-in-out 5s, max-height 0.1s ease-in-out 5s, width .1s ease-in-out 5s;
[/class]

[class name="CSwrap7" minWidth=750px]
     margin: 0 auto;
     width: calc(100% - 100px);
     max-width: 800px;
     opacity: 0;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
     font-size: initial;
[/class]

[class name="CSwrap7" maxWidth=749px]
     box-sizing: border-box;
     margin: 0 auto;
     width: calc(100% - 20px);
     opacity: 0;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
     font-size: initial;
[/class]

[class name="CSwrapS" minWidth=750px]
     margin: 0 auto;
     width: calc(100% - 100px);
     max-width: 800px;
     opacity: 0;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
     font-size: initial;
[/class]

[class name="CSwrapS" maxWidth=749px]
     margin: 0 auto;
     width: calc(100% - 20px);
     opacity: 0;
     position: relative;
     z-index: 1;
     transition: opacity 1s ease-in-out .3s, margin .1s ease-in-out 1.4s;
     font-size: initial;
[/class]

[class name="CSwrapshow" minWidth=750px]
     margin: 50px auto;
     opacity: 1;
     transition: opacity 1s ease-in-out 5.3s, margin .1s ease-in-out 5s;
[/class]

[class name="CSwrapshow" maxWidth=749px]
     margin: 15px auto;
     opacity: 1;
     transition: opacity 1s ease-in-out 5.3s, margin .1s ease-in-out 5s;
[/class]

[class name="placeholder" minWidth=750px]
     box-sizing: border-box;
     visibility: hidden;
     display: flex;
     visibility: visible;
     flex-flow: row-reverse wrap;
     justify-content: center;
     margin-left: -15px;
     padding: 50px;
     height: auto;
[/class]

[class name="placeholder" maxWidth=749px]
     box-sizing: border-box;
     visibility: hidden;
     display: flex;
     visibility: visible;
     flex-flow: row-reverse wrap;
     justify-content: center;
     margin-top: -15px;
     margin-left: -15px;
     padding: 10px;
     height: auto;
[/class]

[class name="placeholderA" minWidth=750px]
     margin-top: 15px;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 500px;
[/class]

[class name="placeholderA" maxWidth=749px]
     margin-top: 15px;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 425px;
[/class]

[class name="placeholderB" minWidth=750px]
     margin-top: 15px;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 500px;
[/class]

[class name="placeholderB" maxWidth=749px]
     margin-top: 10px;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 430px;
[/class]

[class name="SetteWrap"]
     display: flex;
     flex-flow: row-reverse wrap;
     justify-content: center;
     margin-top: 0;
     margin-left: -15px;
     transition: margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SetteRight" minWidth=750px]
     margin-top: 0;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 0;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SetteRight" maxWidth=749px]
     margin-top: 0;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 0;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SetteLeft" minWidth=750px]
     box-sizing: border-box;
     margin-top: 0;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 0;
     overflow: hidden;
     position: relative;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SetteLeft" maxWidth=749px]
     box-sizing: border-box;
     margin-top: 0;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 0;
     overflow: hidden;
     position: relative;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="MainWrap"]
     box-sizing: border-box;
     padding: 14px;
     width: 100%;
     position: relative;
[/class]

[class name="MainIMG" minWidth=750px]
     width: 100%;
     height: 470px;
     cursor: pointer;
[/class]

[class name="MainIMG" maxWidth=749px]
     width: 100%;
     height: 395px;
     cursor: pointer;
[/class]

[class name="SetteTabWrap"]
     bottom: -6px;
     right: 14px;
     padding: 0 8px;
     height: 11px;
     background: var(--bg1);
     border-left: 1px solid var(--border1);
     border-right: 1px solid var(--border1);
     position: absolute;
[/class]

[class name="tabwrap7"]
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     margin-top: -1px;
     margin-left: -8px;
     height: 11px;
     font-family: var(--bfont);
     font-size: 13px;
     line-height: 100%;
     text-transform: uppercase;
[/class]

[class name="home7"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--color1);
     cursor: pointer;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="home7" state="hover"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--accent1);
     cursor: pointer;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabs7"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--color1);
     cursor: pointer;
     pointer-events: auto;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabs7" state="hover"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--accent1);
     cursor: pointer;
     pointer-events: auto;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabselect7"]
     color: var(--accent1);
     pointer-events: none;
     cursor: auto;
     transition: color .1s ease-in-out;
[/class]

[class name="SetteContentWrap" minWidth=750px]
     left: -100%;
     width: 100%;
     height: 500px;
     overflow: hidden;
     position: relative;
     transition: left .1s ease-in-out 1.5s;
[/class]

[class name="SetteContentWrap" maxWidth=749px]
     left: -100%;
     width: 100%;
     height: 430px;
     overflow: hidden;
     position: relative;
     transition: left .1s ease-in-out 1.5s;
[/class]

[class name="RIGHTslide2"]
     left: 0;
     transition: left 1s ease-in-out 6.3s;
[/class]

[class name="content7"]
     left: 0;
     width: 100%;
     height: inherit;
     overflow: hidden;;
     position: absolute;
     transition: left 1s ease-in-out 1.4s;
[/class]

[class name="hidecontent7"]
     left: -100%;
     transition: left 1s ease-in-out .2s;
[/class]

[class name="scrollbox"]
     padding-right: 20px;
     width: 100%;
     height: inherit;
     overflow-y: auto;
     position: relative;
[/class]

[class name="settebox"]
     box-sizing: border-box;
     padding: 14px;
     width: 100%;
     border: 1px solid var(--border1);
     position: relative;
[/class]

[class name="topcover7"]
     top: -1px;
     left: 20px;
     right: 20px;
     width: calc(100% - 40px);
     height: 1px;
     background: var(--bg1);
     position: absolute;
[/class]

[class name="bottomcover7"]
     bottom: -1px;
     left: 20px;
     right: 20px;
     width: calc(100% - 40px);
     height: 1px;
     background: var(--bg1);
     position: absolute;
[/class]

[class name="listwrap7"]
     display: flex;
     flex-flow: row wrap;
     width: 100%;
[/class]

[class name="question7"]
     flex: 1 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--accent1);
     line-height: 125%;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="answer7"]
     flex: 5 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color1);
     line-height: 125%;
     text-transform: uppercase;
[/class]

[class name="spacer"]
     height: 25px;
[/class]

[class name="setteheader"]
     margin-bottom: 10px;
     font-family: var(--hfont);
     font-size: var(--hsize);
     color: var(--accent1);
     line-height: 100%;
     font-weight: bold;
     text-transform: lowercase;
[/class]

[class name="settebody"]
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color1);
     line-height: 150%;
     text-align: justify;
[/class]

[class name="storyimage"]
     width: 100%;
     height: 200px;
     overflow: hidden;
[/class]

[class name="topic7"]
     flex: 1 0 50px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--accent1);
     line-height: 125%;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="description7"]
     flex: 10 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color1);
     line-height: 125%;
     text-align: justify;
[/class]

[class name="triviaspacer"]
     height: 10px;
[/class]

[class name="SpicaWrap"]
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin-top: 0;
     margin-left: -15px;
     transition: margin-top .1s ease-in-out 1.4s
[/class]

[class name="SpicaLeft" minWidth=750px]
     margin-top: 0;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 0;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SpicaLeft" maxWidth=749px]
     margin-top: 0;
     margin-left: 15px;
     flex: 1 0 250px;
     width: 100%;
     height: 0;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SpicaRight" minWidth=750px]
     box-sizing: border-box;
     margin-top: 0;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 0;
     overflow: hidden;scro
     position: relative;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SpicaRight" maxWidth=749px]
     box-sizing: border-box;
     margin-top: 0;
     margin-left: 15px;
     flex: 2 0 300px;
     width: calc(100% - 15px);
     height: 0;
     overflow: hidden;
     position: relative;
     transition: height .1s ease-in-out 1.4s, margin-top .1s ease-in-out 1.4s;
[/class]

[class name="SpicaContentWrap" minWidth=750px]
     right: -100%;
     width: 100%;
     height: 500px;
     overflow: hidden;
     position: relative;
     transition: right .1s ease-in-out 1.5s;
[/class]

[class name="SpicaContentWrap" maxWidth=749px]
     right: -100%;
     width: 100%;
     height: 430px;
     overflow: hidden;
     position: relative;
     transition: right .1s ease-in-out 1.5s;
[/class]

[class name="LEFTslide2"]
     right: 0;
     transition: right 1s ease-in-out 6.3s;
[/class]

[class name="contentS"]
     right: 0;
     width: 100%;
     height: inherit;
     overflow: hidden;;
     position: absolute;
     transition: right 1s ease-in-out 1.4s;
[/class]

[class name="hidecontentS"]
     right: -100%;
     transition: right 1s ease-in-out .2s;
[/class]

[class name="SpicaTabWrap"]
     bottom: -6px;
     padding: 0 8px;
     height: 11px;
     background: var(--bg2);
     border-left: 1px solid var(--border2);
     border-right: 1px solid var(--border2);
     position: absolute;
[/class]

[class name="tabwrapS"]
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     align-items: center;
     margin-left: -8px;
     height: 11px;
     font-family: var(--bfont);
     font-size: 13px;
     line-height: 0;
     text-transform: uppercase;
[/class]

[class name="homeS"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--color2);
     cursor: pointer;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="homeS" state="hover"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--accent2);
     cursor: pointer;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabsS"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--color2);
     cursor: pointer;
     pointer-events: auto;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabsS" state="hover"]
     margin-left: 8px;
     flex: 0 1 auto;
     color: var(--accent2);
     cursor: pointer;
     pointer-events: auto;
     transition: color .5s ease-in-out .1s;
[/class]

[class name="tabselectS"]
     color: var(--accent2);
     pointer-events: none;
     cursor: auto;
     transition: color .1s ease-in-out;
[/class]

[class name="spicabox"]
     box-sizing: border-box;
     padding: 14px;
     width: 100%;
     border: 1px solid var(--border2);
     position: relative;
[/class]

[class name="topcoverS"]
     top: -1px;
     left: 20px;
     right: 20px;
     width: calc(100% - 40px);
     height: 1px;
     background: var(--bg2);
     position: absolute;
[/class]

[class name="bottomcoverS"]
     bottom: -1px;
     left: 20px;
     right: 20px;
     width: calc(100% - 40px);
     height: 1px;
     background: var(--bg2);
     position: absolute;
[/class]

[class name="listwrapS"]
     display: flex;
     flex-flow: row wrap;
     width: 100%;
[/class]

[class name="questionS"]
     flex: 1 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--accent2);
     line-height: 125%;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="answerS"]
     flex: 5 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color2);
     line-height: 125%;
     text-transform: uppercase;
[/class]

[class name="spicaheader"]
     margin-bottom: 10px;
     font-family: var(--hfont);
     font-size: var(--hsize);
     color: var(--accent2);
     line-height: 100%;
     font-weight: bold;
     text-transform: lowercase;
[/class]

[class name="spicabody"]
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color2);
     line-height: 150%;
     text-align: justify;
[/class]

[class name="topicS"]
     flex: 1 0 50px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--accent2);
     line-height: 125%;
     font-weight: bold;
     text-transform: uppercase;
[/class]

[class name="descriptionS"]
     flex: 10 0 100px;
     font-family: var(--bfont);
     font-size: var(--bsize);
     color: var(--color2);
     line-height: 125%;
     text-align: justify;
[/class]

[class name="wraptrans"]
     margin-top: -15px;
     transition: margin-top .1s ease-in-out 5s;
[/class]

[class name="sideshow" minWidth=750px]
     margin-top: 15px;
     height: 500px;
     transition: height .1s ease-in-out 5s, margin-top .1s ease-in-out 5s;
[/class]

[class name="sideshow" maxWidth=749px]
     margin-top: 15px;
     height: 420px;
     transition: height .1s ease-in-out 5s, margin-top .1s ease-in-out 5s;
[/class]


[comment]--------------------SCRIPTS--------------------[/comment]


[script class="hoveron7" on=mouseenter]
     addClass "bannercolor" "banner7"
     addClass "GETimg" "LEFTimg"
[/script]

[script class="hoveroff7" on=mouseleave]
     removeClass "bannercolor" "banner7"
     removeClass "GETimg" "LEFTimg"
[/script]

[script class="hoveronS" on=mouseenter]
     addClass "bannercolor" "bannerS"
     addClass "GETimg" "RIGHTimg"
[/script]

[script class="hoveroffS" on=mouseleave]
     removeClass "bannercolor" "bannerS"
     removeClass "GETimg" "RIGHTimg"
[/script]

[script class="select7" on=click]
     removeClass "GETimg" "LEFTimg"

     addClass "nonselect" "banner7"
     addClass "nonselect" "bannerS"
     addClass "bannercolor2" "banner7"
     addClass "bannershift7v2" "banner7"
     addClass "covererase" "bannerpos"

     addClass "LEFTslide1" "LEFTdivider"
     addClass "bgexpand" "fullbg"

     addClass "namefade" "nameplate"
     addClass "bannershiftS" "bannerS"

     addClass "CSwrapshow" "CSwrap7"

     addClass "shellexpand" "shell"

     addClass "wraptrans" "SetteWrap"
     addClass "sideshow" "SetteRight"
     addClass "sideshow" "SetteLeft"
     addClass "RIGHTslide2" "SetteContentWrap"
[/script]

[script class="deselect7" on=click]
     removeClass "nonselect" "banner7"
     removeClass "nonselect" "bannerS"
     removeClass "bannercolor2" "banner7"
     removeClass "bannershift7v2" "banner7"
     removeClass "covererase" "bannerpos"

     removeClass "LEFTslide1" "LEFTdivider"
     removeClass "bgexpand" "fullbg"

     removeClass "namefade" "nameplate"
     removeClass "bannershiftS" "bannerS"

     removeClass "CSwrapshow" "CSwrap7"

     removeClass "shellexpand" "shell"

     removeClass "wraptrans" "SetteWrap"
     removeClass "sideshow" "SetteRight"
     removeClass "sideshow" "SetteLeft"
     removeClass "RIGHTslide2" "SetteContentWrap"
[/script]

[script class="tabs7" version=2]
     (= select "settemain")
[/script]
[script class="tabs7" version=2 on=click]
     (addClass "hidecontent7" "content7")
     (removeClass "tabselect7" "tabs7")

     (= select (index (split (getText) "#") 0 ))

     (addClass "tabselect7" (+ select "tabs7"))
     (removeClass "hidecontent7" (+ select "info7"))
[/script]

[script class="selectS" on=click]
     removeClass "GETimg" "RIGHTimg"

     addClass "nonselect" "banner7"
     addClass "nonselect" "bannerS"
     addClass "bannercolor2" "bannerS"
     addClass "bannershiftSv2" "bannerS"
     addClass "covererase" "bannerpos"

     addClass "RIGHTslide1" "LEFTdivider"

     addClass "namefade" "nameplate"
     addClass "bannershift7" "banner7"

     addClass "CSwrapshow" "CSwrapS"

     addClass "shellexpand" "shell"

     addClass "wraptrans" "SpicaWrap"
     addClass "sideshow" "SpicaRight"
     addClass "sideshow" "SpicaLeft"
     addClass "LEFTslide2" "SpicaContentWrap"
[/script]

[script class="deselectS" on=click]
     removeClass "nonselect" "banner7"
     removeClass "nonselect" "bannerS"
     removeClass "bannercolor2" "bannerS"
     removeClass "bannershiftSv2" "bannerS"
     removeClass "covererase" "bannerpos"

     removeClass "RIGHTslide1" "LEFTdivider"

     removeClass "namefade" "nameplate"
     removeClass "bannershift7" "banner7"

     removeClass "CSwrapshow" "CSwrapS"

     removeClass "shellexpand" "shell"

     removeClass "wraptrans" "SpicaWrap"
     removeClass "sideshow" "SpicaRight"
     removeClass "sideshow" "SpicaLeft"
     removeClass "LEFTslide2" "SpicaContentWrap"
[/script]

[script class="tabsS" version=2]
     (= select "spicamain")
[/script]
[script class="tabsS" version=2 on=click]
     (addClass "hidecontentS" "contentS")
     (removeClass "tabselectS" "tabsS")

     (= select (index (split (getText) "#") 0 ))

     (addClass "tabselectS" (+ select "tabsS"))
     (removeClass "hidecontentS" (+ select "infoS"))
[/script]


[/nobr]
 
Last edited:
Ayama

Ayama

Enthusiast
[div=display: inline-block; margin: 0px auto; width: auto; max-width: 550px; border-left: 2px solid #45b39d; border-right: 2px solid #45b39d; padding: 10px; text-align: justify; color: #0e6251;]Nano I am in love your codes are amazing ~_~[/div]​
 
Aster

Aster

travelling satelite
LOL I thought u tagged me in a RP IC at first Nano Nano Seeing Sette and Spica is so nostalgic ;;o;; <3<3

also... the letters code reminds me of Ikigai too ;;;;; let me just... weep for a bit over my dead rps
 
Nano

Nano

artistic shrimp
Ayama said:
[div=display: inline-block; margin: 0px auto; width: auto; max-width: 550px; border-left: 2px solid #45b39d; border-right: 2px solid #45b39d; padding: 10px; text-align: justify; color: #0e6251;]Nano I am in love your codes are amazing ~_~[/div]​
Click to expand...
thankies~ and long time no see!

Aster said:
LOL I thought u tagged me in a RP IC at first Nano Nano Seeing Sette and Spica is so nostalgic ;;o;; <3<3

also... the letters code reminds me of Ikigai too ;;;;; let me just... weep for a bit over my dead rps
Click to expand...
oop- mb :'''D and yepppp I took a look at the timestamps and was super surprised to see that I tried to join Insignia almost 2 years ago?!

ngl I would have used that code for ikigai if I had it back then ; w ; let's keep mna going strong!
 
Ayama

Ayama

Enthusiast
Nano said:
thankies~ and long time no see!
Click to expand...
[div=display: inline-block; margin: 0px auto; width: auto; max-width: 550px; border-left: 2px solid #45b39d; border-right: 2px solid #45b39d; padding: 10px; text-align: justify; color: #0e6251;]Haha yeah- how're things with you? :3[/div]​
 
Nano

Nano

artistic shrimp
act 06: re:suzunari
mobile friendly | in character post | scroll | link
Heyo~ Nano here again with my (hopefully) mobile friendly codes. Most of the codes in here are going to get nuked after...June 3rd I believe? In any case, I'm too lazy to make another freebie thread, so I'll still be posting my new stuff here. Just note that anything without this version of the code description (versus the old white one) is outdated and shouldn't be used!

The lack of a nobr tag and classes are going to make my codes look much more messy, so please bear with me ; - ; This code is just a reduxed version of Act 02: Suzunari, so it's nothing new, but please use this in the place of the old version!!! Unfortunately, I'm not going to be able to remake the CS that's paired with it...

鈴鳴盛夏
suzunari seika
location
blep
tags
blep
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie dictum risus, vel tincidunt urna iaculis id. Morbi sit amet augue finibus, viverra velit in, egestas tellus. Vivamus quis scelerisque mi, at ornare odio. Donec eget cursus nisl. Aenean suscipit, purus nec fringilla imperdiet, massa arcu malesuada turpis, quis consequat justo odio nec velit. Vestibulum dui ante, aliquet ut nisl nec, vulputate efficitur justo. Cras eros arcu, ultrices ac scelerisque accumsan, posuere vitae nisi. Donec eleifend porta vehicula. Morbi et aliquam justo, facilisis luctus elit. Suspendisse vel lacus rhoncus, tincidunt leo ut, maximus sem. Sed id quam non nisl vehicula finibus. Nullam eleifend sit amet purus id pulvinar. In hac habitasse platea dictumst. Donec gravida neque ac dolor bibendum varius porta at urna. Nullam lacinia tempor augue, at iaculis urna posuere quis. Praesent quis tellus malesuada, malesuada mi at, consequat libero.

Ut malesuada dignissim risus non congue. Suspendisse tristique sapien enim, ut rutrum urna interdum et. Sed feugiat orci sed nulla ultricies rhoncus sed eu tellus. Maecenas gravida porttitor turpis eget dapibus. Mauris ac tortor mauris. Ut posuere non magna in eleifend. Nunc a mauris vulputate, facilisis lectus eu, ultricies augue. Aenean eget rhoncus magna, nec interdum velit. Cras vel urna ut ligula condimentum venenatis. Praesent posuere urna non ullamcorper viverra. Fusce aliquam, ante nec facilisis commodo, urna turpis tincidunt neque, ac fringilla ipsum nunc sit amet tortor.

Fusce in dolor elementum, euismod tellus et, placerat diam. Nam scelerisque ante sed odio mattis, at placerat lorem rutrum. Nullam in lacinia nisi. Aenean varius commodo arcu, sed laoreet neque tempor auctor. Vestibulum lobortis tincidunt neque. Quisque fringilla metus eget rutrum ornare. Maecenas euismod urna libero, et blandit leo pulvinar et.
code by Nano Nano
 
Last edited:
Nano

Nano

artistic shrimp
act 07: post-script
mobile friendly | in character post | noscroll | link
Double posting because I can >3>

This code is also fairly straightforward. You're going to want to ctrl+f "jpg" for the image and "#a6c7a7" to change the accent color. Or you could keep the accent color if that's what you prefer. xd It's a lot less convenient compared to when we had bbc+, but oh well...



» ruri izuhara
『 TAGGED 』 Nano Nano
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis dolor id quam posuere fringilla eu vitae magna. Nunc non metus nec ante posuere tempus ac bibendum libero. Praesent sit amet eros sollicitudin nulla lacinia dictum eget et nunc. Sed ultricies ullamcorper faucibus. Phasellus placerat justo vitae nisl sollicitudin, eu varius risus cursus. In varius finibus mauris a semper. Aenean a dolor egestas, fermentum nunc sed, condimentum lorem. Sed ex massa, pretium sed erat viverra, blandit semper enim. Nam quis libero non nibh auctor sagittis et non mi. Suspendisse non magna quis tortor commodo ornare.

"Mauris cursus sed tellus nec mattis." Sed non iaculis diam. Proin ultricies justo quis vehicula placerat. Nullam congue lorem eu augue dignissim sodales. Sed neque urna, posuere ac efficitur ut, mollis quis justo. Nullam ut nulla massa. Vivamus dolor nisi, tristique eu lobortis id, venenatis sed leo.

Nulla facilisi. Donec suscipit ut justo eleifend viverra. Vivamus mauris nisl, feugiat et rutrum feugiat, venenatis sit amet nisi. Etiam aliquet enim nec diam hendrerit dignissim. Duis facilisis mollis tincidunt. Donec euismod pretium semper. Donec nec lectus sit amet arcu convallis imperdiet. In est nisi, posuere nec blandit eget, egestas luctus dui.
code by Nano Nano
 
Last edited:
Nano

Nano

artistic shrimp
act 08: scribbled on
mobile friendly | character sheet | scroll | link
Finally back with my first character sheet template since the third(?) codepocalypse x__x

I changed the way I formatted the code, so I'm hoping that makes it a bit easier to read through. If it just made things more confusing, just say the word, and I'll try to think of something cleaner ; w ;

Anyway, this code uses two images. These can generally be any size, and the code will automatically adjust them for you. As for the colors, ctrl+f and replace #8c3960 for the first name's color and #a6c7a7 for the top background/number color. For the latter, I would heavily suggest using a text replacer such as this one or the one that's built into gdocs.

As a final note, the text over the green background is purely filler text. Hopefully the small size discourages people from actually attempting to read it? :'D




firstname
last
“We believe that we can change the things around us in accordance with our desires—we believe it because otherwise we can see no favourable outcome. We do not think of the outcome which generally comes to pass and is also favourable: we do not succeed in changing things in accordance with our desires, but gradually our desires change. The situation that we hoped to change because it was intolerable becomes unimportant to us. We have failed to surmount the obstacle, as we were absolutely determined to do, but life has taken us round it, led us beyond it, and then if we turn round to gaze into the distance of the past, we can barely see it, so imperceptible has it become.” – Marcel Proust, In Search of Lost Time
01
basic information
name
firsname surname
nickname
answer
gender
answer
age
number (##)
date of birth
answer
position
staff
years working
#
02
appearance
height
answer
hair
answer
eyes
answer

“We believe that we can change the things around us in accordance with our desires—we believe it because otherwise we can see no favourable outcome. We do not think of the outcome which generally comes to pass and is also favourable: we do not succeed in changing things in accordance with our desires, but gradually our desires change. The situation that we hoped to change because it was intolerable becomes unimportant to us. We have failed to surmount the obstacle, as we were absolutely determined to do, but life has taken us round it, led us beyond it, and then if we turn round to gaze into the distance of the past, we can barely see it, so imperceptible has it become.” – Marcel Proust, In Search of Lost Time
03
personality
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien feugiat, dignissim nunc vel, egestas lacus. Sed in posuere tortor. Phasellus at ipsum enim. Aliquam euismod nisi nibh, nec rhoncus nunc vehicula nec. Aenean vel metus faucibus, venenatis justo quis, hendrerit nisi. Sed ultricies laoreet maximus. Sed ac orci et augue maximus consectetur. Pellentesque imperdiet justo non diam convallis malesuada. Suspendisse vitae mi eros. Etiam dignissim, tortor vitae hendrerit sollicitudin, risus sapien consectetur dolor, in suscipit velit ligula eget risus. Proin vulputate lacus non turpis luctus, et suscipit sem malesuada. Nunc auctor libero in consectetur cursus.

In purus ipsum, lacinia eu elementum volutpat, mollis non mauris. Morbi pretium consectetur sagittis. Pellentesque blandit congue lobortis. Donec a mi nunc. Proin magna justo, porttitor ac sollicitudin tincidunt, scelerisque et libero. Aliquam erat volutpat. Integer eu lorem interdum, aliquet eros dapibus, rutrum mi. Aenean cursus eleifend dictum. Sed mi est, imperdiet vitae dolor eu, consequat tincidunt eros. Maecenas dictum hendrerit posuere.
04
backstory
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien feugiat, dignissim nunc vel, egestas lacus. Sed in posuere tortor. Phasellus at ipsum enim. Aliquam euismod nisi nibh, nec rhoncus nunc vehicula nec. Aenean vel metus faucibus, venenatis justo quis, hendrerit nisi. Sed ultricies laoreet maximus. Sed ac orci et augue maximus consectetur. Pellentesque imperdiet justo non diam convallis malesuada. Suspendisse vitae mi eros. Etiam dignissim, tortor vitae hendrerit sollicitudin, risus sapien consectetur dolor, in suscipit velit ligula eget risus. Proin vulputate lacus non turpis luctus, et suscipit sem malesuada. Nunc auctor libero in consectetur cursus.

In purus ipsum, lacinia eu elementum volutpat, mollis non mauris. Morbi pretium consectetur sagittis. Pellentesque blandit congue lobortis. Donec a mi nunc. Proin magna justo, porttitor ac sollicitudin tincidunt, scelerisque et libero. Aliquam erat volutpat. Integer eu lorem interdum, aliquet eros dapibus, rutrum mi. Aenean cursus eleifend dictum. Sed mi est, imperdiet vitae dolor eu, consequat tincidunt eros. Maecenas dictum hendrerit posuere.
05
relationships
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien feugiat, dignissim nunc vel, egestas lacus. Sed in posuere tortor. Phasellus at ipsum enim. Aliquam euismod nisi nibh, nec rhoncus nunc vehicula nec. Aenean vel metus faucibus, venenatis justo quis, hendrerit nisi. Sed ultricies laoreet maximus. Sed ac orci et augue maximus consectetur. Pellentesque imperdiet justo non diam convallis malesuada. Suspendisse vitae mi eros. Etiam dignissim, tortor vitae hendrerit sollicitudin, risus sapien consectetur dolor, in suscipit velit ligula eget risus. Proin vulputate lacus non turpis luctus, et suscipit sem malesuada. Nunc auctor libero in consectetur cursus.

In purus ipsum, lacinia eu elementum volutpat, mollis non mauris. Morbi pretium consectetur sagittis. Pellentesque blandit congue lobortis. Donec a mi nunc. Proin magna justo, porttitor ac sollicitudin tincidunt, scelerisque et libero. Aliquam erat volutpat. Integer eu lorem interdum, aliquet eros dapibus, rutrum mi. Aenean cursus eleifend dictum. Sed mi est, imperdiet vitae dolor eu, consequat tincidunt eros. Maecenas dictum hendrerit posuere.
06
last words
Ability Type
answer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien feugiat, dignissim nunc vel, egestas lacus. Sed in posuere tortor. Phasellus at ipsum enim. Aliquam euismod nisi nibh, nec rhoncus nunc vehicula nec. Aenean vel metus faucibus, venenatis justo quis, hendrerit nisi. Sed ultricies laoreet maximus. Sed ac orci et augue maximus consectetur. Pellentesque imperdiet justo non diam convallis malesuada. Suspendisse vitae mi eros. Etiam dignissim, tortor vitae hendrerit sollicitudin, risus sapien consectetur dolor, in suscipit velit ligula eget risus. Proin vulputate lacus non turpis luctus, et suscipit sem malesuada. Nunc auctor libero in consectetur cursus.

In purus ipsum, lacinia eu elementum volutpat, mollis non mauris. Morbi pretium consectetur sagittis. Pellentesque blandit congue lobortis. Donec a mi nunc. Proin magna justo, porttitor ac sollicitudin tincidunt, scelerisque et libero. Aliquam erat volutpat. Integer eu lorem interdum, aliquet eros dapibus, rutrum mi. Aenean cursus eleifend dictum. Sed mi est, imperdiet vitae dolor eu, consequat tincidunt eros. Maecenas dictum hendrerit posuere.
07
extras
1.
Class D abilities lie within the scope of natural human ability, and the holder usually just becomes suddenly skilled at a particular subject, field, or action (e.g. becoming a human calculator). As a result, most Class D ability holders go undetected by the government, fellow Elegies, and themselves. (Examples: human calculator, speedster [~28mph range], pain nullification)

2.
Class D abilities lie within the scope of natural human ability, and the holder usually just becomes suddenly skilled at a particular subject, field, or action (e.g. becoming a human calculator). As a result, most Class D ability holders go undetected by the government, fellow Elegies, and themselves. (Examples: human calculator, speedster [~28mph range], pain nullification)
code by Nano Nano
 
Inubue

Inubue

犬笛 - Papi Chulo
So I just wanna say you're a legend. Bang Dream AND Arknights imagery, you're my new favorite Dx They're so pretty~
 
RI.a

RI.a

"愛を知りたいのです."
your codes are always so clean and smooth and a e s t h e t i c :bishiesparklesl:

i love them so much my heart hurts
 
Zufaix

Zufaix

Junior Member
Wait wait wait.... You're telling me... I'm in two Rp's with you and I had no clue these were yours?! I need to pay better attention lol. Regardless these are absolutely amazing. Hats off to you and your work!
 
Nano

Nano

artistic shrimp
act 09: Protocol
mobile friendly | character sheet | scroll | 4 tabs | link
I finally got around to revamping one of my CSs that got nuked during the codepocalypse, so I thought I'd share it here. Recently, a certain someone (namely nios nios ) got me obsessed with stat bars, so this code has a set of those. All hail the Statbar Cult!

Again, this code uses a total of two images which can be any size, though a 1:1 aspect ratio is preferred for both. Just like in my previous code, crtl+f and replace whatever colors I used which I'll list below:

Red: #a9000d
Grey: #666666
White: #fefefe
Black: #111111




some kind of quote or blurb goes here, but try to keep it relatively short please
Name Here
title/role here
001
002
003
004
  • 001
    basics
    attack
    defense
    mobility
    stamina
    tactics
    name
    Firstname Surname
    gender
    Gender Here
    nickname
    Nickname/Alias
    age
    Number (##)
    role
    Whatever Else
    subject
    Something
    appearance
    height
    #'##" (###cm)
    weight
    ###lbs (##kg)
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.

    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
    personality
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis lacus, tristique eget odio quis, viverra varius magna. Ut ullamcorper auctor nisl, luctus molestie felis ullamcorper sed. Donec nec nibh bibendum, pharetra nunc sed, placerat purus. Nulla a ligula lobortis, condimentum lacus eu, efficitur justo. Donec vitae volutpat odio, sed tincidunt enim. Suspendisse at ante sit amet libero blandit dapibus non in turpis. Vestibulum pharetra feugiat lacus a pulvinar. Nullam eget hendrerit dolor, vitae sagittis lacus. Vestibulum lacinia ex et lectus porta iaculis. Suspendisse interdum a nunc vitae egestas. Aliquam dignissim hendrerit leo sit amet sagittis. Vivamus eget ipsum vitae tellus facilisis aliquet. Mauris elementum eu diam id vestibulum.

    Etiam eleifend metus nisi, ac laoreet nibh tincidunt id. In vel auctor magna, nec porta arcu. Morbi eget mattis justo. Fusce vitae auctor erat, at ullamcorper mauris. Ut pharetra vitae eros sed ornare. Quisque in malesuada elit. Nunc at malesuada turpis. Pellentesque at leo congue, faucibus lorem nec, mollis est.
code by Nano Nano
 
Last edited:
You must log in or register to reply here.

Users Who Are Viewing This Thread (Users: 0, Guests: 2)

Top