All solutions

The positioning on a lot of the images on this page were tricky. Did my best to have them positioned correctly for the 1440 resolution, but the method used isn't too friendly for responsiveness. Lots of learning done with grid and how to place elements. Any suggestions on how to position these better and in a more responsive way?

Learned how to use astro as well, that was interesting and added some overhead to the challenge. Came up against a few framework quirks like adding multiline text and that css is only scoped automatically to the component when used within the style tag. Putting the styles in a separate file doesn't work unfortunately. Ran into some more issues getting all the images to show up on Github pages but eventually got it all working.

Some parts felt a bit hacky and inconsistent across the page when creating the gutter on the sides of the page. Things would have been solved easier with an extra div but was trying to solve things using only meaningful, semantic tags. Any suggestions/tips for doing this?

I'm not entirely happy with how the creations grid changes when you get down to just 2 columns when resizing. This could likely be optimized with more media query breakpoints however. Any other way to make the layout of these more seamless?

How's the accessibility? I tried to wrap everything into semantic components for the creations grid but feel like it might be a bit overboard. Is there a more optimal solution?

Most parts of the challenge worked out well. Wondering about the accessibility though. Did I do enough?

The font has a big white space underneath and changing line-height property seems to have no effect for centering the text. Could do a hack with padding, but it's inconsistent depending on the number of lines of text. Any tips for a better solution?

Used vanilla JS to add/remove elements and directly manipulate the DOM as I wanted to practice/better understand that. For a real project would likely have used a framework like Astro and just conditionally rendered content. Another approach would be to create a separate card for the thank-you state, and swapped 'display: none' between it and the initial state card. Seems cleaner in one sense to keep the page content together in the HTML and handle just the business logic in the Javascript. What would be the recommended/best practice approach?

Struggled a bit with the hover state on the image. Didn't realize that ::before and ::after don't work with img tags. Feel like I'm learning a little "gotcha" every time I do one of these challenges!

Great work to whoever is making these!

Had some difficulties with getting the background images properly aligned. I tried two approaches, once using background-image and another using images and absolute positioning. Neither one seemed to give the result of the images being a set distance from the center of the screen. Any tips? Would be greatly appreciated!

EDIT: Turns out some of the problem was related to the CSS reset I was using that set 'max-width: 100%'

Was pretty simple, good small challenge to practice time management/estimation on.

Thanks for the help @SHMITEnZ and @hazel79!