How to list FOS on your webpage? (ideas)

[EdgyRabbid]

Hello!

I am in the middle of a website revamp, and my next attack is on my FO list page.

https://edgyrabbid.neocities.org/Selfship.HTML

Here is the page ATM. I haven't edited it since I created it. So its just plain HTML rn..

so its time to make it better with some CSS!

I have a couple ideas:

- Maybe a sort of friend list? Like I'm not sure what website/console I would take inspo from. Maybe the Wii u?
- A sort of magazine formate. Like theres a cover, and inside is a list of my FOS.
- Sorta inline with the other idea, maybe a scrap book sorta thing?

These are just my ideas, but what do you guys think fits my vibe the most?

You are also free to take inspo from me!!!

[swamptrogg]

taking inspiration from how a lot of carrd pages are set up, how about a table? Like this:

Code

╔═════════╦═════════╦═════════╗
║ [photo] ║ [photo] ║ [photo] ║
╠═════════╬═════════╬═════════╣
║  Name   ║  Name   ║  Name   ║
╠═════════╬═════════╬═════════╣
║  extra  ║  extra  ║  extra  ║
╠═════════╬═════════╬═════════╣
║ [photo] ║ [photo] ║ [photo] ║
╠═════════╬═════════╬═════════╣
║  Name   ║  Name   ║  Name   ║
╠═════════╬═════════╬═════════╣
║  extra  ║  extra  ║  extra  ║
╚═════════╩═════════╩═════════╝

The additional row for info could be for the series they're from, a brief description, type of relationship, ect. Tables are also fun to style imo I think if you wanted to go the scrapbook aesthetic this would probably be the easiest- you could style the photos like polaroids and put "stickers" inside the table, or on top using absolute positioning. This would also probably be the way you'd want to style the friends list entry, maybe like this:

Code

╔═══════════════╦═════════════╗
║               ║    Name     ║
║               ╠═════════════╣
║   [photo]     ║   Status    ║
║               ╠═════════════╣
║               ║   extra     ║
╚═══════════════╩═════════════╝

To get the photo aligned like that, you'd use rowspan="(rows in your table)"

[EdgyRabbid]

Code

╔═══════════════╦═════════════╗
║               ║    Name     ║
║               ╠═════════════╣
║   [photo]     ║   Status    ║
║               ╠═════════════╣
║               ║   extra     ║
╚═══════════════╩═════════════╝

To get the photo aligned like that, you'd use rowspan="(rows in your table)"

I ADORE this idea, better than the one I had in mind. Though, wouldn't it be more logical to make with with gird flex? since you don't have to reprogram the thing over and over? Also, do you have any CSS scrap-booking resources I can use?

[swamptrogg]

I wasn't sure of your level of familiarity with flexbox elements, but you're right that a flex-grid would be best, yeah!

As far as resources, I don't have anything saved, but I may be able to find something. When you say "CSS scrap-booking resources," are you looking for layout guides, ways to style a pre-existing layout, assets for your layout, or all of the above?