Meet landing page (no libraries)

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

I started using Responsively locally to test on multiple devices and noticed problems with CSS nesting support, so I decided to remove it.

Next time I will not use it. I think pre-processors are best for CSS management.

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

The most challenging part was the footer, with the background image blended with a background color. I spent most of the day on that part alone when I noticed the image actually appeared behind half of the circle.

I ended up reworking the implementation and then using a separate element to create the overlay.

I also found very challenging maintaining fidelity to the design in between the breakpoints but I think the result is very good.

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

I would like help in two areas:

1. The hero image/s without using the translate function. I still did NOT find a way to replicate the design responsively. I managed to offset it a bit with position: relative and a negative value but it's not as fluid as I wanted.

2. The image background in the footer blended with some color: I used an overlay with a fill color, but can we also use gradients?

3. The contrast ratio of the colors provided in the design it often does NOT pass WCAG 2 AA requirements. I have a problem with this and I think that maybe I am not understanding how to read the design documents.

Thank you for any help.