Meet landing page using flexbox, css grid, BEM and Sass

What are you most proud of, and what would you do differently next time?

Not a lot to be honest, even though this is marked as 'Newbie' I found it to be a difficult challenge! I am glad I was able to get something together that somewhat meets the requirements within the time-frame I allotted to this exercise. But, I dont' feel like my solution is really all that good. I think next time if I tried this challenge over, I would not use Sass, I would try the 'mobile first' type design approach, and look for ways to make the site more responsive without being so heavy-handed with the layout algorithms.

What challenges did you encounter, and how did you overcome them?

I struggled with Sass as I was starting with too many features at once (e.g., partials, mixins, etc). I deleted everything and started over with a single scss file and increased the complexity from there only as needed. Other areas of struggle were with the hero images and how to get them positioned and to scale correctly as the viewport size changed. I tried using flexbox and then ultimately went with css grid but feel like I didn't nail the layout either way. I looked at some other solutions for inspiration as well, and that was helpful to get unstuck in some places.

What specific areas of your project would you like help with?

I feel like my overall approach to this challenge was not great. I'm not sure how I grouped the content and put the elements in sections was the optimal for placing everything, and laying it out per the design. I really don't like the way the images scale and couldn't get the spacing on the desktop layout to look like the Figma file without the images squeezing down or some other aspect looking off. The footer section with the background image overlay was also something I struggle with figuring out. It doesn't seem to scale well with the tablet and smaller device sizes, especially the spacing of the content.