• This section is for roleplays only.
    ALL interest checks/recruiting threads must go in the Recruit Here section.

    Please remember to credit artists when using works not your own.

Fantasy Elementals and Sinners OOC

Main
Here
working on reply
 
It seems that both Ember and Shaun have a dark side of themselves that they try to suppress... and Shaun is blondeπŸ™‚
 
OH SHIT
OverconfidentMagi OverconfidentMagi LET ME FIX THAT
I WAS UP SO LATE LAST NIGHT! THAT'S MY FAULT IM SORRY😭
 
But when Ember is awake, she'll say something o.o
I feel so embarrassed rn omg...
 
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!
 
[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]
 
Last edited:
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
 
You could use this one? nios 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.
 
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!
 
Pretty good nios 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.
 

Users who are viewing this thread

Back
Top