Frontend Mentor - Social proof section solution

This is a solution to the social proof section challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the section depending on their device's screen size

Screenshots

Desktop

Mobile

Tablet

Links

• Solution
• Live site

My process

The challenge was meant for mobile and desktop only, but I also made it responsive, at least for it to not look awful on screens larger than 375px wide.

Some of the text might look different from the original design, since I fixed a few typos here and there.

My CSS is currently a bit disorganised, will tidy it up one of these days. (Narrator: 'She did not, in fact, tidy her CSS up.')

Built with

• Figma: used to measure things like padding, border radii, margins, etc. I do not have a Pro account, thus no Figma source file. I just measured from the provided design screenshots.
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Sass (First time using Sass! 😳)

Author

• Amparo 💀 - Say hello 😀
• Frontend Mentor - @amparoamparo
• freeCodeCamp - @amparo
• GitHub - @amparoamparo