NoviceOfRoleplay
One Thousand Club
[class=tabs]
background-color: #000000;
border-radius: 5px;
box-shadow: 0px 0px 5px #000088;
box-sizing: border-box;
color: #e4eeff;
font-size: 18px;
font-weight: bold;
line-height: 1;
margin: 20px auto;
min-width: 350px;
text-align: center;
width: 50%;
[/class]
[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
[/class]
[class name=tab state=hover]
background-color: #2b7abb;
[/class]
[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Information) (show tabsContentInformation)
if (eq ${currentTab} SneakPeak) (show tabsContentRules)
if (eq ${currentTab} Characters) (show tabsContentCharacters)
[/script]
[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Information[/div][div class=tab]SneakPeak[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Characters[/div][/div]
[div class="tabsContent tabsContentInformation"]
In a far future, the Pokemon's many region have moved back into a singular region, Aegnap. A region encompassing all of the world's pokemon and history, like webpages detailing the extinction of the Pokemon Ranger. It started after a ranger was blamed for destroying a habit; a ranger refused to help police with an investigation that the ranger was the prime suspect on; a ranger having access to a region's bank and spending it on luxury. Hatred and prodding of rangers grew until the agencies were disbanded.
The dismay would not grow from the people, but in the current future that the legendary and mythical pokemon watched. Without the rangers, pokemon were becoming increasingly captured and infringed on in a excessive movement. Thus important meeting was held that is only known by the concerned pokemon, The Last Trial. It was decided that the pokemon had to stop the humans by direct contact, with regulations. After the meeting ended, the memories of the pokemon would be wiped away/ those at the meeting would turn to Gjinka/ a machine will activate to find a partner from any point in history for each meeting member, these partner humans would be the generation of pokemon rangers with the machine built guiding the rangers and pokemon with missions and further regulations.
These rangers would be gifted with additional power as well as the power of True Empathy Aura and Gjinka Armor. However, these rangers are going to face a plethora of challenges as they must go about bringing the order in Aegnap-facing off a person using strange Pokemon Cards, a Shadow Pokemon Master, a Gjinka, a board game master, etc. An RP of true celebration of everything pokemon as all of it clashes into huge conflicts. [/div]
[div class="tabsContent tabsContentRules" style="display: none;"]
[class name=container]
border-radius: 10px;
margin: 10px auto;
position: relative;
text-align: center;
z-index: 1;
background: purple;
text-align:center;
font-family:Courier New;
color:silver;
cursor:pointer;
width: 200px;
padding: 5px;
overflow: hidden;
[/class]
[class name=hovercontainer]
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
width: 200px;
background: silver;
color: purple;
padding: 5px;
opacity: 0;
cursor:pointer;
-webkit-transition: all .5s ease;
transition: all .5s ease;
[/class]
[class name=hovercontainer state=hover]
opacity: 1;
[/class]
[div class=container]
[div class=hovercontainer]"Without conviction, is a sin. A social sin."[/div]
One Antagonist?
[/div]
[div class=container]
[div class=hovercontainer]"I just want peace."[/div]
Two Antagonist?
[/div]
[div class=container]
[div class=hovercontainer]"Intuition is just your mind being able to figure it out before you can, if you"[/div]
How many are against you?
[/div]
[div class=container]
[div class=hovercontainer]"Tyranitar deserves such treatment"[/div]
Can you handle all of them.
[/div]
Absol Armor - (Not final Art, I will be making 3D art for RP)
[/div]
[div class="tabsContent tabsContentCharacters" style="display: none;"]
Roleplayers will act as Rangers, they will not have a choice of partner-unless, you find another roleplayer who agrees to be your Gjinka partner; the agreeing roleplayer may choose any legendary or mythical pokemon to be a Gjinka of.
Furthermore, Rangers will be able to have one Pokemon move they can use, the move in question must be from this list, (Note: There may be additional properties to these moves beyond in-game from the Pokemon series, the explicit use of the moves are known once the RP starts and GM states exact properties): Ember, Soak, Cotten Guard.(Gjinka will have a different selection of moves). There is also special character traits that your character must have, though only one trait, and that trait must not define the whole personality of the character: Simple, Whimsical, Impatient, Stoic, Argumentative, Charisma. These special traits will have hidden affects on your character in RP.
[div class=csgform]
[div class=csgtitle] Mesprit's CS Machine[/div]
[div class=csgintro] Mesprit wanted to better the personality of your character despite memory, so a CS Machine!♥[/div]
[div class=csglabel]Name[/div][input class="csginput csgname" type=text][/input]
[div class=csglabel]Age[/div][input class="csginput csgage" type=text maxlength=3][/input]
[div class=csglabel]Personality[/div][input type=textarea class="csginput csgdescription"][/input]
[div class=csglabel]Appearance Image Link:[/div][input class="csginput csgimage" type=text][/input]
[div class=csglabel]Gender[/div][input class="csginput csggender"type=text][/input]
[div class=csglabel]Ranger Move[/div][input class="csginput csgpower"type=text][/input]
[div class=csglabel]Special Trait[/div][input class="csginput csgability"type=text][/input]
[div class=csglabel]Backstory[/div][input class="csginput csgstory"type=textarea][/input]
[div class=csglabel]Goal in Life[/div][input class="csginput csggoal"type=textarea][/input]
[div class=csglabel]Way to Achieve Goal[/div][input class="csginput csgachieve"type=textarea][/input]
[input class=csgsubmit type=button]See Mesprit's info on You[/input]
[div class=csgcode]
[nobr]
[class=container]
width: 100%;
padding-top: calc( (3 / 7) * 100%);
position: relative;
--color-1: rgb(236, 225, 147);
--bg-color-1: rgb(59, 45, 44);
--bg-color-2: rgb(186,78,81);
--bg-color-3: rgb(223, 203, 180);
[/class]
[class=colorC]
--color-1: rgb(149, 112, 87);
[/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]
[comment]Background Panels[/comment]
[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]
[comment]Background Panels End[/comment]
[comment]Hearts Start[/comment]
[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(255, 229, 238);
[/class]
[class=heart1]
top: 50%;
left: 0%;
color: rgb(233, 128, 140);
[/class]
[class=heart2]
top: 20%;
left: 15%;
color: rgb(239, 69, 87);
[/class]
[class=heart3]
bottom: 10%;
left: 40%;
color: rgb(241, 100, 143);
[/class]
[class=heart4]
top: 40%;
left: 60%;
color: rgb(248, 173, 183);
[/class]
[class=heart5]
bottom: 30%;
right: 10%;
color: rgb(227, 47, 108);
[/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]
[comment]Hearts end[/comment]
[comment]Image start[/comment]
[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]
[comment]Image end[/comment]
[comment]Code by [USER=34809]@Alteras[/USER][/comment]
[/nobr][div class=container][div class=backgroundContainer][nobr]
[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]
[/nobr][/div]
[div class=flex][div class=imageholder][div class="heart heartImage"][fa]fa-heart fa-fw fa-2x[/fa][/div][div class=imageSideA][IMG][div class="csgvalue csgimageValue"][/div][/IMG][/div][div class="imageSideB spinImage"][IMG][div class="csgvalue csgimageValue"][/div][/IMG][/div][div class="imageSideC spinImage"][IMG][div class="csgvalue csgimageValue"][/div][/IMG][/div][/div][div class=rightside][div class=HeartsContainer]
[div class="heart heart1"][fa]fa-heart fa-fw fa-2x[/fa][/div]
[div class="heart heart2"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart3"][fa]fa-heart fa-fw fa-3x[/fa][/div]
[div class="heart heart4"][fa]fa-heart fa-fw fa-4x[/fa][/div]
[div class="heart heart5"][fa]fa-heart fa-fw fa-5x[/fa][/div][/div][div class=tabholder][font=Fugaz One][div class="buttonA button"][div class=heartTab1][fa]fa-heartbeat fa-fw[/fa][/div][fa]fa-fw[/fa]Profile Type[/div] | [div class="buttonB button"][div class=heartTab2][fa]fa-heart fa-fw[/fa][/div][fa]fa-fw[/fa]Face Value [/div] | [div class="buttonC button"][div class=heartTab3][fa]fa-heart-o fa-fw[/fa][/div][fa]fa-fw[/fa]Deeper[/div][/font][/div][div class=content][div=position:absolute; top:100%; right:0; font: .75em "Fugaz One"; color: var(--color-1); transition: color 3s;]Code by [USER=34809]@Alteras[/USER][/div][div class=contentHolder][font=Montserrat]
[div class="contentBox contentA"][div=font-size: calc( 4px + (18 - 4) * (100vh - 200px) / (1280 - 200) );][div class=contentFix style="height: calc( (1.17364817766 * 9em) + 18em); padding-right: 100px;"][div=position:absolute; top:0; font: 3.5em "Fugaz One";]Human[/div][div=font-size:9em; display: block; position:absolute; top:0; width: calc(100% - 100px); height:2em; line-height: .95; font-family:"Fugaz One"; transform: skewY(-10deg); transform-origin: top right;]
[U]Ultra[/U]
[RIGHT][U]Ranger[/U][/RIGHT]
[/div]
[div=position:absolute; bottom:0; right: 100px; font: 3.5em "Fugaz One";] ♥♥♥♥______________[/div][/div]
[/div][/div]
[div class="contentBox contentB contentSpin"][div class=contentFix] Name: [div class="csgvalue csgnameValue"][/div]
Age: [div class="csgvalue csgageValue"][/div]
Gender: [div class="csgvalue csggenderValue"][/div]
Description: [div class="csgvalue csgdescriptionValue"][/div]
[/div][/div]
[div class="contentBox contentC contentSpin"][div class=contentFix]
Ranger Move: [div class="csgvalue csgpowerValue"][/div]
Special Trait: [div class="csgvalue csgabilityValue"][/div]
Backstory: [div class="csgvalue csgstoryValue"][/div]
Goal: [div class="csgvalue csggoalValue" ][/div]
Motivation: [div class="csgvalue csgachieveValue" ][/div]
[/div][/div]
[/font][/div][/div][/div][/div][/div][/div][/div][/div]
[class name=csgform]
background: url('https://i.imgur.com/dKnBaP1.jpg');
box-shadow: 0px 0px 10px #A0A0A0;
box-sizing: border-box;
max-width: 600px;
margin: 20px auto;
padding: 10px;
width: 100%;
[/class]
[class name=csgtitle]
box-sizing: border-box;
font-size: 32px;
font-weight: bold;
text-align: center;
[/class]
[class name=csgintro]
box-sizing: border-box;
font-style: bold;
margin: 10px 0;
text-align: center;
[/class]
[class name=csglabel]
box-sizing: border-box;
display: inline-block;
font-weight: bold;
padding: 10px;
vertical-align: top;
width: 40%
[/class]
[class name=csginput]
background-color: #FFFFFF;
border: solid 1px #C0C0C0;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
margin-bottom: 10px;
padding: 10px;
width: 60%;
[/class]
[class name=csgsubmit]
box-sizing: border-box;
display: inline-block;
font-size: 22px;
font-weight: bold;
padding: 10px 0;
width: 100%;
[/class]
[class name=csgcode]
background-color: #dedede;
border: solid 1px #a9a9a9;
box-sizing: border-box;
display: none;
font-family: 'Courier New', monospace;
margin-top: 20px;
padding: 10px;
[/class]
[class name=csgvalue]
display: inline;
[/class]
[script class=csgsubmit on=click]
// Hide the current code if it was displayed
hide csgcode
// Get the values and store them in variables
set name (getVal csgname)
set age (getVal csgage)
set description (getVal csgdescription)
set gender (getVal csggender)
set image (getVal csgimage)
set power (getVal csgpower)
set achieve (getVal csgability)
set story (getVal csgstory)
set goal (getVal csggoal)
set achieve (getVal csgachieve)
// Fill in the user values
setText ${name} csgnameValue
setText ${age} csgageValue
setText ${description} csgdescriptionValue
setText ${gender} csggenderValue
setText ${image} csgimageValue
setText ${power} csgpowerValue
setText ${power} csgabilityValue
setText ${story} csgstoryValue
setText ${goal} csggoalValue
setText ${achieve} csgachieveValue
// Show the generated BBCode
slideDown 1000 csgcode
[/script]
[/div]
Last edited:
