Screenshot

##DESKTOP 

#MOBILE ![])

Links

• Solution URL: (https://github.com/Jorahhh/Social-proof-section)
• Live Site URL: (https://jorahhh.github.io/Social-proof-section/)

My process

1. Started with mobile screen version.
2. Used flex layout to make it in column.
3. Used @media query to make desk version (that was tough!)
4. Used @media query for screen size bigger than 1440px to make some changes
5. Added some ':hover' effects on the '.reviews' class.

Built with

• HTML
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

The wrap in flex layout opened totally my mind and it helps me a lot to make the desk version.

main{ display: flex; flex-direction: row; flex-wrap: wrap; }

Continued development

On the next works I'll focus more on the Flex Layout and its properties. Also, I think I need to focus and improve a lot on the @media queries, where I still have many difficulties.

Useful resources

• CSS-Tricks - This helped me for the flexbox layout. I'd recommend it to anyone who needs some little advice on any of the topic

Author

• Angelo Barbarulo
• GitHub - @Jorahhh
• Frontend Mentor - @Jorahhh

Acknowledgments

/