All solutions

I build the social proof section taking the mobile first approach and mainly using Flexbox for the layout. The two parts, hero and cards, became flex containers on the desktop version while on the mobile version all the components fall in a column.

The star ratings layout was made with self-align applied to all three flex items. While the five starts are the svg background image applied to a div with background-repeat on space and a fixed width and height.

The cards have transform on translateY() for the scale effect.

This project helped me understand and play around with background properties and values and also got to implement translateY for the into an actual project and in a useful way.

I'm open to suggestions and corrections since I'm here to learn as much as possible.

Thank you for checking out my solution!

I really enjoyed working on this project since it really help me tackled some things I was unsure about and didn't get to implement into a project just yet. Some of these things include the picture tag with different source images and the image inside a button.

I also tried to work with relative units, such as rem and em, and percentages as much as possible.

Regarding accessibility I tried providing useful alt text for all images and avoided divs when possible.

Would really appreciate some feedback!