Fandom Haikyuu: Our Court CS

[Nenma Takashi]

Name:


Nickname(optional):


Appearance:


Height:


Year:


Personality:


Bio:


Position:


Skills:


Unique Skill:


Theme Song(optional):

 

[Coriander]

[class=container] width: 100%; padding-top: calc( (3 / 7) * 100%); position: relative; --color-1: rgb(35, 19, 13); --bg-color-1: rgb(184, 207, 237); --bg-color-2: rgb(210, 184, 237); --bg-color-3: rgb(184, 237, 210); [/class] [class=colorC] --color-1: rgb(35, 19, 13); [/class] [class=flex] width: 100%; height: 100%; position: absolute; top:0; display: flex; flex-flow: row wrap; align-items: stretch; [/class] [class=imageholder] width: calc( 3 / 7 * 100%); height: 100%; box-sizing:border-box; position: relative; transform-style: preserve-3d; flex: 0 0 auto; [/class] [class=rightside] flex: 1 0 auto; position: relative; [/class] [class=tabholder] position: absolute; max-height: 5%; height: auto; bottom: 70%; left: -5%; border: 3px solid var(--color-1); border-bottom-width: 0px; border-top-right-radius: 20px; border-top-left-radius: 20px; padding: 3px 10px 3px 10px; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); color: var(--color-1); transition: color 3s, border-color 3s; white-space: nowrap; [/class] [class=button] display: inline; cursor: pointer; [/class] [class=content] width: 100%; height: 65%; left:-5%; bottom: 5%; position: absolute; [/class] [class=contentHolder] position: relative; width: 100%; height: 100%; border-top: 3px solid var(--color-1); border-bottom: 3px solid var(--color-1); color: var(--color-1); transition: color 3s, border-color 3s; padding-top: 3px; overflow:hidden; transform-style: preserve-3D; box-sizing: border-box; [/class] [class=contentBox] width: 100%; height: 100%; position: absolute; top:0; left:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility: hidden; transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s; [/class] [class=contentFix] position: relative; height: 100%; width: 100%; overflow-Y: scroll; padding-right: 100px; [/class] [class=contentSpin] -webkit-transform: rotateY(.5turn); transform: rotateY(.5turn); [/class] [class=backgroundContainer] display: flex; position: absolute; width: 100%; height: 100%; top:0; transform: translateZ(-1000px); [/class] [class=backgroundPanel] flex-grow: 1; height: 100%; position: relative; [/class] [class=PanelA] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-1); [/class] [class=PanelB] height:100%; width: 100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-2); [/class] [class=PanelC] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-3); [/class] [class=panelSpin] transform: rotateY(.5turn); [/class] [class=HeartsContainer] width: 100%; height: 25%; position: relative; [/class] [class=heart] transition: all 3s ease-out; display: block; position: absolute; width: auto; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); [/class] [class=heartImage] right: 10%; top: 20%; z-index: 9; color: rgb(147, 255, 246); [/class] [class=heart1] top: 50%; left: 0%; color: rgb(58, 29, 29); [/class] [class=heart2] top: 20%; left: 15%; color: rgb(58, 29, 29); [/class] [class=heart3] bottom: 10%; left: 40%; color: rgb(147, 255, 246); [/class] [class=heart4] top: 40%; left: 60%; color: rgb(147, 255, 246); [/class] [class=heart5] bottom: 30%; right: 10%; color: rgb(58, 29, 29); [/class] [class=heartTab1] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab2] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab3] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=spin] transform: rotateY(5turn); [/class] [class=spinHeartImage] transition: transform 3s ease-out; [/class] [class=spinHeart1] transition: transform 3s ease-out .25s; [/class] [class=spinHeart2] transition: transform 3s ease-out .5s; [/class] [class=spinHeart3] transition: transform 3s ease-out .75s; [/class] [class=spinHeart4] transition: transform 3s ease-out 1s; [/class] [class=spinHeart5] transition: transform 3s ease-out 1.25s; [/class] [class=spinHeartTab1] transition: transform 3s ease-out .275s; [/class] [class=spinHeartTab2] transition: transform 3s ease-out .525s; [/class] [class=spinHeartTab3] transition: transform 3s ease-out .775s; [/class] [script=heart] set heartImageIsSpun 0 set heart1IsSpun 0 set heart2IsSpun 0 set heart3IsSpun 0 set heart4IsSpun 0 set heart5IsSpun 0 set heartTab1IsSpun 0 set heartTab2IsSpun 0 set heartTab3IsSpun 0 [/script] [script class=heartImage on=mouseenter] removeClass spinHeartImage if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) [/script] [script class=heart1 on=mouseenter] removeClass spinHeart1 if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) [/script] [script class=heart2 on=mouseenter] removeClass spinHeart2 if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) [/script] [script class=heart3 on=mouseenter] removeClass spinHeart3 if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) [/script] [script class=heart4 on=mouseenter] removeClass spinHeart4 if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) [/script] [script class=heart5 on=mouseenter] removeClass spinHeart5 if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) [/script] [script class=heartTab1 on=mouseenter] removeClass spinHeartTab1 if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) [/script] [script class=heartTab2 on=mouseenter] removeClass spinHeartTab2 if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) [/script] [script class=heartTab3 on=mouseenter] removeClass spinHeartTab3 if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [class=imageSideA] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideB] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideC] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=spinImage] transform: rotateY(1.5turn); [/class] [script=button] set CurSide A fadeOut 1 contentB fadeOut 1 contentC [/script] [script class=buttonA on=click] if (eq ${CurSide} A) (stop) fadeIn 3000 contentA fadeOut 3000 contentB fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentA addClass contentSpin contentB addClass contentSpin contentC removeClass panelSpin PanelA addClass panelSpin PanelB addClass panelSpin PanelC removeClass spinImage imageSideA addClass spinImage imageSideB addClass spinImage imageSideC set CurSide A //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonB on=click] if (eq ${CurSide} B) (stop) fadeIn 3000 contentB fadeOut 3000 contentA fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentB addClass contentSpin contentA addClass contentSpin contentC removeClass panelSpin PanelB addClass panelSpin PanelA addClass panelSpin PanelC removeClass spinImage imageSideB addClass spinImage imageSideA addClass spinImage imageSideC set CurSide B //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonC on=click] if (eq ${CurSide} C) (stop) addClass colorC container fadeIn 3000 contentC fadeOut 3000 contentA fadeOut 3000 contentB removeClass contentSpin contentC addClass contentSpin contentB addClass contentSpin contentA removeClass panelSpin PanelC addClass panelSpin PanelB addClass panelSpin PanelA removeClass spinImage imageSideC addClass spinImage imageSideB addClass spinImage imageSideA set CurSide C //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [div class=container][div class=backgroundContainer] [div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div] [/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][/div][div class=imageSideA][/div][div class="imageSideB spinImage"][/div][div class="imageSideC spinImage"][/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][/div]
[div class="heart heart2"][/div]
[div class="heart heart3"][/div]
[div class="heart heart4"][/div]
[div class="heart heart5"][/div][/div][div class=tabholder][div class="buttonA button"][div class=heartTab1][/div]Ayano[/div] | [div class="buttonB button"][div class=heartTab2][/div]Basics[/div] | [div class="buttonC button"][div class=heartTab3][/div]In Depth[/div][/div][div class=content]

Code by Alteras

[div class=contentHolder]

[div class="contentBox contentA"]

[div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"]

Middle Blocker

Ayano

Kubo​

[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Name: Ayano Kubo
NickName: None
Height: 5'11 (180cm)
Year: Second Year
Position: Middle Blocker
Theme Song:


[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Biography:
Ayano was home schooled for almost the entirety of her life, only joining a real high school in her second year. Even though she was a bit isolated from other people, she would often find activities in watching various sports and mimic their movements. Of course this was a bit difficult for most sports, seeing as taking on competitive swimming in a house was not the most ideal choice. One sport she found a deep love for was Volley Ball. It was the easiest to mimic and the amount of teamwork they had left Ayano in awe. She was finally able to join a high school when she and her parents moved towns, the previous town having too severe of a commitment to join an actual school. When she did join this school, she finally realized the gap she had among the students.
Personality: Smart, cool headed, and even would be the words to describe Ayano. She always has this mysterious air about her that no one seems to be able to get by, leaving them to wonder whats really going on with her. Of course, there are those who know the truth. Because of Ayano's upbringing she finds it difficult to communicate with others. Even though her grades are fairly good and she does have an even way of thinks, she is in no way elegant. Latest trends and jokes seem to breeze by her, usually leaving her confused. You could almost say she seemed alien to the high-school life.

Skills:
-Even though Ayano was mostly stuck to her house, she stayed incredibly fit. Her legs are nicely toned and she has a strong build.
-Strong determination fuels her for anything, even if its a meaningless task to others.
-She may be a bit lost when it comes to other people, but she really tries her best to be friends with everyone.
Unique Skill: Ayano has a unique ability to mimic others play style, after so many years of watching and practicing off of people on T.V. Of course watching on T.V and actually playing is much different, so though she knows a lot about the sport, she's still pretty lame at actually doing it.

[/div][/div]

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

 

[Nenma Takashi]

Name: Yukari Yukimi


Nickname(optional): Yukoni-Hates this one


Yuk's

Big sis Yuki


Appearance:


Height: 5'9


Year: Third Year


Personality: Just as she looks Yukari is a bright and cheerful gal she tends to put 2000% into cheering for the team. She loves volleyball just as much as any other player of the sport would and praises any who are any good at the sport. She treats all the members on the team like her little siblings calling them strange nicknames. Even those older than her are treated like younger siblings and given these strange nicknames. She's very talkative and tends to not know when to stop talking which can lead to her saying something that doesn't mean to sound well mean but sounds it none the less. She takes her job as captain seriously and will try and help the coach keep everyone on track no matter what that takes. She has a habit of mentally shipping two people that catch her eye. She'll even engage in her own story telling from time to time filling in the words for the two as she sees them talking from afar. On the court and when she has to actually act like a captain should she becomes deserving of the name Yukoni. Her tone becomes harsher and she doesn't smile as often often speaking to the others in a more professional manner. She will rarely crack her usual jokes or smile when in the middle of a game. She doesn't mean to be too harsh but Yukari tends to pretty much just call it how she sees it. As tough as she might be she still cares deeply for her team and will try and be their support be that on the court or off the court.


Bio: Volleyball is Yukari's life it's been apart of her family dating back to her grandmother and grandfather, who meet while playing for the same high school team. Her father and mother did the same Yukari became infatuated by the idea of volleyball. It just sounded like a sport that brought people together and so on her tenth birthday her father bought her a volleyball and began to teach her how to play. In the beginning Yukari wasn't what position she wanted to shoot for on a team. So she practiced playing all of them, when she finally got into high school during her first year she settled for playing setter, second year she played as their Outside hitter, and now she plays as the teams Attacker. Yukari's drive for volleyball hasn't dropped one bit despite her team being a consistent underdog. In fact this being her last year to go to nationals Yukari couldn't seem more excited to play.


Position: Captain/Attacker


Skills: Good strategist, Solid block, Decent setter


Unique Skill:Love Love beam-A special move where Yukari makes a heart shape with her hands and fires a beam that makes whoever is hit by the beam all in love with the first person they see. (Yeah right)
Jack of All Trades-Yukari has played every position in volleyball and practiced it, meaning at any time she is needed to she can fill any holes in the team that there might be.


Theme Song:

 

[Nenma Takashi]

[class=container] width: 100%; padding-top: calc( (3 / 7) * 100%); position: relative; --color-1: rgb(35, 19, 13); --bg-color-1: rgb(184, 207, 237); --bg-color-2: rgb(210, 184, 237); --bg-color-3: rgb(184, 237, 210); [/class] [class=colorC] --color-1: rgb(35, 19, 13); [/class] [class=flex] width: 100%; height: 100%; position: absolute; top:0; display: flex; flex-flow: row wrap; align-items: stretch; [/class] [class=imageholder] width: calc( 3 / 7 * 100%); height: 100%; box-sizing:border-box; position: relative; transform-style: preserve-3d; flex: 0 0 auto; [/class] [class=rightside] flex: 1 0 auto; position: relative; [/class] [class=tabholder] position: absolute; max-height: 5%; height: auto; bottom: 70%; left: -5%; border: 3px solid var(--color-1); border-bottom-width: 0px; border-top-right-radius: 20px; border-top-left-radius: 20px; padding: 3px 10px 3px 10px; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); color: var(--color-1); transition: color 3s, border-color 3s; white-space: nowrap; [/class] [class=button] display: inline; cursor: pointer; [/class] [class=content] width: 100%; height: 65%; left:-5%; bottom: 5%; position: absolute; [/class] [class=contentHolder] position: relative; width: 100%; height: 100%; border-top: 3px solid var(--color-1); border-bottom: 3px solid var(--color-1); color: var(--color-1); transition: color 3s, border-color 3s; padding-top: 3px; overflow:hidden; transform-style: preserve-3D; box-sizing: border-box; [/class] [class=contentBox] width: 100%; height: 100%; position: absolute; top:0; left:0; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility: hidden; transition: transform 3s ease-out .5s, -webkit-transform 3s ease-out .5s; [/class] [class=contentFix] position: relative; height: 100%; width: 100%; overflow-Y: scroll; padding-right: 100px; [/class] [class=contentSpin] -webkit-transform: rotateY(.5turn); transform: rotateY(.5turn); [/class] [class=backgroundContainer] display: flex; position: absolute; width: 100%; height: 100%; top:0; transform: translateZ(-1000px); [/class] [class=backgroundPanel] flex-grow: 1; height: 100%; position: relative; [/class] [class=PanelA] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-1); [/class] [class=PanelB] height:100%; width: 100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-2); [/class] [class=PanelC] height:100%; width:100%; position: absolute; top:0; left:0; -webkit-backface-visibility:hidden; backface-visibility: hidden; background-color: var(--bg-color-3); [/class] [class=panelSpin] transform: rotateY(.5turn); [/class] [class=HeartsContainer] width: 100%; height: 25%; position: relative; [/class] [class=heart] transition: all 3s ease-out; display: block; position: absolute; width: auto; font-size: calc( 6px + (20 - 6) * (100vh - 200px) / (1280 - 200) ); [/class] [class=heartImage] right: 10%; top: 20%; z-index: 9; color: rgb(147, 255, 246); [/class] [class=heart1] top: 50%; left: 0%; color: rgb(58, 29, 29); [/class] [class=heart2] top: 20%; left: 15%; color: rgb(58, 29, 29); [/class] [class=heart3] bottom: 10%; left: 40%; color: rgb(147, 255, 246); [/class] [class=heart4] top: 40%; left: 60%; color: rgb(147, 255, 246); [/class] [class=heart5] bottom: 30%; right: 10%; color: rgb(58, 29, 29); [/class] [class=heartTab1] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab2] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=heartTab3] display: inline; position: absolute; transition: 3s ease-out; [/class] [class=spin] transform: rotateY(5turn); [/class] [class=spinHeartImage] transition: transform 3s ease-out; [/class] [class=spinHeart1] transition: transform 3s ease-out .25s; [/class] [class=spinHeart2] transition: transform 3s ease-out .5s; [/class] [class=spinHeart3] transition: transform 3s ease-out .75s; [/class] [class=spinHeart4] transition: transform 3s ease-out 1s; [/class] [class=spinHeart5] transition: transform 3s ease-out 1.25s; [/class] [class=spinHeartTab1] transition: transform 3s ease-out .275s; [/class] [class=spinHeartTab2] transition: transform 3s ease-out .525s; [/class] [class=spinHeartTab3] transition: transform 3s ease-out .775s; [/class] [script=heart] set heartImageIsSpun 0 set heart1IsSpun 0 set heart2IsSpun 0 set heart3IsSpun 0 set heart4IsSpun 0 set heart5IsSpun 0 set heartTab1IsSpun 0 set heartTab2IsSpun 0 set heartTab3IsSpun 0 [/script] [script class=heartImage on=mouseenter] removeClass spinHeartImage if (eq ${heartImageIsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) [/script] [script class=heart1 on=mouseenter] removeClass spinHeart1 if (eq ${heart1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) [/script] [script class=heart2 on=mouseenter] removeClass spinHeart2 if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) [/script] [script class=heart3 on=mouseenter] removeClass spinHeart3 if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) [/script] [script class=heart4 on=mouseenter] removeClass spinHeart4 if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) [/script] [script class=heart5 on=mouseenter] removeClass spinHeart5 if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) [/script] [script class=heartTab1 on=mouseenter] removeClass spinHeartTab1 if (eq ${heartTab1IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) [/script] [script class=heartTab2 on=mouseenter] removeClass spinHeartTab2 if (eq ${heartTab2IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) [/script] [script class=heartTab3 on=mouseenter] removeClass spinHeartTab3 if (eq ${heartTab3IsSpun} 0) (addClass spin) (removeClass spin) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [class=imageSideA] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideB] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=imageSideC] width: 100%; position: absolute; top:0; transition: all 3s; -webkit-backface-visibility:hidden; backface-visibility:hidden; pointer-events:none; [/class] [class=spinImage] transform: rotateY(1.5turn); [/class] [script=button] set CurSide A fadeOut 1 contentB fadeOut 1 contentC [/script] [script class=buttonA on=click] if (eq ${CurSide} A) (stop) fadeIn 3000 contentA fadeOut 3000 contentB fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentA addClass contentSpin contentB addClass contentSpin contentC removeClass panelSpin PanelA addClass panelSpin PanelB addClass panelSpin PanelC removeClass spinImage imageSideA addClass spinImage imageSideB addClass spinImage imageSideC set CurSide A //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonB on=click] if (eq ${CurSide} B) (stop) fadeIn 3000 contentB fadeOut 3000 contentA fadeOut 3000 contentC removeClass colorC container removeClass contentSpin contentB addClass contentSpin contentA addClass contentSpin contentC removeClass panelSpin PanelB addClass panelSpin PanelA addClass panelSpin PanelC removeClass spinImage imageSideB addClass spinImage imageSideA addClass spinImage imageSideC set CurSide B //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [script class=buttonC on=click] if (eq ${CurSide} C) (stop) addClass colorC container fadeIn 3000 contentC fadeOut 3000 contentA fadeOut 3000 contentB removeClass contentSpin contentC addClass contentSpin contentB addClass contentSpin contentA removeClass panelSpin PanelC addClass panelSpin PanelB addClass panelSpin PanelA removeClass spinImage imageSideC addClass spinImage imageSideB addClass spinImage imageSideA set CurSide C //spinning hearts addClass spinHeartImage heartImage addClass spinHeart1 heart1 addClass spinHeart2 heart2 addClass spinHeart3 heart3 addClass spinHeart4 heart4 addClass spinHeart5 heart5 addClass spinHeartTab1 heartTab1 addClass spinHeartTab2 heartTab2 addClass spinHeartTab3 heartTab3 if (eq ${heartImageIsSpun} 0) (addClass spin heartImage) (removeClass spin heartImage) if (eq ${heartImageIsSpun} 0) (set heartImageIsSpun 1) (set heartImageIsSpun 0) if (eq ${heart1IsSpun} 0) (addClass spin heart1) (removeClass spin heart1) if (eq ${heart1IsSpun} 0) (set heart1IsSpun 1) (set heart1IsSpun 0) if (eq ${heart2IsSpun} 0) (addClass spin heart2) (removeClass spin heart2) if (eq ${heart2IsSpun} 0) (set heart2IsSpun 1) (set heart2IsSpun 0) if (eq ${heart3IsSpun} 0) (addClass spin heart3) (removeClass spin heart3) if (eq ${heart3IsSpun} 0) (set heart3IsSpun 1) (set heart3IsSpun 0) if (eq ${heart4IsSpun} 0) (addClass spin heart4) (removeClass spin heart4) if (eq ${heart4IsSpun} 0) (set heart4IsSpun 1) (set heart4IsSpun 0) if (eq ${heart5IsSpun} 0) (addClass spin heart5) (removeClass spin heart5) if (eq ${heart5IsSpun} 0) (set heart5IsSpun 1) (set heart5IsSpun 0) if (eq ${heartTab1IsSpun} 0) (addClass spin heartTab1) (removeClass spin heartTab1) if (eq ${heartTab1IsSpun} 0) (set heartTab1IsSpun 1) (set heartTab1IsSpun 0) if (eq ${heartTab2IsSpun} 0) (addClass spin heartTab2) (removeClass spin heartTab2) if (eq ${heartTab2IsSpun} 0) (set heartTab2IsSpun 1) (set heartTab2IsSpun 0) if (eq ${heartTab3IsSpun} 0) (addClass spin heartTab3) (removeClass spin heartTab3) if (eq ${heartTab3IsSpun} 0) (set heartTab3IsSpun 1) (set heartTab3IsSpun 0) [/script] [div class=container][div class=backgroundContainer] [div class=backgroundPanel][div class=PanelA style="transition: all 2s;"][/div][div class="PanelB panelSpin" style="transition: all 2s;"][/div][div class="PanelC panelSpin" style="transition: all 2s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .25s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .5s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .5s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .5s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s .75s;"][/div][div class="PanelB panelSpin" style="transition: all 2s .75s;"][/div][div class="PanelC panelSpin" style="transition: all 2s .75s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1s;"][/div][/div] [div class=backgroundPanel][div class=PanelA style="transition: all 2s 1.25s;"][/div][div class="PanelB panelSpin" style="transition: all 2s 1.25s;"][/div][div class="PanelC panelSpin" style="transition: all 2s 1.25s;"][/div][/div] [/div]

[div class=flex][div class=imageholder][div class="heart heartImage"][/div][div class=imageSideA]View attachment 485801[/div][div class="imageSideB spinImage"]View attachment 485806[/div][div class="imageSideC spinImage"]View attachment 485807[/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][/div]
[div class="heart heart2"][/div]
[div class="heart heart3"][/div]
[div class="heart heart4"][/div]
[div class="heart heart5"][/div][/div][div class=tabholder][div class="buttonA button"][div class=heartTab1][/div]Ayano[/div] | [div class="buttonB button"][div class=heartTab2][/div]Basics[/div] | [div class="buttonC button"][div class=heartTab3][/div]In Depth[/div][/div][div class=content]

Code by Alteras

[div class=contentHolder]

[div class="contentBox contentA"]

[div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"]

Middle Blocker

Ayano

Kubo​

[/div][/div]

[div class="contentBox contentB contentSpin"][div class=contentFix]Name: Ayano Kubo
NickName: None
Height: 5'11 (180cm)
Year: Second Year
Position: Middle Blocker
Theme Song:


[/div][/div]

[div class="contentBox contentC contentSpin"][div class=contentFix]Biography:
Ayano was home schooled for almost the entirety of her life, only joining a real high school in her second year. Even though she was a bit isolated from other people, she would often find activities in watching various sports and mimic their movements. Of course this was a bit difficult for most sports, seeing as taking on competitive swimming in a house was not the most ideal choice. One sport she found a deep love for was Volley Ball. It was the easiest to mimic and the amount of teamwork they had left Ayano in awe. She was finally able to join a high school when she and her parents moved towns, the previous town having too severe of a commitment to join an actual school. When she did join this school, she finally realized the gap she had among the students.
Personality: Smart, cool headed, and even would be the words to describe Ayano. She always has this mysterious air about her that no one seems to be able to get by, leaving them to wonder whats really going on with her. Of course, there are those who know the truth. Because of Ayano's upbringing she finds it difficult to communicate with others. Even though her grades are fairly good and she does have an even way of thinks, she is in no way elegant. Latest trends and jokes seem to breeze by her, usually leaving her confused. You could almost say she seemed alien to the high-school life.

Skills:
-Even though Ayano was mostly stuck to her house, she stayed incredibly fit. Her legs are nicely toned and she has a strong build.
-Strong determination fuels her for anything, even if its a meaningless task to others.
-She may be a bit lost when it comes to other people, but she really tries her best to be friends with everyone.
Unique Skill: Ayano has a unique ability to mimic others play style, after so many years of watching and practicing off of people on T.V. Of course watching on T.V and actually playing is much different, so though she knows a lot about the sport, she's still pretty lame at actually doing it.

[/div][/div]

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

Accepted