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
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/social-proof-section-with-css-grid-flexbox-bem-and-scss-h-SsLpwkF
• Live Site URL: https://kens-visuals.github.io/social-proof-section/

My process

Built with

• Semantic HTML5 markup
• CSS Grid
• CSS Flexbox
• CSS Animations
• SCSS custom properties
• Mobile-first workflow

Continued development

I experimented with CSS grid in this project, and I'm really excited to practice it more in my future projects. I'm going to build much more complex layouts, which will be really fun with CSS grid.

Useful resources

• animista - Animista is a great website for small and simple CSS animations. After twitching a bit I made what I wanted, really fast and really simple.
• CSS Grid Cheatsheet - This is a really simple and cool designed cheat sheet for CSS grid.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals