So, I want to create a character page. In the passage, I want to put a “box” for each character, containing a small picture of them + a short description next to the picture and a relationship bar at the bottom of the box. The boxes would apper in two, side by side. Also, they would first appear blank and only show the box when the player meet the character.
…But I have no idea how to do this. Help? =( I attached a drawing (that I made using my finger on the cellphone, dont judge me hahaha) of what I want.
If possible, can you also tell me the best way to make a rectangular menu in the top of the passage, just for this character page. I wanted to put links in it, to separate main characters, secondary ones and romance options.
This just takes a combination of HTML and CSS. Just put the character information within a <span> element with a class name, and then use that class name in your CSS (which goes in your Stylesheet section) to style all of the spans to look how you want. You can <<print>> out each of those <span>s within a <<for>> loop that goes through each of your characters, which should have their information within an array or similar object. If you style the width of those <span>s then they should automatically organize to fit the width of the page, so it should still look fine on mobile.
You can use the same trick for any other groups of elements on your page, such as the header you’re looking for. Then it’s just a matter of setting up the CSS to make it look the way you want, such as setting the boarders using the CSS border property.
I’d recommend familiarizing yourself with some of the basics of HTML elements and CSS, the latter of which affects how the former looks.
Unfortunately, there isn’t a simple way to explain how to do this, since there are tons of different ways it could be done and is very dependent on your code.
Like I said, you’ll need to teach yourself some HTML and CSS to do this. I’d recommend taking a look at the source of any webpages which do something like what you’re trying to do, since you can use that as an example of how to do what you want.
