ThePastelWitch
"There is no magic when one no longer believes."
[div class=container][div class=glaze][div class=tabsContainer][div class=tabNames]
[div class="tabName titleName"]Title Screen[/div]
[div class="tabName introName"]All Roles[/div]
[div class="tabName basicsName"]Accepted Characters[/div]
[div class="tabName rulesName"]Needed Info[/div]
[div class="tabName ambianceName"]Credit and Ambiance[/div]
[/div][div class=tabs]
[div class="tab titletab"][/div]
[div class="tab introtab"][/div]
[div class="tab basicstab"][/div]
[div class="tab rulestab"][/div]
[div class="tab ambiancetab"][/div]
[/div][/div][div class="spoke titleSpoke"][div class=contentContainer]
[div class="content titleContent"]
[div class=Title]PEACE KEEPERS[/div][/div]
[div class="header titleHeader"][div class=caption]
[/div][/div][div class="spoke introSpoke"][div class=contentContainer]
[div class="content introContent"][div class=scroll]
1
❝The Fortress of Heloress❞
Home to the Felinean Family (Cats)
Crown Prince of the Felinean Family: Ren Alexsander Felinean (
izayoiix
)
Crown Princess of the Felinean Family: Kirsikka Rhionne Felinean (
cinnabuns
)
❝The Raft Fleet of Ithlolen❞
Home to the Usagian Family (Rabbits)
Crown Prince of the Usagian Family: Pascal Idris Usagian (
SkyGinge
)
Crown Princess of the Usagian Family: Isadora Alessandra Usagian (
ThePastelWitch
)
❝The Ombar Dominion❞
Home to the Hebian Family (Snakes)
Crown Prince of the Hebian Family: Setesh Khepri Hebian (
MechanicalSnake
)
Crown Princess of the Hebian Family: Ardyn Hebian (
Semblance
)
❝The Falindean Republic❞
Home to the Fawnus Family (Deer)
Crown Prince of the Fawnus Family: Ark Fawnus (
Swoob
)
Crown Princess of the Fawnus Family: Elafína Alva Fawnus (
RI.a
)
❝The Kingdom of Truvaria❞
Home to the Canis Family (Wolves)
Crown Prince of the Canis Family: ________ Canis ()
Crown Princess of the Canis Family: ________ Canis ()
❝The Belerast Magocracy❞
Home to the Vulpes Family (Foxes)
Crown Prince of the Vulpes Family: ________ Vulpes ()
Crown Princess of the Vulpes Family: Alana Lysette Vulpes (
izayoiix
)
❝The Ruins of Zanubia❞
Home to the Nidae Family (Chameleon)
Crown Prince/ss of the Nidae Family: Alastair Nidae (
ThePastelWitch
)
Crown Prince/ss of the Nidae Family: ________ Nidae ()
Crown Prince/ss of the Nidae Family: ________ Nidae ()
[/div][/div]
[div class="header introContent"]
[/div][/div][/div][div class="spoke basicsSpoke"][div class=contentContainer]
[div class="content basicsContent"][div class=scroll]
Click to go to their character applications
❝Felinean Family❞
❝Usagian Family❞
❝Hebian Family❞
❝Fawnus Family❞
❝Canis Family❞
❝Vulpes Family❞
❝Nidae Family❞
[/div][/div]
[div class="header basicsContent"]
[/div][/div][/div][div class="spoke rulesSpoke"][div class=contentContainer]
[div class="content rulesContent"][div class=scroll]
Feel free to do whatever layout you wish with these, but make sure to fill in all of these fields. (You can also change the things in bold like "Full Name" to "My Christened Name") You're also welcome to add other fields (just don't take any away).
The Basic Details
Full Name: (Last Name should be their family name, but you're welcome to be the II/III/etc. and have multiple middle names)
Alias(es): (Earned Titles or Well-Known Nicknames)
Age: (At least eighteen)
Biological Gender: (Male or Female)
Identifying Pronoun: (He/Him She/Her They/Them Interchangeable)
Sexuality: (self explanatory)
Height: (Please use feet and inches)
Body Type: (Slim, Curvy, Plump, Average, Fat, Athletic, etc.)
Hair Color: (self explanatory)
Hair Length: (self explanatory)
Eye Color: (self explanatory)
Animal Attributes: (Do they have a tail, ears, scales, fangs, antlers, a mix of them, etc?)
Other Physical Notes: (Tattoos, Piercings, Scars, etc.)
Personality
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Likes: (List no less than five and no more than eight)
Dislikes: (List no less than five and no more than eight)
Fears: (List no less than two and no more than five)
Combat Prowess
Favored Weapon: (What weapon have they been formally trained in?)
Magical Training: (Do you have any magical training? And if so, what kind of magic do you know? You're only allowed one.)
(For the below four stats, please roll 4 d20s in the OOC and allocate each stat to whichever you prefer for your character. Drop any rolls that are below 7 and any higher than 18. These add bonuses and advantages/disadvantages to different elements of combat.)
Strength: (Used for throwing, picking things up, swinging large weapons, and landing hits with melee based attacks.)
Constitution: (This will determine how many hits you can take before passing out, how well you can shoulder pain, and how well you withstand against stuff like poison and sleep spells.)
Dexterity: (This is used for landing hits with dexterous weapons like bows, crossbows, throwing daggers, etc., dodging, and performing acrobatic moves.)
Wisdom: (This is your stat for casting magic and being able to ignore magical effects against you.)
(All stats above, regardless of how low or high you get, still have the chance of succeeding or failing. They just give a natural advantage/disadvantage depending on how you want to build your character)
History
Name Day: (Your birthday, pick a day from 1-50 for either Spring, Summer, Fall, or Winter.)
Background: (Detail the character's life up until this point in at least three paragraphs. Make sure to tell of us of any notable events that helped shape your character into who they are today.)
The Roleplayer
Username: (self explanatory)
Sample(s): (Please link to at least one sample showing a post that gives us an example of your writing style and also to showcase that you can reach the two paragraph minimum.)
[/div][/div]
[div class="header rulesContent"]
[/div][/div][/div][div class="spoke ambianceSpoke"][div class=contentContainer]
[div class="content ambianceContent"][div class=scroll]
Credit goes to Alteras for the original code of this beautiful coding masterpiece
Credit goes to 録音 (Pixiv ID 2224370) for the images used to create the animated background.
Credit goes to PeterPrime for the picture used for Belerast
Credit goes to IIDenmrak for the picture used for Truvaria
Credit goes to AlexShatohin for the picture used for Falinde
Credit goes to RobinTran for the picture used for Ombar
Credit goes to arvalis for the picture used for Ithlolen
Credit goes to jordangrimmer for the picture used for Heloress
[/div][/div]
[div class="header ambianceHeader"]
[/div][/div]
[/div][/div][div class=circle]
[div class=circleClose]Close[/div]
[div class=circleOpen]Open[/div]
[/div][/div] [class=container] --img-w: 2100; --img-h: 1200; --cir-center-h: 61.08%; --cir-center-w: 26.86%; --cir-radius: 12.7; --cir-thickness: .5vw; --bg-color: rgba(182, 221, 249, 0.9); --divide-thick: .25vw; --tab-color-1:#a80f0f; --tab-color-2:#FFFFFF; --tab-color-3:#ce9e42; --tab-color-4:#FFFFFF; --tab-color-5:#383838; color:#383838; width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image:url('https://i.imgur.com/STtmpKM.gif'); background-size:contain; position:relative; overflow:hidden; [/class] [class=glaze] --cir-radius-math: calc( var(--cir-radius) / 100 * 100%); width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness))); position: absolute; top:0; clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out; [/class] [class=glazeOpen] clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s; [/class] [class=tabsContainer] z-index:10; position: absolute; width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) ); height: calc( 2vw + 6px); top: calc( var(--cir-center-h) - var(--divide-thick) / 2 ); left: 0; border-top: var(--divide-thick) solid white; [/class] [class=tabNames] width: 100%; height: auto; bottom: calc( 100% + var(--divide-thick) ); position: absolute; [/class] [class=tabName] width: 100%; height: auto; box-sizing: border-box; position: absolute; bottom:0; font-size: calc(1.25vw + 6px); text-align: center; opacity:0; transition: opacity .5s ease-in; [/class] [class=tabNameShow] opacity: 1; [/class] [class=tabs] width: 100%; height: 100%; display: flex; flew-flow: row nowrap; justify-content: space-around; font-size: calc(1.25vw + 6px); [/class] [class=tab] flex: 1 1 auto; text-align: center; cursor: pointer; [/class] [class=titletab] color: var(--tab-color-1); transition: all .5s ease-in; [/class] [class name=titletab state=hover] color: white; background-color: var(--tab-color-1); [/class] [class=titleName] color: var(--tab-color-1); transition: opacity .5s ease-in; [/class] [script class=titletab on=mouseenter] addClass tabNameShow titleName [/script] [script class=titletab on=mouseleave] removeClass tabNameShow titleName [/script] [class=introtab] color: var(--tab-color-2); transition: all .5s ease-in; [/class] [class name=introtab state=hover] color: white; background-color: var(--tab-color-2); [/class] [class=introName] color: var(--tab-color-2); [/class] [script class=introtab on=mouseenter] addClass tabNameShow introName [/script] [script class=introtab on=mouseleave] removeClass tabNameShow introName [/script] [class=basicstab] color: var(--tab-color-3); transition: all .5s ease-in; [/class] [class name=basicstab state=hover] color: white; background-color: var(--tab-color-3); [/class] [class=basicsName] color: var(--tab-color-3); [/class] [script class=basicstab on=mouseenter] addClass tabNameShow basicsName [/script] [script class=basicstab on=mouseleave] removeClass tabNameShow basicsName [/script] [class=rulestab] color: var(--tab-color-4); transition: all .5s ease-in; [/class] [class name=rulestab state=hover] color: white; background-color: var(--tab-color-4); [/class] [class=rulesName] color: var(--tab-color-4); [/class] [script class=rulestab on=mouseenter] addClass tabNameShow rulesName [/script] [script class=rulestab on=mouseleave] removeClass tabNameShow rulesName [/script] [class=ambiancetab] color: var(--tab-color-5); transition: all .5s ease-in; [/class] [class name=ambiancetab state=hover] color: white; background-color: var(--tab-color-5); [/class] [class=ambianceName] color: var(--tab-color-5); [/class] [script class=ambiancetab on=mouseenter] addClass tabNameShow ambianceName [/script] [script class=ambiancetab on=mouseleave] removeClass tabNameShow ambianceName [/script] [class=spoke] --math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) ); position: absolute; height: 100%; width: 100%; bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 ); left: var(--math); border-bottom: var(--divide-thick) white solid; transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom; transform: rotate(-270deg); opacity: 0; transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s; [/class] [class=SpokeReveal] transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s; transform: rotate(0deg); opacity: 1; [/class] [class=contentContainer] height: 100%; width: calc( 100% - var(--math) ); left:0; position:relative; [/class] [class=content] width: calc( 100% - 5px); height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px); max-height:0; bottom: 0; left:0; overflow: hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=scroll] height: auto; max-height: 100%; padding-top: 15px; width: calc( 100%); bottom: 0; position: absolute; padding-right: 200px; overflow-y: scroll; [/class] [class=header] width: 100%; height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2); max-height:0; top: calc(100% + var(--divide-thick) ); line-height: .9; font-size: calc( 5.5vw + 2px ); overflow:hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=Title] height: auto; left:0; bottom: 0; position: absolute; color: white; font-size: calc( 5.5vw + 8px ); line-height:.9; [/class] [class=caption] width:100%; height: 4vw; font-size: calc( 1.75vw + 6px ); line-height: 1.2; position: absolute; [/class] [class=ShowContent] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=ShowHeader] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=circle] width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) ); height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness)); box-sizing: border-box; border-radius: 50%; top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) ); left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) ); right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) ); position: absolute; cursor: pointer; border: 0px white solid; transition: border-width .5s ease-in-out 1s; [/class] [class=circleReveal] transition: border-width .5s ease-in-out; border-width: calc(var(--cir-thickness) + 2px); [/class] [class=circleClose] text-align: center; color:#bf8426; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpen] text-align: center; color: #bf8426; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpacity] opacity:1; [/class] [script=circle] set isOpen 1 addClass circleReveal circle addClass glazeOpen glaze [/script] [script class=circle on=mouseenter] if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen) [/script] [script class=circle on=mouseleave] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen [/script] [script class=circle on=click] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen if (eq ${isOpen} 1) (removeClass glazeOpen glaze) if (eq ${isOpen} 1) (removeClass circleReveal circle) if (eq ${isOpen} 0) (addClass glazeOpen glaze) if (eq ${isOpen} 0) (addClass circleReveal circle) if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1) [/script] [script=tab] set TabSel 0 set TabHis 1 addClass ShowContent titleContent addClass ShowHeader titleHeader addClass SpokeReveal titleSpoke [/script] [script class=tab on=click] set TabSel (getText) if (eq ${TabSel} ${TabHis}) (stop) //if tab selected is current tab, stop. if (eq ${TabHis} 1) (removeClass ShowContent titleContent) if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader) if (eq ${TabHis} 2) (removeClass ShowContent introContent) if (eq ${TabHis} 2) (removeClass ShowHeader introHeader) if (eq ${TabHis} 3) (removeClass ShowContent basicsContent) if (eq ${TabHis} 3) (removeClass ShowHeader basicsHeader) if (eq ${TabHis} 4) (removeClass ShowContent rulesContent) if (eq ${TabHis} 4) (removeClass ShowHeader rulesHeader) if (eq ${TabHis} 5) (removeClass ShowContent ambianceContent) if (eq ${TabHis} 5) (removeClass ShowHeader ambianceHeader) //hide the text and prepare for SPINNING if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke) if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke) if (eq ${TabHis} 3) (removeClass SpokeReveal basicsSpoke) if (eq ${TabHis} 4) (removeClass SpokeReveal rulesSpoke) if (eq ${TabHis} 5) (removeClass SpokeReveal ambianceSpoke) //spinning to hide spoke complete. Prepare to spin spoke into view if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke) if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke) if (eq ${TabSel} 3) (addClass SpokeReveal basicsSpoke) if (eq ${TabSel} 4) (addClass SpokeReveal rulesSpoke) if (eq ${TabSel} 5) (addClass SpokeReveal ambianceSpoke) //spinning complete. Show the new stuff if (eq ${TabSel} 1) (addClass ShowContent titleContent) if (eq ${TabSel} 1) (addClass ShowHeader titleHeader) if (eq ${TabSel} 2) (addClass ShowContent introContent) if (eq ${TabSel} 2) (addClass ShowHeader introHeader) if (eq ${TabSel} 3) (addClass ShowContent basicsContent) if (eq ${TabSel} 3) (addClass ShowHeader basicsHeader) if (eq ${TabSel} 4) (addClass ShowContent rulesContent) if (eq ${TabSel} 4) (addClass ShowHeader rulesHeader) if (eq ${TabSel} 5) (addClass ShowContent ambianceContent) if (eq ${TabSel} 5) (addClass ShowHeader ambianceHeader) set TabHis ${TabSel} [/script]
[div class="tabName titleName"]Title Screen[/div]
[div class="tabName introName"]All Roles[/div]
[div class="tabName basicsName"]Accepted Characters[/div]
[div class="tabName rulesName"]Needed Info[/div]
[div class="tabName ambianceName"]Credit and Ambiance[/div]
[/div][div class=tabs]
[div class="tab titletab"][/div]
[div class="tab introtab"][/div]
[div class="tab basicstab"][/div]
[div class="tab rulestab"][/div]
[div class="tab ambiancetab"][/div]
[/div][/div][div class="spoke titleSpoke"][div class=contentContainer]
[div class="content titleContent"]
[div class=Title]PEACE KEEPERS[/div][/div]
[div class="header titleHeader"][div class=caption]
The Royal Character Sheets
Profiles that are accepted will be posted in this tab.
[/div][/div][/div][/div][div class="spoke introSpoke"][div class=contentContainer]
[div class="content introContent"][div class=scroll]
1
Home to the Felinean Family (Cats)
Crown Prince of the Felinean Family: Ren Alexsander Felinean (
izayoiix
)Crown Princess of the Felinean Family: Kirsikka Rhionne Felinean (
cinnabuns
)
Home to the Usagian Family (Rabbits)
Crown Prince of the Usagian Family: Pascal Idris Usagian (
SkyGinge
)Crown Princess of the Usagian Family: Isadora Alessandra Usagian (
ThePastelWitch
)
Home to the Hebian Family (Snakes)
Crown Prince of the Hebian Family: Setesh Khepri Hebian (
MechanicalSnake
)Crown Princess of the Hebian Family: Ardyn Hebian (
Semblance
)
Home to the Fawnus Family (Deer)
Crown Prince of the Fawnus Family: Ark Fawnus (
Swoob
)Crown Princess of the Fawnus Family: Elafína Alva Fawnus (
RI.a
)
Home to the Canis Family (Wolves)
Crown Prince of the Canis Family: ________ Canis ()
Crown Princess of the Canis Family: ________ Canis ()
Home to the Vulpes Family (Foxes)
Crown Prince of the Vulpes Family: ________ Vulpes ()
Crown Princess of the Vulpes Family: Alana Lysette Vulpes (
izayoiix
)
Home to the Nidae Family (Chameleon)
Crown Prince/ss of the Nidae Family: Alastair Nidae (
ThePastelWitch
)Crown Prince/ss of the Nidae Family: ________ Nidae ()
Crown Prince/ss of the Nidae Family: ________ Nidae ()
[/div][/div]
[div class="header introContent"]
All
Roles[/div][/div][/div][div class="spoke basicsSpoke"][div class=contentContainer]
[div class="content basicsContent"][div class=scroll]
Click to go to their character applications
❝Felinean Family❞
❝Usagian Family❞
❝Hebian Family❞
❝Fawnus Family❞
❝Canis Family❞
❝Vulpes Family❞
❝Nidae Family❞
[/div][/div]
[div class="header basicsContent"]
Accepted
Characters[/div][/div][/div][div class="spoke rulesSpoke"][div class=contentContainer]
[div class="content rulesContent"][div class=scroll]
Feel free to do whatever layout you wish with these, but make sure to fill in all of these fields. (You can also change the things in bold like "Full Name" to "My Christened Name") You're also welcome to add other fields (just don't take any away).
The Basic Details
Full Name: (Last Name should be their family name, but you're welcome to be the II/III/etc. and have multiple middle names)
Alias(es): (Earned Titles or Well-Known Nicknames)
Age: (At least eighteen)
Biological Gender: (Male or Female)
Identifying Pronoun: (He/Him She/Her They/Them Interchangeable)
Sexuality: (self explanatory)
Height: (Please use feet and inches)
Body Type: (Slim, Curvy, Plump, Average, Fat, Athletic, etc.)
Hair Color: (self explanatory)
Hair Length: (self explanatory)
Eye Color: (self explanatory)
Animal Attributes: (Do they have a tail, ears, scales, fangs, antlers, a mix of them, etc?)
Other Physical Notes: (Tattoos, Piercings, Scars, etc.)
Personality
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Positive Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Negative Trait: (change the bold part to an adjective that describes the character. And after the colon, put the definition of said adjective.)
Likes: (List no less than five and no more than eight)
Dislikes: (List no less than five and no more than eight)
Fears: (List no less than two and no more than five)
Combat Prowess
Favored Weapon: (What weapon have they been formally trained in?)
Magical Training: (Do you have any magical training? And if so, what kind of magic do you know? You're only allowed one.)
(For the below four stats, please roll 4 d20s in the OOC and allocate each stat to whichever you prefer for your character. Drop any rolls that are below 7 and any higher than 18. These add bonuses and advantages/disadvantages to different elements of combat.)
Strength: (Used for throwing, picking things up, swinging large weapons, and landing hits with melee based attacks.)
Constitution: (This will determine how many hits you can take before passing out, how well you can shoulder pain, and how well you withstand against stuff like poison and sleep spells.)
Dexterity: (This is used for landing hits with dexterous weapons like bows, crossbows, throwing daggers, etc., dodging, and performing acrobatic moves.)
Wisdom: (This is your stat for casting magic and being able to ignore magical effects against you.)
(All stats above, regardless of how low or high you get, still have the chance of succeeding or failing. They just give a natural advantage/disadvantage depending on how you want to build your character)
History
Name Day: (Your birthday, pick a day from 1-50 for either Spring, Summer, Fall, or Winter.)
Background: (Detail the character's life up until this point in at least three paragraphs. Make sure to tell of us of any notable events that helped shape your character into who they are today.)
The Roleplayer
Username: (self explanatory)
Sample(s): (Please link to at least one sample showing a post that gives us an example of your writing style and also to showcase that you can reach the two paragraph minimum.)
[/div][/div]
[div class="header rulesContent"]
Required
Character Info[/div][/div][/div][div class="spoke ambianceSpoke"][div class=contentContainer]
[div class="content ambianceContent"][div class=scroll]
Credit goes to Alteras for the original code of this beautiful coding masterpiece
Credit goes to 録音 (Pixiv ID 2224370) for the images used to create the animated background.
Credit goes to PeterPrime for the picture used for Belerast
Credit goes to IIDenmrak for the picture used for Truvaria
Credit goes to AlexShatohin for the picture used for Falinde
Credit goes to RobinTran for the picture used for Ombar
Credit goes to arvalis for the picture used for Ithlolen
Credit goes to jordangrimmer for the picture used for Heloress
[/div][/div]
[div class="header ambianceHeader"]
Credit
and Ambiance[/div][/div]
[/div][/div][div class=circle]
[div class=circleClose]Close[/div]
[div class=circleOpen]Open[/div]
[/div][/div] [class=container] --img-w: 2100; --img-h: 1200; --cir-center-h: 61.08%; --cir-center-w: 26.86%; --cir-radius: 12.7; --cir-thickness: .5vw; --bg-color: rgba(182, 221, 249, 0.9); --divide-thick: .25vw; --tab-color-1:#a80f0f; --tab-color-2:#FFFFFF; --tab-color-3:#ce9e42; --tab-color-4:#FFFFFF; --tab-color-5:#383838; color:#383838; width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image:url('https://i.imgur.com/STtmpKM.gif'); background-size:contain; position:relative; overflow:hidden; [/class] [class=glaze] --cir-radius-math: calc( var(--cir-radius) / 100 * 100%); width: 100%; padding-top: calc( var(--img-h) / var(--img-w) * 100%); background-image: radial-gradient(circle farthest-side at var(--cir-center-w) var(--cir-center-h), transparent 0%, transparent var(--cir-radius-math), white var(--cir-radius-math), white calc(var(--cir-radius-math) + var(--cir-thickness)), var(--bg-color) calc(var(--cir-radius-math) + var(--cir-thickness))); position: absolute; top:0; clip-path: circle( 10% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 11% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out, -webkit-clip-path 1s ease-out; [/class] [class=glazeOpen] clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); -webkit-clip-path: circle( 100% at var(--cir-center-w) var(--cir-center-h) ); transition: clip-path 1s ease-out 1.5s, -webkit-clip-path 1s ease-out 1.5s; [/class] [class=tabsContainer] z-index:10; position: absolute; width: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) - 10 * var(--divide-thick) ); height: calc( 2vw + 6px); top: calc( var(--cir-center-h) - var(--divide-thick) / 2 ); left: 0; border-top: var(--divide-thick) solid white; [/class] [class=tabNames] width: 100%; height: auto; bottom: calc( 100% + var(--divide-thick) ); position: absolute; [/class] [class=tabName] width: 100%; height: auto; box-sizing: border-box; position: absolute; bottom:0; font-size: calc(1.25vw + 6px); text-align: center; opacity:0; transition: opacity .5s ease-in; [/class] [class=tabNameShow] opacity: 1; [/class] [class=tabs] width: 100%; height: 100%; display: flex; flew-flow: row nowrap; justify-content: space-around; font-size: calc(1.25vw + 6px); [/class] [class=tab] flex: 1 1 auto; text-align: center; cursor: pointer; [/class] [class=titletab] color: var(--tab-color-1); transition: all .5s ease-in; [/class] [class name=titletab state=hover] color: white; background-color: var(--tab-color-1); [/class] [class=titleName] color: var(--tab-color-1); transition: opacity .5s ease-in; [/class] [script class=titletab on=mouseenter] addClass tabNameShow titleName [/script] [script class=titletab on=mouseleave] removeClass tabNameShow titleName [/script] [class=introtab] color: var(--tab-color-2); transition: all .5s ease-in; [/class] [class name=introtab state=hover] color: white; background-color: var(--tab-color-2); [/class] [class=introName] color: var(--tab-color-2); [/class] [script class=introtab on=mouseenter] addClass tabNameShow introName [/script] [script class=introtab on=mouseleave] removeClass tabNameShow introName [/script] [class=basicstab] color: var(--tab-color-3); transition: all .5s ease-in; [/class] [class name=basicstab state=hover] color: white; background-color: var(--tab-color-3); [/class] [class=basicsName] color: var(--tab-color-3); [/class] [script class=basicstab on=mouseenter] addClass tabNameShow basicsName [/script] [script class=basicstab on=mouseleave] removeClass tabNameShow basicsName [/script] [class=rulestab] color: var(--tab-color-4); transition: all .5s ease-in; [/class] [class name=rulestab state=hover] color: white; background-color: var(--tab-color-4); [/class] [class=rulesName] color: var(--tab-color-4); [/class] [script class=rulestab on=mouseenter] addClass tabNameShow rulesName [/script] [script class=rulestab on=mouseleave] removeClass tabNameShow rulesName [/script] [class=ambiancetab] color: var(--tab-color-5); transition: all .5s ease-in; [/class] [class name=ambiancetab state=hover] color: white; background-color: var(--tab-color-5); [/class] [class=ambianceName] color: var(--tab-color-5); [/class] [script class=ambiancetab on=mouseenter] addClass tabNameShow ambianceName [/script] [script class=ambiancetab on=mouseleave] removeClass tabNameShow ambianceName [/script] [class=spoke] --math: calc( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) + 10 * var(--divide-thick) ); position: absolute; height: 100%; width: 100%; bottom: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2 ); left: var(--math); border-bottom: var(--divide-thick) white solid; transform-origin: calc( -1 * ( var(--math) - var(--cir-center-w) ) ) bottom; transform: rotate(-270deg); opacity: 0; transition: transform 3s ease-in-out 1.75s , opacity 1s linear 2.75s; [/class] [class=SpokeReveal] transition: transform 3s ease-in-out .5s, opacity 1s linear 1.5s; transform: rotate(0deg); opacity: 1; [/class] [class=contentContainer] height: 100%; width: calc( 100% - var(--math) ); left:0; position:relative; [/class] [class=content] width: calc( 100% - 5px); height: calc( var(--cir-center-h) - var(--divide-thick) / 2 - 15px); max-height:0; bottom: 0; left:0; overflow: hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=scroll] height: auto; max-height: 100%; padding-top: 15px; width: calc( 100%); bottom: 0; position: absolute; padding-right: 200px; overflow-y: scroll; [/class] [class=header] width: 100%; height: calc( 100% - var(--cir-center-h) - var(--divide-thick) / 2); max-height:0; top: calc(100% + var(--divide-thick) ); line-height: .9; font-size: calc( 5.5vw + 2px ); overflow:hidden; position: absolute; transition: max-height 1.5s ease-in-out; [/class] [class=Title] height: auto; left:0; bottom: 0; position: absolute; color: white; font-size: calc( 5.5vw + 8px ); line-height:.9; [/class] [class=caption] width:100%; height: 4vw; font-size: calc( 1.75vw + 6px ); line-height: 1.2; position: absolute; [/class] [class=ShowContent] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=ShowHeader] max-height: 75vh; transition: max-height 1.5s ease-in-out 3.25s; [/class] [class=circle] width: calc( 2 * ( ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) + 2 * var(--cir-thickness) ); height: calc( ( 2 * ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 ) * var(--img-w) / var(--img-h) + 2 * var(--cir-thickness)); box-sizing: border-box; border-radius: 50%; top: calc( var(--cir-center-h) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 * var(--img-w) / var(--img-h) - var(--cir-thickness) ); left: calc( var(--cir-center-w) - ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 - var(--cir-thickness) ); right: calc( 100% - ( var(--cir-center-w) + ( 100% - var(--cir-center-w) ) * var(--cir-radius) / 100 + var(--cir-thickness) ) ); position: absolute; cursor: pointer; border: 0px white solid; transition: border-width .5s ease-in-out 1s; [/class] [class=circleReveal] transition: border-width .5s ease-in-out; border-width: calc(var(--cir-thickness) + 2px); [/class] [class=circleClose] text-align: center; color:#bf8426; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpen] text-align: center; color: #bf8426; top: 50%; left: 50%; font-size: calc( 1vw + 6px); transform: translateX(-50%) translateY(-50%); position: absolute; opacity: 0; transition: opacity .2s ease-in-out; [/class] [class=circleOpacity] opacity:1; [/class] [script=circle] set isOpen 1 addClass circleReveal circle addClass glazeOpen glaze [/script] [script class=circle on=mouseenter] if (eq ${isOpen} 1) (addClass circleOpacity circleClose) (addClass circleOpacity circleOpen) [/script] [script class=circle on=mouseleave] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen [/script] [script class=circle on=click] removeClass circleOpacity circleClose removeClass circleOpacity circleOpen if (eq ${isOpen} 1) (removeClass glazeOpen glaze) if (eq ${isOpen} 1) (removeClass circleReveal circle) if (eq ${isOpen} 0) (addClass glazeOpen glaze) if (eq ${isOpen} 0) (addClass circleReveal circle) if (eq ${isOpen} 1) (set isOpen 0) (set isOpen 1) [/script] [script=tab] set TabSel 0 set TabHis 1 addClass ShowContent titleContent addClass ShowHeader titleHeader addClass SpokeReveal titleSpoke [/script] [script class=tab on=click] set TabSel (getText) if (eq ${TabSel} ${TabHis}) (stop) //if tab selected is current tab, stop. if (eq ${TabHis} 1) (removeClass ShowContent titleContent) if (eq ${TabHis} 1) (removeClass ShowHeader titleHeader) if (eq ${TabHis} 2) (removeClass ShowContent introContent) if (eq ${TabHis} 2) (removeClass ShowHeader introHeader) if (eq ${TabHis} 3) (removeClass ShowContent basicsContent) if (eq ${TabHis} 3) (removeClass ShowHeader basicsHeader) if (eq ${TabHis} 4) (removeClass ShowContent rulesContent) if (eq ${TabHis} 4) (removeClass ShowHeader rulesHeader) if (eq ${TabHis} 5) (removeClass ShowContent ambianceContent) if (eq ${TabHis} 5) (removeClass ShowHeader ambianceHeader) //hide the text and prepare for SPINNING if (eq ${TabHis} 1) (removeClass SpokeReveal titleSpoke) if (eq ${TabHis} 2) (removeClass SpokeReveal introSpoke) if (eq ${TabHis} 3) (removeClass SpokeReveal basicsSpoke) if (eq ${TabHis} 4) (removeClass SpokeReveal rulesSpoke) if (eq ${TabHis} 5) (removeClass SpokeReveal ambianceSpoke) //spinning to hide spoke complete. Prepare to spin spoke into view if (eq ${TabSel} 1) (addClass SpokeReveal titleSpoke) if (eq ${TabSel} 2) (addClass SpokeReveal introSpoke) if (eq ${TabSel} 3) (addClass SpokeReveal basicsSpoke) if (eq ${TabSel} 4) (addClass SpokeReveal rulesSpoke) if (eq ${TabSel} 5) (addClass SpokeReveal ambianceSpoke) //spinning complete. Show the new stuff if (eq ${TabSel} 1) (addClass ShowContent titleContent) if (eq ${TabSel} 1) (addClass ShowHeader titleHeader) if (eq ${TabSel} 2) (addClass ShowContent introContent) if (eq ${TabSel} 2) (addClass ShowHeader introHeader) if (eq ${TabSel} 3) (addClass ShowContent basicsContent) if (eq ${TabSel} 3) (addClass ShowHeader basicsHeader) if (eq ${TabSel} 4) (addClass ShowContent rulesContent) if (eq ${TabSel} 4) (addClass ShowHeader rulesHeader) if (eq ${TabSel} 5) (addClass ShowContent ambianceContent) if (eq ${TabSel} 5) (addClass ShowHeader ambianceHeader) set TabHis ${TabSel} [/script]
Last edited:
: Sunlight, books, nature, climbing trees, tea, honey, animals, cuddling
: Loud noises, interrupting others, bothering others, hurting anyone's feelings, being sick, strong smells, paper cuts
: Death, continually hurting the people she cares about, giving a speech, being unworthy, storms
oiret One;
font-size:48px;
color:#a8a8a8;
text-align:center;
cursor:pointer;
[/class]
[class=textbox]
margin:auto;center;
background:white;
opacity:0.75;
width:244px;
height:244px;
padding:15px;
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
cursor:pointer;
[/class]
[class=text]
width:276px;
height:240px;
overflow-y:scroll;
font-family:Montserrat;
font-size:0.93em;
color:black;
cursor:pointer;
[/class]
[script class=none]
hide textbox
[/script]
[script class=openbutton on=click]
slideUp 800 openwindow
show textbox
fadeOut 500 openbutton
[/script]
[script class=textbox on=click]
slideDown 800 openwindow
fadeIn 500 openbutton
[/script]
[class=openwindow2]
width:274px;
height:330px;
[/class]
[class=frame2]
width:274px;
height:274px;
background:url('https://i.imgur.com/CTLJgIC.jpg');
background-size:fit;
background-position:top;
background-repeat:no-repeat;
margin:auto;center;
border:6px solid #a8a8a8;
overflow:hidden;
[/class]
[class=openbutton2]
margin:auto;center;
width:274px;
height:274px;
padding:113px 0px;
font-family:Source Code Pro;
font-size:48px;
color:#a8a8a8;
text-align:center;
cursor:pointer;
[/class]
[class=textbox2]
margin:auto;center;
background:white;
opacity:0.75;
width:244px;
height:244px;
padding:15px;
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
cursor:pointer;
[/class]
[class=text2]
width:276px;
height:240px;
overflow-y:scroll;
font-family:Montserrat;
font-size:0.93em;
color:black;
cursor:pointer;
[/class]
[script class=none]
hide textbox2
[/script]
[script class=openbutton2 on=click]
slideUp 800 openwindow2
show textbox2
fadeOut 500 openbutton2
[/script]
[script class=textbox2 on=click]
slideDown 800 openwindow2
fadeIn 500 openbutton2
[/script]
[class=openwindow3]
width:274px;
height:330px;
[/class]
[class=frame3]
width:274px;
height:274px;
background:url('https://i.imgur.com/4zKkNXt.jpg');
background-size:cover;
background-position:top;
background-repeat:no-repeat;
margin:auto;center;
border:6px solid #a8a8a8;
overflow:hidden;
[/class]
[class=openbutton3]
margin:auto;center;
width:274px;
height:274px;
padding:113px 0px;
font-family:Comfortaa;
font-size:48px;
color:#a8a8a8;
text-align:center;
cursor:pointer;
[/class]
[class=textbox3]
margin:auto;center;
background:white;
opacity:0.75;
width:244px;
height:244px;
padding:15px;
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
cursor:pointer;
[/class]
[class=text3]
width:276px;
height:240px;
overflow-y:scroll;
font-family:Montserrat;
font-size:0.93em;
color:black;
cursor:pointer;
[/class]
[script class=none]
hide textbox3
[/script]
[script class=openbutton3 on=click]
slideUp 800 openwindow3
show textbox3
fadeOut 500 openbutton3
[/script]
[script class=textbox3 on=click]
slideDown 800 openwindow3
fadeIn 500 openbutton3
[/script]
[class=openwindow4]
width:274px;
height:330px;
[/class]
[class=frame4]
width:274px;
height:274px;
background:url('https://i.imgur.com/MAJKctE.jpg');
background-size:fit;
background-position:top;
background-repeat:no-repeat;
margin:auto;center;
border:6px solid #a8a8a8;
overflow:hidden;
[/class]
[class=openbutton4]
margin:auto;center;
width:274px;
height:274px;
padding:113px 0px;
font-family:Comfortaa;
font-size:48px;
color:#a8a8a8;
text-align:center;
cursor:pointer;
[/class]
[class=textbox4]
margin:auto;center;
background:white;
opacity:0.75;
width:244px;
height:244px;
padding:15px;
overflow:hidden;
overflow-y:hidden;
overflow-x:hidden;
cursor:pointer;
[/class]
[class=text4]
width:276px;
height:240px;
overflow-y:scroll;
font-family:Montserrat;
font-size:0.93em;
color:black;
cursor:pointer;
[/class]
[script class=none]
hide textbox4
[/script]
[script class=openbutton4 on=click]
slideUp 800 openwindow4
show textbox4
fadeOut 500 openbutton4
[/script]
[script class=textbox4 on=click]
slideDown 800 openwindow4
fadeIn 500 openbutton4
[/script]
[class=name]
margin:35px;
font-family:Source Code Pro;
color:#a8a8a8;
font-size:7.55em;
height:100px;
position: left top;
[/class]
[div class=name]
: Being fooled, being hated, being stripped of his title, not being there for Alana, someone buzzing his hair off while he sleeps
