Responsive Social Proof Section with Sass and Animate.css

Hi ApplePieGiraffe,

Amazing job on this challenge! I like the animation you added 😆, it must be a lot of fun to use the Animation.css library isn't it 😏.

The code looks very clean and easy to read 😯. I found that you made some reusable utility classes, good practice!

I noticed that you are using transform to make the shift of the positions of some elements 👀. There is nothing wrong with that at this project. However, I feel it is kind annoying when measuring the distance between two sections if the one of them have the transform 😐.

In your example, <section class="bottom" ... has 192px height. But the reviews within it already exceeded the height 🧐.

If there is another section down below this section and have margin-top maybe 10rem, then the actually margin-top you will see is less than 10 rem because of the transform 🤯.

So instead of transform-y-sm and transform-y-md I would go

.mt-sm {
  margin-top: 3rem;
}
.mt-md {
  margin-top: 6rem;
}

You might see that the first review figure will be stretched 😬, no problem, add align-items: flex-start; to your .bottom will fix it 😎.

I would also add a max-width: 1110px; (I think FrontendMentor loves the number 1110, they always use this number for the container size 🤣) to the main, this will make sure your page won't tear apart in the extra wide screen.

Your project becomes better and better, can't wait to see your next project!

Happy coding 🙌!

Hey @ApplePieGiraffe, very responsive and very professional! and the animations make it look even better! Great Work!