Character Name

this is your friendly reminder that the margin-left: 30px is here to help you, not hurt you! don't delete it unless you absolutely hate the idea of having this little indent here. I mean it might not look nice to you, idk

Subheader

now you can apply the sub-head class to anything to make it a subheader. make sure it's a CLASS though, not a STYLE

you can see the difference between a class and a style right here. the margin-left: 30px is a STYLE, not a CLASS

Subheader 2

I guess if you're really adventurous you could add both the sub-head CLASS and margin-left: 30px STYLE to the same paragraph (p) element, but it would just make a bold and indented bit of text

editing the info

Okay we're going line by line here
the info box on the right has a label and content. so you have "name" in bold, and you put your name next to it

if you want to add more info just copy and paste that whole line into another line, and you can change whatever text in there you want. you can also remove whatever lines you want, I couldn't care less

if you want to include multiple bits of content under one label, just us the "br" tag. it adds a break, which works well enough in this

"but Kaydence, my favorite sister, what about that horizontal line?!" I hear you asking. Well, you fool, that's just the "hr" tag! I have a little line in there (it's probably marked with a comment) already, so you can just copy and paste that anywhere in the info box

editing the image

if I do my comments right, there's probably a div marked with "main character image" or something like that

after that line you'll see "background:url(image) center" except the word "image" is just going to be an image url. IF for some reason you don't like the beautiful picture I chose for you, you can just replace the url with another url KEEPING IT IN THE PARENTHESIS. I SWEAR TO GOD IF YOU DON'T KEEP IT IN THE PARENTHESIS-

and how do you get an image url? well, there are two ways

METHOD THE FIRST: you right click an image -> "copy image address" -> paste it here.
the problem with this is that if the image you copyed the address from is deleted, so is the image here
BUT if you were to... say.... make your own private discord server to upload photos into, then grab the address from the photos there and never delete them, then you'll probably be fine

METHOD THE SECOND: you put your image in the "images" folder on your website directory, then call that in the image url
for example, if you wanted to use the water image here, you would put "images/water.png" in the url parenthesis
the drawback of this method is it takes up website space, which you have a limited amount of. I mean, not like a SUPER limited amount of, you probably have enough space to do this method with, but still