All solutions

I found it difficult juggling between flex and grid for the two different layouts. Definitely don't think this submission will be close to pixel perfect, but I'm happy with how it ended up for the most part.

This has a known CSS issue with Safari which I'm still working on - sorry!

I struggled with the border and transparent colour over the selected thumbnails. Couldn't figure out how to add a border without 'squashing' the image within the div. The same issue is apparent with the hover effect over the profile.

This challenge was pretty difficult for me as I'm still getting my head around React. I also experimented with Tailwind, but found it was getting a bit messy as the project grew. I might stick with plain CSS for a while!

In the end, pretty happy with the design and functionality, with a few CSS mistakes to iron out.

Not sure how to handle the short delay after the new quote has been displayed. There should probably be some feedback letting the user know they can click the button again.

Struggled a bit with repeated/redundant HTML code on this. Still trying to do these challenges without diving into React, I'm sure it would be a much cleaner codebase with reusable components.

I'm unsure whether I should be utilising CSS grid as well as flex, right now I'm exclusively using flex.

My solution is fine at the specified 1440px and 375px screen sizes, but it kind of falls apart between those sizes. I need to work more on flex and media queries to make the layout acceptable at all screen sizes.

Not much to say about this one, nice and easy.

I think I should be creating sub-components for each individual element, but am never sure how granular components should be. I was also unsure if I needed to hard code a new container width for mobile screens or if my solution is fine.

I also made a mess of pushing to GitHub Pages and can't seem to push a fix for an obvious sizing issue with my selected number buttons.