abyss ΘΔ

Aight sick, I already have vsc on my machine and know some basic html and css from my college courses. Coding crimes will be underway!

So, what do you think?

I made this using prechoster, where you can create your posts with regular css before uploading them. If you want to customize it more easily, go to prechoster, click on load and then upload this file.

Or, if you don't want to download a random file

Open prechoster, then open the "style inlining" template (on the left bar) and then copy this into the HTML section:

<div id="container">
  <img id="char" src="https://i.imgur.com/xYmxIus.png">
  <div class="textbox">
    <h1>Character's name</h1>
    <p>Fugiat aut veniam recusandae ex animi amet delectus blanditiis. Ea quibusdam placeat ipsum eius rerum aliquam sit. </p>
  </div>
</div>

And this on the CSS section:

* {
  padding: 0;
  margin: 0;
}

#container {
  display:flex;
  flex-direction: column-reverse;
  position: relative;
  min-height: 300px;
}

#char {
  width: 50%; /* this value controls the character size*/
  position: absolute;
  right: 0;
  bottom: 0;
}

.textbox {
  padding: 15px;
  background-image: linear-gradient(rgb(207, 207, 207) 0%, rgb(238, 238, 238) 69%);
  border: 4px solid rgb(182, 182, 182);
  border-radius: 5px;
}

p, h1 {
  padding-right: 50%; /*this value controls the text empty space*/
  text-align: justify; 
  font-size: 0.9rem; /*Use rem as font-size unit for accessibility!!! 1rem = ~16px*/
  line-height: 1.25rem; /*Alter this value to make text more or less vertically compact*/
  font-family: "courier-std", courier, monospace;
  font-weight: bold;
  color: rgb(255, 0, 62);
}

h1 {
  font-size: 1.5rem
}

Once you're done editing, click on "copy to clipboard" on the preview's bottom and copy the code into your chost.

Or you can just copy this code directly into cohost and edit it directly:

<div id="container" style="padding:0;margin:0;display:flex;flex-direction:column-reverse;position:relative;min-height:300px"><!--ps=2-->
  <img id="char" src="https://i.imgur.com/xYmxIus.png" style="padding:0;margin:0;width:50%;position:absolute;right:0;bottom:0">
  <div style="margin:0;padding:15px;background-image:linear-gradient(rgb(207,207,207) 0%,rgb(238,238,238) 69%);border:4px solid rgb(182,182,182);border-radius:5px">
    <h1 style="padding:0;margin:0;padding-right:50%;text-align:justify;line-height:1.25rem;font-family:&quot;courier-std&quot;,courier,monospace;font-weight:bold;color:rgb(255,0,62);font-size:1.5rem">Character's name</h1>
    <p style="padding:0;margin:0;padding-right:50%;text-align:justify;font-size:0.9rem;line-height:1.25rem;font-family:&quot;courier-std&quot;,courier,monospace;font-weight:bold;color:rgb(255,0,62)">Fugiat aut veniam recusandae ex animi amet delectus blanditiis. Ea quibusdam placeat ipsum eius rerum aliquam sit. </p>
  </div>
</div>

Let me know if you want to make some more complex stuff :D
I really don't mind helping

AAAAAAA THANK YOU