All solutions

I enjoyed building this project but initially struggled with figuring out how to best position certain elements, such as the background image for the tablet/desktop, as well as the nested button inside the input form.

Also, if anyone can share a better way to get the validation message to pop up nicely without affecting the layout due to a change in margins, please do let me know!

How do I make the footer image exactly the same as in the design? I've tried using background cover and contain, and they both don't work. Is there step perhaps that I'm missing?

I found it quite difficult to position the orange background image near the footer. Whenever I try to make it go to the bottom right, it breaks the viewport and creates a horizontal scroll. Adding overflow:hidden to the footer works, but it cuts the image so it looks terrible -- this means it isn't the best way. I also noticed that the three breakpoints do not cover laptops with small screens, such as a 13 inch MacBook air -- the desktop media query only kicks in at 1440px. Should I just add one more breakpoint for 1200px?

In terms of best practices, I've been using a lot of nesting in my CSS. Curious to know when nesting becomes too much, or if I'm using it alright.

I found it difficult to style the hero image for tablet and desktop views. It was tough to get it to be fully responsive for some reason. I tried not to use absolute positioning as much as possible. I think I ended up making it work in a weird way. I would love to know the best practices here.

1. I'd love if someone could show me the absolute best way to apply a CSS overlay
2. I tried following the overlay effect as closely as possible and used mix-blend-mode. Could someone show me how to get it 100% the same as the given design?
3. Although the flex property ensures that items have the same width, I noticed that when I add padding for one side, the items' widths no longer are equal. What approach would you suggest to ensure that all flex items are equal, aside from adjusting padding on both sides?