constellation
๐บ ๐๐๐๐๐ ๐๐๐บ๐
[div class=container][div class=border]
[div class=mainbox][div class=title]TROUBLED HEARTS
[div class=icon][/div]
[div class=butt][div class=button][/div][div class=button2][/div][div class=buttonicon][/div][/div]i
[div class="tab tab1"][/div] [div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div][/div]
[div class=line][/div]
[div class="tabtitle tt1"]home[/div] [div class="tabtitle tt2"]the plot[/div] [div class="tabtitle tt3"]a message from your gms[/div] [div class="tabtitle tt4"]the roles[/div] [div class="tabtitle tt5"]the rules[/div]
[div class="tabContents tabContents1"][div class=scroll][div class=imgquote][div class=quote]pleasure of love lasts but a moment.
pain of love lasts a lifetime.[/div][/div][/div][/div]
[div class="tabContents tabContents2"][div class=scroll]Love โ a simple, 4-letter word with such an intricate meaning.
There's a reason why love is invisible, completely undetectable to anything but our minds; we simply aren't evolved enough to be trusted with it. People would try to engineer it, alter it, use it, even weaponize it.
That's exactly what went wrong for this group of six. Due to suffering from either abusive, toxic or troubled past relationships, they now believe that they cannot be loved, that they are unworthy of love.
For that reason alone, they each try their hand at therapy in hopes that it will help them overcome their problems. But when things don't seem to be improving for them, their individual therapists resort to their final option and only hope.
What is the final option?
Sanguine Island. Sanguine is an island that specialises in helping people recover from heartaches and disguised demons, a professional team that works with people who have unfortunately suffered from abusive relationships.
On the island, each person will meet others who have experienced and dealt with the same pain as themselves. Together as one, they will try their best to help each other to heal, to learn, and most importantly, to love themselves and each other.[/div][/div]
[div class="tabContents tabContents3"][div class=scroll]alright alright alright. how's it going?
it's your resident hot messes back at it again with yet another angsty rp that is sure to rip your heart out and give you all of the feels. this plot has been under development for a long time and we finally got our shiz together and made it happen.
it's stated in the plot and rules but please keep in mind that these characters all endured toxic and/or abusive past relationships. therefore, this wont be a sunshine and rainbows filled role-play, rather, a dark and heavy one with A LOT of mature topics and themes. please only apply if you are prepared for topics and themes of that nature.
okay, enough of the heavy talk. thanks again for expressing interest and we're really excited to see all of the future characters c :
xoxo, moonmoon & constellation[/div][/div]
[div class="tabContents tabContents4"][div class=scroll]the lover
[/div]the idealist
[/div]the vain
[/div]the spitfire
[/div]
the explorer
[/div]the conflicted
[/div]
erised
for coming to me with this genius idea. She is GM, so her word counts, as well as mine.
[ 02 ] Please follow all RPNation rules. Respect everybody, no erotic content (fade to black) or extreme gore. We highly advise that you are over the age of 18 as mature themes and sensitive matters will be involved, unless you are mature enough to handle them.
[ 03 ] This is NOT a first-come, first-serve roleplay.
erised
and I will be accepting four other characters who we think will be a great addition to the storyline.
[ 04 ] The roles were created specifically to help create flawed characters and develop the story, but please do not feel limited and feel free to think outside of the box!
[ 05 ] You must post at least once or twice a week in the in-character thread - this may change depending on the level of activity once the roleplay has begun but the pace will be relaxed; we understand if something comes up in real!
[ 06 ] This is a semi-literate roleplay. Therefore, we expect to see detail in posts - a word count of approximately 500 words (including dialogue and detail) is required.
[ 07 ] It is also required that you have discord in order to participate in the out of character chat and stay up to date with important information. Once the characters have been accepted, I will send out the invitation link by private message.
[ 08 ] If you have any questions, please don't be afraid to ask and let us know which role has sparked your interest![/div][/div]
[/div][/div][/div]
[class=container]
width: 630px;
height: 250px;
margin: auto;
[/class]
[class=border]
position: absolute;
width: 630px;
height: 220px;
background: #111;
border-top: 15px solid #fff;
border-bottom: 15px solid #fff;
overflow: hidden;
[/class]
[class=mainbox]
position: absolute;
width: 630px;
height: 220px;
overflow: hidden;
[/class]
[class=title]
position: absolute;
top: 0;
font-size: 50px;
font-family: Rozha One;
color: #752727;
line-height: 35px;
width: 330px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 220px;
[/class]
[class=icon]
color: #752727;
position: absolute;
font-size: 290px;
padding-left: 5px;
right: -25px;
top: -5px;
opacity: 1;
line-height: 20px;
[/class]
[class=butt]
display: block;
position: absolute;
width: 88px;
height: 88px;
border-radius: 100%;
top: 250px;
right: 77px;
z-index: 4;
[/class]
[class=button]
display: block;
position: absolute;
border: 8px solid #333;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 100%;
animation: {post_id}pulse2 4s infinite;
[/class]
[class=button2]
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
position: absolute;
top: 7px;
left: 7px;
display: block;
border: 1px solid #bbb;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 100%;
z-index: 3;
animation: {post_id}pulse 4s infinite;
[/class]
[class=buttonicon]
position: absolute;
top: 10px;
left: 10px;
border-radius: 100%;
height: 76px;
width: 76px;
background: #333;
color: #bbb;
line-height: 76px;
font-size: 30px;
text-align: center;
[/class]
[class name=tab state=hover]
font-size: 13px;
[/class]
[class=tab]
position: absolute;
z-index: 3;
right: 102px;
top: 110px;
width: 30px;
height: 30px;
background: #752727;
color: #fff;
font-size: 11px;
border-radius: 100%;
line-height: 30px;
text-align: center;
opacity: 0;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=slideup]
top: 47px;
transition: 0.5s all;
[/class]
[class=tshow]
opacity: 1;
[/class]
[class=iconslide]
transition: .75s;
top: -50px;
opacity: 0;
[/class]
[class=drop]
height: 520px;
transition: 0.75s;
[/class]
[class=drop1]
height: 550px;
transition: 0.75s;
[/class]
[class=one]
top: 45px;
right: 175px;
transition: 0.75s;
[/class]
[class=two]
top: 85px;
right: 183px;
transition: 0.75s;
[/class]
[class=three]
top: 125px;
right: 168px;
transition: 0.75s;
[/class]
[class=four]
top: 153px;
right: 136px;
transition: 0.75s;
[/class]
[class=five]
top: 160px;
right: 95px;
transition: 0.75s;
[/class]
[class=line]
position: absolute;
top: 195px;
left: 48px;
height: 1px;
width: 0px;
background: #292929;
[/class]
[class=linegrow]
width: 300px;
transition: 0.75s;
[/class]
[class=tabtitle]
position: absolute;
top: 200px;
height: 30px;
width: 250px;
left: -250px;
line-height: 30px;
font-weight: 700;
font-size: 10px;
margin-top: -4px;
color: #ddd;
letter-spacing: 3px;
text-transform: uppercase;
transition: 0.75s;
[/class]
[class=titleenter]
left: 50px;
transition: 0.75s;
[/class]
[script class=border on=mouseenter]
addClass slideup butt
[/script]
[script class=butt on=click]
addClass iconslide icon
addClass drop1 container
addClass drop border
addClass one tab1
addClass two tab2
addClass three tab3
addClass four tab4
addClass five tab5
addClass tshow tab
addClass linegrow line
addClass titleenter tt1
addClass show tabContents1
[/script]
[animation=pulse]
[keyframe=0]
transform: scale(1); opacity: 1;
[/keyframe]
[keyframe=50]
transform: scale(1.2); opacity: .5;
[/keyframe]
[/animation]
[animation=pulse2]
[keyframe=0]
transform: scale(1); opacity: .8;
[/keyframe]
[keyframe=50]
transform: scale(1.2); opacity: .5;
[/keyframe]
[/animation]
[class=tabContents]
position: absolute;
top: 245px;
left: 67px;
height: 205px;
width: 481px;
background: transparent;
opacity: 0;
overflow: hidden;
padding: 15px 0 15px 15px;
color: #eee;
font-size: 11px;
letter-spacing: 0.7px;
line-height: 17px;
white-space: pre-line;
[/class]
[script class=tab1 on=click]
addClass show tabContents1
addClass titleenter tt1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass titleenter tt2
removeClass titleenter tt3
removeClass titleenter tt4
removeClass titleenter tt5
[/script]
[script class=tab2 on=click]
addClass show tabContents2
addClass titleenter tt2
removeClass show tabContents1
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass titleenter tt1
removeClass titleenter tt3
removeClass titleenter tt4
removeClass titleenter tt5
[/script]
[script class=tab3 on=click]
addClass show tabContents3
addClass titleenter tt3
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents4
removeClass show tabContents5
removeClass titleenter tt1
removeClass titleenter tt2
removeClass titleenter tt4
removeClass titleenter tt5
[/script]
[script class=tab4 on=click]
addClass show tabContents4
addClass titleenter tt4
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents5
removeClass titleenter tt1
removeClass titleenter tt2
removeClass titleenter tt3
removeClass titleenter tt5
[/script]
[script class=tab5 on=click]
addClass show tabContents5
addClass titleenter tt5
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass titleenter tt1
removeClass titleenter tt2
removeClass titleenter tt3
removeClass titleenter tt4
[/script]
[class=show]
opacity: 1;
transition: all 1.5s;
z-index: 1;
[/class]
[class=imgquote]
background: url(https://wallpapercave.com/wp/GL0VGAu.jpg);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
position: relative;
[/class]
[class=quote]
border-top: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
height: calc(100% - 42px);
width: calc(100% - 42px);
color: #eee;
font-size: 11px;
text-align: center;
letter-spacing: 0.7px;
line-height: 17px;
text-transform: lowercase;
display: flex;
align-items: center;
justify-content: center;
white-space: pre-line;
[/class]
[class=scroll]
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
[/class]
[class=sectleft]
position: relative;
text-align: left;
width: 360px;
height: 100px;
font-family: IBM Plex Sans;
color: #eee;
font-size: 9px;
letter-spacing: 2px;
line-height: 17px;
float: left;
[/class]
[class=sectright]
position: relative;
text-align: right;
width: 360px;
height: 100px;
font-family: IBM Plex Sans;
color: #eee;
font-size: 9px;
letter-spacing: 2px;
line-height: 17px;
float: right;
[/class]
[class=number]
position: absolute;
color: #fff;
font-size: 109px;
letter-spacing: -5px;
opacity: .1;
z-index: -1;
line-height: 109px;
font-family: rozha one;
[/class]
Last edited:
