BELIAL.
wanna bewitch you in the moonlight
[class name="majorContainer" minWidth="500px"]
width:500px;
background:#fff;
margin:auto;
border:1px solid #f1f1f1;
padding:50px;
--accent:#555
[/class]
[class name="majorContainer" maxWidth="499px"]
width:250px;
background:#fff;
margin:auto;
border:1px solid #f1f1f1;
padding:50px;
--accent:#555
[/class]
[class name="colorChange"]
--accent:#9D0F0D
[/class]
[div class="majorContainer"]
[div class="titleText"]BAD THINGS
[div class="quoteContainer"]
[div style="font-size:10px"]a southern gothic/supernatural roleplay[/div]
[/div]
[/div]
[div style="padding:10px;border:1px solid #f1f1f1"]
[div class="imageHover"]
[div class="goBack"]goiback[/div]
[div class="flexright"]
[div class="infobox"]
[div class="pageContainers"]
[div class="tabContainers"]
[div class="tabStyle taba"]plot[/div]
[div class="tabStyle tabb"]roleplay ideas[/div]
[div class="tabStyle tabc"]inspiration[/div]
[div class="goBackMobile"]goiback[/div]
[/div]
[div class="containerPages pageOne"]
[div class="basicInfo"]
[div class="basicInfoLabel"]PLOT[/div]
[div class="basicInfoText"]
What we'll make here is a slice of life, southern gothic supernatural roleplay with bits of mystery within it. There will be explicit content (within reason, all within rpn's rules) and not so PG content at times. I just want to warn people coming in that this is going to be gross at times, and it's gonna be real. There will be death, and there will be mentions of sex. What else? A GOOD TIME!!!
I'm fully prepared to develop the lore extensively, as well as craft little ways for the characters to unravel the mysteries of Mallaus. Special events may happen, depending on player activity. Regular events will happen, for sure, in order to help plot along. This is a bit story based, so while there will be moments of freedom and almost 'sandbox', be prepared to stay along for the ride.
Reminder to everyone that this isn't all. I just wanted a fancy dancy, eye-catching layout for the interest check. Rules, expectations and reserves will be later on. So stay tuned! [/div] [/div] [/div] [div class="containerPages pageThree"] [div class="imgContainers"] [div class="imgBox"]
[/div]
[div class="imgBox"]
[/div]
[div class="imgBox"]
[/div]
[div class="imgBox"]
[/div]
[/div]
[div class="oocBox"]
@ooc name
[/div]
[div class="oocInfo"]will use rpn as ooc as well as discord[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div style="max-width:500px;margin:auto;width:100%;font-size:8px;text-transform:uppercase;opacity:0.6;text-align:right"]cheers, lamb[/div]
[class name="titleText" minWidth="500px"]
font-size:5em;
color:var(--accent);
transition:1s;
[/class]
[class name="titleText" maxWidth="499px"]
font-size:4em;
color:var(--accent);
transition:1s;
[/class]
[class name="quoteContainer" minWidth="500px"]
margin-top:-0.9em;
margin-left:3em;
background:#fff;
color:#555;
text-transform:uppercase;
position:absolute;
z-index:1;
letter-spacing:0.5px;
padding:5px;
[/class]
[class name="quoteContainer" maxWidth="499px"]
margin-top:-0.9em;
background:#fff;
color:#555;
text-transform:uppercase;
position:absolute;
z-index:1;
padding:5px;
[/class]
[class name="imageHover" minWidth="500px"]
width:100%;
height:300px;
background:url(https://www.popoptiq.com/wp-content/uploads/2012/12/Lords-of-Salem2.jpg);
background-position:center;
background-size:150%;
transition:0.5s ease all;
filter:grayscale(100%);
overflow:hidden;
display:flex;
transition-duration:1s;
cursor:crosshair;
[/class]
[class name="imageHover" maxWidth="499px"]
width:100%;
height:300px;
background:url(https://www.popoptiq.com/wp-content/uploads/2012/12/Lords-of-Salem2.jpg);
background-position:center;
background-size:cover;
transition:0.5s ease all;
filter:grayscale(100%);
overflow:hidden;
display:flex;
transition-duration:1s;
cursor:crosshair;
[/class]
[class name="goBack" minWidth="500px"]
margin-left:calc(50% - 50px);
color:#fff;
text-transform:uppercase;
font-size:10px;
margin-top:285px;
font-weight:bold;
transition:1s;
opacity:0;
[/class]
[class name="goBack" maxWidth="499px"]
display:none
[/class]
[class name="goBackMobile" minWidth="500px"]
display:none
[/class]
[class name="goBackMobile" maxWidth="499px"]
color:#555;
text-transform:uppercase;
font-size:10px;
font-weight:bold;
transition:1s;
opacity:1;
padding:5px;
cursor:pointer;
[/class]
[class name="flexright" minWidth="500px"]
width:250px;
height:100%;
transition-duration:1s;
margin-left:calc(50% + 10px);
[/class]
[class name="flexright" maxWidth="499px"]
width:250px;
height:100%;
transition-duration:1s;
margin-left:100%;
[/class]
[class="infobox"]
width:250px;
height:100%;
background:#fff;
overflow:hidden;
cursor:auto;
[/class]
[class name="pageContainers"]
width:calc(100% - 25px);
padding:0px 0px 0px 10px;
height:100%;
overflow:hidden;
[/class]
[class name="containerPages"]
font-size:11px;
text-align:justify;
color:#555;
height:265px;
overflow:auto;
width:220px;
padding-right:17px;
padding-left:3px;
[/class]
[class name="tabContainers"]
display:flex;
margin-bottom:7px;
height:22px;
[/class]
[class name="tabStyle"]
font-size:10px;
text-transform:uppercase;
color:#555;
font-weight:bold;
padding:5px;
transition:0.1s;
cursor:pointer;
[/class]
[class name="basicInfo"]
padding:6px;
border:1px solid #f1f1f1;
display:flex;
justify-content:space-between;
margin-bottom:5px;
[/class]
[class name="basicInfoLabel"]
font-size:9.5px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding:2px 5px 2px 5px;
background:var(--accent);
[/class]
[class name="basicInfoText"]
font-size:11px;
color:#555;
[/class]
[class name="personContainer"]
display:flex;
width:100%;
font-size:9.5px;
margin-top:5px;
[/class]
[class name="personFlex"]
width:100px;
flex-grow:1;
padding:5px;
[/class]
[class name="personWrap"]
display:flex;
flex-wrap:wrap;
width:100%;
[/class]
[class name="traitLeftContainer"]
width:calc(50% - 15px);
margin:5px;
[/class]
[class name="traitName"]
text-transform:uppercase;
font-weight:bold;
margin-bottom:-5px;
color:#000;
[/class]
[class name="traitMeterOut"]
border:1px solid var(--accent);
width:100%;
height:5px;
border-radius:5px;
padding:1px;
margin-bottom:5px;
[/class]
[class name="traitMeter"]
background:var(--accent);
height:5px;
[/class]
[class name="likeDislike"]
background-color:#eeeeee;
color:#555;
text-transform:uppercase;
width:fit-content;
padding:2px 5px 2px 5px;
border-radius:5px;
margin:1px;
[/class]
[class name="imgContainers"]
display:flex;
width:223px;
flex-wrap:wrap;
pointer-events:none;
justify-content:space-between;
[/class]
[class name="imgBox"]
border:5px solid #fff;
box-shadow:1px 1px #ddd;
width:100px;
height:100px;
filter:saturate(200%);
[/class]
[class name="oocBox"]
width:100%;
padding-right:10px;
border-top:3px solid var(--accent);
margin-top:3px;
text-align:right;
text-transform:uppercase;
color:#555;
font-size:15px;
font-weight:bold;
[/class]
[class name="oocInfo"]
width:100%;
text-align:right;
[/class]
[class name="animate" minWidth="500px"]
animation-name:{post_id}imageAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]
[class name="animate" maxWidth="499px"]
animation-name:{post_id}mobileAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]
[class name="backAnimate" minWidth="500px"]
animation-name:{post_id}postAnimate;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]
[class name="backAnimate" maxWidth="499px"]
animation-name:{post_id}postMobile;
animation-duration: 2s;
animation-fill-mode: forwards;
[/class]
[class name="movers" minWidth="500px"]
margin-left:calc(0% + 5px);
transition-delay:1s;
[/class]
[class name="movers" maxWidth="499px"]
margin-left:calc(0% - 10px);
transition-delay:1s;
[/class]
[class name="opacityChange"]
opacity:1;
transition-delay:2s;
cursor: pointer;
[/class]
[script class="imageHover" on="mouseenter"]
addClass animate imageHover
removeClass backAnimate imageHover
addClass movers flexright
addClass opacityChange goBack
addClass colorChange majorContainer
[/script]
[script class="goBack" on="click"]
removeClass animate imageHover
addClass backAnimate imageHover
removeClass movers flexright
removeClass opacityChange goBack
removeClass colorChange majorContainer
[/script]
[script class="goBackMobile" on="click"]
removeClass animate imageHover
addClass backAnimate imageHover
removeClass movers flexright
removeClass opacityChange goBack
removeClass colorChange majorContainer
[/script]
[script class="containerPages"]
hide containerPages
show pageOne
removeClass tabSelect tabStyle
addClass tabSelect taba
[/script]
[class name="tabSelect"]
border-bottom:2px solid var(--accent);
margin-left:0px;
[/class]
[script class="taba" on="click"]
hide containerPages
show pageOne
removeClass tabSelect tabStyle
addClass tabSelect taba
[/script]
[script class="tabb" on="click"]
hide containerPages
show pageTwo
removeClass tabSelect tabStyle
addClass tabSelect tabb
[/script]
[script class="tabc" on="click"]
hide containerPages
show pageThree
removeClass tabSelect tabStyle
addClass tabSelect tabc
[/script]
[animation=imageAnimate]
[keyframe=50]
background-size:130%;filter:grayscale(0%);background-position:center;
[/keyframe]
[keyframe=100]
background-size:130%;filter:grayscale(0%);background-position:center right;
[/keyframe]
[/animation]
[animation=postAnimate]
[keyframe=0]
background-size:130%;filter:grayscale(0%);background-position:center right;
[/keyframe]
[keyframe=50]
background-size:130%;filter:grayscale(0%);background-position:center;
[/keyframe]
[keyframe=100]
background-size:150%;filter:grayscale(100%);background-position:center;
[/keyframe]
[/animation]
[animation=mobileAnimate]
[keyframe=50]
filter:grayscale(0%);background-position:center;
[/keyframe]
[keyframe=100]
filter:grayscale(0%);background-position:center right;
[/keyframe]
[/animation]
[animation=postMobile]
[keyframe=0]
filter:grayscale(0%);background-position:center right;
[/keyframe]
[keyframe=50]
filter:grayscale(0%);background-position:center;
[/keyframe]
[keyframe=100]
filter:grayscale(100%);background-position:center;
[/keyframe]
[/animation]
Deep in the darkened banks of Louisiana, straight across from the new overpass connecting the modern world to derelict traditionism is the small town of Mallaus (MAL-AY-US); hardly worth a second glance or a weekend visit. The people that live in Mallaus are hard-working, principled Americans with blood just about coursing to the beat of the Star Spangled Banner.
If you’re born in Mallaus, you die in Mallaus. Families go back generation upon generation, shacking up in the same plantations or homes since the civil war. Change is rare to come to Mallaus, and often grimaced at by the older residents. The town is split into two these days: half the place is really coming along, something new every month or so added on; and the other half is stubborn and rooted, noses up to the idea of anybody new coming to Mallaus.
If you’re born in Mallaus, you die in Mallaus.
But there’s something about this town. The locals hardly notice it and visitors don’t look hard enough to see it— but something is there. This strange element is brought to light in 2016 when everyone’s fears came true.
Vampires. Bold, ancient creatures with enough numbers to support themselves have bled from the woodwork and announced themselves to society. Coming out of the coffin, as it’s put. The world was rattled, to put it lightly.
Not the only bits of supernatural at play, Mallaus is one of the first towns to sign a legislature allowing integration of Vampires. It feels like a test trial of sorts, but why on earth a small and rural town was picked first over thousands of cities is beyond anyone.
So here we are, at the precipice of change. Worlds are shifted and people are forced to confront their very morality and traditions. All in the tiny, worth nothing town of Mallaus, Lousiana.
Where do you stand?
[/div]
[/div]
[/div]
[div class="containerPages pageTwo"]
[div class="personContainer"]
[div style="padding:5px"]
[div class="basicInfoLabel"]races available[/div]
[/div]
[div class="personFlex"]
[div class="personWrap"]
[div class="likeDislike"]humans[/div]
[div class="likeDislike"]vampires[/div]
[div class="likeDislike"]werewolves[/div]
[div class="likeDislike"]witches[/div]
[div class="likeDislike"](TBD)[/div]
[/div]
[/div]
[/div]
[div class="personContainer"]
[div style="padding:5px"]
Clearly, this isn't just a cut and dry humans vs. vampires roleplay. I wanted to avoid that and give freedom for players to portray whatever supernatural they want to (within reason. go ahead and pitch an idea and we can work it out) There are roles and whatnot within each race (such as coven member types, vampire law upholer types, human roles etc...) that will be fleshed out once this actually gets some interest generated.
What we'll make here is a slice of life, southern gothic supernatural roleplay with bits of mystery within it. There will be explicit content (within reason, all within rpn's rules) and not so PG content at times. I just want to warn people coming in that this is going to be gross at times, and it's gonna be real. There will be death, and there will be mentions of sex. What else? A GOOD TIME!!!
I'm fully prepared to develop the lore extensively, as well as craft little ways for the characters to unravel the mysteries of Mallaus. Special events may happen, depending on player activity. Regular events will happen, for sure, in order to help plot along. This is a bit story based, so while there will be moments of freedom and almost 'sandbox', be prepared to stay along for the ride.
Reminder to everyone that this isn't all. I just wanted a fancy dancy, eye-catching layout for the interest check. Rules, expectations and reserves will be later on. So stay tuned! [/div] [/div] [/div] [div class="containerPages pageThree"] [div class="imgContainers"] [div class="imgBox"]
Last edited:
Count me in!!
