Reyn's Big Test House of Fun

Thread
WIP ZONE
fuc

Reyn

Sleepyhead
Staff member
welcum to my test haus 3

olease ask before copyingh any of my code unless ive posted it in some template thread or whatever. i actually suck shit at writing code that people can understand so it will likely Not Work

if anything looks TURBO broken its because of the percent encoding glitch with style. Good sheets worth keeping I've hosted externally lol

secpnd post ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ is my preview/wip zone

i love you
 
Last edited:

METAMORPHOSIS
The Altered Witch, as she is known to promoters, is an adaptable frame with the ability to shift forms according to battle requirements. These main forms are the agile "HAWK", the resilient "OTTER", the powerful "HOUND", and the standard form "SORCERESS".

ASSIMILATION
Using a nanomachine "POTION", Ceridwen is able to transform the shape of matter around her. The most common use for this is temporary shields, barriers, or projectiles, as more complex shapes take longer to build. The "POTION" does not work on the Nightmare, though it can be minorly effective on Witches, and can be used as a temporary patch should another unit be damaged.

ECHO
A last resort, given the damage it can cause to Ceridwen- by enveloping herself in the "POTION", Ceridwen can alter her own shape beyond the four existing forms, instead taking on the likeness of the Nightmare before her. Though she loses the ability to change into any other form, the nanomachines are able to provide a partial mimic of her echo's abilities, the accuracy of which depends upon the strength and complexity of their original manifestation.
"Ceridwen" title font: Kingthings Spike
Image is Xenoblade Chronicles concept art

Age:
24.

Nationality:
Welsh.

Full Name:
Seren Howell.
I don't know what my dreams are. I suppose they're just to get away from all this.

As for my fears- I'll fucking tell you what my fears are. I've seen what happens to people who are in these things for too long. I've seen what they become. My mum--stepmum, if we're being pedantic--she was put in a Witch. Brigid, that was the one. Some nice, supportive unit, that's what she assured me. I've always been paranoid about it, ever since she signed up, and I've only ever been proven right. It changed her. It poisoned her. It killed her, long before they told me she was dead. Suicide, apparently. Bloody suicide. I can't believe the nerve- she disappeared, and they never found her body. For her sake, I hope she's actually dead.

I suppose that's why I'm here. I've always been a curious type- real analytical, that's what they used to say in school. The type who always looks at the bigger picture, or the type who pores over the details. I forgot which one exactly. What I didn't forget is what happened. I've carried her weight for years, even before she vanished- and I know, I know there's something they're not telling us.

It's just hard to get my thoughts all in one place. Much as I hate to admit it, I'm often taken by flights of fancy- easily distracted, that's what they used to say in school, but I think they used some medical term. I wasn't listening. Too busy looking at the bigger picture, or poring over the details, or whatever. Too busy trying to placate my stepmum as she withdrew further and further into the machine. Too busy trying to separate the pieces of her from the pieces of Brigid, like cutting out a fucking parasite.

They've put another one in that thing, despite what happened to her. Those fucking fucks value their toys over the lives of the human fucking beings they put inside them. I'm watching her like a hawk, that new familiar. I'm watching all of my Coven like a hawk. If anything happens to them, I- I don't know what I'd do. I can't let it get to that point. I can't let them take anyone else from me, not like that, not again.

I've looked at myself, and I haven't noticed a change. I think my grounding technique has worked- took a few tries to get it right, but I'm finally at a point where I'm comfortable inside Ceridwen.

I suppose I've always been quite adaptable.
Image is from This Picrew
 
Last edited:








detroit


chaos?




one
 
Last edited:



possibly
the funny
now its possible that this is
quite funny
but i might be LYING TO YOU like a LIAR even though ive
literally never lied in my life
. grins
 
Last edited:
Hi hi hi guess who got the div guide back <3


Spoilers aren't super obvious on the new site, but this works the same- click on each item to bring up a code demonstration. I've tried to include the code below each of the entries (except in basics), but I couldn't do it in full because of the weird way the new site deals with the code block tag. If you want the full code (square brackets and all), quote this post and ctrl+f to find what you're looking for. I might post this in a code block underneath this post as well. Also, don't worry- you don't need to know or use all of these things in order to make a cool-looking post.


For everything that involves colours, there are 3 recommended options available to you that work for every case here, unless otherwise stated: hex colours (e.g. #FF0000), colour names (e.g. red), and RGBA (e.g. rgba(255, 0, 0, 1.0)).


Have fun and let me know if anything breaks <3


[font size="5"]THE BASICS[/CODE]


{Text Colour}
This changes the text colour.


{Background Colour}
This changes the background colour.


{Border Basics}
This changes the border colour.


This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.


This changes the border size.


{Font}
This changes the font. Here is a good list of fonts that work with most devices on RPF.


{Padding}
This adds a space between the edge of the div and the content.


You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, and padding-right.


{Combining Div Properties}
This includes all of the above elements (in different colours, of course). Separate div properties with ;!



[font size="5"]THE SPECIFICS[/CODE]


[font size="4"]TEXT FORMATTING[/CODE]


{Text Colour}
This changes the text colour.


Code:
color: red | #ff0000 | rgba(255, 0, 0, 1.0);


{Font}
This changes the font. Works with system fonts as usual, as well as generics (serif, sans-serif, monospace, cursive), and anything [font face="Orbitron"]here[/CODE]. If it's not working, try putting the font name in quotes ('like this').


Code:
font-family: Orbitron;


{Font Style}
You can change the font style. The options are Normal...

Italic...

And Oblique!


Code:
font-style: normal | italic | obliquel


{Text Align}
This aligns text to the left,

centre,

and right.

You can also justify text, but it requires at least one full line to be noticeable.


{At least one full line}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque, lectus a tincidunt fringilla, odio augue imperdiet urna, quis placerat sem ante sit amet mi. Integer nec odio nunc. Duis bibendum, nisi a scelerisque tincidunt, lorem turpis cursus lectus, vitae convallis sapien odio vitae velit. Ut nec odio sed eros cursus rutrum. Vivamus euismod, ante at sollicitudin porttitor, elit dolor fringilla nunc, sit amet feugiat mauris risus eu diam. Nam tellus odio, sagittis eu aliquet nec, aliquam ut neque. In sit amet rutrum quam, sollicitudin interdum lorem.


Code:
text-align: left | center | right | justify;


{Font Size}
You can change the font size. Either as a percentage of the default size...

...Or as a forced size using px!


Code:
font-size:120% | 20px;


{Letter Spacing}Letter-spacing can be used to increase or decrease the size between individual letters. The options are normal - the spacing between the characters is normal, px - the spacing between letters is based on pixel values, or em - the spacing remains relative to the font size.


Code:
letter-spacing:1.2em | 3px;


{Text Shadow}
This puts a shadow underneath the text. The first value affects the horizontal position of the shadow.

The second value affects the vertical position of the shadow.

The third value affects the blur of the shadow.

You can have multiple text shadows at once.


Code:
text-shadow:2px 0px 0px lime;



[font size="4"]BACKGROUNDS[/CODE]


{Background Colour}
This changes the background colour.


Code:
background-color:red;


{Background Image}
This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.


Code:
background-image:url(https://i.imgur.com/irVSnBo.jpg);


{Background Image (Continued)}
You can change the position of the background. Available options are word positions (left/right/center top/bottom/center, pick any from the first and any from the second, or just one from either), and percentages (X% Y%).


You can change the size of the background too. You can set it to a value in px, a percentage (which will set it to a percentage of the container), cover (which makes it cover the whole container), contain (which makes sure the whole image is visible), or you could set it to two px or % values- the first will set the width, and the second will set the height! 100% is the most useful setting if you're having background issues.


The background image tiles (repeats) by both the X and Y axis by default, but you can change this to not repeat at all (no-repeat), repeat only on the X or the Y axis (repeat-x, repeat-y), to repeat as much as possible without clipping (space), or to stretch the image to fit the container size (round]). This div is set to no-repeat, but you can only see the effect when the div is pretty large, so...

{EXPAND DIV}im sorry this example used to work pretty well on the old site back when it was narrower


it kinda doesnt really anymore


trust me this genuinely does work


Code:
background-position: left|right|center top|bottom|center;

background-position: 10% 10%;

background-size: 100% | 100px | cover | contain | 100% 50% | 100px 50px;

background-repeat: no-repeat | repeat-x | repeat-y | space | round;


{Background Gradient}
You can make a gradient as the background! This works with rgba and colour names- NOT hex.

They can go whichever way you want. You can use words (to top/bottom/left/right), or you can input an angle (e.g. 90deg).


For your sake and for mine, please refer to this website for more information on gradients. There's a lot of stuff there and I don't wanna make this section needlessly long.


Code:
background:linear-gradient(to top | bottom | left | right, cyan, yellow, magenta);

background:linear-gradient(90deg, cyan, yellow, magenta);


{Background Attachment}
You can change how the background behaves when you scroll. Ain't that neat? Available options are scroll (default, will scroll with the page), fixed (will stick in place as the page scrolls), local (will scroll with a scrollbox), and sticky (will stick in place on a scrollbox, but scroll with the page? Does that make sense?).


Code:
background-attachment: scroll | fixed | local | sticky;


{Multiple Backgrounds}
You can have multiple backgrounds in the same div. They can be colours, images, gradients, whatever Separate them with commas! These multiple backgrounds can have different settings/values for the above properties, separate those with commas as well!


Code:
background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);


{Background Blend Mode}
If you just want a blend mode to only apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div! The parameters are the same as mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.


Code:
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;



[font size="4"]BORDERS[/CODE]


{Border Basics}
This changes the border colour.


This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.


This changes the border size.


Code:
border:red 1px solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;


{Border Image}
You can set the border to be an image. Y'know, if you want to. This might help.


Code:
border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;border-width:14px;border-style: solid;


{Border Radius}
Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?


You can change the radius of each corner individually! The first value is for top left, second is top right, third is bottom right, and fourth is bottom left.


Code:
border-radius:20px;

border-radius:20px 10px 5px 0px;


{Outline}
Outline is different to border in a few key ways. Firstly, it doesn't affect the total size of an element (e.g. a 1px border would add 1px to the size of the div, whereas an outline doesn't). Secondly, it isn't affected by border-radius, and will always display as a rectangle. Finally, it has a feature that border doesn't: offset. This allows the outline to be drawn separately to the actual boundaries of the container (e.g. a little further out or a little further in), whereas border will always stick to the edges of the container.


You can have an outline and a border in the same div.


Outline properties are: outline-style, outline-color, outline-width, outline-offset. If you want an example of something using this, I used it here to create the inner rectangle.


Code:
outline-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;

outline-color:red;

outline-width:1px;

outline-offset:1px;



[font size="4"]LAYOUT[/CODE]


{Padding}
This adds a space between the edge of the div and the content. The space can be in % or px.


You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.


Code:
padding:2%;

padding-left:10px;

padding-top: 3px;

padding-bottom: 2px;

padding-right: 5px;


{Width}
You can alter the width of a div using % or px. This one is at 50%.


Code:
width:50%;


{Height}
You can alter the height of a div as well, but you have to use px. You can set a height in %, but only if it's inside another div with a height set in px. (Colour added for illustration purposes.)


Code:
height:100px;


{Overflow (Scrollbox)}
Overflow allows you to make a scrollbox! You need to use it in a div that has a defined height, though- otherwise it will just be a normal post. I recommend including overflow: auto every time you set a height in px, in case some monitors don't show all the content. Available parameters are: visible, hidden, scroll, auto.


There's also overflow-x and overflow-y if you want to set the overflow of the X and Y axis separately.


:)


Code:
overflow: visible| hidden | scroll | auto;


{Float}

You can float divs next to each other, if they're the right width.
This is sometimes unreliable with borders, though.


Code:
float: left | right;


{Margin}
You can use margins to align a div if you use the width thing as well..


margin-left:auto aligns it right, and margin-right:auto aligns it left. There's also margin-top and margin-bottom which work the same way. Cool!


You can set the margin to: auto, a value in %, or a value in px. You can also include negative values if you want a cool way to break things. Ask illi about that one.


Code:
margin:auto | 50% | 100px;

margin-left: auto | 50% | 100px;

margin-right: auto | 50% | 100px;

margin-top: auto | 50% | 100px;

margin-bottom: auto | 50% | 100px;


{Position}
Position. Okay, cool, where do we start.


Not everything works in RPF. For example, position: sticky doesn't work, for a whole list of reasons that I've completely forgotten. For that reason, this section will only focus on the two parameters I know work fine: relative and absolute.


Relative positions the div relative to it's normal position.


Absolute positions a div relative to the nearest positioned ancestor. If you're using it on its own, it positions the div relative to the post itself. If you use it inside a div containing position: relative, it positions the div relative to that div.


You can alter the position of divs using the following: left, right, top, bottom. Put a value in px or % next to the value you want, and it will put that much space between the div and the relevant direction. For a better explanation, visit this page.


{Example of absolute positioning}
This is what absolute does when placed in a relative div! Very epic! You can also alter which div will appear in which layer by using z-index. Divs with a higher z-index will appear on top of divs with a lower z-index.


Code:
position:relative | absolute;

left: 0px;

right: 0px;

top: 0px;

bottom: 0px;

z-index: 69;


{Columns}


This is a little weird. You can divide the content of any single div into a set number of columns by using this, without having to put it in separate divs for each column. As far as I'm aware, there's no way to determine exactly which part of the content goes into which column, so it might not be a good idea to use it if you want to have sections with headers, but if you just want to split a few paragraphs into columns, then this is useful. Column-count determines the number of columns, column-gap determines the padding each column has, and column-rule adds a line between each column which can be edited like a border can.


Code:
column-count: 3

column-gap: 1px | 1%

column-rule: 1px solid red;



[font size="4"]VISUAL EFFECTS[/CODE]


{Box Shadow}
This creates a glow/shadow/blurry thing around the outside of the div. The parameters are the same as text-shadow.


{Code}box-shadow: 0px 0px 10px #ff0080;


This creates a glow/shadow/blurry thing around the outside of the div.


{Background Clipping}
You can clip the background to the text by using this code. This background, for example, is a fire gif. Other background code also works with this. Cool!


Code:
-webkit-background-clip: text;color: transparent;


{Filters}
This is an image with an invert filter.


All the filters you can use are: blur(10px) hue-rotate(90deg) brightness(100%) contrast(100%) grayscale(100%) invert(100%) opacity(100%) saturate(100%) sepia(100%). Change the thing in brackets to any number you want to decrease the intensity of the filter. You can also combine filters. This affects everything inside the div INCLUDING text and background colours, so be careful.


Code:
filter: blur(10px) | hue-rotate(90deg) | brightness(100%) | contrast(100%) | grayscale(100%) | invert(100%) | opacity(100%) | saturate(100%) | sepia(100%);


{Blend Mode}
[width=50][/width] The mix-blend-mode property will apply to everything inside a div, as with filter.


Available options are (oh boy here we go): normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity. I don't have the time or space to explain what all of those do. If you want to know, either read up about graphic design tools, or just play around with them.


Code:
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;


{Transform}


Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.


The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.


Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.


Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.




Code:
transform: skew(10deg, 5deg);

transform: rotate(180deg);

transform: scale(1, 2)

transform: matrix(1, 0.1, 0, 1, 0, 0);



[font size="4"]FLEX[/CODE]


{Flexbox}


These have a ratio of 5:3:1. This one is 5...


3


1!!!


These work with other BBCode/Div code, this is just a very basic example to illustrate.


Flexbox div code: {div}{attr="style","display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"}

~ Instead of row, you can put row-reverse, column, or column-reverse.

~ Instead of nowrap, you can put wrap or wrap-reverse.

~ Instead of space-around, you can put center, flex-start, flex-end, or space-between.


In a div around each thing, you've got to include flex-grow:X, where X equals how big you want the things in to be in comparison to each other. For example, I wanted it to have a 4:1 ratio, so around the 'About Me' section, I used flex-grow:4, and around the 'My Work' section, I used flex-grow:1.


Replace {} with []. Credit to Maxx for the guide above. Also, don't ask me about this, I don't know how it works. Illirica might tell you, if you give her $500 and your soul.


Code:
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;

flex-grow:5;



[font size="4"]GRIDS[/CODE]


{Grids}


A

B

C

D


Allows you to make customisable grid things! This is kinda hard to explain in a little preview here, so I highly recommend checking out Illirica's excellent guide on this.


Check it out here!!!


Code:
display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: 'TopLeft TopRight' 'BottomLeft BottomRight'

grid-area:TopLeft;

grid-area:TopRight;

grid-area:BottomLeft;

grid-area:BottomRight;


{Place-Items}
This is another one I can't explain in full here, so I'll link to this guide on all the parameters involved in this function. Keep in mind that not everything has been tested to work on RPF.


The way I use place-items is as a fun little life hack to vertically centre items. For example, if I have an image and a paragraph of text next to it, and I want the image to be aligned with the centre of the text box (and vice versa), I make a grid with a column for each and slap a place-items: center in there.


You can use it on a single div as well, but you'll have to add a
Code:
display: inline;
inside, otherwise it does weird things. Drag the corner of this box to resize it and see how the text stays in the middle!


Code:
display: grid; place-items: center; resize: vertical; overflow: auto;border:1px solid red;

display: inline;



[font size="4"]MISC[/CODE]


{Cursors}
You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...


BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.


Code:
cursor: crosshair; (I'm not listing all the types here, check the link)

cursor: url('https://i.imgur.com/kULEBy6.png'), auto;


{Resize (Dragbox)}
Resize allows the user to resize the div by dragging the corner! That's cool, right? Try it out!


Awesome!





Keep going!





Almost there!





Are you having fun yet?





What are you searching for?









[youtube=vDMwDT6BhhE]


I think this song is funny :)





















Ok, here's your Duane, you can stop now.






I'm serious.






:(


Code:
resize: none | both | horizontal | vertical;



[font size="5"]TIPS AND TRICKS[/CODE]


{New Site Changes}The new site is weird! Post width is not standardised! Your code might not look the same across different devices. Also, grids use ' instead of \"

{Attr vs Div Style}Div Style allows you to do far less than Attr, but everything in it will work on the standard mobile theme. Some functions (e.g. grids) won't work with Div Style, but will with Attr.

{Preview}The preview window is dumb and doesn't show div correctly, especially if you're using Attr. I recommend having a post in a test thread you can edit and use that as a sort of makeshift preview window.

{Spellings}Div, like all CSS these days, uses the American spellings of words like "Color" and "Center"- so, if you usually spell those words properly differently like I do, then make sure you put on your little American hat when you write your code.

{Inherit}You can set most of the parameters to inherit and it will take the value of whatever div it's inside! Very useful if you're lazy. You can also use it in some other BBCode (more on that later).

{Fallback Fonts}When changing the font, you can include multiple fonts in the list! If a viewer's device doesn't have the first font on the list, it will see if it has the second (and so on) and display that instead. A general rule of thumb is to always include the generic term for the font type you want to use at the end of font-family. For example, if you're using Times New Roman, include Serif at the end of your font-family define thing (font-family: times new roman, serif). That way, if the viewer's device doesn't have times new roman, it will still display a serif font and you can retain your aesthetic integrity.

{Quotation Marks}If your device defaults to quotation marks like this: ” instead of like this: ", that's no good. Div (and other BBCode) only works with ", so you might want to copy paste that if things are going wrong. Same goes for grids.
 
Last edited:

q is awesome and not gay
...

huge W for fans of mr normal

"massive truly"

Code:
TITLE VERSION

[style]

@import url('https://fonts.googleapis.com/css2?family=Megrim&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

[/style]



[div="background-color:white;padding:4px;margin:auto;color:#212121;font-size:14px;font-family:'Quicksand', sans-serif;"][div="background-image:linear-gradient(to bottom, rgba(175,171,168,1), rgba(115,35,49,1));padding:4px;height:100%;"][div="background-color:white"][div="background-image:url(https://i.imgur.com/CCKnG4A.png);background-size:cover;background-attachment:fixed"][div="padding:16px;"][div="height:30px;"][div="color:#732331;font-size:180%;font-family:'Megrim',sans-serif;text-align:left;display:inline;float:left;"][b]cool title[/b][div="display:inline;color:transparent"]...[/div][/div][div="background-image:url(https://i.imgur.com/Is0zbpL.png);background-position:center center;background-repeat:repeat-x;float: none;overflow: hidden;height:100%;"]⠀[/div][/div]

huge W for fans of mr normal

[div="opacity:50%;display:inline"][b]"massive truly"[/b][/div]

[/div][/div][/div][/div][/div]


Code:
NON-TITLE VERSION

[style]

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

[/style]



[div="background-color:white;padding:4px;margin:auto;color:#212121;font-size:14px;font-family:'Quicksand', sans-serif;"][div="background-image:linear-gradient(to bottom, rgba(175,171,168,1), rgba(115,35,49,1));padding:4px;height:100%;"][div="background-color:white"][div="background-image:url(https://i.imgur.com/CCKnG4A.png);background-size:cover;background-attachment:fixed"][div="padding:16px;"]huge W for fans of mr normal

[div="opacity:50%;display:inline"][b]"massive truly"[/b][/div]

[/div][/div][/div][/div][/div]
 
Last edited by a moderator:



Code:
[style]
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
[/style]

[button="
var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
"]click[/button][class="content"]test[/class]


test
 
Last edited:
THE EMBRACE
NocturnE
AND THE DANCE OF THE
GREAT UNDEAD
The reflection, warped and disfigured in the murk of the Thames, is London's parallel society; demons for whom even the dignity of death was denied. They lie, they hunt, they dance, they claw their way to power from night, leaving chaos and misery in their wake. The myth of the moonlit unstoppable; they are Vampires.

Kindred
- as if a name that elicits such hospitality could hide the vile nature beneath. The origins of such a curse is a well explored topic within vampiric society, and a social taboo in modern nights. Regardless, the reality of such a sorry state of being cannot be denied.

When a vampire seeks to sire a childe whether out of loneliness, the need of a pawn, or perhaps regret from an accidental over-feeding, they proceed with an act known as the Embrace. The first step is to drain their desired human of all blood, and as they lay near death to feed them vitae from within themselves. Since this is typically - but not always - done through feeding upon their prospect, the Embrace is often considered an intimate act. Some say aside from the Kiss - the act of feeding upon a mortal - the Embrace is the greatest euphoria they will experience in either life.

Over the next few nights, the fledgling vampire will undergo an often painful transformation as their body dies, doing away with unnecessary organs until nothing is left functional except the heart and stomach. Kindred are immortal, but without vitae they will soon succumb to their ever present hunger. From there, they either wither away or embrace their predator nature - a darkness within the soul of every Kindred always fighting to overcome them .

Once the childe has turned and quelled the beast within, it is their sire’s duty to introduce and educate them in the reality and etiquette of Kindred society.
T
HE
Covenant
UNION OF THE HIGHEST UNHOLY
There
is not merely one type of vampire in the world. In fact, there are many; far more than even vampires themselves might be aware of. There are, of course, some unifying traits. All vampires are immortal, faster and stronger than humans, have sharp and hollow fangs, must feed on human blood. They share the same basic weaknesses as well; sunlight, starvation, and a stake through the heart. Whilst these traits are universal, there are certain specialisations a vampire might display that are determined by their bloodline- their Clan. Clans often stick to themselves, looking out for only their own, but there have been some attempts to make peace.

The Covenant exists as union of the five most influential vampire groups in London: Réquiem, Saturnine, Reveur, Ecclesia, and Vermes. Proposed by Réquiem as an attempt to forge some sort of solidarity, the Covenant is bound by a thin pact of honour; they are to keep peace on an administrative level, without plunging moonlit London into all-out war. So far, aside from a few small-scale conflicts, the creation of the Covenant has proved a success, though many take issue with its rule.
Eloquence
knows no grave. These are the calling words of Clan Réquiem, the Kindred who represent the apex of vampiric class, wealth, and most importantly - beauty. If a detail doesn’t align with their perfect vision, they excise it - whether it be a blemish or an empire, it matters not. It is their gilded hand that maintains the dignity of Kindred high society, and their iron fist that dominates anyone who dares question their authority.

Of all the bloodlines, it is those of Réquiem who have found their place most comfortably in the mortal world. They’d claim to call themselves the founders of civilization, but to do so would bring into question the Covenant’s stance on the origin of vampires - a topic they avoid like the plague.

Flaunting their status and wealth is key to the identity of the Réquiem, whether that be to lesser bloodlines, mortals, or even fledgling Kindred within their ranks. Typically, new blood in the clan is pulled from the artistic, the industrious, and the wealthy - although they are known to make ghouls of anyone they find aesthetically pleasing, displaying them in their domain as one would a Monet. To be desired by the Réquiem is a terrible fate, no matter the end; either you live eternally under their tyranny, or die slowly and painfully under their monstrous hedonism.
GIFT:
Impossibly elegant, the Réquiem are able to charm others into doing their vile bidding.
BANE:
Their corrupt flesh abhors the purity of silver; any wound carved by the metal will remain permanent, unhealed.
ODDITY:
Reflections and photographs reveal what lies behind the glamour of the Réquiem: twisted, repulsive monsters.
OBSESSION:
Their fixation on beauty is all-consuming; their bodies will reject any blood that comes from a source they find unappealing.
The
Saturnines are perhaps the most hated and distrusted bloodline in Kindred society - and that’s just how they like it. This reputation does not come without reason however, as the history of Clan Saturnine is written with deceit and blasphemy. Their vampiric nature stems not from a shared bloodline, but instead from an act of diablerie during the late Renaissance period. A group of occultists sought eternal life from an Antediluvian - the ancient progenitor of Clan Reveur. However, once they had devoured them the Saturnines realized what they wrought.

They had achieved immortality, at the cost of their mortal lives - and by extension the ability to use magic. These blaspheming mutants hid away in their remote castles, pondering their unlives and in time turning to experimentation. Through a century of experimentation upon the living they realized that in moments of intense suffering, the vitae of humans become flooded with what they call “pneuma”. By consuming blood rich with pneuma, Saturnines gain control over a dark reflection of the power they once held.

While the powers of the infernals are no longer available due to their undead nature, Saturnines shape blood and death into new forms. They hold many secrets from even other members of their clan, and reveal what they are capable of only when necessary to appease more influential clans.
GIFT:
The magic they were able to preserve allows the Saturnine to craft and control necromantic constructs from bone.
BANE:
Holy symbols are poison to them; seeing them leaves them disoriented, and touching them will burn the skin.
ODDITY:
Due to the origin of Pneuma, it is impossible for a Saturnine to feed subtly; the experience is always agonising for the victim.
OBSESSION:
They display obsessive-compulsive tendencies: intense paranoia, and a compulsion to count whatever's before them.
Dreamers
they once called themselves. Now look upon the state of Clan Reveur, delusional at best - deranged at worst. This was not always their fate however, in another age they were a founding clan of the high vampiric society, using their gift of clairvoyance and prophecy to inspire and rule. The Reveur owe this gift to their dual progenitors, twin Antediluvians known together as Geminae - embraced by the same sire. The brother was gifted with knowledge of all that is past and present, while his sister could see all futures.

Their clan grew to great prominence through Europe - using their ability for prophecy to manipulate mortal and vampiric society alike to their whims. For centuries, they stood as the leading clan of the Triumvirate - until the arrival of the Cult of the Saturnine. Using infernal magic, they bound one of the Geminae - the brother, and consumed his soul in hopes of achieving eternal life.

This action devastated the clan, shattering the web of psychic knowledge shared between their brethren and leaving their minds broken. The death of her twin left the sister Geminae near her final death, yet even in torpor her mind still wanders - offering half truths and delusions to her childe. While now they still hold some power in the modern nights, many regard them in mocking pity - but the Reveur hear them and they smile for they know everything. In their ears are the whispers of their enemies' darkest secrets, the ones even they don’t understand.
GIFT:
Their minds connected, the Reveur are able to commune with themselves and see glimpses of prophecy.
BANE:
As they get hungrier, they are prone to bouts of narcolepsy, their bodies forcing them to dream more and more to preserve their energy.
ODDITY:
Madness, all-consuming madness; there is not one sane mind among the Reveur, by their very nature.
OBSESSION:
Few believe their prophecy- and that can sometimes include themselves. After all, what if this is yet another delusion?
Scorned
by the heavens, as all Kindred are, the stated drive of Clan Ecclesia is to repent and beg for its forgiveness; recognising their own curse, their own sin, and pushing it away. To be a vampire is to be a monster, and to be a monster is to be doomed, unless one can repress the madness that comes with such a state. As such, those with the Clan's blood tend not to embrace new humans, keeping their curse to themselves. Instead, their numbers come from fellow Kindred; lost souls cast out from other Clans, who found their way to salvation and are willing (or will be willing) to turn away from a life of sin and cruelty. Their doctrine is enforced by the Ordained with an iron fist, though many wish their rule should spread beyond the church walls.

Of all Clans, Ecclesia is the only one which can be argued to have a positive relationship with humans- at least, on the surface. Whilst members still have to feed, they're encouraged to treat humanity with respect. Their church is open to the public, both day and night, and sermons are given to all. Maintaining this public image of purity is of the utmost importance to Ecclesia, and they are willing to throw other Clans under the bus to achieve this end. Much of the congregation despises the Covenant, and there have been stirrings of a desire to leave and enact their own justice, free from the shackles of sin.

However, unbeknownst to the congregation, this piety is not spread equally across the Clan. The Ordained--those who carry the Ecclesian bloodline--are just as corrupt as those they preach against, using goodwill towards their peaceful indoctrinated to obfuscate their own misdeeds.
GIFT:
The Ordained possess sharp claws and wings capable of flight- retractable from their bodies, but ever-visible in their shadows.
BANE:
Proof of their false sainthood; holy water will melt through the Ordained like magma.
ODDITY:
Bound to the faith, they must return to holy ground in order to sleep.
OBSESSION:
A fixation on religion and moral justification, no matter how thin, consumes them. As such, they can never blaspheme.
While
many turn up their nose in disgust at the Vermes' preference for sewers and catacombs over ivory towers, Clan Vermes couldn’t care less. Of all the Kindred clans, you would certainly recognize a Vermes as a member of their clan - but that is only if you notice them in the first place. They are the unseen and in the shadows they find their purpose. Clan Vermes maintain their power and position through perfecting the art of espionage and subterfuge. These skills were born out of survival, as those embraced into the Vermes bloodline find themselves growing increasingly deformed as nights pass. Thus, moving through human society as a member of the Réquiem or Ecclesia might become increasingly difficult as a Vermes embrace their vampiric nature.

From even the earliest days of vampiric society, Clan Vermes were regarded as low-blooded and at times hunted by their more aristocratic brethren. Thus, they hid amongst the lower class of human society - masquerading as lepers and hiding in the dark corners of civilization. The catacombs of Rome brought them into mortal civilization, and it was hiding in these shadows that they began to watch and learn.

In the modern nights, Vermes use every tool of the modern world to gather information and maintain their concealment. They typically pull their childe from all manner of outcasts - fringe types, hackers, thieves, the homeless, and often embrace those whose vanity has made them cruel as a punishment.
GIFT:
Chameleon-like, they are able to hide their form within their surroundings.
BANE:
The Vermes have adapted so well to the dark, that any sort of bright light will burn and blind them.
ODDITY:
Their oddity is the most visible; their bodies are twisted and deformed by the embrace.
OBSESSION:
An overwhelming appetite for secrets and knowledge of the forbidden, redgardless of what they cost.
Punks,
malcontents, rabble-rousers, riff raff. Only some of the names thrown towards Clan Iratus - and each one worn with pride. Clan Iratus lead the Recreants, a loose coalition of outcast Kindred who - for reasons all their own, cannot live within the Covenant.

Since the age of antiquity, the Kindred known as Iratus have stood in defiance to organized vampire hierarchy. As the Triumvirate built Rome, Iratus formed the Visigoths and stood with Carthage to make themselves a major irritant until inevitably being scattered to the wind. And so, this cycle would repeat on and on. In more recent history, Iratus orchestrated the overthrow of the vampire dominated French aristocracy in the 18th century - in tandem with Vermes, while they’d prefer to keep their involvement in such matters covert.

Anyone looking for a place to go outside the Covenant who reflect their ideals of self-reliance, equality, and rejection of tyrants. Thus, they attract all manner of self proclaimed free thinkers and radicals from not only other bloodlines but mortal society as well. They pull their childe from a pool of fringe types, loners, and those with nowhere else to fit in.

While not officially part of the Covenant, they like to make an effort to irritate and “stir the shit” as they’d like to say. Without invitation, they plan to appear at the Soiree - and make quite the scene while they’re at it.
GIFT:
Their bodies can turn to smoke for a time, and quickly move across short distances.
BANE:
Banishing herbs, like garlic and wolfsbane, will repel an Iratus upon sensing it- and kill, if ingested.
ODDITY:
As the name implies, the Iratus are quick to anger; bloodlust sets in quickly and sharply, and their fuse is short even outside of that.
OBSESSION:
Danger, thrills, excitement; their boredom is like agony, and they'll do anything to keep it at bay.
Vile Summit
NIGHT OF THE ABYSSAL SOIRÉE
Once
every fifty years, the Covenant holds a formal meeting, the Summit, during which the heads of the relevant Clans gather together and discuss the state of things; politics, rules, conflicts, anything relevant to keeping their paper-thin peace. Perhaps to keep the rest of their members from scheming behind their backs, or perhaps because the Réquiem are incapable of escaping their desire for extravagance, the Summit is always held alongside a party; the Abyssal Soirée. It is a lavish affair, though that goes without saying. Music, dancing, blood, and a chance to socialise with other Kindred in a way that doesn't necessitate ripping their throats out. Though a relatively recent tradition, only on its third iteration, the Soirée has so far gone on without major incident.

This year, however, things seem to be different. The first sign that something was wrong, as usual, came from the maddened ramblings of the Reveur- but those could easily be dismissed by the other Clans as, well, the maddened ramblings of the Reveur. The second sign was the suspicious silence of the Iratus and the rest of the Recreants, who were acting suspiciously low-key in the lead-up. The the third, and most obvious sign, came when those very Recreants gatecrashed the Soirée- infiltrating the secret ballroom with the intention to party like the rest of their Kindred, sending a masked representative to the Summit whilst the rest of them enjoyed the festivities. Harmless, it seems.

Until someone ends up dead.

Whispers over music, rumours over laughter; tonight's Abyssal Soirée is cloaked in an air of uncertainty. Some say the Sword of Damocles has remained static for too long, that the tinderbox of the Covenant could be set ablaze by anything, anything at all. For now, however, they shall drink- and enjoy their undead peace whilst they can still fathom it.
 
Last edited:

test
two

WOAGH!
 
Last edited:
Code:
[style]@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

.CHARACTERVar{/*

BEFORE YOU POST: PLEASE REPLACE "CHARACTER" IN THE CLASS NAMES WITH THE NAME OF YOUR CHARACTER, OTHERWISE IT WILL BREAK EVERYONES CODE ON THE PAGE.  LOOK AT ME.  LOOK AT ME.  THIS IS IMPORTANT AND YOU NEED TO DO THIS.  FIND AND REPLACE IN GOOGLE DOCS.  PLEASE.

Anyway change fonts and colours in the section below; current setup is based on the nocturne writeup but you can like. change that to be whatever you want

*/--fonttitle: Cinzel Decorative,  serif;
--fonttitletwo: Cinzel, serif;
--fontmain: Cormorant, serif;
--backgroundimg: url(https://i.imgur.com/FPx8X11.png);
--backgroundcolor: #111111;
--imagemain: url(https://i.imgur.com/Srdt8Q6.png);
--text: white;
--accent: red;
--glow: rgba(255,0,0,1);
--padding:20px;}

.CHARACTERWrap{
font-family:var(--fontmain);
color:var(--text);
font-size:14px;
}

.CHARACTERWidth{
max-width:800px;
background-image: var(--backgroundimg);
background-size:50%;
height:500px;
margin:auto;}

@media screen and (max-width: 800px){
.CHARACTERWidth{
max-width:500px;
background-image: var(--backgroundimg);
background-size:50%;
height:auto;
margin:auto;}
}

.CHARACTERGrid{
display:grid;
grid-template-columns:40% 60%;
grid-template-rows:100%;
grid-template-areas:'LIST PROSE';
}

@media screen and (max-width: 800px){
.CHARACTERGrid{
display:grid;
grid-template-columns:100%;
grid-template-rows:500px auto;
grid-template-areas:'LIST' 'PROSE';
}
}

.CHARACTERList{
grid-area: LIST;
padding-left:40px;
padding-top:20px;
padding-bottom:20px;
height:100%;
width:100%;
}

@media screen and (max-width: 800px){
.CHARACTERList{
grid-area: LIST;
padding:20px;
height:100%;
width:100%;
}
}

.CHARACTERProse{
grid-area: PROSE;
height:500px;
width:100%;
overflow:auto;
scrollbar-color: transparent red;
scrollbar-width: thin;
}

.CHARACTERProse::-webkit-scrollbar {
width: 1px;
}

.CHARACTERProse::-webkit-scrollbar-track {
background-color:transparent;
}

.CHARACTERProse::-webkit-scrollbar-thumb {
background-color:var(--accent);
width:4px;
border-right:3px solid rgba(0, 0, 0, 0);
}

@media screen and (max-width: 800px){
.CHARACTERProse{
grid-area: PROSE;
height:100%;
width:100%;
}
}

.CHARACTERBody{
padding-top:20px;
padding-bottom:20px;
padding-left:40px;
padding-right:40px;
text-align:justify;
}

@media screen and (max-width: 800px){
.CHARACTERBody{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
padding-top:0px;
text-align:justify;
}
}

.CHARACTERImage{
border:1px solid var(--accent);
height:250px;
width:200px;
background-image:var(--imagemain);
background-size:cover;
background-position:center center;
margin:auto;
}

.CHARACTERTitle{
font-family:var(--fonttitle);
font-size:30px;
text-shadow:0px 0px 30px var(--glow), 0px 0px 15px var(--glow);
text-align:center;
margin:auto;
}

.CHARACTERSubtitle{
font-size:12px;
margin:auto;
text-align:center;
}

.CHARACTERAccentText{
color:var(--accent);
font-size:17px;
display:inline;
}
[/style]

[class="CHARACTERVar"][class="CHARACTERWrap"][class="CHARACTERWidth"][class="CHARACTERGrid"][class="CHARACTERList"][class="CHARACTERTitle"]Count Jokeula[/class]
[class="CHARACTERSubtitle"]HE'S THE JOKER BABY[/class]

[class="CHARACTERImage"][/class]

[class="CHARACTERAccentText"]Name:[/class] Joker, The
[class="CHARACTERAccentText"]Current Age:[/class] 420
[class="CHARACTERAccentText"]Age at Embrace:[/class] 69
[class="CHARACTERAccentText"]Clan:[/class] Reveur[/class][class="CHARACTERProse"][class="CHARACTERBody"][class="CHARACTERAccentText"]Lorem[/class] ipsum dolor sit amet, consectetur adipiscing elit. Proin elit turpis, bibendum ut nibh eu, ullamcorper tincidunt mi. Pellentesque porttitor magna tincidunt dapibus porttitor. Quisque maximus vehicula vehicula. Morbi ultrices arcu sit amet quam fermentum pharetra. Aenean eu eros condimentum, commodo turpis vitae, dignissim magna. Ut interdum lacinia augue. Phasellus eget euismod mi. Donec faucibus vitae leo at imperdiet. Nulla velit tellus, lobortis nec fringilla pulvinar, semper nec justo. Duis ultricies cursus nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ornare, neque quis pulvinar congue, turpis risus cursus tortor, sed luctus orci purus sed nulla. Donec aliquet viverra magna, sed molestie sem ornare id.

Etiam vulputate id massa sit amet cursus. Phasellus vestibulum nibh augue, vitae tempus massa ultrices non. Nulla tempor finibus urna, quis lacinia quam blandit vel. Suspendisse vel accumsan velit, vel venenatis justo. Donec sodales semper turpis non tincidunt. Pellentesque porta eleifend sem fermentum ultricies. In sed arcu ipsum. Phasellus fermentum laoreet sapien, laoreet auctor turpis dapibus eget. Duis vitae justo risus.

Nam cursus leo lobortis, finibus leo at, egestas quam. Curabitur mattis bibendum egestas. Ut sed mauris lectus. Donec quam ex, sollicitudin a faucibus eu, auctor vel dui. Sed blandit erat et nibh condimentum eleifend. Nam gravida ex ut odio mattis semper. Suspendisse eros tellus, maximus sed nisi a, mollis aliquet purus. Maecenas mollis, ante ut dignissim gravida, mauris tortor aliquet nisi, sed egestas quam risus at diam. Nulla eget venenatis magna, eget venenatis velit. Mauris condimentum placerat sem id dictum. Integer purus mauris, sagittis a leo vel, pulvinar dapibus mi. Vivamus sagittis ex nec purus tempus, vel ultricies mauris congue. Cras mollis justo in elit congue porta a quis velit. Phasellus risus libero, accumsan in venenatis ac, blandit id ligula. Etiam neque mi, iaculis nec varius sit amet, varius sit amet ipsum. Morbi iaculis fermentum ultrices.

Aenean lacinia, arcu eu dictum molestie, nibh urna molestie nulla, non bibendum tortor elit efficitur lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut aliquam orci ac neque ultricies, eget laoreet enim lacinia. Quisque non sodales ligula. Proin mattis tincidunt iaculis. Ut porttitor sem vel augue euismod aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum scelerisque dignissim sem, in imperdiet augue tincidunt eget. Sed commodo nulla tempor sapien ornare rutrum maximus sed nisi. Mauris eu lacus eget mi molestie finibus. Curabitur augue diam, consequat vitae fringilla quis, accumsan vel odio. Cras gravida augue at suscipit tristique.

Aenean ultrices ligula neque, mattis pellentesque nisi sollicitudin sit amet. Duis vehicula eros sed bibendum placerat. Etiam eget augue iaculis, pellentesque nisi in, maximus nisi. Curabitur maximus lorem vel nisl gravida porttitor. Fusce nec pellentesque augue, in pretium ligula. Etiam ac tellus lectus. Donec facilisis tincidunt posuere. Phasellus ornare dolor eget ipsum dapibus, at faucibus tortor convallis. Integer id tellus et tortor blandit tristique vitae non nunc. Vivamus lobortis velit mauris, ut laoreet ipsum blandit vel. Aenean mattis ex pretium lorem hendrerit, eu pharetra est tempus. Mauris ipsum diam, auctor at enim quis, suscipit hendrerit dolor.
[/class][/class][/class][/class][/class][/class]
 
Last edited:
I hate bumping my thread every time I'm working on something new. if you're reading this you get NOTHING you LOSE I need to shuffle posts around so I can have post be my edit window again
 

The Surrogate
Dirge of the Musekiller; Hatred Cast in Porcelain


Name:
Beatrice Eva Carlisle
Current Age:
129
Age at Embrace:
24
Clan:
Requiem
Softer,
I'd tell you, but never how much. You had this awful habit of pressing too hard when you were upset; hands like great concrete slabs, rail-spike fingers carving the ivory, as if I had lain myself atop the keys like a carcass before a butcher. You were a master of many things, but restraint was never of them. Now, emotion, I didn't even have to suggest, not even once- I could hear your cries in every note, every rest, the tension I felt in your shoulders released- ah, that sledgehammer poise worked wonderfully, when it was called for. Though, sometimes I would look at you from across the grand piano, eyes locked by silver chains, and I'd search for hours for the same cries that I could hear... leaving me ever unsatisfied. They were there, of course- but they did not match my own, not quite. Not yet.

Start over, I'd tell you, and the next time you'd play louder- defiant, almost, in your intensity. Were you not bound to that stool, I believe you would've thrown it at me. It's a pity I compose with subtlety. I'd ask, over and over, where it's gone- what happened to that talented young pianist I found in the practice room beneath the hall? Upon that stage? Hiding in the back of that party? And every time, every one, you'd tell me I already knew the answer. Of course I do. That wasn't the point of the question. Start over, again- softer, this time- actually pay attention to what I wrote down, please, it doesn't have to be difficult, you're only making it harder for yourself. Unlike us, you are not cursed to do this forever, so start over. Start over. Start over.

I'm sorry, I'd tell you, when you were just on the edge of sleep, unaware that I knew you could hear me.

Be thankful, I'd tell you, when you complained of my porcelain hand against your neck, so cold it made your arms seize. Be thankful your hands are warm, unmarred, mobile and attached to your arms- unlike mine. It's almost grotesque, how much I enjoy it when you ask me what happened. Each time, I recounted the tale in ever-greater detail, shivering at every word of what was done- something I don't have to hide from you, unlike the rest. Vengeance, I told you, was what this clan was built on- that's why I was punished so severely. They were scared I wouldn't stop at him, so they took everything from me- everything. The Scarred Right Hand took both of mine. She took my life. I would stand there, in my misery, and I'd watch for the pity to show in your face- and the disgust which followed. That's why I enjoyed it. I was like a child picking at a scab, showing the resultant wound to her peers and pretending it was fresh. Perhaps you could fix me, it whispered. Perhaps, if you play well enough, you could make me whole again. Perhaps, then, I'd let you go.

They hate it, I'd tell you- their compliments are as thin as my patience, they're just playing nice, as is the way of the Requiem. I was lying. Did you know I was lying? They were obsessed, just as I was. It never sounded right when I played my own work- but through your hands? Through your hands, it sings. I don't tell you that you're the reason they keep me around, despite my past disgrace. I tell you that the beauty they cling to is that of my prosthetics, ornate and delicate, not my surrogate hands. Not you. My work, finally recognised, but through someone else. Someone undeserving.

Louder, I'd tell you. Faster. Where's that energy gone? That passion? We've been working on this for so long- the performance is tomorrow, we can't be playing like this to a crowd like that! I used to have to threaten you, to get you to play this quiet- where is that now? I knew you were tired. I knew how much sleep a human needs, but I never once cared- you knew that. You could sleep before the performance, if we got this right- if not, you could sleep when you were dead. Dead- and grateful for it!

I know, I'd tell you, when you professed your hatred for me. Sometimes, it took a while to coax out. Other times, you'd tell me immediately, as soon as I even looked at you. In truth, it didn't matter how long it took for you to muster the courage to express yourself through words- I've been observing it in your hands since the very beginning. It helps, you know. It helps the way we play, the way our songs carry to an audience. You can hear it too, can't you? How much progress we've made? How much better we sound? We're almost there, I can taste it- almost to my standards. I told you to keep that hatred, to never let it go, but I didn't need to. You'd keep it as safe as I kept mine.

I love you, I'd tell you, because it was the last thing you'd ever want to hear. You're performing tomorrow- remember what I said. I love you. I finally love you.

I'm sorry, I'd tell you, once the curtain fell and the cheers died down. We played so well, up there- I've long since been redeemed in the eyes of my Kindred, but this made me adored. I think you knew what was coming. Most of you never tried to fight it, but some of you did- kicking and screaming, hoping your gracelessness would be enough to disgust me out of what I had to do. My sole muse, I'd call you- this whole time, I'd call you. Perhaps I was under the illusion that you'd be the last, the one I'd choose to keep forever. After a while, that fantasy wore away. I can't keep you around for long- not without going mad. Were you to become a Requiem, I'd be rendered useless- obsolete. You can never take my place. We'd go to the practice room, and I'd force you to play- one last piece, one last time, anything you wanted. To be desired by a Requiem, I'd tell you, means naught but misery- I know that better than anyone.

So play, my dear- go down singing, go down beautiful. Please, don't cry. This isn't a punishment- please, don't think of this as a punishment. I'm giving you the reward you've been begging for this whole time.

I'm sparing you the encore.
 
Last edited:
BIG GAY TITLE.
text here she speaks in italics i dont need to demo that
 
Last edited:
MAIN EVENT
This is the same.
 
Last edited:
Code:
[comment]


【STYLE】


[/comment]
[style]
@import url('https://fonts.googleapis.com/css2?family=Megrim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');

.REVERSEVar{/*

BEFORE YOU POST: Please replace "REVERSE" in the class names with something else- I recommend using the name of your character.  Multiple posts on the same page with the same class names WILL cause things to stop working, even if it worked the first time you posted it.

Change fonts and colours in the section below.  If you're using googlefonts and want to change the fonts, then you'll need to change the font names in the @import section above as well.  Please don't remove the "code by" thing <3

*/--fonttitle: Megrim, sans-serif;
--fontmain: Dosis, sans-serif;
--backgroundcolor: #040209;
--imagemain: url(https://i.imgur.com/QWB5lfD.jpg);
--text: #D9D1DD;
--accent: #43A2FE;
--padding:20px;/*

You don't have to worry about changing anything after this point if you want to retain the original design. Display code is under "DISPLAY"- change the text fields between the [class] tags to say whatever you want. Let me know if you need help with anything- I'm most active on the Discord, but you can shoot me a PM here as well!*/}

.REVERSEWrap{
font-family:var(--fontmain);
color:var(--text);
font-size:14px;
}

.REVERSEWidth{
max-width:800px;
background-color:var(--backgroundcolor);
background-size:50%;
height:500px;
margin:auto;}

@media screen and (max-width: 800px){
.REVERSEWidth{
max-width:500px;
background-color:var(--backgroundcolor);
background-size:50%;
height:auto;
margin:auto;}
}

.REVERSEGrid{
display:grid;
grid-template-columns:40% 60%;
grid-template-rows:100%;
grid-template-areas:'LIST PROSE';
}

@media screen and (max-width: 800px){
.REVERSEGrid{
display:grid;
grid-template-columns:100%;
grid-template-rows:500px auto;
grid-template-areas:'LIST' 'PROSE';
}
}

.REVERSEList{
grid-area: LIST;
padding-left:40px;
padding-top:20px;
padding-bottom:20px;
height:100%;
width:100%;
}

@media screen and (max-width: 800px){
.REVERSEList{
grid-area: LIST;
padding:20px;
height:100%;
width:100%;
}
}

.REVERSEProse{
grid-area: PROSE;
height:500px;
width:100%;
overflow:auto;
scrollbar-color: var(--accent) transparent;
scrollbar-width: thin;
}

.REVERSEProse::-webkit-scrollbar {
width: 1px;
}

.REVERSEProse::-webkit-scrollbar-track {
background-color:transparent;
}

.REVERSEProse::-webkit-scrollbar-thumb {
background-color:var(--accent);
width:4px;
border-right:3px solid rgba(0, 0, 0, 0);
}

@media screen and (max-width: 800px){
.REVERSEProse{
grid-area: PROSE;
height:100%;
width:100%;
}
}

.REVERSEBody{
padding-top:20px;
padding-bottom:20px;
padding-left:40px;
padding-right:40px;
text-align:justify;
}

@media screen and (max-width: 800px){
.REVERSEBody{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
padding-top:0px;
text-align:justify;
}
}

.REVERSEImage{
height:250px;
width:200px;
background-image:var(--imagemain);
background-size:cover;
background-position:center center;
margin:auto;
}

.REVERSETitle{
font-family:var(--fonttitle);
font-size:30px;
text-align:center;
margin:auto;
color:var(--accent);
}

.REVERSESubtitle{
font-size:12px;
margin:auto;
text-align:center;
}

.REVERSEAccentText{
color:var(--accent);
font-size:17px;
display:inline;
}
[/style]
[comment]


【DISPLAY】


[/comment]
[class="REVERSEVar"][class="REVERSEWrap"][class="REVERSEWidth"][class="REVERSEGrid"][class="REVERSEList"][class="REVERSETitle"]-Reverse-[/class]
[class="REVERSESubtitle"]SUBTITLE[/class]

[class="REVERSEImage"][/class]

[class="REVERSEAccentText"]FIELD 1:[/class] Text
[class="REVERSEAccentText"]FIELD 2:[/class] Text
[class="REVERSEAccentText"]FIELD 3:[/class] Text
[class="REVERSEAccentText"]FIELD 4:[/class] Text[/class][class="REVERSEProse"][class="REVERSEBody"][class="REVERSEAccentText"]Lorem[/class] ipsum dolor sit amet, consectetur adipiscing elit. Proin elit turpis, bibendum ut nibh eu, ullamcorper tincidunt mi. Pellentesque porttitor magna tincidunt dapibus porttitor. Quisque maximus vehicula vehicula. Morbi ultrices arcu sit amet quam fermentum pharetra. Aenean eu eros condimentum, commodo turpis vitae, dignissim magna. Ut interdum lacinia augue. Phasellus eget euismod mi. Donec faucibus vitae leo at imperdiet. Nulla velit tellus, lobortis nec fringilla pulvinar, semper nec justo. Duis ultricies cursus nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ornare, neque quis pulvinar congue, turpis risus cursus tortor, sed luctus orci purus sed nulla. Donec aliquet viverra magna, sed molestie sem ornare id.

Etiam vulputate id massa sit amet cursus. Phasellus vestibulum nibh augue, vitae tempus massa ultrices non. Nulla tempor finibus urna, quis lacinia quam blandit vel. Suspendisse vel accumsan velit, vel venenatis justo. Donec sodales semper turpis non tincidunt. Pellentesque porta eleifend sem fermentum ultricies. In sed arcu ipsum. Phasellus fermentum laoreet sapien, laoreet auctor turpis dapibus eget. Duis vitae justo risus.

Nam cursus leo lobortis, finibus leo at, egestas quam. Curabitur mattis bibendum egestas. Ut sed mauris lectus. Donec quam ex, sollicitudin a faucibus eu, auctor vel dui. Sed blandit erat et nibh condimentum eleifend. Nam gravida ex ut odio mattis semper. Suspendisse eros tellus, maximus sed nisi a, mollis aliquet purus. Maecenas mollis, ante ut dignissim gravida, mauris tortor aliquet nisi, sed egestas quam risus at diam. Nulla eget venenatis magna, eget venenatis velit. Mauris condimentum placerat sem id dictum. Integer purus mauris, sagittis a leo vel, pulvinar dapibus mi. Vivamus sagittis ex nec purus tempus, vel ultricies mauris congue. Cras mollis justo in elit congue porta a quis velit. Phasellus risus libero, accumsan in venenatis ac, blandit id ligula. Etiam neque mi, iaculis nec varius sit amet, varius sit amet ipsum. Morbi iaculis fermentum ultrices.

Aenean lacinia, arcu eu dictum molestie, nibh urna molestie nulla, non bibendum tortor elit efficitur lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut aliquam orci ac neque ultricies, eget laoreet enim lacinia. Quisque non sodales ligula. Proin mattis tincidunt iaculis. Ut porttitor sem vel augue euismod aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum scelerisque dignissim sem, in imperdiet augue tincidunt eget. Sed commodo nulla tempor sapien ornare rutrum maximus sed nisi. Mauris eu lacus eget mi molestie finibus. Curabitur augue diam, consequat vitae fringilla quis, accumsan vel odio. Cras gravida augue at suscipit tristique.

Aenean ultrices ligula neque, mattis pellentesque nisi sollicitudin sit amet. Duis vehicula eros sed bibendum placerat. Etiam eget augue iaculis, pellentesque nisi in, maximus nisi. Curabitur maximus lorem vel nisl gravida porttitor. Fusce nec pellentesque augue, in pretium ligula. Etiam ac tellus lectus. Donec facilisis tincidunt posuere. Phasellus ornare dolor eget ipsum dapibus, at faucibus tortor convallis. Integer id tellus et tortor blandit tristique vitae non nunc. Vivamus lobortis velit mauris, ut laoreet ipsum blandit vel. Aenean mattis ex pretium lorem hendrerit, eu pharetra est tempus. Mauris ipsum diam, auctor at enim quis, suscipit hendrerit dolor.
[/class][/class][/class][/class][/class][/class]
[div="text-align:center;font-size:75%;"]Code by [url=https://rp-forum.net/members/reyn.6/]Reyn[/url][/div]
[div="text-align:center;font-size:75%;"]Art source: WACCA Reverse[/div]
 
Last edited:



ONE
MEAT
Vanitypost.

"Speech in red."
BALL
This is the same.
 
Last edited:


THIS GUY
⠀SINGS
WEIRD

⠀⠀⠀SOMETIMES
THIS GUY
⠀SINGS
WEIRD

⠀⠀⠀SOMETIMES
THIS GUY
⠀SINGS
WEIRD

⠀⠀⠀SOMETIMES
 
Last edited:
Back
Top