Fantasy Elementals and Sinners OOC

[nios]

working on reply

 

[Worthlessplebian]

It's fine.

 

[Worthlessplebian]

So out of boredom, I wrote a flashback scene and a very brief present scene.

Edit: And because I wanted to try that font out.

 

[nios]

It seems that both Ember and Shaun have a dark side of themselves that they try to suppress... and Shaun is blonde

 

[OverconfidentMagi]

Willow and Ember not understanding what the other is asking/answering:

 

[nios]

OH SHIT
OverconfidentMagi LET ME FIX THAT
I WAS UP SO LATE LAST NIGHT! THAT'S MY FAULT IM SORRY

 

[OverconfidentMagi]

You don't have to, it actually makes things more interesting.

 

[nios]

But when Ember is awake, she'll say something o.o
I feel so embarrassed rn omg...

 

[Worthlessplebian]

Shaun is gonna be locked up in a hostile environment, how will he survive, can he control the Sadism? Find out next time on Elementals vs Sinners Z!

 

[nios]

lol
so Worthlessplebian and OverconfidentMagi have you figured out your character's appearance?

 

[Worthlessplebian]

Almost

 

[OverconfidentMagi]

Willow looks like your standard hippie girl.

 

[nios]

[class=container] width: 320px; height: 250px; overflow: hidden; margin: auto; cursor: url(https://img.icons8.com/metro/11/000000/cursor.png), auto; [/class] [class=image] width: 320px; height: 255px; background: url('https://data.whicdn.com/images/256172792/large.jpg'); background-size: 180%; background-position: 48% 20%; filter: brightness(110%) grayscale(70%); box-sizing: border-box; [/class] [class=color] animation-name: {post_id}imagecolor; animation-duration: 3s; animation-fill-mode: forwards; animation-timing-function: ease-out; [/class] [animation=imagecolor] [keyframe=50] filter: brightness(95%) grayscale(0%); background-size: 130%; background-position: 50% -10%; [/keyframe] [keyframe=100] filter: brightness(95%) grayscale(0%); background-size: 130%; background-position: 90% -225%; [/keyframe] [/animation] [script class=image on=mouseenter] addClass color image addClass slidein picdiv [/script] [class=picdiv] position: relative; width: 286px; height: 62px; background: rgba(163, 165, 131, 0.8); transform: translate(320px, 38px); display: flex; justify-content: space-between; align-content: space-between; overflow: hidden; box-sizing: border-box; padding: 6px; [/class] [class=slidein] animation-name: {post_id}slideinpicdiv; animation-duration: 2.25s; animation-delay: 3.25s; animation-fill-mode: forwards; animation-timing-function: ease-out;[/class] [animation=slideinpicdiv] [keyframe=100] transform: translate(17px, 38px); [/keyframe] [/animation] [class name=pic1 state=hover] opacity: 1; [/class] [class name=pic2 state=hover] opacity: 1; [/class] [class name=pic3 state=hover] opacity: 1; [/class] [class name=pic4 state=hover] opacity: 1; [/class] [class name=pic6 state=hover] opacity: 1; [/class] [class=pic1] background: url('https://data.whicdn.com/images/322605046/large.jpg'); background-position: 50px; background-size: 50px; width: 50px; height: 50px; opacity: 0.8; transition: all 1s; cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [class=pic2] background: url('https://data.whicdn.com/images/269871006/large.jpg'); background-position: 70px; background-size: 70px; width: 50px; height: 50px; opacity: 0.8; transition: all 1s; cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [class=pic3] background: url('https://data.whicdn.com/images/247565423/large.jpg'); background-position: 60px; background-size: 60px; width: 50px; height: 50px; opacity: 0.8; transition: all 1s; cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [class=pic4] background: url('https://data.whicdn.com/images/217865939/large.jpg'); background-position: 65px; background-size: 65px; width: 50px; height: 50px; opacity: 0.8; transition: all 1s; cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [class=pic6] background: url('https://data.whicdn.com/images/243834376/large.jpg'); background-position: 50px; background-size: 60px; width: 50px; height: 50px; opacity: 0.8; transition: all 1s; cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [script class=pic1 on=click] hide pic2 hide pic3 hide pic4 hide pic6 addClass permspot picdiv removeClass slidein picdiv addClass incheight picdiv fadeIn 800 hidden fadeIn 900 scroll fadeIn 1000 textbox addClass activereturn home removeClass permheight picdiv removeClass decheight picdiv removeClass tallpermsize pic1 removeClass decsize pic1 addClass smallpermsize pic1 addClass incsize pic1 [/script] [script class=pic2 on=click] hide pic1 hide pic3 hide pic4 hide pic6 addClass permspot picdiv removeClass slidein picdiv addClass incheight picdiv fadeIn 800 hidden2 fadeIn 900 scroll2 fadeIn 1000 textbox2 addClass activereturn home removeClass permheight picdiv removeClass decheight picdiv removeClass tallpermsize pic2 removeClass decsize pic2 addClass smallpermsize pic2 addClass incsize pic2 [/script] [script class=pic3 on=click] hide pic1 hide pic2 hide pic4 hide pic6 addClass permspot picdiv removeClass slidein picdiv addClass incheight picdiv fadeIn 800 hidden3 fadeIn 900 scroll3 fadeIn 1000 textbox3 addClass activereturn home removeClass permheight picdiv removeClass decheight picdiv removeClass tallpermsize pic3 removeClass decsize pic3 addClass smallpermsize pic3 addClass incsize pic3 [/script] [script class=pic4 on=click] hide pic1 hide pic2 hide pic3 hide pic6 addClass permspot picdiv removeClass slidein picdiv addClass incheight picdiv fadeIn 800 hidden4 fadeIn 900 scroll4 fadeIn 1000 textbox4 addClass activereturn home removeClass permheight picdiv removeClass decheight picdiv removeClass tallpermsize pic4 removeClass decsize pic4 addClass smallpermsize pic4 addClass incsize pic4 [/script] [script class=pic6 on=click] hide pic1 hide pic2 hide pic3 hide pic4 addClass permspot picdiv removeClass slidein picdiv addClass incheight picdiv fadeIn 800 hidden6 fadeIn 900 scroll6 fadeIn 1000 textbox6 addClass activereturn home removeClass permheight picdiv removeClass decheight picdiv removeClass tallpermsize pic6 removeClass decsize pic6 addClass smallpermsize pic6 addClass incsize pic6 [/script] [class=hidden] display: none; width: 218px; margin-left: 5px; overflow: hidden; [/class] [class=scroll] display: none; width: 120%; height: 166px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=textbox] box-sizing: border-box; max-width: 218px; display: none; [/class] [class=hidden2] display: none; width: 218px; margin-left: 5px; overflow: hidden; [/class] [class=scroll2] display: none; width: 120%; height: 166px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=textbox2] box-sizing: border-box; max-width: 218px; display: none; text-align: justify; [/class] [class=hidden3] display: none; width: 218px; margin-left: 5px; overflow: hidden; [/class] [class=scroll3] display: none; width: 120%; height: 166px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=textbox3] box-sizing: border-box; max-width: 218px; display: none; text-align: justify; [/class] [class=hidden4] display: none; width: 218px; margin-left: 5px; overflow: hidden; [/class] [class=scroll4] display: none; width: 120%; height: 166px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=textbox4] box-sizing: border-box; max-width: 218px; display: none; text-align: justify; [/class] [class=hidden6] display: none; width: 218px; margin-left: 5px; overflow: hidden; [/class] [class=scroll6] display: none; width: 120%; height: 166px; overflow-Y: scroll; overflow-X: hidden; [/class] [class=textbox6] box-sizing: border-box; max-width: 218px; display: none; text-align: justify; [/class] [class=permspot] transform: translate(17px, 38px); [/class] [class=incheight] animation-name: {post_id}picdivincheight; animation-duration: 1s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-out; [/class] [animation=picdivincheight] [keyframe=100] height: 178px; transform: translate(17px, 17px); [/keyframe] [/animation] [class=incsize] animation-name: {post_id}incsizepic; animation-duration: 1s; animation-delay: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease-out; [/class] [animation=incsizepic] [keyframe=100] opacity: 1; height: 166px; width: 50px; background-repeat: repeat; cursor: auto; [/keyframe] [/animation] [class=tallpermsize] opacity: 1; height: 166px; width: 50px; background-repeat: repeat; cursor: auto; [/class] [class=decsize] opacity: 0.8; animation-name: {post_id}decsizepic; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: ease-out; [/class] [animation=decsizepic] [keyframe=100] height: 50px; width: 50px; cursor: pointer; [/keyframe] [/animation] [class name=decsize state=hover] opacity: 1; [/class] [class=smallpermsize] height: 50px; [/class] [class=permheight] height: 178px; transform: translate(17px, 17px); [/class] [class=decheight] animation-name: {post_id}decheightpicdiv; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: ease-out; [/class] [animation=decheightpicdiv] [keyframe=100] height: 62px; transform: translate(17px, 38px); [/keyframe] [/animation] [class=home] background: #c8c9b5; opacity: 0.5; width: 138px; height: 20px; position: absolute; top: 208px; left: 24px; [/class] [class=home] width: 138px; position: absolute; font-size: 20px; letter-spacing: 3px; color: #40423e; top: 208px; left: 24px; [/class] [class="home"] elements and sin [/class] [class=activereturn] cursor: url(https://img.icons8.com/small/12/000000/hand-cursor.png), auto; [/class] [script class=home on=click] removeClass activereturn home addClass permheight picdiv hide hidden hide scroll hide textbox removeClass incsize pic1 addClass tallpermsize pic1 addClass decsize pic1 removeClass smallpermsize pic1 hide hidden2 hide scroll2 hide textbox2 removeClass incsize pic2 addClass tallpermsize pic2 addClass decsize pic2 removeClass smallpermsize pic2 hide hidden3 hide scroll3 hide textbox3 removeClass incsize pic3 addClass tallpermsize pic3 addClass decsize pic3 removeClass smallpermsize pic3 hide hidden4 hide scroll4 hide textbox4 removeClass incsize pic4 addClass tallpermsize pic4 addClass decsize pic4 removeClass smallpermsize pic4 hide hidden6 hide scroll6 hide textbox6 removeClass incsize pic6 addClass tallpermsize pic6 addClass decsize pic6 removeClass smallpermsize pic6 removeClass incheight picdiv addClass decheight picdiv fadeIn 900 pic1 fadeIn 900 pic2 fadeIn 900 pic3 fadeIn 900 pic4 fadeIn 900 pic6 [/script]

code by @fudgecakez

[div class=container] [div class=image] [div class=picdiv] [div class=pic1][/div] [div class=pic2][/div] [div class=pic3][/div] [div class=pic4][/div] [div class=pic6][/div] [div class=hidden][div class=scroll][div class=textbox] Willow | Air [/div][/div][/div] [div class=hidden2][div class=scroll2][div class=textbox2] Ember | Fire [/div][/div][/div] [div class=hidden3][div class=scroll3][div class=textbox3] Silver | Water [/div][/div][/div] [div class=hidden4][div class=scroll4][div class=textbox4] Markus | Greed [/div][/div][/div] [div class=hidden6][div class=scroll6][div class=textbox6] Shaun | Pride [/div][/div][/div] [/div] [div class=home][/div] [/div] [/div]

 

[nios]

I'm not finished with it, but I'm making a cast sheet for the group. I'm trying to fix it so that I can fit one more picture and section but I dont know how to code :'( so if anyone knows how to code then please help me *cries*

edit: the pics are the "realistic" version of our characters so im sorry if your character isnt accurate

 

[underuninterested]

Do you have the names for the face claims?

 

[nios]

underuninterested sadly, I dont

 

[underuninterested]

Okai

 

[underuninterested]

Also I barely know how to use BBcode N nios So I can't help much, maybe look for a different CS to edit

 

[underuninterested]

You could use this one? N nios

[class name=titleslide] width: 100%; height: 300px; font-family: Avenir; [/class] [class=tag] background: #6f3fa6; text-transform: uppercase; padding: 0px 3px 0px 3px; font-size: 9px; letter-spacing: 1px; display: inline-block; color: white; margin-top: 10px; line-height: 16px; [/class] [class=gifs] display: flex; flex-direction: row; padding-bottom: 15px; [/class] [class name=tab] box-sizing: border-box; text-align: center; font-family: Avenir; font-size: 15px; color: #333; background: #f8f8f8; width: 66px; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; transition: all .5s ease-in-out; border-left: 3px solid #f8f8f8; border-right: 3px solid #f8f8f8; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab] box-sizing: border-box; text-align: center; font-family: Avenir; font-size: 15px; color: #6f3fa6; background: #f3f3f3; width: 66px; border-left: 3px solid #6f3fa6; border-right: 3px solid #f3f3f3; padding: 10px; padding-top: 20px; padding-bottom: 20px; text-transform: uppercase; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] background: #f3f3f3; border-left: 3px solid #f3f3f3; border-right: 3px solid #f3f3f3; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab state=hover] border-left: 3px solid #6f3fa6; border-right: 3px solid #f3f3f3; transition: all .4s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab on=click] hide tabcontents hide titleslide removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} 01) (addClass selectedtab tabone) if (eq ${currentTab} 02) (addClass selectedtab tabtwo) if (eq ${currentTab} 03) (addClass selectedtab tabthree) if (eq ${currentTab} 04) (addClass selectedtab tabfour) if (eq ${currentTab} 05) (addClass selectedtab tabfive) if (eq ${currentTab} 01) (show tabcontentsone) if (eq ${currentTab} 02) (show tabcontentstwo) if (eq ${currentTab} 03) (show tabcontentsthree) if (eq ${currentTab} 04) (show tabcontentsfour) if (eq ${currentTab} 05) (show tabcontentsfive) [/script]

character name

"You could put a character quote here."

[div class="tab tabone"]01

[div class="tab tabtwo"]02

[div class="tab tabthree"]03

[div class="tab tabfour"]04[/div] [div class="tab tabfive"]05[/div] [/div]

[div class=titleslide]

a

title?

a subtitle?

[div class="tabcontents tabcontentsone" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentstwo" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsthree" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsfour" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [div class="tabcontents tabcontentsfive" style="display: none;"]

[div class=gifs]

[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info
[div class=tag]tag[/div] info [/div][/div] [/div][/div] [/div]

coded by luna.

 

[underuninterested]

Im unsure if you could edit a 6th tab but maybe

 

[nios]

love luna lol
yeah I looked at that one too. I could use that one. Im a lil picky and I refer small, minimalistic codes^^ Plus the cs Ive been using is mobile friendly, which I thought would be nice but Ill try the code you suggested!

 

[Worthlessplebian]

Alright, I gave up half way.

Blonde, amber eyes, small nose, sharpish jawline and white skin color.

 

[Worthlessplebian]

I'll follow it up with mine in the morning.

 

[nios]

hey IrisFae how ya doing?

 

[IrisFae]

Pretty good N nios . One of my coworkers had to go into the hospital though and I'm one of the only other people trained for his position, so my schedule's gotten kinda hectic.