timshel
๐ฉ๐๐ค๐ช ๐ข๐๐ฎ๐๐จ๐ฉ
[class=border]
--main-color: #661B1C;
--image-1: url(https://i.pinimg.com/564x/e2/ab/d6/e2abd6c64aa6125396ddea33a97e4cc2.jpg);
[/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;"]intro[/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;"]rules[/div] [div class="tab tab5" style="top: 285px; transition-delay: 2.4s;"]roles[/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;"]ethology[/div] [div class=role style="top: 65px; left: 115px;"]beastars au[/div][/div]
[div class="tabContents tabContents2"][div class=scroll]Eยทtholยทoยทgy (noun): the study of animal behavior
We've really done our best to remain civil, despite the circumstances.
But oh, it's so hard. No matter what kind of policies you make, how you alter your appearance and behavior to become less threatening, drugs you take to turn you into a pathetic shadow of your true potential, they still fear us. They still regard us with hostility and suspicion, and the worst part is, half the time, their own instincts are as correct as our own.
Take what just happened for example.
Progenote University is one of the premier educational institutions in our countries and has always done its best to foster an environment where herbivores and carnivores can peacefully coexist, citing the need for diversity of thought to truly be a world class institution.
Whatever they did - intense orientations, programs, events that inspired unity and understanding - worked beautifully: the almost utopian city of Luca in which it was located thrived with some of the lowest rates of hate crimes and violent crimes in the country.
That combined with the groundbreaking research into herbivore-carnivore relationships being conducted by the University made what happened so much more tragic.
A student - a popular herbivore upperclassman - was murdered. Devoured, actually. I'll spare you the details, but it was done in such a way that defiled him, and it made the university's reputation plummet.
In a city like this, in a place like this, there has to be more to this situation.
A group of University students suspect they're at the very tip of the iceberg.
[/div][/div]
[div class="tabContents tabContents3"][div class=scroll]This is a Beastars roleplay. For those who have not seen the show, know that having watched it isn't necessary to becoming a great member of this group, but I do highly recommend it - you can find the show on Netlflix.
In most respects, the world in this universe exists as we know it: it's modern and sophisticated, with all the technology, commodities, and conveniences we know and love.
In this setting, however, society is run by anthropomorphic animals - the majority of them have very human body plans and builds, and they all showcase features unique to their specific animal. With an emphasis on law, order, and democracy, this world is a relatively comfortable place to live.
That is, if you're a carnivore.
There is and has always been an immense cultural divide between herbivores and carnivores. Many progressives believe that society as a whole is on the cusp of bridging this divide for good. However, some argue that the divide is only natural - after all, one did prey on the other for millennia before truces, treaties, and eventually laws were put in place, and they still require massive amounts of protein to maintain themselves.
Many secretly believe that carnivores cannot control their need for protein that isn't plant-based.
They say the proof is in the reality they face: harassment, hate crimes, attacks, and on the rarest of occasions, devourings. Not knowing who you can trust, how late you can stay out, which alleys are safe... It's a terrifying existence for many herbivores.
So despite the illusion of peace and progress, it's all maintained on a razor-thin margin.
[/div][/div]
[div class="tabContents tabContents4"][div class=scroll][div class=tag]First[/div] This is going to be an advanced roleplay - correct grammar and basic sentence structure are expectations. You should be comfortable writing upwards of five hundred words per post, at the very minimum. Please be aware of your own strengths and preferences as a writer as you consider applying to this group.
[div class=tag]Second[/div] This may be obvious thus far, but themes in this roleplay are going to be mature. Although we will be following all of RPN's listed rules, I ask that you are over eighteen years of age. I will not be making any exceptions to this rule, so please do not contact me.
[div class=tag]Third[/div] Roles will not be awarded on a first-come, first-serve basis: what you'll be posting are applications, and when we reach the deadline, I'll be evaluating every character for quality and originality. In the spirit of fairness and integrity, your relationship with me will not impact how your application will be read.
[div class=tag]Fourth[/div] I'll release more information on character creation when applications open, but all characters in this roleplay will be original (no canon allowed). No roles are gender-locked or species-locked. For the sake of including as many people as possible, please apply for only one role.
[div class=tag]Fifth[/div] Be ready to plot. This storyline is going to require lots of collaboration from every person involved, and that extra conversation will be taking place on Discord. It'll be really, really fun. If chosen, you'll receive an invitation to join the roleplay server after the application deadline.
[div class=tag]Sixth[/div] If you're interested, let me know below! We'd love to have you. Depending on the level of interest, I may be inclined to create more roles..[/div][/div]
[div class="tabContents tabContents5"][div class=scroll][div class=tag]The significant other[/div] Arguably one of the most invested people in uncovering the truth to this situation, they're motivated by both grief and anger to begin digging more deeply.
[div class=tag]The best friend[/div] Devastated by the loss of their close confidant, they once told each other they'd have each other's back, no matter what. Now they've got to keep their word and find out what the hell happened.
[div class=tag]The roommate[/div] Although they may have not been the closest friends, these two had a deep domestic bond - they shared spaces, food, and nearly everything in their dorm. This student feels like a piece of themself is missing.
[div class=tag]The journalist[/div] Selfishly, the University newspaper needs to capitalize on this situation - their readership has already increased dramatically since the incident. Their star student is sent to get to the bottom of this by whatever means necessary.
[div class=tag]The little[/div] Reeling from the loss of their first peer mentor in Greek life, this younger student wants nothing more than to make sense of this horrific and confusing situation. Naive and inexperienced, they're bound to find out much more than they wanted to.
[div class=tag]The obvious suspect[/div] Whether they're large and in charge, big and bad, or withdrawn and suspicious, this student is a prime suspect based on profiling and history alone. They hope they can clear their name by assisting the investigation.[/div][/div]
[/div][/div][/div]
coded by constellation.
[/div]
[class=border]
width: 650px;
height: 400px;
margin: auto;
[/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% Times New Roman;
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 Times New Roman;
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: Times New Roman;
[/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]
[/div]
Last edited:
I'm in chief 
