Hi all, I decided to share a pet profile I made. It makes an effect similar to those aesthetic collages and clicking on each one brings up a different section. You can see a version that I'm customising here:

You're welcome to change it however you want, just make sure to credit me. The credit doesn't have to be where I've placed it as long as it's somewhere.

Here's the code:

SPOILER (click to toggle)

YOUR TEXT HERE

code by kimokawaii

YOUR TEXT HERE

YOUR TEXT HERE

YOUR TEXT HERE

YOUR TEXT HERE

<style> , , -ban, -ban-main, -lrc, -rrc, , -right, , , , h2, a, , .pet_age_info_date, .pet_wco_info_date, , , {display: none;} , , body, , , {background-color: transparent;} .field, {visibility: hidden;} .field:target, :target {visibility: visible;} { position: absolute; left: 50px; } { position: absolute; overflow: auto; left: 70px; top: 300px; } { position: absolute; overflow: none; } .field { background-color: white; width: 800px; height: auto; position: absolute; margin-left: 50px; margin-right: 50px; margin-top: 50px; margin-bottom: 50px; padding-left: 10px; padding-top: 10px; padding-bottom: 2px; } { background-color: white; position: absolute; top: 100px; margin-left: 50px; width: 800px; height: auto; padding-left: 10px; padding-top: 10px; padding-bottom: 2px; z-index: 2; } </style>

I tried to keep it simple so people can change it up more easily.

How to use:

• Replace "YOUR IMAGE HERE" with the direct link to each image you want. Do the same with "YOUR TEXT HERE".

• I used images that are 450 px wide and 300 px tall. If you want to use images with a different size:

You can also automatically resize images using code, but I personally don't because I like the control of resizing/cropping images myself.

• If you want fewer images:

SPOILER (click to toggle)

At the top, where it says:

Remove this last part:

And you'll get 4 images. The more rows you remove (the bits between tr and /tr), the fewer rows you'll have. Don't forget to change some other image's link to "" to get your pet's treasure to display.

• Adding images:

SPOILER (click to toggle)

Here:

Add:

Before where it says "/tbody".

Then, in the section where you have the different fields with your own text, add new ones to match the new number, like this:

YOUR TEXT HERE

Then, replace "FIELD HERE" in the image links with the new field's ID. For example, and so on. Don't forget to include your pet's treasure ("#pet_treasure") somewhere or move it accordingly. :)

I think that just about covers it, let me know if you've got any questions or anything.

This layout is absolutely perfect for something I'm trying to do with one of my pets; his profile is totally focused on the story I'm writing for him, and it's long and needed to be broken up for ease-of-access and aesthetics. I'll be able to use the images as chapter art!

Thank you so much for making it available!

Hi ! I love this profile, and I've been playing around with it on

I wouldn't normally post seems a bit rude to swoop in on someone else's thread but I decided to see when was last on and on their profile they said they quit and sounds like a permanent thing probably not going to reply so I'll help you out again

So the first issue that is happening is that the href is missing # so it looks like this: "" but should be this: ""

awesome thanks so much!! it works now! I did kind of wonder if ':friends' was causing the issue, since 'target' was used for the other one and doesn't have anything to do with the treasure chest... but also I didn't know if it would cause problems to have them redirecting to the same class. That's basically what's happening when you do that, right? Redirecting?

If I understand your question correctly the following hopefully clears up the confusion

So what :target does is style the target element if there is one, another way to think of this is like a state, every element with an id can have that state, so when you use the selector ":target" it'll only style the element when it is the target element and no other element and similar with other selectors.

So what makes an element a target element? Well simply put when there is a target element it appears at the end of the url "". Now this target gets added/changed to the url when a link is clicked where href is . So for example on your profile when the image/link for is clicked the url is redirected/changed to "https://subeta.net/pets/Nrogara/Phosphore#pet_friends" now is the target element and the styling in ":target" will take effect

ahhh I think that makes sense haha I'll have to play around with it in some other codes. Thanks again!