calypso
fairest
[class=border]
--main-color: #180C1D;
--image-1: url(https://i.pinimg.com/564x/18/09/ff/1809ff5f815e1e352e38ebfabe19e1c9.jpg);
--image-2: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 2);
--image-3: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 3);
--image-4: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 4);
--image-5: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 5);
--image-6: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 6);
--image-7: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 7);
--image-8: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 8);
--image-9: url(https://via.placeholder.com/175x210/000000/FFFFFF/?text=IMAGE 9);
[/class]
[div class=border][div class=border2][div class=home][div class=homeimage]
[div class=square1][/div][div class=square2][/div]
[div class=ba][/div] [div class=bb][/div] [div class=bc][/div] [div class=bd][/div]
[div class=line][/div] [div class="tab tab1 chosentab" style="top: 85px; transition-delay: 2s;"]home[/div] [div class="tab tab2" style="top: 135px; transition-delay: 2.1s;"]story[/div] [div class="tab tab3" style="top: 185px; transition-delay: 2.2s;"]about[/div] [div class="tab tab4" style="top: 235px; transition-delay: 2.3s;"]roles[/div] [div class="tab tab5" style="top: 285px; transition-delay: 2.4s;"]links[/div][/div]
[div class=border3][div class=contents]
[div class="tabContents tabContents1 show"][div class=roleline style="left: 67px;"][/div] [div class=roleline style="left: 132px;"][/div]
[div class=role style="top: 30px; left: 50px;"]synthetic[/div] [div class=role style="top: 65px; left: 115px;"]zodiac[/div][/div]
[div class="tabContents tabContents2"][div class=scroll]The stars in the sky always mean something different to whoever looks at them. Yet they remain unchanging, unwavering. It was only a matter of time until the twelve returned.
-
Humanity has a thing for persisting. Advancing too, with the technologies available. It didn't take very long for the secret of 'life' to be figured out, or at least something very close to it. At first, the general public was wary of the new technology; Dubbed 'Synthetics,' these were man-made humans. So well-crafted they didn't even know they weren't real. That their memories were false and that the beating of their heart was just an advanced algorithm. They even bleed, too.
But they never got sick. Deep down, there was nothing to infect. After all, it was all just synthetic.
And because humanity never stops moving forward, the people accepted them into their world. Sure, they were a bit different from me and you, but morality isn't just skin deep. They could feel and cry just like the rest of us, they bleed when we hit them. They died when we shot them. Instead of looking to the Synthetics as a warning sign that science has gone too far, society instead asked for more. Families who couldn't have children asked for ones that looked like them. Employers who had dangerous work asked for ones so real humans didn't get poisoned. Generals wanted soldiers, ones who didn't have any connections, no one who would care if they got shot in the head or blown up.
Now, the year is 2078. Twenty years have passed since the introduction of Synthetics of the world, and ten years since the war began. Not a war filled with gunshots and IUDs, but an internal war. A silent war between Synthetics and humans, and big corporations. Synthetics weren't androids, there were no robotics in their skin. They were human, just made piece by piece. No one wanted to go down the path of old movies where robots were enslaved and the real humans were the big villains. But times are changing, and people are getting anxious once again. High-ranking government officials are dying, and it isn't from natural death. Someone or something is trying to knock over the delicate peace that has been established, and someone has to stop it. Luckily, the stars are here to help.
An old man, way in the past, once said that humanity has forgotten where it came from. That all the technological advancements have made them forget about the stars and the earth and what made us who we are. He also said that the stars do not forget, even if we do. They will test us, but they won't send us in blind. They'll give us the Zodiacs, no matter where we are.
So even when the world turns to metal and our hearts are made of fancy coding, we'll always be human and something more. [/div][/div]
[div class="tabContents tabContents3"][div class=scroll]Hey there! It's fox, coming at you with hopefully an idea that intrigues the masses. This RP is about a group of humans and 'Synthetics' that are chosen as 'Zodiac's,' ancient warriors that refuse to be forgotten in such an advanced era. These chosen warriors will be brought together to solve a string of high-profile assassinations across the globe, while uncovering the dirty truth about the advanced future they live in. Those chosen struggle to work together due to their different backgrounds and arising new powers.
I'm hoping for a group of twelve people, including myself, since there are twelve zodiacs. Your character can be either a human or Synthetic, but I hope there's a somewhat even balance of the two. Please look to the rules below before showing interest, so we're all on the same page.
[div class=tag]rule 1[/div] As always, please follow all RPN rules. Be kind to fellow RPers, and if you come across any issues, please bring it to my attention rather than starting fights. Hopefully then we'll be able to work out a compromise.
[div class=tag]rule 2[/div]Literacy is expected. This is an advanced RP, so I expect multi-paragraph responses each time. Although this rule is more lenient depending on what's happening the RP itself, be aware that larger posts are expected. Absolutely no one-liners.
[div class=tag]rule 3[/div]Please be able to post once a week. One of the biggest killers of group RPs is that one person is not posting, and everyone else becomes stuck waiting for their response. I myself am even guilty of it, which is why I will be keeping a close eye on the thread to see who has and hasn't posted. If you cannot post, inform me and tell the group what your character would of said or done so we can continue the RP. You will not be removed if you do this. If you go radio silent, however, I will find a replacement or take up the role myself for the time being so we can continue posting.
[div class=tag]rule 4[/div]There will be an application process. For the time-being, please only apply for one of the twelve roles. If I see that there is not enough interest for all twelve roles and others want to apply for two roles at once, I will open up the applications for that opportunity. However, for the time being, one role per person.
[div class=tag]rule 5[/div]Discord will be a mandatory. If you aren't active at ALL on Discord and don't think this one RP server will make you more active, please do not apply. I need to be able to keep tabs with people, and it's much easier for everyone to plan and chat in the server.
[/div][/div]
[div class="tabContents tabContents4"][div class=scroll][div class=tag]Aries[/div] Reserved
[div class=tag]Taurus[/div] Open
[div class=tag]Gemini[/div] Open
[div class=tag]Cancer[/div] Open
[div class=tag]Leo[/div] Open
[div class=tag]Virgo[/div] Open
[div class=tag]Libra[/div] Open
[div class=tag]Scorpio[/div] Open
[div class=tag]Sagittarius[/div] Open
[div class=tag]Capricorn[/div] Open
[div class=tag]Aquarius[/div] Open
[div class=tag]Pisces[/div] Open
I purposefully left the Zodiac's without the normal traits we tend to associate with each sign. It's up to you to define how they act!
[/div][/div]
[div class="tabContents tabContents5"][div class=scroll]coming soon.
[/div][/div]
[/div][/div][/div][/div]
coded by constellation.
[/div]
[class=border]
width: 650px;
height: 400px;
margin: auto;
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;
[/class]
[class=border2]
position: absolute;
width: 650px;
height: 400px;
[/class]
[class=home]
position: relative;
width: 250px;
height: 400px;
left: 200px;
transition: 2s;
transition-delay: 3s;
z-index: 2;
[/class]
[class=homeimage]
width: 250px;
height: 400px;
background: var(--image-1);
background-size: cover;
background-position: center;
filter: grayscale(100%);
transition: 1s ease-in-out;
[/class]
[class=square1]
position: absolute;
top: -10px;
left: -10px;
transition: 1s ease-in-out;
border: 1px solid #000;
width: 248px;
height: 398px;
[/class]
[class=square2]
position: absolute;
top: 10px;
left: 10px;
transition: 1s ease-in-out;
opacity: 1;
border: 1px solid var(--main-color);
width: 248px;
height: 398px;
[/class]
[class=ba]
position: absolute;
top: 10px;
left: 10px;
width: 1px;
height: 0px;
background: white;
transition: 1s ease-in-out;
transition-delay: 0.5s;
[/class]
[class=bb]
position: absolute;
top: 10px;
left: 10px;
width: 0px;
height: 1px;
background: white;
transition: 1s ease-in-out;
transition-delay: 0.5s;
[/class]
[class=bc]
position: absolute;
bottom: 10px;
right: 10px;
width: 1px;
height: 0px;
background: white;
transition: 1s ease-in-out;
transition-delay: 0.5s;
[/class]
[class=bd]
position: absolute;
bottom: 10px;
right: 10px;
width: 0px;
height: 1px;
background: white;
transition: 1s ease-in-out;
transition-delay: 0.5s;
[/class]
[class=line]
position: absolute;
top: 50px;
left: 60px;
transition: 1s ease-in-out;
width: 5px;
height: 0px;
background: white;
transition-delay: 1.5s;
[/class]
[class=tab]
position: absolute;
left: 100px;
transition: 1s ease-in-out;
border-bottom: 5px solid white;
font: 14px/120% Chivo;
color: white;
text-transform: uppercase;
opacity: 0;
[/class]
[class=leftpic]
float: left;
display: inline-block;
width: 175px;
height: 210px;
background: red;
margin: 5px 0;
[/class]
[class=rightpic]
float: right;
display: inline-block;
width: 175px;
height: 210px;
background: red;
margin: 5px 0;
[/class]
[class=contents]
position: absolute;
z-index: 1;
height: 400px;
width: 400px;
background: #fff;
top: 0px;
left: -250px;
opacity: 0;
transition: 3s;
transition-delay: 4s;
border: 1px solid #e1e1e1;
[/class]
[class=tabContents]
position: absolute;
height: 370px;
width: 385px;
opacity: 0;
padding: 15px 0 15px 15px;
overflow: hidden;
white-space: pre-line;
[/class]
[class=scroll]
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
color: #333;
font-size: 12px;
[/class]
[class=border3]
position: absolute;
width: 402px;
height: 402px;
top: -1px;
left: 250px;
overflow: hidden;
[/class]
[class=role]
position: absolute;
text-align: center;
font: 22px Chivo;
background: var(--main-color);
padding: 10px 5px 3px 5px;
writing-mode: vertical-rl;
text-orientation: upright;
color: #fff;
text-transform: uppercase;
[/class]
[class=roleline]
position: absolute;
height: 75px;
background: var(--main-color);
top: 0;
width: 2px;
[/class]
[class=show]
opacity: 1;
transition: all 1.5s;
z-index: 1;
[/class]
[class=tag]
display: inline;
padding: 3px 5px;
margin-right: 2px;
background: var(--main-color);
color: white;
font-size: 9px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 150%;
font-family: Chivo;
[/class]
[class name="tab" state="hover"]
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
font-style: italic;
transition: 1s;
[/class]
[class=chosentab]
font-style: italic;
transition-delay: 0s;
[/class]
[script class=tab1 on=click]
addClass show tabContents1
addClass chosentab tab1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab4
removeClass chosentab tab5
[/script]
[script class=tab2 on=click]
addClass show tabContents2
addClass chosentab tab2
removeClass show tabContents1
removeClass show tabContents3
removeClass show tabContents4
removeClass show tabContents5
removeClass chosentab tab1
removeClass chosentab tab3
removeClass chosentab tab4
removeClass chosentab tab5
[/script]
[script class=tab3 on=click]
addClass show tabContents3
addClass chosentab tab3
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents4
removeClass show tabContents5
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab4
removeClass chosentab tab5
[/script]
[script class=tab4 on=click]
addClass show tabContents4
addClass chosentab tab4
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents5
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab5
[/script]
[script class=tab5 on=click]
addClass show tabContents5
addClass chosentab tab5
removeClass show tabContents1
removeClass show tabContents2
removeClass show tabContents3
removeClass show tabContents4
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab4
[/script]
[script class=home on=mouseenter]
addClass b1 square1
addClass b2 square2
addClass bh ba
addClass bw bb
addClass bh bc
addClass bw bd
addClass blur homeimage
addClass linemove line
addClass appear tab
addClass homeslide home
addClass contentslide contents
[/script]
[class=b1]
top: 0;
left: 0;
border: 1px solid var(--main-color);
[/class]
[class=b2]
top: 0;
left: 0;
background: var(--main-color);
opacity: 0.4;
[/class]
[class=bh]
height: 380px;
[/class]
[class=bw]
width: 230px;
[/class]
[class=blur]
filter: grayscale(100%) blur(0.5px);
[/class]
[class=linemove]
height: 300px;
[/class]
[class=appear]
opacity: 1;
[/class]
[class=homeslide]
left: 0;
[/class]
[class=contentslide]
left: 0px;
opacity: 1;
[/class]
