I made it with Mobile First design.
I had some difficult to make the curved section of my footer and I did it with HTML using the tag "img", but I tried to make it work with background-image in CSS and I failed it, if someone knows how to do that please tell me here so I can learn. Feedbacks are welcome!
I also had a hard time with the section backgrounds.
For background-image in CSS try to use pseudo elements ::before and ::after.
Also check this out for the content background that will not overlap with top and bottom svg background-clip: content-box. You'll just need to experiment with the right padding to fit with the section content.
I too was beginner in this and my solution still has some minor errors. I hope this community will help us grow. :smile:
