Social proof section

Hello Tomata, congratulations for your challenge! This is a hard one!

I'm with your solution open, you did a good work with all the elements, its really accurate, there few things to fix. I'll let your some advices"

1.Align the container content using the body with flexbox and 'height:100vh'. The property 100vh will allow the body to display 100% of the viewport and the flex properties will align the content to the center. Code below:

body { height: 100vh; display: flex; align-items: center; justify-content: center; }

2.To align the background you don't need to use position: relative I know that this properties works good. I think is easier use the property transform: translate (200px, 200px); This property make your element move in the X and Y axis and the value inside the translate correspont to X and Y. So you can play around with this property!

3.If you want to see my solution to see how I've used the property transform: translate here's the link:

https://www.frontendmentor.io/solutions/social-proof-section-pure-css-grid-custom-hover-states-KwSrl-Rjws

I hope this help you and happy coding!

Took some time to look at your code, I think I learned more about hover & transitions and filter command! I've never heard of filter before, nor I was that great on using translates. I'll try to use them more on my projects as in yours they felt really nice! thank you for sharing, and thank you for the helpful comments, I'll keep in mind in the future about flexing the body instead of the container.. display flex was always a bit confusing for me still haha