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
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Challenge URL
• Live Site URL: live Preview of Solution

My process

Built with

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

What I learned

I learned how to work with css grid! It's quite fun. I also sharpened my use of the mobile first workflow.

@media screen and (min-width: 780px) {

    .testimonial{
        max-width: 1440px;
        margin: 100px auto;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .card:nth-of-type(1){
        grid-column: 1 / 3;
    }

    .card:nth-of-type(3){
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .card:nth-of-type(5){
        grid-column: 2 / 4;
    }

}

Apart from the grid i learned some new css tricks i had no idea of before like the background positioning with values

.card--bg-voilet{
    background: var(--voilet);
    color: var(--white);
    background-image: url('./images/bg-pattern-quotation.svg');
    background-repeat: no-repeat;
    background-position: top 10px right 100px;
}

Useful resources

• CSS Grid Layout Module - This helped me understand a litle bit more about CSS grid

Author

• Website - Easythingz
• Frontend Mentor - @agbortoko
• Twitter - @agbortoko_arrey