cherub.
𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
doneanddusted
,nah. its for me too,
try copying and pasting the code in the spoiler,
and see if its not mirrored like that??
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Closed Star of Arcadia ☆ Workshop (Freebies)
- Thread starter Alteras
- Start date
doneanddusted
,nah. its for me too,
try copying and pasting the code in the spoiler,
and see if its not mirrored like that??
Alteras
The Sleepy Prisoner
I thought I fixed this!!! Are you on chrome?
cherub.
𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
i am ,,
doneanddusted
Two Thousand Club
yeah ^^:
Alteras
The Sleepy Prisoner
This is weird... It looks perfectly fine on my chrome...
Emmi
Jumin's Bae
It's perfectly fine for me... o-o
fluticasone
mushy canele
Maybe it's an update thing like my old safari
Alteras
?
Alteras
?
fluticasone
mushy canele
you must have some strength bec my dining table is an 8 foot long narra
Emmi
Jumin's Bae
so many bbcode gods
Alteras
The Sleepy Prisoner
slapped on some fadeIn and fadeOut to it since I can't trust chrome to do backface-visibility anymore...
Alteras
The Sleepy Prisoner
I think it works now?
cherub.
𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳
it works now !!!
Alteras
The Sleepy Prisoner
[class=container]
width:100%;
padding-top: calc( 9/16 * 100%);
background-image: linear-gradient( 30deg, #FEDBE3, #FDF3DB, #D2E6EE);
box-sizing: border-box;
position: relative;
--color: rgb(93, 41, 113);
[/class]
[class=containerInside]
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
top:0;
padding-bottom: 0px;
position: absolute;
[/class]
[class=image]
font-size:0;
filter: drop-shadow(0 0 1px white);
[/class]
[class=Chara]
position: absolute;
height: 100%;
padding-right: calc( 480 / 753 * 100%);
top:0;
background-image: url('https://www.rpnation.com/media/www-pinterest-comdfhuisf_waifu2x_art_noise3_tta_1-png.34866/full');
background-size: contain;
background-repeat: no-repeat;
display: block;
z-index: 2;
pointer-events: none;
[/class]
[class=flex]
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
[/class]
[class=grid]
display: grid;
grid-template-columns: 1fr calc( 19.75% + 10px);
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'Top Avatar'
'Main Avatar'
'Bottom Avatar';
width: 100%;
height: 35%;
position: relative;
font-size: calc( 12px + (100 - 12) * (100vh - 200px) / (1280 - 200) );
[/class]
[class=Avatar]
font-size:0;
grid-area: Avatar;
height: 100%;
width: 100%;
position: relative;
background-image: url('https://www.rpnation.com/media/rosamia_-sr-_sda-png.34864/full');
background-size: contain;
background-repeat: no-repeat;
[/class]
[class=barBG1]
background-color: var(--color);
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: span 2;
[/class]
[class=topBar1]
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
font-size: 1em;
line-height: .9;
white-space: nowrap;
color: var(--color);
grid-area: Top;
[/class]
[class=botBar1]
position: absolute;
top:0;
width: 100%;
text-align: right;
font-size: 1em;
line-height: .9;
white-space: nowrap;
color: var(--color);
grid-area: Bottom;
[/class]
[class=mainBar1]
grid-area: Main;
position: relative;
display: block;
width: 100%;
height: 100%;
[/class]
[class=icons]
position: absolute;
display: block;
height: auto;
width: 100%;
top:50%;
transform: translateY(-50%);
text-align: right;
font-size: .75em;
color: white;
[/class]
[class=content]
width: 100%;
height: auto;
margin-bottom: 2%;
position: relative;
flex: 1 0 auto;
display: flex;
flex-flow: column nowrap;
[/class]
[class=contentBoxes]
width: 100%;
flex: 1 0 auto;
background-color: #756184;
overflow: hidden;
position: relative;
[/class]
[class=selectionBar]
margin-top: 2%;
width: 100%;
height: 19.2%;
background-color: var(--color);
text-align: right;
font-size: calc(12px + (100 - 12) * (100vh - 200px) / (1280 - 200) );
line-height: 1;
color: white;
padding-right: 2%;
box-sizing: border-box;
[/class]
[class=tab]
display: inline;
position: relative;
cursor: pointer;
[/class]
[class=arrow]
position: absolute;
display: block;
top: -70%;
left: 50%;
transform: translateX(-50%);
color: #756184;
[/class]
[class=contentBox]
height: 98%;
top:1%;
right: 2%;
width: 60%;
position: absolute;
overflow:hidden;
[/class]
[class=scroll]
width: 100%;
height: 100%;
padding-right: 100px;
overflow-Y: scroll;
color: white;
font-size: calc( 8px + (15 - 8) * (100vw - 200px) / (1280 - 200));
[/class]
[script=tab]
set CurTab "Basic Info"
hide personaContent
hide skillsContent
hide bioContent
hide personaArrow
hide skillsArrow
hide bioArrow
[/script]
[script class=tab on=click]
set SelTab (getText)
if (eq ${CurTab} ${SelTab} ) (stop)
slideUp 500 arrow
fadeOut 500 contentBox
if (eq ${SelTab} "Basic Info") (slideDown 500 infoArrow)
if (eq ${SelTab} "Basic Info") (fadeIn 500 infoContent)
if (eq ${SelTab} "Personality") (slideDown 500 personaArrow)
if (eq ${SelTab} "Personality") (fadeIn 500 personaContent)
if (eq ${SelTab} "Skills") (slideDown 500 skillsArrow)
if (eq ${SelTab} "Skills") (fadeIn 500 skillsContent)
if (eq ${SelTab} "Biography") (slideDown 500 bioArrow)
if (eq ${SelTab} "Biography") (fadeIn 500 bioContent)
set CurTab ${SelTab}
[/script]
[div class=container][div class=containerInside][div class="image Chara"][/div][div class=flex][div class=grid]
[div class=barBG1][/div]
[div class="Avatar image"][/div]
[div class=topBar1]Class-B Representative[/div]
[div class=botBar1]Kotone Yamashita[/div]
[div class=mainBar1][div class=icons][/div][/div]
[/div][div class=content][div class=contentBoxes]
[div class="contentBox infoContent"][div class=scroll]Name:
Kotone Yamashita
Gender:
Female
Sexuality:
Heterosexual
Age:
16
Nationality:
Japanese
Class: B - Representative
[/div][/div]
[div class="contentBox personaContent"][div class=scroll]Personality:
Perennially sleepy, Kotone Yamashita is a game lover. Constantly seen either on her phone or sleeping away, its amazing how much she is able to find the time to play games while being the Representative of class B. While she may seem quiet and shy, she's actually quite approachable and talkative, albeit sometimes in l33t speak. While she may be listless and legarthic in her actions, when it comes to Exam Summoning Wars, she's quite hyper and acts with lots of charisma. This is mostly because the ESBs are like real life video game fights to her. At those times, she may act like an Anime Character, which might sometimes lead to her downfall. Of course at those times she relies on her fellow comrades, Anime Style!!! She can be studious, but only in private cause of her mom.
Strengths:
Strategic
Easy-going
Approachable
Weaknesses:
Low Stamina
Legarthic
Procrastinate
Gaming Addict
Theatrical (when in ESB)
[/div][/div]
[div class="contentBox skillsContent"][div class=scroll]Avatar appearance:
Avatar weapon:
A saber from her favorite MMORPG.
What subject they excel in:
Math
Science
Literature
What subject they are the worst in:
Health
Talents:
Gaming Sage - Knows a lot of game related trivia and will use it in her strategies.
Cramming King - Great at doing enough last minute cramming to land her As. Only useful for exams.
[/div][/div]
[div class="contentBox bioContent"][div class=scroll]Biography:
Kotone Yamashita is a gamer. Throughout her life, she has spent countless nights gaming on her pc and waking hours on her mobile games. She is quite excellent at these games, and have built for herself a small fan following online. Because of her consistent exposure to gaming, she has adopted l33t speech into her normal everyday vocabulary. Of course, before she sunk entirely into the depths of MMORPGs, in middle school, she was an avid anime lover. While it never progressed to cosplaying, it did influence her, making her act like an anime character when she's really hyped up. Of course her mother was worried about her consistent gaming. Her father wasn't, in fact he was always buying her the latest gear for her gaming exploits.
When Kotone graduated middle school, her mother enrolled her in Fumizuki Academy, in the hopes that the environment will force her to drop gaming. Well, for Kotone, she scored a decent score (she spent the previous night gaming), and landed herself in D class. She was influenced by the academy, but only because the avatar she summoned looked like her own in-game avatar. Her mother was extremely angry and confiscated all the electronics. For 3 days and 3 nights, Kotone was depressed. Some say that a black cloud could be seen surrounding her, others just said that her hair was in a mess from her going from barely keeping it tidy to not even bothering with life. Eventually Kotone's mother relented and gave back her games under a single condition, "Be in Class A." That Kotone could do. Her years of cramming aided her as she crammed extremely well for a transfer exam. She succeeded in getting into Class A, but because she continued her gaming exploits, she remained the lowest in the class in everything except exams. Well, during her time in Class A, she became well acquainted with the Summoner Battle System, treating it like its own MMORPG.
While her exams were good enough to keep her in Class A, her other scores weren't, and she dropped down to Class B. Once again her mother was furious, and made her final ultimatum, "Be the Class Rep." Well, it was fairly easy for Kotone to be the class rep, it just meant more cramming. So she did, and is now the class rep. Even though the position of Class Rep is tedious, she somehow always found time to play video games. Well, she slowly grew to like the position, likening it to a Party Leader, so when she went into ESB, she started acting more and more like a Party Leader. Despite being generally known in class as a gamer nerd, she's still the best in the exams and leads the class into battle with great theatrics.
Fun facts:
Loves to eat potato chips, but dreams of eating anime meat.
Has a surprising amount of strength when it comes to Dance Dance Revolution, but nothing else.
[/div][/div]
[/div][div class=selectionBar][div class=tab][div class="arrow infoArrow"][/div]Basic Info[/div] ◦ [div class=tab][div class="arrow personaArrow"][/div]Personality[/div] ◦ [div class=tab][div class="arrow skillsArrow"][/div]Skills[/div] ◦ [div class=tab][div class="arrow bioArrow"][/div]Biography[/div][/div][/div][/div][/div][/div]
[div class="contentBox infoContent"][div class=scroll]Name:
Kotone Yamashita
Gender:
Female
Sexuality:
Heterosexual
Age:
16
Nationality:
Japanese
Class: B - Representative
[/div][/div]
[div class="contentBox personaContent"][div class=scroll]Personality:
Perennially sleepy, Kotone Yamashita is a game lover. Constantly seen either on her phone or sleeping away, its amazing how much she is able to find the time to play games while being the Representative of class B. While she may seem quiet and shy, she's actually quite approachable and talkative, albeit sometimes in l33t speak. While she may be listless and legarthic in her actions, when it comes to Exam Summoning Wars, she's quite hyper and acts with lots of charisma. This is mostly because the ESBs are like real life video game fights to her. At those times, she may act like an Anime Character, which might sometimes lead to her downfall. Of course at those times she relies on her fellow comrades, Anime Style!!! She can be studious, but only in private cause of her mom.
Strengths:
Strategic
Easy-going
Approachable
Weaknesses:
Low Stamina
Legarthic
Procrastinate
Gaming Addict
Theatrical (when in ESB)
[/div][/div]
[div class="contentBox skillsContent"][div class=scroll]Avatar appearance:
Avatar weapon:
A saber from her favorite MMORPG.
What subject they excel in:
Math
Science
Literature
What subject they are the worst in:
Health
Talents:
Gaming Sage - Knows a lot of game related trivia and will use it in her strategies.
Cramming King - Great at doing enough last minute cramming to land her As. Only useful for exams.
[/div][/div]
[div class="contentBox bioContent"][div class=scroll]Biography:
Kotone Yamashita is a gamer. Throughout her life, she has spent countless nights gaming on her pc and waking hours on her mobile games. She is quite excellent at these games, and have built for herself a small fan following online. Because of her consistent exposure to gaming, she has adopted l33t speech into her normal everyday vocabulary. Of course, before she sunk entirely into the depths of MMORPGs, in middle school, she was an avid anime lover. While it never progressed to cosplaying, it did influence her, making her act like an anime character when she's really hyped up. Of course her mother was worried about her consistent gaming. Her father wasn't, in fact he was always buying her the latest gear for her gaming exploits.
When Kotone graduated middle school, her mother enrolled her in Fumizuki Academy, in the hopes that the environment will force her to drop gaming. Well, for Kotone, she scored a decent score (she spent the previous night gaming), and landed herself in D class. She was influenced by the academy, but only because the avatar she summoned looked like her own in-game avatar. Her mother was extremely angry and confiscated all the electronics. For 3 days and 3 nights, Kotone was depressed. Some say that a black cloud could be seen surrounding her, others just said that her hair was in a mess from her going from barely keeping it tidy to not even bothering with life. Eventually Kotone's mother relented and gave back her games under a single condition, "Be in Class A." That Kotone could do. Her years of cramming aided her as she crammed extremely well for a transfer exam. She succeeded in getting into Class A, but because she continued her gaming exploits, she remained the lowest in the class in everything except exams. Well, during her time in Class A, she became well acquainted with the Summoner Battle System, treating it like its own MMORPG.
While her exams were good enough to keep her in Class A, her other scores weren't, and she dropped down to Class B. Once again her mother was furious, and made her final ultimatum, "Be the Class Rep." Well, it was fairly easy for Kotone to be the class rep, it just meant more cramming. So she did, and is now the class rep. Even though the position of Class Rep is tedious, she somehow always found time to play video games. Well, she slowly grew to like the position, likening it to a Party Leader, so when she went into ESB, she started acting more and more like a Party Leader. Despite being generally known in class as a gamer nerd, she's still the best in the exams and leads the class into battle with great theatrics.
Fun facts:
Loves to eat potato chips, but dreams of eating anime meat.
Has a surprising amount of strength when it comes to Dance Dance Revolution, but nothing else.
[/div][/div]
[/div][div class=selectionBar][div class=tab][div class="arrow infoArrow"][/div]Basic Info[/div] ◦ [div class=tab][div class="arrow personaArrow"][/div]Personality[/div] ◦ [div class=tab][div class="arrow skillsArrow"][/div]Skills[/div] ◦ [div class=tab][div class="arrow bioArrow"][/div]Biography[/div][/div][/div][/div][/div][/div]
Alteras
The Sleepy Prisoner
Classroom Battle
This is a CS I made for a Baka and Test RP I'm currently in. This CS was quite fun, and I am surprised by how fast I managed to finish this one. There isn't anything fancy like the other ones, just some good ole BBscript here. Everything (including the font-size) has been designed so that it'll work and maintain its look on practically any screen. Uses both flexboxes and CSS grids, so that was fun. The character image was pulled forward using z-index. Overall, it's a fairly simple code.
This is a CS I made for a Baka and Test RP I'm currently in. This CS was quite fun, and I am surprised by how fast I managed to finish this one. There isn't anything fancy like the other ones, just some good ole BBscript here. Everything (including the font-size) has been designed so that it'll work and maintain its look on practically any screen. Uses both flexboxes and CSS grids, so that was fun. The character image was pulled forward using z-index. Overall, it's a fairly simple code.
Code:
[nobr]
[class=container]
width:100%;
padding-top: calc( 9/16 * 100%);
background-image: linear-gradient( 30deg, #FEDBE3, #FDF3DB, #D2E6EE);
box-sizing: border-box;
position: relative;
--color: rgb(93, 41, 113);
[/class]
[class=containerInside]
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 10px;
top:0;
padding-bottom: 0px;
position: absolute;
[/class]
[class=image]
font-size:0;
filter: drop-shadow(0 0 1px white);
[/class]
[class=Chara]
position: absolute;
height: 100%;
padding-right: calc( 480 / 753 * 100%);
top:0;
background-image: url('https://www.rpnation.com/media/www-pinterest-comdfhuisf_waifu2x_art_noise3_tta_1-png.34866/full');
background-size: contain;
background-repeat: no-repeat;
display: block;
z-index: 2;
pointer-events: none;
[/class]
[class=flex]
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
[/class]
[class=grid]
display: grid;
grid-template-columns: 1fr calc( 19.75% + 10px);
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'Top Avatar'
'Main Avatar'
'Bottom Avatar';
width: 100%;
height: 35%;
position: relative;
font-size: calc( 12px + (100 - 12) * (100vh - 200px) / (1280 - 200) );
[/class]
[class=Avatar]
font-size:0;
grid-area: Avatar;
height: 100%;
width: 100%;
position: relative;
background-image: url('https://www.rpnation.com/media/rosamia_-sr-_sda-png.34864/full');
background-size: contain;
background-repeat: no-repeat;
[/class]
[class=barBG1]
background-color: var(--color);
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: span 2;
[/class]
[class=topBar1]
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
font-size: 1em;
line-height: .9;
white-space: nowrap;
color: var(--color);
grid-area: Top;
[/class]
[class=botBar1]
position: absolute;
top:0;
width: 100%;
text-align: right;
font-size: 1em;
line-height: .9;
white-space: nowrap;
color: var(--color);
grid-area: Bottom;
[/class]
[class=mainBar1]
grid-area: Main;
position: relative;
display: block;
width: 100%;
height: 100%;
[/class]
[comment]Coded by Alteras[/comment]
[class=icons]
position: absolute;
display: block;
height: auto;
width: 100%;
top:50%;
transform: translateY(-50%);
text-align: right;
font-size: .75em;
color: white;
[/class]
[class=content]
width: 100%;
height: auto;
margin-bottom: 2%;
position: relative;
flex: 1 0 auto;
display: flex;
flex-flow: column nowrap;
[/class]
[class=contentBoxes]
width: 100%;
flex: 1 0 auto;
background-color: #756184;
overflow: hidden;
position: relative;
[/class]
[class=selectionBar]
margin-top: 2%;
width: 100%;
height: 19.2%;
background-color: var(--color);
text-align: right;
font-size: calc(12px + (100 - 12) * (100vh - 200px) / (1280 - 200) );
line-height: 1;
color: white;
padding-right: 2%;
box-sizing: border-box;
[/class]
[class=tab]
display: inline;
position: relative;
cursor: pointer;
[/class]
[class=arrow]
position: absolute;
display: block;
top: -70%;
left: 50%;
transform: translateX(-50%);
color: #756184;
[/class]
[class=contentBox]
height: 98%;
top:1%;
right: 2%;
width: 60%;
position: absolute;
overflow:hidden;
[/class]
[class=scroll]
width: 100%;
height: 100%;
padding-right: 100px;
overflow-Y: scroll;
color: white;
font-size: calc( 8px + (15 - 8) * (100vw - 200px) / (1280 - 200));
[/class]
[script=tab]
set CurTab "Basic Info"
hide personaContent
hide skillsContent
hide bioContent
hide personaArrow
hide skillsArrow
hide bioArrow
[/script]
[script class=tab on=click]
set SelTab (getText)
if (eq ${CurTab} ${SelTab} ) (stop)
slideUp 500 arrow
fadeOut 500 contentBox
if (eq ${SelTab} "Basic Info") (slideDown 500 infoArrow)
if (eq ${SelTab} "Basic Info") (fadeIn 500 infoContent)
if (eq ${SelTab} "Personality") (slideDown 500 personaArrow)
if (eq ${SelTab} "Personality") (fadeIn 500 personaContent)
if (eq ${SelTab} "Skills") (slideDown 500 skillsArrow)
if (eq ${SelTab} "Skills") (fadeIn 500 skillsContent)
if (eq ${SelTab} "Biography") (slideDown 500 bioArrow)
if (eq ${SelTab} "Biography") (fadeIn 500 bioContent)
set CurTab ${SelTab}
[/script]
[/nobr][div class=container][div class=containerInside][div class="image Chara"][/div][div class=flex][nobr][div class=grid]
[div class=barBG1][/div]
[div class="Avatar image"][/div]
[div class=topBar1][font=Wire One]Class-B Representative[/font][/div]
[div class=botBar1][font=Wire One]Kotone Yamashita[/font][/div]
[div class=mainBar1][div class=icons][fa]fa-bed fa-fw[/fa][fa]fa-desktop fa-fw[/fa][fa]fa-book fa-fw[/fa][fa]fa-crosshairs fa-fw[/fa][fa]fa-headphones fa-fw[/fa][fa]fa-mobile fa-fw[/fa][fa]fa-gamepad fa-fw[/fa][fa]fa-power-off fa-fw[/fa][/div][/div]
[/div][/nobr][div class=content][div class=contentBoxes]
[div class="contentBox infoContent"][div class=scroll][font=Roboto][b]Basic Info[/b]:
Content
[/font][/div][/div]
[div class="contentBox personaContent"][div class=scroll][font=Roboto][b]Personality[/b]:
Content
[/font][/div][/div]
[div class="contentBox skillsContent"][div class=scroll][font=Roboto][b]Skills[/b]:
Content
[/font][/div][/div]
[div class="contentBox bioContent"][div class=scroll][font=Roboto][b]Biography[/b]:
Content
[/font][/div][/div]
[/div][div class=selectionBar][font=Wire One][div class=tab][div class="arrow infoArrow"][fa]fa-sort-down[/fa][/div]Basic Info[/div] ◦ [div class=tab][div class="arrow personaArrow"][fa]fa-sort-down[/fa][/div]Personality[/div] ◦ [div class=tab][div class="arrow skillsArrow"][fa]fa-sort-down[/fa][/div]Skills[/div] ◦ [div class=tab][div class="arrow bioArrow"][fa]fa-sort-down[/fa][/div]Biography[/div][/font][/div][/div][/div][/div][/div]Alteras
The Sleepy Prisoner
[class=container]
--color-1: black;
--color-2: #c4c5ca;
--width: calc( (1920 / 2963) * 84vh);
--shadow-content-height: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
height: auto;
padding: 10px;
position: relative;
background-color: var(--color-1);
color: var(--color-2);
overflow: hidden;
[/class]
[class=imageFiller]
position: absolute;
height: 84vh;
top:0;
left:0;
width: 100%;
[/class]
[class=flex]
position: relative;
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
[/class]
[class=image]
position: relative;
top: 0;
font-size:0;
height: 84vh;
max-height: 100%;
padding-right: var(--width);
max-width: 100%;
box-sizing: border-box;
[/class]
[class=imageInside]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
font-size: 0;
[/class]
[class=imageShadow]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 6.5s;
[/class]
[class=shadows]
box-shadow: inset 0 0 3vh 3vh var(--color-1);
[/class]
[class=content]
position: relative;
height: 100%;
width: 100%;
max-width: 0;
box-sizing: border-box;
transition: max-width 2s linear 13s;
overflow: hidden;
padding: 5px;
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
[/class]
[class=contentHolder]
position: relative;
max-height:0;
max-width:0;
height: 84vh;
overflow: hidden;
width: var(--width);
transition: max-height 1s linear 12s, max-width 2s linear 13s;
[/class]
[class=contentShadow]
position: absolute;
z-index:4;
height: 100%;
width: 100%;
top:0;
left:0;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 15s;
pointer-events: none;
[/class]
[class=contentHolderOpen]
max-height: 84vh;
max-width: var(--width);
[/class]
[class=contentOpen]
max-width: var(--width);
[/class]
[class=contentShadowOpen]
box-shadow: inset 0 0 0 0 var(--color-1);
[/class]
[class=quote]
color: var(--color-2);
position: absolute;
padding: 5%;
width: 100%;
z-index:2;
pointer-events: none;
font-size: calc( 24px + (50 - 24) * (100vw - 200px) / (1280 - 200) );
[/class]
[class=quoteTop]
top:0;
left:0;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s;
[/class]
[class=quoteMid]
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 2s;
text-align: center;
[/class]
[class=quoteBot]
bottom:0;
right:0;
text-align: right;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 4s;
[/class]
[class=quoteOpen]
opacity: 1;
color: transparent;
[/class]
[class=name]
position: relative;
width: 100%;
height: auto;
max-height: 100%;
text-align: center;
border-bottom: 2px solid var(--color-2);
box-sizing: border-box;
font-size: calc( 46px + (70 - 46) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
flex: 0;
[/class]
[class=tabs]
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
margin-bottom: 2px;
font-size: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
z-index: 3;
[/class]
[class=tab]
flex: 1;
display: inline;
text-align: center;
z-index: 3;
cursor: pointer;
[/class]
[class=tabContentHolder]
margin-top: calc( -1* var(--shadow-content-height) );
position: relative;
overflow: hidden;
flex: 1 0 auto;
box-sizing: border-box;
[/class]
[class=tabContent]
height: 100%;
width: 100%;
top:0;
left:0;
position: absolute;
overflow: hidden;
opacity: 1;
transition: opacity 1ms 1s;
[/class]
[class=scroll]
padding-top: var(--shadow-content-height);
width: 100%;
height: calc( 100% - var(--shadow-content-height) );
position: relative;
overflow-Y: scroll;
padding-right: 100px;
font-size: 16px;
[/class]
[class=tabShadow]
position: absolute;
top:0;
left:-10%;
width: 120%;
height: 100%;
z-index: 2;
pointer-events: none;
box-shadow: inset 0 calc( -1 * var(--shadow-content-height) ) var(--shadow-content-height) var(--color-1), inset 0 var(--shadow-content-height) var(--shadow-content-height) var(--color-1);
transition: box-shadow 1s 1.1s;
[/class]
[class=tabShadowOpen]
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 1s;
[/class]
[class=Opacity]
opacity: 0;
pointer-events: none;
[/class]
[script class=container on=mouseenter]
addClass shadows imageShadow
addClass quoteOpen quote
addClass contentOpen content
addClass contentHolderOpen contentHolder
addClass contentShadowOpen contentShadow
[/script]
[script=tab]
set CurTab "Basic"
addClass tabShadowOpen tabShadow
removeClass tabShadowOpen basicShadow
addClass Opacity tabContent
removeClass Opacity basicContent
[/script]
[script class=tab on=click]
set SelTab (getText)
if (eq ${CurTab} ${SelTab} ) (stop)
if (eq ${SelTab} "Basic" ) (removeClass tabShadowOpen basicShadow) (addClass tabShadowOpen basicShadow)
if (eq ${SelTab} "Basic" ) (removeClass Opacity basicContent) (addClass Opacity basicContent)
if (eq ${SelTab} "Persona" ) (removeClass tabShadowOpen personaShadow) (addClass tabShadowOpen personaShadow)
if (eq ${SelTab} "Persona" ) (removeClass Opacity personaContent) (addClass Opacity personaContent)
if (eq ${SelTab} "Physique" ) (removeClass tabShadowOpen physiqueShadow) (addClass tabShadowOpen physiqueShadow)
if (eq ${SelTab} "Physique" ) (removeClass Opacity physiqueContent) (addClass Opacity physiqueContent)
if (eq ${SelTab} "Extra" ) (removeClass tabShadowOpen extraShadow) (addClass tabShadowOpen extraShadow)
if (eq ${SelTab} "Extra" ) (removeClass Opacity extraContent) (addClass Opacity extraContent)
set CurTab ${SelTab}
[/script]
[div class=container][div class=imageFiller]
[div class="quote quoteTop"]a Blade slashed through the Darkness[/div]
[div class="quote quoteMid"]the Battle ended[/div]
[div class="quote quoteBot"]and from it, She emerged[/div]
[/div][div class=flex][div class=image][div class=imageInside]
[/div][div class=imageShadow][/div][/div][div class=contentHolder][div class=contentShadow][/div][div class=content][div class=name]Lady Jing Yu
[div class="tabContent basicContent"][div class="tabShadow basicShadow"][/div][div class=scroll]Name:
Jing Yu
Aliases:
Lady Jing Yu
The Shadow of the East
Age:
24
Gender:
Female
Race:
Human
Class:
Shadow Warrior - A swordswoman who uses rogue-like spells in combat. She can act either as an assassin or as a swordswoman.
[/div][/div]
[div class="tabContent personaContent"][div class="tabShadow personaShadow"][/div][div class=scroll]Sexuality:
Heterosexual
High Concept:
A well known mercenary and warrior of the Eastern Kingdoms who has decided join the resistance after the Eastern Kingdoms were subjugated.
Character Alignment:
Neutral Good - She may be a mercenary, but she knows when not to take the money.
Relatives:
Mother - Alive
Father - Questionable
Younger Brother - Dead
Organizations\Affiliations:
The (former) Eastern Kingdoms - Her main employers
The Resistance at Bleakpost - Her current organization and cause
Underground Mercenaries - Familiar with some of them.
Personality:
Silent and reliable, Lady Jing Yu is a mercenary with silent pride and a resume to back it up. She shows her emotions through the smile the peeks out from beneath her hat. Despite being a mercenary, she knows when not to take the money, only taking up her blade when she believes it necessary. She is very observant of her surroundings, and can react to new occurrences. She can deal with arrogant people and such, albeit with a blade against their throat. She always puts her own life first, willing to leave a battle if she deems it an impossible task. Despite this, she, like many, refuse to accept the new overlord's rule. If she will ever stand for one cause, it would be this one: to save her homeland.
Backstory:
Jing Yu was born in a village between the great military powers of the Eastern Kingdoms. Her family raised her with love and affection. While she helped her parents in the fields, she was taught basic martial arts by a retired soldier in the village as a means of protection. It was, after all, the frontiers between the Kingdoms. Sometimes her dad was called into service, and he won't be seen by the family for a few years. Well, one day, some time after her younger brother was born, he was called into service once more. This was fine for the family, as they gotten used to it. but as time grew on, word never came back of where her father was. During this time, Jing Yu started to become to breadwinner of the family, not only working in the fields, but earning extra money by working for the local guard.
One day, when she around the marriageable age of 13, Jing was sought after by some pompous noble whom she didn't like. Eventually, because of his repeated requests, she ran off into the countryside. The direction she ran towards was where a battle between the Kingdoms was occurring. She tried to turn away but was the battlefield soon encompassed her. Stuck and frightened by the clashes of metal surrounding her, she shakily held a sword that was tossed aside by a fallen soldier. She clung to the grip of it, turning her knuckles white while she tried to avoid the carnage that danced around her. She was only attacked several times, mistaken for the enemy by both sides, only to be saved either by their mercy or the attack of the opposing side. Eventually the battle ended, and she stood in a sea of wailing corpses. Soldiers of the winning side, looking for survivors among their comrades, caught her in her trauma and brought her to their camp. The commanding officer praised her for having survived, thinking that she took an active role in the battle. She was offered training as a soldier in his army. She, still in her stupor, shakily accepted.
Jing Yu received substantial training, at first weak and uncontrolled. She quickly got use to a soldier's regimen, and slowly became a skilled fighter. She survived a few battles with that army, but when the commander she served lost one, she was forced to make a decision, join her comrades or become a traitor. Becoming a traitor wasn't something new in that army, soldier with enough skill became mercenaries, and she had learned enough skills to survive as one. So she became a mercenary for the winning army. This occurred several times, as she slowly perfected her swordsmanship and began to learn magic. Her own courage hardened and her cowardice diminished until it was nothing like the little girl years ago. When she had enough money, she hired an old martial artist to teach her techniques, giving her the foundations for her Shadow Magic.
By the time she had perfected her Shadow Magic, she was already small but reputable mercenary. She had been hired by all armies, and was then hired for missions into the West. It wasn't until she unveiled her shadow magic in a grand battle at the border between the East and the West at the age of 20 that her name turned from myth to legend, a war hero at home and a nightmare in the west. The battle was the opening battle for allied kingdoms of the East to begin invading the Western Realms, following the rumors of a dark overlord appearing the West who actually managed to take power. Unfortunately the Dark Overlord was faster and more effective at his goals than the East expected, leading to a full retreat of the Eastern Allied Armies. But even this was to no avail as the Dark Overlord's forces caught up to them, threatened the homeland, and soon controlled it. Luckily (or unluckily), the high command thought it best to leave behind several units, mainly mercenaries, during their retreat, instructing them to lay the groundwork for their future retaliation, if any. As such, Lady Jing Yu, one of the East's greatest mercenaries, joined the rebellion in Blackbeat, preparing to free her homeland.
[/div][/div]
[div class="tabContent physiqueContent"][div class="tabShadow physiqueShadow"][/div][div class=scroll]Weapons & Armor:
Jian - A beautiful double edged longsword made of steel. With a smooth and thin blade, Lady Yu can use it to slice through many things. Its guard has an ornate design in bronze and its scabbard, made of bronze and treated wood, matches in elegance and simplicity to the blade of the sword. It requires quite some strength to wield, but when used with the techniques of eastern swordmasters, it can bring about deadly consequences.
Outfit - a tightly sown and well bounded series of bronze, leather, and fur. Her gloves up to her shoulder guards are made of hardened leather, while her dress is a series of soft leather for easy mobility. Her torso is covered by hard leather and bronze sown together. Underneath, she wears a breathable undershirt. Leather straps running across her outfit, providing easy places of storage and hiding. Fur lies on top of her shoulder, providing the neck protection from the elements. Her hat, a farmer's hat by design, is fairly ornate in of itself. It is made of bamboo, bound together by horse hair and silks. A single piece of leather runs across it. A small embroidered charm hangs from the edge of the hat. She also wears leather boots, wear she hides stuff in.
Throwing Knifes - She keeps several throwing knifes on her person, often using them as a dagger when she needs to.
Items & Personal Belongings:
Money - She carries quite the amount of them, of course all hidden throughout her person.
Ivory Stamp Block - Serves as her signature in official documents. Also serves as her identification.
Several small charms - Small charms of she uses to pray to the deities of old. She keeps them very close to herself as a good luck charm.
Skills & Abilities:
Mercenary - Use to killing people for money. She can handle enemies and people very well.
Warrior from the East - Trained in the eastern styles of combat and martial arts. She makes extensive use of martial arts with the blade, performing deadly techniques that draw far more power than what a normal strike would do.
Legend among the Eastern Kingdoms - Despite being a mercenary with an assassin spell set, she is quite well known for being in the employment of the Eastern Kingdoms. To those at home, she is a legend, a war hero of sorts, respected by all. To those in the west, she is like a nightmare, utilizing foreign magic and techniques to keep away those who look to raid the East, at least she was until the Dark Overlord took over.
Wuxia - A practitioner of the mystic martial arts, combining mysticism with swordplay. Almost supernatural swordsmanship.
Traveler - Use to traveling long distances without tire. Knows multiple languages and has high stamina.
Spells & Magic:
Shadow Warrior - Using the oriental mysticism and magic of the east, Lady Yu uses a system of magic and techniques not easily identifiable by scholars of the west. She specializes in "Oriental Shadow Magic," as western scholars would explain it. Her techniques resemble that of a monk trained in the unbalanced use of the body and spirit. Her magic is gained from the interaction between her and her surroundings, seeking either to balance or unbalance a natural state. It is her most powerful and fundamental method of attack. She attacks using her Shadow. She has two methods of attack. That being so, she needs there to be some form of light for her magic to work, so the early morning, evenings, twilight, as well as full moons are when she's most effective. She can still use the skill at any other time except when it is pitch-black around her. While it uses shadows a lot, it shouldn't be considered dark magic, as it is simply a use of the balance of Eastern Mysticism.
Within the Realm - She moves in such a way that her own shadow seemingly attacks an enemy's shadow. While it won't cause physical damage to the enemy, it'll cause internal pain to them, evidenced by their own shadow bearing cuts and dents. She is effectively cutting off their spirit to their body. A "fatal attack" to the shadow would leave the enemy in temporary but agonizing pain. She would need to completely destroy the shadow for any real damage to occur. The defense of their shadows are determined by their willpower, so it isn't effective on someone who might have extreme devotion to something.
Across the Realm - She physically attacks the enemy's shadow herself. This could be something like stomping on a shadow or piercing her blade into the ground. This results in physical damage being dealt. Of course this still has to go through the enemy's defenses before it can deal any proper attack on the person. Even though she is attacking the spirit, the enemy will receive the physical damage as a reflection of their own figure. She can pin enemies in place or disable their limbs just by leaving her weapons in place of the shadow. It is significantly tougher to escape from using willpower, but also tougher for her to execute since it only works if the enemy's shadow is clearly defined (like in broad daylight).
Beyond the Realm - Her shadows materialize. It is similar to how necromancers can summon beings from darkness, however, the shadows must still connect to her. So the shadow of her blade can extend out from her actual blade and deal physical damage. These act like normal attacks. The shadows are paper thin, and can be cut down without any consequence, but she can continue to summon them back into physical space. The shadows must be in the light, as when it goes under a dark spot, that part of it disappears. Beyond the Realm is her trump card, so she won't use it very often.
Weaknesses:
Has a moral compass, albeit a very weak one. She can be convinced!!!
She needs light for her magic to work.
Her main magic can be overcome with willpower.
[/div][/div]
[div class="tabContent extraContent"][div class="tabShadow extraShadow"][/div][div class=scroll]Hobbies:
Swordplay
Training
Martial Arts
Quotes:
"Just as your emotions show through your blade, so too does the soul in your shadow. Both, I shall break."
"A mercenary's work ends when they are paid or they are slain."
"Do not blame me for your loss, blame yourself for not steeling your mind."
Theme:
[/div][/div]
[/div][/div][/div][/div][/div]
[div class="quote quoteTop"]a Blade slashed through the Darkness[/div]
[div class="quote quoteMid"]the Battle ended[/div]
[div class="quote quoteBot"]and from it, She emerged[/div]
[/div][div class=flex][div class=image][div class=imageInside]
The Shadow of the East
[/div][div class=tabs][div class=tab]Basic[/div][div class=tab]Persona[/div][div class=tab]Physique[/div][div class=tab]Extra[/div][/div][div class=tabContentHolder][div class="tabContent basicContent"][div class="tabShadow basicShadow"][/div][div class=scroll]Name:
Jing Yu
Aliases:
Lady Jing Yu
The Shadow of the East
Age:
24
Gender:
Female
Race:
Human
Class:
Shadow Warrior - A swordswoman who uses rogue-like spells in combat. She can act either as an assassin or as a swordswoman.
[/div][/div]
[div class="tabContent personaContent"][div class="tabShadow personaShadow"][/div][div class=scroll]Sexuality:
Heterosexual
High Concept:
A well known mercenary and warrior of the Eastern Kingdoms who has decided join the resistance after the Eastern Kingdoms were subjugated.
Character Alignment:
Neutral Good - She may be a mercenary, but she knows when not to take the money.
Relatives:
Mother - Alive
Father - Questionable
Younger Brother - Dead
Organizations\Affiliations:
The (former) Eastern Kingdoms - Her main employers
The Resistance at Bleakpost - Her current organization and cause
Underground Mercenaries - Familiar with some of them.
Personality:
Silent and reliable, Lady Jing Yu is a mercenary with silent pride and a resume to back it up. She shows her emotions through the smile the peeks out from beneath her hat. Despite being a mercenary, she knows when not to take the money, only taking up her blade when she believes it necessary. She is very observant of her surroundings, and can react to new occurrences. She can deal with arrogant people and such, albeit with a blade against their throat. She always puts her own life first, willing to leave a battle if she deems it an impossible task. Despite this, she, like many, refuse to accept the new overlord's rule. If she will ever stand for one cause, it would be this one: to save her homeland.
Backstory:
Jing Yu was born in a village between the great military powers of the Eastern Kingdoms. Her family raised her with love and affection. While she helped her parents in the fields, she was taught basic martial arts by a retired soldier in the village as a means of protection. It was, after all, the frontiers between the Kingdoms. Sometimes her dad was called into service, and he won't be seen by the family for a few years. Well, one day, some time after her younger brother was born, he was called into service once more. This was fine for the family, as they gotten used to it. but as time grew on, word never came back of where her father was. During this time, Jing Yu started to become to breadwinner of the family, not only working in the fields, but earning extra money by working for the local guard.
One day, when she around the marriageable age of 13, Jing was sought after by some pompous noble whom she didn't like. Eventually, because of his repeated requests, she ran off into the countryside. The direction she ran towards was where a battle between the Kingdoms was occurring. She tried to turn away but was the battlefield soon encompassed her. Stuck and frightened by the clashes of metal surrounding her, she shakily held a sword that was tossed aside by a fallen soldier. She clung to the grip of it, turning her knuckles white while she tried to avoid the carnage that danced around her. She was only attacked several times, mistaken for the enemy by both sides, only to be saved either by their mercy or the attack of the opposing side. Eventually the battle ended, and she stood in a sea of wailing corpses. Soldiers of the winning side, looking for survivors among their comrades, caught her in her trauma and brought her to their camp. The commanding officer praised her for having survived, thinking that she took an active role in the battle. She was offered training as a soldier in his army. She, still in her stupor, shakily accepted.
Jing Yu received substantial training, at first weak and uncontrolled. She quickly got use to a soldier's regimen, and slowly became a skilled fighter. She survived a few battles with that army, but when the commander she served lost one, she was forced to make a decision, join her comrades or become a traitor. Becoming a traitor wasn't something new in that army, soldier with enough skill became mercenaries, and she had learned enough skills to survive as one. So she became a mercenary for the winning army. This occurred several times, as she slowly perfected her swordsmanship and began to learn magic. Her own courage hardened and her cowardice diminished until it was nothing like the little girl years ago. When she had enough money, she hired an old martial artist to teach her techniques, giving her the foundations for her Shadow Magic.
By the time she had perfected her Shadow Magic, she was already small but reputable mercenary. She had been hired by all armies, and was then hired for missions into the West. It wasn't until she unveiled her shadow magic in a grand battle at the border between the East and the West at the age of 20 that her name turned from myth to legend, a war hero at home and a nightmare in the west. The battle was the opening battle for allied kingdoms of the East to begin invading the Western Realms, following the rumors of a dark overlord appearing the West who actually managed to take power. Unfortunately the Dark Overlord was faster and more effective at his goals than the East expected, leading to a full retreat of the Eastern Allied Armies. But even this was to no avail as the Dark Overlord's forces caught up to them, threatened the homeland, and soon controlled it. Luckily (or unluckily), the high command thought it best to leave behind several units, mainly mercenaries, during their retreat, instructing them to lay the groundwork for their future retaliation, if any. As such, Lady Jing Yu, one of the East's greatest mercenaries, joined the rebellion in Blackbeat, preparing to free her homeland.
[/div][/div]
[div class="tabContent physiqueContent"][div class="tabShadow physiqueShadow"][/div][div class=scroll]Weapons & Armor:
Jian - A beautiful double edged longsword made of steel. With a smooth and thin blade, Lady Yu can use it to slice through many things. Its guard has an ornate design in bronze and its scabbard, made of bronze and treated wood, matches in elegance and simplicity to the blade of the sword. It requires quite some strength to wield, but when used with the techniques of eastern swordmasters, it can bring about deadly consequences.
Outfit - a tightly sown and well bounded series of bronze, leather, and fur. Her gloves up to her shoulder guards are made of hardened leather, while her dress is a series of soft leather for easy mobility. Her torso is covered by hard leather and bronze sown together. Underneath, she wears a breathable undershirt. Leather straps running across her outfit, providing easy places of storage and hiding. Fur lies on top of her shoulder, providing the neck protection from the elements. Her hat, a farmer's hat by design, is fairly ornate in of itself. It is made of bamboo, bound together by horse hair and silks. A single piece of leather runs across it. A small embroidered charm hangs from the edge of the hat. She also wears leather boots, wear she hides stuff in.
Throwing Knifes - She keeps several throwing knifes on her person, often using them as a dagger when she needs to.
Items & Personal Belongings:
Money - She carries quite the amount of them, of course all hidden throughout her person.
Ivory Stamp Block - Serves as her signature in official documents. Also serves as her identification.
Several small charms - Small charms of she uses to pray to the deities of old. She keeps them very close to herself as a good luck charm.
Skills & Abilities:
Mercenary - Use to killing people for money. She can handle enemies and people very well.
Warrior from the East - Trained in the eastern styles of combat and martial arts. She makes extensive use of martial arts with the blade, performing deadly techniques that draw far more power than what a normal strike would do.
Legend among the Eastern Kingdoms - Despite being a mercenary with an assassin spell set, she is quite well known for being in the employment of the Eastern Kingdoms. To those at home, she is a legend, a war hero of sorts, respected by all. To those in the west, she is like a nightmare, utilizing foreign magic and techniques to keep away those who look to raid the East, at least she was until the Dark Overlord took over.
Wuxia - A practitioner of the mystic martial arts, combining mysticism with swordplay. Almost supernatural swordsmanship.
Traveler - Use to traveling long distances without tire. Knows multiple languages and has high stamina.
Spells & Magic:
Shadow Warrior - Using the oriental mysticism and magic of the east, Lady Yu uses a system of magic and techniques not easily identifiable by scholars of the west. She specializes in "Oriental Shadow Magic," as western scholars would explain it. Her techniques resemble that of a monk trained in the unbalanced use of the body and spirit. Her magic is gained from the interaction between her and her surroundings, seeking either to balance or unbalance a natural state. It is her most powerful and fundamental method of attack. She attacks using her Shadow. She has two methods of attack. That being so, she needs there to be some form of light for her magic to work, so the early morning, evenings, twilight, as well as full moons are when she's most effective. She can still use the skill at any other time except when it is pitch-black around her. While it uses shadows a lot, it shouldn't be considered dark magic, as it is simply a use of the balance of Eastern Mysticism.
Within the Realm - She moves in such a way that her own shadow seemingly attacks an enemy's shadow. While it won't cause physical damage to the enemy, it'll cause internal pain to them, evidenced by their own shadow bearing cuts and dents. She is effectively cutting off their spirit to their body. A "fatal attack" to the shadow would leave the enemy in temporary but agonizing pain. She would need to completely destroy the shadow for any real damage to occur. The defense of their shadows are determined by their willpower, so it isn't effective on someone who might have extreme devotion to something.
Across the Realm - She physically attacks the enemy's shadow herself. This could be something like stomping on a shadow or piercing her blade into the ground. This results in physical damage being dealt. Of course this still has to go through the enemy's defenses before it can deal any proper attack on the person. Even though she is attacking the spirit, the enemy will receive the physical damage as a reflection of their own figure. She can pin enemies in place or disable their limbs just by leaving her weapons in place of the shadow. It is significantly tougher to escape from using willpower, but also tougher for her to execute since it only works if the enemy's shadow is clearly defined (like in broad daylight).
Beyond the Realm - Her shadows materialize. It is similar to how necromancers can summon beings from darkness, however, the shadows must still connect to her. So the shadow of her blade can extend out from her actual blade and deal physical damage. These act like normal attacks. The shadows are paper thin, and can be cut down without any consequence, but she can continue to summon them back into physical space. The shadows must be in the light, as when it goes under a dark spot, that part of it disappears. Beyond the Realm is her trump card, so she won't use it very often.
Weaknesses:
Has a moral compass, albeit a very weak one. She can be convinced!!!
She needs light for her magic to work.
Her main magic can be overcome with willpower.
[/div][/div]
[div class="tabContent extraContent"][div class="tabShadow extraShadow"][/div][div class=scroll]Hobbies:
Swordplay
Training
Martial Arts
Quotes:
"Just as your emotions show through your blade, so too does the soul in your shadow. Both, I shall break."
"A mercenary's work ends when they are paid or they are slain."
"Do not blame me for your loss, blame yourself for not steeling your mind."
Theme:
[/div][/div]
[/div][/div][/div][/div][/div]
Alteras
The Sleepy Prisoner
From the Shadows
This is a CS I made for the RP When Darkness Wins which I'm very hyped about. This is a very very cinematic design. On desktop, you only have to hover for the opening to play out, while on mobile, you'll click on it. Because of extensive use of flexboxes, this is more mobile friendly than my mobile friendly codes. The shadows are achieved by using a series of divs with box-shadows set to inset, and the quotes fading in and using a transition delay between opacity and color. It also uses a fluid typography system, make good use of the space both on desktop and mobile. Because of how big the image is, it will always try to size to the height of the screen. Ah it should be noted that in order for it to function, you have to input the size of the image where it says --img-h and --img-w like my older pieces.
This is a CS I made for the RP When Darkness Wins which I'm very hyped about. This is a very very cinematic design. On desktop, you only have to hover for the opening to play out, while on mobile, you'll click on it. Because of extensive use of flexboxes, this is more mobile friendly than my mobile friendly codes. The shadows are achieved by using a series of divs with box-shadows set to inset, and the quotes fading in and using a transition delay between opacity and color. It also uses a fluid typography system, make good use of the space both on desktop and mobile. Because of how big the image is, it will always try to size to the height of the screen. Ah it should be noted that in order for it to function, you have to input the size of the image where it says --img-h and --img-w like my older pieces.
Code:
[nobr]
[class=container]
--color-1: black;
--color-2: #c4c5ca;
--img-h: 2963;
--img-w: 1920;
--width: calc( (var(--img-w) / var(--img-h) ) * 84vh);
--shadow-content-height: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
height: auto;
padding: 10px;
position: relative;
background-color: var(--color-1);
color: var(--color-2);
overflow: hidden;
[/class]
[class=imageFiller]
position: absolute;
height: 84vh;
top:0;
left:0;
width: 100%;
[/class]
[class=flex]
position: relative;
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
[/class]
[class=image]
position: relative;
top: 0;
font-size:0;
height: 84vh;
max-height: 100%;
padding-right: var(--width);
max-width: 100%;
box-sizing: border-box;
[/class]
[class=imageInside]
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
font-size: 0;
[/class]
[class=imageShadow]
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 6.5s;
[/class]
[class=shadows]
box-shadow: inset 0 0 3vh 3vh var(--color-1);
[/class]
[class=content]
position: relative;
height: 100%;
width: 100%;
max-width: 0;
box-sizing: border-box;
transition: max-width 2s linear 13s;
overflow: hidden;
padding: 5px;
display: flex;
flex-flow: column nowrap;
justify-content: stretch;
[/class]
[class=contentHolder]
position: relative;
max-height:0;
max-width:0;
height: 84vh;
overflow: hidden;
width: var(--width);
transition: max-height 1s linear 12s, max-width 2s linear 13s;
[/class]
[class=contentShadow]
position: absolute;
z-index:4;
height: 100%;
width: 100%;
top:0;
left:0;
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 3s 15s;
pointer-events: none;
[/class]
[class=contentHolderOpen]
max-height: 84vh;
max-width: var(--width);
[/class]
[class=contentOpen]
max-width: var(--width);
[/class]
[class=contentShadowOpen]
box-shadow: inset 0 0 0 0 var(--color-1);
[/class]
[class=quote]
color: var(--color-2);
position: absolute;
padding: 5%;
width: 100%;
z-index:2;
pointer-events: none;
font-size: calc( 24px + (50 - 24) * (100vw - 200px) / (1280 - 200) );
[/class]
[class=quoteTop]
top:0;
left:0;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s;
[/class]
[class=quoteMid]
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 2s;
text-align: center;
[/class]
[class=quoteBot]
bottom:0;
right:0;
text-align: right;
opacity: 0;
transition: color 2.5s 6s, opacity 1.5s 4s;
[/class]
[class=quoteOpen]
opacity: 1;
color: transparent;
[/class]
[class=name]
position: relative;
width: 100%;
height: auto;
max-height: 100%;
text-align: center;
border-bottom: 2px solid var(--color-2);
box-sizing: border-box;
font-size: calc( 46px + (70 - 46) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
flex: 0;
[/class]
[class=tabs]
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
margin-bottom: 2px;
font-size: calc( 20px + (30 - 20) * (100vw - 200px) / (1280 - 200) );
line-height: 1;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
z-index: 3;
[/class]
[class=tab]
flex: 1;
display: inline;
text-align: center;
z-index: 3;
cursor: pointer;
[/class]
[class=tabContentHolder]
margin-top: calc( -1* var(--shadow-content-height) );
position: relative;
overflow: hidden;
flex: 1 0 auto;
box-sizing: border-box;
[/class]
[class=tabContent]
height: 100%;
width: 100%;
top:0;
left:0;
position: absolute;
overflow: hidden;
opacity: 1;
transition: opacity 1ms 1s;
[/class]
[class=scroll]
padding-top: var(--shadow-content-height);
width: 100%;
height: calc( 100% - var(--shadow-content-height) );
position: relative;
overflow-Y: scroll;
padding-right: 100px;
font-size: 16px;
[/class]
[class=tabShadow]
position: absolute;
top:0;
left:-10%;
width: 120%;
height: 100%;
z-index: 2;
pointer-events: none;
box-shadow: inset 0 calc( -1 * var(--shadow-content-height) ) var(--shadow-content-height) var(--color-1), inset 0 var(--shadow-content-height) var(--shadow-content-height) var(--color-1);
transition: box-shadow 1s 1.1s;
[/class]
[class=tabShadowOpen]
box-shadow: inset 0 0 50vh 50vh var(--color-1);
transition: box-shadow 1s;
[/class]
[class=Opacity]
opacity: 0;
pointer-events: none;
[/class]
[script class=container on=mouseenter]
addClass shadows imageShadow
addClass quoteOpen quote
addClass contentOpen content
addClass contentHolderOpen contentHolder
addClass contentShadowOpen contentShadow
[/script]
[script=tab]
set CurTab "Basic"
addClass tabShadowOpen tabShadow
removeClass tabShadowOpen basicShadow
addClass Opacity tabContent
removeClass Opacity basicContent
[/script]
[script class=tab on=click]
set SelTab (getText)
if (eq ${CurTab} ${SelTab} ) (stop)
if (eq ${SelTab} "Basic" ) (removeClass tabShadowOpen basicShadow) (addClass tabShadowOpen basicShadow)
if (eq ${SelTab} "Basic" ) (removeClass Opacity basicContent) (addClass Opacity basicContent)
if (eq ${SelTab} "Persona" ) (removeClass tabShadowOpen personaShadow) (addClass tabShadowOpen personaShadow)
if (eq ${SelTab} "Persona" ) (removeClass Opacity personaContent) (addClass Opacity personaContent)
if (eq ${SelTab} "Physique" ) (removeClass tabShadowOpen physiqueShadow) (addClass tabShadowOpen physiqueShadow)
if (eq ${SelTab} "Physique" ) (removeClass Opacity physiqueContent) (addClass Opacity physiqueContent)
if (eq ${SelTab} "Extra" ) (removeClass tabShadowOpen extraShadow) (addClass tabShadowOpen extraShadow)
if (eq ${SelTab} "Extra" ) (removeClass Opacity extraContent) (addClass Opacity extraContent)
set CurTab ${SelTab}
[/script]
[/nobr][div class=container][div class=imageFiller]
[div class="quote quoteTop"][font=Arizonia]a Blade slashed through the Darkness[/font][/div]
[div class="quote quoteMid"][font=Arizonia]the Battle ended[/font][/div]
[div class="quote quoteBot"][font=Arizonia]and from it, She emerged[/font][/div]
[/div][div class=flex][div class=image][div class=imageInside][img]https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full[/img][/div][div class=imageShadow][/div][/div][div class=contentHolder][div class=contentShadow][/div][div class=content][div class=name][font=Arizonia]NAME NAME
[div= font-size: .5em]Subtitle[/div][/font][/div][font=Allura][div class=tabs][div class=tab]Basic[/div][div class=tab]Persona[/div][div class=tab]Physique[/div][div class=tab]Extra[/div][/div][/font][div class=tabContentHolder]
[div class="tabContent basicContent"][div class="tabShadow basicShadow"][/div][div class=scroll][font=Open Sans]Content for Basic
[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent personaContent"][div class="tabShadow personaShadow"][/div][div class=scroll][font=Open Sans]Content for Persona
[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent physiqueContent"][div class="tabShadow physiqueShadow"][/div][div class=scroll][font=Open Sans]Content for Physique
[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[div class="tabContent extraContent"][div class="tabShadow extraShadow"][/div][div class=scroll][font=Open Sans]Content for Extra
[/font][div= position: relative; height: var(--shadow-content-height);][/div][/div][/div]
[/div][/div][/div][/div][/div][code][/spoiler]
Abendrot
修羅の花
um, holy shit.
Edric Yuma
Just Another Paper Cut Survivor
Alteras
Would it be possible to alter your last code to become more of a cinematic intro to the first post of a roleplay? I like the b/w theme you have going on right now, but would it be possible to make it more of a fade to white intro? I was thinking like similar to how that one started, except the opening would be a gun fight, and a sudden flash of white across the whole background would end the cinematic part, then the actual wall of text appears (with a centered/underlined/bolded/bigger header if possible) as white text on a black background, as it is right now. Alongside the white text, which I envision to be on the rightmost three-fourths of the black background, could you put in a stock image of the same width/height above that I can change later on the leftmost one-fourth of the background? And if you don't mind (sorry for such an extensive request), could you also make a version without the image appearing, and just having text cover the whole background after the cinematic intro? Thanks so much in advance, you are a coding wizard!P.S. I would prefer to have it as mobile-friendly as possible. Thanks!
Alteras
The Sleepy Prisoner
Err... Let's see.
P.S. I would prefer to have it as mobile-friendly as possible. Thanks!
Yes, it is certainly possible to do almost all that you asked. The gunfight part would be difficult without any images beforehand, but I can make use of some divs instead. Much of the infrastructure already exists for everything after the intro, so all that is left is doing the cinematic intro. Making it mobile friendly would be easy.
Ah, please fill out the request form so I have a more solid grasp of what you're looking for. I'm currently occupied trying to code 3 other bbcode, so it'll definitely be a while until I work on yours.
Edric Yuma
Just Another Paper Cut Survivor
Sure thing! Let me know if you have other questions, and take your time.
- Mobile Priority - High please!
- Expected Color Palette and Image - Pretty much all black and white colors. As for the picture accompanying the text, https://i.pinimg.com/564x/7f/6c/e7/...c1--character-ideas-character-inspiration.jpg a cropped version of this one works (I can crop it for you if you'd like)!
- Type of Post - I would like this to be the first post of the roleplay, to get people interested!
- Freebie or Nah? - Yep! Freebie.
- The Star - Pretty much what I described above, but when I said "the opening would be a gunfight" I just imagined a very brief text presentation, like the one you did. So something like this:
- Shk, Click. Four bullets. He had to make it count. (Longer delay before next line)
- Fa-thud, Bump. Six Guards Outside. (Longer delay)
- Crash! (Very short delay)
- White flash of screen, then fade back to solid black background with nothing else
- Picture and wall of text/header fades in
- Fa-thud, Bump. Six Guards Outside. (Longer delay)
- Shk, Click. Four bullets. He had to make it count. (Longer delay before next line)
Alteras
The Sleepy Prisoner
[div class=EmiFlex]
[div class=EmiImage]
[div class=EmiTitle]Emiliana Rosenworth[/div]
[div class=EmiMentions]
Character Sheet
Location:
The Azure (bar) - backroom
Interactions:
[/div][/div] [div class=EmiContent]"Well, it's not like you can do much about that. Same with 'hanging out.' Your presence alone can make people shake in terror. Can't exactly have a girl's night out like that." Emiliana retorted to Mira as she checked to make sure no one was listening in. Her traps were placed everywhere and her quick round of checking with Claravidencia gave her a sense of comfort. She took the documents in hand and began to skim through it. She made mental notes about where to read up on.
"Hmm... I'll review the contents in further detail." Emiliana placed the documents in a small box before lacing a debilitas trap on it. "Let's see... The Bleakpost Resistance haven't made any new movements. While new members are joining, the leader hasn't made any new plans or the like. We're practically all silent here." She said as she tapped her chin, thinking about what's happened. "Well in anycase, that's all. Unless somehow the movements you've detailed are alarming, I won't be moving. Do please try to land in the same room as always. I'd get a heart attack if the next time I see you, you're a paying customer." Emiliana said, finishing up her side of the deal. She stood there waiting if Mira had anything else to say. [/div][/div] [class=EmiFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row wrap; box-sizing: border-box; [/class] [class=EmiImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image:url('https://www.rpnation.com/media/dab3b7959cf2ce4adcf5bc50be79e684-jpg.34928/full'); background-size: 150%; background-position: 35% 5%; background-repeat: no-repeat; margin: 5px; [/class] [class=EmiTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: white; font-size: 35px; font-family: 'Great Vibes'; text-shadow: 0px 0px 8px black; text-decoration: underline; [/class] [class=EmiMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Philosopher'; color: white; opacity: 0; background-color: rgba( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=EmiMentions state=hover] opacity: 1; [/class] [class=EmiContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Philosopher'; [/class]
[div class=JingFlex] [div class=JingImage] [div class=JingTitle]Lady Jing Yu[/div] [div class=JingMentions] Character Sheet
Location:
The Azure (bar)
Interactions:
[/div][/div] [div class=JingContent]Her large brim hat tilted ever so slightly as the man's name registered in her mind. "Milovanović... Milovan..." she mumbled to herself. "Ahh, you're Lazlo, the mercenary from the grasslands. From one of the many tribes stilled feared by the Eastern Kingdoms I assume? Well not that that matters anymore." She flagged down John the part-timer and got herself another beer. "We're one and the same here, scrape by while waiting to rise up. Shadow of the East at your service."
She brought the mug to her lips below the brim of her hat and took a sip before continuing on. "Can't do mercenary work when there is no great power to hire you. Any news from the East? My main employer has gone silent ever since our 'grand' retreat from the west." She placed the mug back on the table before taking a glance at the Saurian, in case she's also a mercenary like themselves. [/div][/div] [class=JingFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row-reverse wrap; box-sizing: border-box; [/class] [class=JingImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image:url('https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full'); background-size: 150%; background-position: 50% 10%; background-repeat: no-repeat; margin: 5px; [/class] [class=JingTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: #c4c5ca; font-size: 40px; font-family: 'Arizonia'; text-shadow: 0px 0px 20px black; [/class] [class=JingMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Open Sans'; color: #c4c5ca; opacity: 0; background-color: rgba( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=JingMentions state=hover] opacity: 1; [/class] [class=JingContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Open Sans'; [/class]
[div class=KotFlex] [div class=KotImage] [div class=KotTitle]Class B Rep — Kotone Yamashita[/div] [div class=KotMentions]
Character Sheet
Location:
Headed to Fumizuki Academy
Interactions:
Open to Interactions. [/div][/div] [div class=KotContent]As usual, the Yamashita household was filled with the typical noises, the sound of a meal being cooked, the slow movements of family members in the morning, and of course the faint noises of buttons being smashed and video game characters being killed. Inside a dimly lit room, Kotone was about the reach the end of her all-nighter, having spent the entire night playing the a popular MMORPG. After several more minutes, the sound of the front door closing told her that her parents had just left for work and that it's time to end her summer long break of fun and prepare for the first day of class.
Kotone's face slowly grew dismay as she told her fellow online mate,『GTG, school's starting again. BBL』. And with that, she disconnected from the server and set the computer to sleep mode. She swiveled the chair around to face her barely touched yet messy bed, upon which laid her school clothes. First day of class... She slowly got up, walked across the cold floor, picked up her clothes, and went about her morning routine.
After several minutes of self-care (aided by the many posted notes left on the bathroom mirror), she emerged down the stairs and stared at the table. Just some bread was good enough for her, despite her clear need for something heavier. Or maybe it was a good thing that she avoided a heavier breakfast, lest she fall asleep during the morning orientation. Well, either way, she walked out of the door, carrying a piece of toast in her hand, and made her way to Fumizuki Academy.
『Class B Representative Kotone Yamashita is departing!』She yelled weakly as she began walking through her neighborhood. [/div][/div] [class=KotFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row wrap; box-sizing: border-box; [/class] [class=KotImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image: url('https://www.rpnation.com/media/www-pinterest-comdfhuisf_waifu2x_art_noise3_tta_1-png.34866/full'), linear-gradient(to top, transparent 2.5px, rgb(93, 41, 113) 2.5px, rgb(93, 41, 113) 61.5px, transparent 61.5px, transparent calc(80px), #756184 calc(80px), #756184 calc(100% - 105px), transparent calc(100% - 105px), transparent calc(100% - 64px), rgb(93, 41, 113) calc(100% - 64px), rgb(93, 41, 113) calc(100% - 35px), transparent calc(100% - 35px) ), linear-gradient( 30deg, #FEDBE3, #FDF3DB, #D2E6EE); background-size: 125%; background-position: 10% 0; background-repeat: no-repeat; margin: 5px; [/class] [class=KotTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: white; background-color: rgba(93, 41, 113, 0.8); font-size: 35px; font-family: 'Wire One'; text-shadow: 0px 0px 8px black; [/class] [class=KotMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Roboto'; color: white; opacity: 0; background-color: rgb( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=KotMentions state=hover] opacity: 1; [/class] [class=KotContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Roboto'; [/class]
Location:
The Azure (bar) - backroom
Interactions:
[/div][/div] [div class=EmiContent]"Well, it's not like you can do much about that. Same with 'hanging out.' Your presence alone can make people shake in terror. Can't exactly have a girl's night out like that." Emiliana retorted to Mira as she checked to make sure no one was listening in. Her traps were placed everywhere and her quick round of checking with Claravidencia gave her a sense of comfort. She took the documents in hand and began to skim through it. She made mental notes about where to read up on.
"Hmm... I'll review the contents in further detail." Emiliana placed the documents in a small box before lacing a debilitas trap on it. "Let's see... The Bleakpost Resistance haven't made any new movements. While new members are joining, the leader hasn't made any new plans or the like. We're practically all silent here." She said as she tapped her chin, thinking about what's happened. "Well in anycase, that's all. Unless somehow the movements you've detailed are alarming, I won't be moving. Do please try to land in the same room as always. I'd get a heart attack if the next time I see you, you're a paying customer." Emiliana said, finishing up her side of the deal. She stood there waiting if Mira had anything else to say. [/div][/div] [class=EmiFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row wrap; box-sizing: border-box; [/class] [class=EmiImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image:url('https://www.rpnation.com/media/dab3b7959cf2ce4adcf5bc50be79e684-jpg.34928/full'); background-size: 150%; background-position: 35% 5%; background-repeat: no-repeat; margin: 5px; [/class] [class=EmiTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: white; font-size: 35px; font-family: 'Great Vibes'; text-shadow: 0px 0px 8px black; text-decoration: underline; [/class] [class=EmiMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Philosopher'; color: white; opacity: 0; background-color: rgba( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=EmiMentions state=hover] opacity: 1; [/class] [class=EmiContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Philosopher'; [/class]
[div class=JingFlex] [div class=JingImage] [div class=JingTitle]Lady Jing Yu[/div] [div class=JingMentions] Character Sheet
Location:
The Azure (bar)
Interactions:
[/div][/div] [div class=JingContent]Her large brim hat tilted ever so slightly as the man's name registered in her mind. "Milovanović... Milovan..." she mumbled to herself. "Ahh, you're Lazlo, the mercenary from the grasslands. From one of the many tribes stilled feared by the Eastern Kingdoms I assume? Well not that that matters anymore." She flagged down John the part-timer and got herself another beer. "We're one and the same here, scrape by while waiting to rise up. Shadow of the East at your service."
She brought the mug to her lips below the brim of her hat and took a sip before continuing on. "Can't do mercenary work when there is no great power to hire you. Any news from the East? My main employer has gone silent ever since our 'grand' retreat from the west." She placed the mug back on the table before taking a glance at the Saurian, in case she's also a mercenary like themselves. [/div][/div] [class=JingFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row-reverse wrap; box-sizing: border-box; [/class] [class=JingImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image:url('https://www.rpnation.com/media/li-zi-lizi-7-jpg.34915/full'); background-size: 150%; background-position: 50% 10%; background-repeat: no-repeat; margin: 5px; [/class] [class=JingTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: #c4c5ca; font-size: 40px; font-family: 'Arizonia'; text-shadow: 0px 0px 20px black; [/class] [class=JingMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Open Sans'; color: #c4c5ca; opacity: 0; background-color: rgba( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=JingMentions state=hover] opacity: 1; [/class] [class=JingContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Open Sans'; [/class]
[div class=KotFlex] [div class=KotImage] [div class=KotTitle]Class B Rep — Kotone Yamashita[/div] [div class=KotMentions]
Location:
Headed to Fumizuki Academy
Interactions:
Open to Interactions. [/div][/div] [div class=KotContent]As usual, the Yamashita household was filled with the typical noises, the sound of a meal being cooked, the slow movements of family members in the morning, and of course the faint noises of buttons being smashed and video game characters being killed. Inside a dimly lit room, Kotone was about the reach the end of her all-nighter, having spent the entire night playing the a popular MMORPG. After several more minutes, the sound of the front door closing told her that her parents had just left for work and that it's time to end her summer long break of fun and prepare for the first day of class.
Kotone's face slowly grew dismay as she told her fellow online mate,『GTG, school's starting again. BBL』. And with that, she disconnected from the server and set the computer to sleep mode. She swiveled the chair around to face her barely touched yet messy bed, upon which laid her school clothes. First day of class... She slowly got up, walked across the cold floor, picked up her clothes, and went about her morning routine.
After several minutes of self-care (aided by the many posted notes left on the bathroom mirror), she emerged down the stairs and stared at the table. Just some bread was good enough for her, despite her clear need for something heavier. Or maybe it was a good thing that she avoided a heavier breakfast, lest she fall asleep during the morning orientation. Well, either way, she walked out of the door, carrying a piece of toast in her hand, and made her way to Fumizuki Academy.
『Class B Representative Kotone Yamashita is departing!』She yelled weakly as she began walking through her neighborhood. [/div][/div] [class=KotFlex] width: 100%; max-width: 1000px; margin: 0 auto; justify-content: center; align-items: stretch; display: flex; flex-flow: row wrap; box-sizing: border-box; [/class] [class=KotImage] position: relative; width: 300px; max-width: 100%; min-height: 300px; background-image: url('https://www.rpnation.com/media/www-pinterest-comdfhuisf_waifu2x_art_noise3_tta_1-png.34866/full'), linear-gradient(to top, transparent 2.5px, rgb(93, 41, 113) 2.5px, rgb(93, 41, 113) 61.5px, transparent 61.5px, transparent calc(80px), #756184 calc(80px), #756184 calc(100% - 105px), transparent calc(100% - 105px), transparent calc(100% - 64px), rgb(93, 41, 113) calc(100% - 64px), rgb(93, 41, 113) calc(100% - 35px), transparent calc(100% - 35px) ), linear-gradient( 30deg, #FEDBE3, #FDF3DB, #D2E6EE); background-size: 125%; background-position: 10% 0; background-repeat: no-repeat; margin: 5px; [/class] [class=KotTitle] position: absolute; bottom: 2.5px; width: 100%; padding: 5px; box-sizing: border-box; height: auto; text-align: center; color: white; background-color: rgba(93, 41, 113, 0.8); font-size: 35px; font-family: 'Wire One'; text-shadow: 0px 0px 8px black; [/class] [class=KotMentions] position: absolute; width: 100%; height: 100%; top:0; padding: 5px; box-sizing: border-box; font-family: 'Roboto'; color: white; opacity: 0; background-color: rgb( 0,0,0,0.65); transition: opacity .5s; [/class] [class name=KotMentions state=hover] opacity: 1; [/class] [class=KotContent] position: relative; min-width: 200px; flex: 1; height: auto; padding: 0px 15px; margin: 5px; font-family: 'Roboto'; [/class]
Alteras
The Sleepy Prisoner
IC Post — Set #1
This is an IC Post design that's quite generic. It's light weight, and easy to make a post macro for. When you hover over the image, it displays your necessary info. It's very very mobile friendly. When on desktop, it'll expand the image to match the length of the text. When it is on mobile, it'll stack it as a box above your content. By default the image is a square 300px by 300px.
It comes in two forms, left-sided image and right-sided image. It is easy to change one to the other; in the class
To change the font and the colors, you'll have to change both the
The colors and the images are changed from the classes as well. If you have multiple characters, I recommend renaming each class to a unique name for their character, such as KotFlex, EmiImage, and JingTitle. You can play around with the values if you want, it's a very simple and very easy to change IC post.
The Most Important Thing is that you need to use
The text are excerpts from two different RPs.
This is an IC Post design that's quite generic. It's light weight, and easy to make a post macro for. When you hover over the image, it displays your necessary info. It's very very mobile friendly. When on desktop, it'll expand the image to match the length of the text. When it is on mobile, it'll stack it as a box above your content. By default the image is a square 300px by 300px.
It comes in two forms, left-sided image and right-sided image. It is easy to change one to the other; in the class
[class=Flex], find flex-flow:, and set it to row wrap for a left-sided image and row-reverse wrap for a right-sided image.To change the font and the colors, you'll have to change both the
[font] tags in the comment and the font-family in the classes [class=Title], [class=Mentions, and [class=Content].The colors and the images are changed from the classes as well. If you have multiple characters, I recommend renaming each class to a unique name for their character, such as KotFlex, EmiImage, and JingTitle. You can play around with the values if you want, it's a very simple and very easy to change IC post.
The Most Important Thing is that you need to use
[br][/br] to force a line break. Everything has been put in a [nobr][/nobr] tag to keep it clean, so you'll have to use the line break tag to allow for a those breaks. The text are excerpts from two different RPs.
Code:
[nobr]
[div class=Flex]
[div class=Image]
[div class=Title]Name[/div]
[div class=Mentions]
[b][u][url=link]Character Sheet[/url][/u][/b]
[br][/br]
[u]Location[/u]:
[br][/br]
[br][/br]
[br][/br]
[u]Interactions[/u]:
[br][/br]
[/div][/div]
[div class=Content] Content [color=skyBlue]Speech[/color]
[/div][/div]
[comment][font=Great Vibes]Fonts[/font][font=Philosopher]Fonts[/font] Coded by [USER=34809]@Alteras[/USER] [/comment]
[class=Flex]
width: 100%;
max-width: 1000px;
margin: 0 auto;
justify-content: center;
align-items: stretch;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
[/class]
[class=Image]
position: relative;
width: 300px;
max-width: 100%;
min-height: 300px;
background-image:url('https://www.rpnation.com/media/dab3b7959cf2ce4adcf5bc50be79e684-jpg.34928/full');
background-size: 150%;
background-position: 35% 5%;
background-repeat: no-repeat;
margin: 5px;
[/class]
[class=Title]
position: absolute;
bottom: 2.5px;
width: 100%;
padding: 5px;
box-sizing: border-box;
height: auto;
text-align: center;
color: white;
font-size: 35px;
font-family: 'Great Vibes';
text-shadow: 0px 0px 8px black;
text-decoration: underline;
[/class]
[class=Mentions]
position: absolute;
width: 100%;
height: 100%;
top:0;
padding: 5px;
box-sizing: border-box;
font-family: 'Philosopher';
color: white;
opacity: 0;
background-color: rgb( 0,0,0,0.65);
transition: opacity .5s;
[/class]
[class name=Mentions state=hover]
opacity: 1;
[/class]
[class=Content]
position: relative;
min-width: 200px;
flex: 1;
height: auto;
padding: 0px 15px;
margin: 5px;
font-family: 'Philosopher';
[/class]
[/nobr]
s e v e n
dark romanticist
oh my, you're literally coding god aren't you? how have I not found you before ? O-O
