revolve

[div=max-width: 750px; margin: auto;][row][column=span4][div=border-radius: 100%; border-top: 3px solid #DAA520; border-bottom: 3px solid #111111; border-left: 3px solid #111111; animation: fa-spin 5s linear 0s infinite; border-right: 3px solid #111111; height: 180px; width: 180px; margin: auto;][div=background: url(http://via.placeholder.com/180x180); border-radius: 100%;  animation: fa-spin 5s linear 0s infinite reverse; height: 180px; width: 180px; margin: auto;][/div][/div][div=margin-top: 10px; font-size: 13px;][center][size=30px][font=Playball]Name Here[/font][/size][/center]
[font=Times New Roman]“you can write your own words here such as quotes. shouldn't exceed twenty-seven words at the most to keep the alignment"[/font][/div][nobr]
[class=tabs]
line-height: 1;
margin: 20px auto;
text-align: center;
width: 100%;
color: black;
display: inline-block;
font-family: 'Times New Roman';
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 45%;
[/class]

[class name=tab state=hover]
background-color: grey;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Basics) (show tabsContentInformation)
if (eq ${currentTab} Persona) (show tabsContentPersonality)
if (eq ${currentTab} Biography) (show tabsContentAbout)
if (eq ${currentTab} Miscellaneous) (show tabsContentOthers)
[/script]

[div class=tabs][div class=tab style="border: 1px solid black; margin: auto"]Basics[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: auto; margin-bottom: auto; margin-right: auto"]Persona[/div][div class=tab style="border: 1px solid black; margin-left: auto; margin-top: 10px; margin-bottom: auto; margin-right: auto""]Biography[/div][div class=tab style="border: 1px solid black; margin-left: 10px; margin-top: 10px; margin-bottom: auto; margin-right: auto"]Miscellaneous[/div][/div][/nobr][/column][column=span4][nobr]

[div class="tabsContent tabsContentInformation"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;][font=Times New Roman][size=25px][b]basic information:[/b][/size]
[br][/br]
[b]name:[/b] bloop.
[br][/br]
[b]position:[/b] bloop
[br][/br]
[b]species:[/b] bloop
[br][/br]
[b]sexuality:[/b] bloop
[br][/br][br][/br]
[b]note:[/b] hello everyone! in this and the post above , you'll see two codes "revolve" and its opposite "stag"! "revolve" is better used as a character sheet while "stag" can be used as both either character sheet or just an in character! have fun and let your creativity flow!
[br][/br][br][/br]
[b]appearance:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[/font][/div][/div][/div]

[div class="tabsContent tabsContentPersonality" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;][font=Times New Roman][size=25px][b]persona:[/b][/size][br][/br]
[b]personality:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
[b]likes:[/b] bloop
[br][/br]
[b]dislikes:[/b] bloop
[br][/br]
[b]strengths:[/b] bloop
[br][/br]
[b]weaknesses:[/b] bloop
[/font][/div][/div][/div]

[div class="tabsContent tabsContentAbout" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;][font=Times New Roman][size=25px][b]biography:[/b][/size]
[br][/br]
[b]herstory:[/b] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[/font][/div][/div][/div]

[div class="tabsContent tabsContentOthers" style="display: none;"][div=width: calc(100% - 0%); height: 405px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll; font-size: 14px; line-height: 20px;][font=Times New Roman][size=25px][b]other:[/b][/size]
[br][/br]
[b]important information:[/b]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus erat, pretium in sodales non, suscipit quis ante. Cras nulla erat, aliquet sed aliquam ac, euismod id sapien. Maecenas venenatis finibus faucibus. Phasellus sit amet laoreet nulla, et convallis diam. Integer vestibulum vulputate lectus, non placerat mauris elementum mattis. Integer vestibulum convallis justo vitae lacinia. Vivamus nec sodales turpis. Ut nisl tellus, tristique ac nunc vel, interdum pharetra ipsum. Nullam velit ipsum, sodales at pellentesque et, imperdiet ut sapien.[/font][/div][/div][/div][/nobr][/column][nobr][/nobr][/row][/div][center][size=2]codedbycrucialstar | click boxes and hidden scrolls[/size][/center]