All solutions

I won't lie this one was a bit more challenging because there was so much you have to make on your own (you can even see where I got lazy and just gave up). In total, I think I left out maybe 3 things but the design is still almost fully faithful. Had a weird issue with the background image things not scaling properly, if anyone sees it and has a fix would be appreciated - the bottom 0 creates a gap if the viewport gets short enough.

Otherwise, this was generally a decent build.

Nice short one just to get a bit more flexbox practice in, on this one I was able to practice a little bit with flex-shrink to stop the image bugging out when downsizing.

A few comments on this one: -Tried to keep the markup optimised for accessibility where I could, hopefully it shows. Would appreciate more tips on how to improve accessibility. Missing alt text is on purpose, I am lazy. -The images shrink too much when downscaling, this is probably due to my use of max sizes instead of pre defined ones or maybe just the way I implemented the images, atleast they work at the intended design sizes :D. Tips appreciated on this matter -I tried using grid for most of this even though some of it probably makes sense to use flex, that being said I still have a lot to learn about flex and grid both so we will see what I can do in the future. -Normally I would have made the buttons anchors but I actually just forgot and realised mid dev and just styled the hovers since this is a solo page project. Thanks for reading and checking out the solution.

Enjoyed this one, had some fun using grid for the card pieces and flex to make the top and bottom banner pieces quick and easy as well as responsive. Unfortunately there is only one problem and a fairly big one, I don't know how to make the image scale properly when resizing, so at the 3 design resolutions from figma it works as intended but after that the scaling gets all kinds of weird - would appreciate tips on how to fix that Other than that, I'm aware my usage of the 2x images is probably not the best ( would also take advice on this) and yes this is indeed some messy CSS.

Hi, this is my first solution on Frontend Mentor for the product preview card component The main challenges for me were positioning and layout in terms of responsiveness i.e., using different displays like flexbox

I tried to lay my CSS out in a way that made sense e.g., creating rulesets per element as you go down the card or at least I tried to follow that order (it might be broken a couple times), if anyone has comments on my layout practice I would welcome them.

I probably didn't need to use a main tag in the HTML but I'm not very familiar with accessibility conventions yet, looking to practice that some more after this project

For some reason, I could not get the card to stay centered and the attribution text to stay at the bottom of the screen without something in the layout messing up, could anyone help me out with that?

I think generally this was a nice project and I found sizing to be okay with Figma but maybe I should have relied on it a bit less, I'm not sure if my way of setting widths etc. is the best way, if anyone has a better solution I'd be happy to see it.