Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Author

Overview

The challenge

Users should be able to:

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

Screenshot (Desktop View)

Screenshot (Mobile View)

Links

• Solution URL: Link
• Live Site URL: Link

My process

Built with

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

What I learned

I have learned how to muniplate the layout according to the device view.

/* ---------- Media Query ------------- */
@media only screen and (max-width: 992px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "moderateViolet moderateViolet   darkGrayishBlue" 
                         "white-a        darkBlackishBlue darkBlackishBlue" 
                         "white-b        white-b          white-b";
  }
}
@media only screen and (max-width: 576px) {
  .testimonials {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "moderateViolet" 
                         "darkGrayishBlue" 
                         "white-a" 
                         "darkBlackishBlue" 
                         "white-b";
  }
}

Author

• Github - hassanidris
• Frontend Mentor - @hassanidris