Social proof section using html, css, grid and flexbox

👋 Hi Martha!

👍Good job on completing this challenge! This solution looks good on both mobile landscape and portrait mode and so on desktop view too! 👏

Also, you have done a great job on accessibility part where for decorative images (star icons) you add aria-hidden and leave the alt empty. Well done!👍

I have some feedbacks on this solution:

• Wrap the blockquote content with p tag. blockquote element’s content is a quote, not a chunks of characters. Source: HTML best practice github repo
• You can import the Spartan font family and all the font weights with only one @import.
• Use rem or sometimes em units for font size. Using px won't allow the users to control the font size based on their needs.
• Instead of keep setting different width for the main element, I would recommend to set a max-width with rem unit to prevent it from keep getting bigger on bigger screen.
• For the testimonial card HTML markup, you already have a good markup. But I would prefer to include everything inside the figure element. So, it's up to you, whether you follow the Raymart, me, or leave it as it is.

<figure>
  <figcaption> (flex)
     <img src="/michael.png" alt="Michael" />
     <div>
        <p>Michael</p>
        <p>Verified</p>
      </div>
  </figcaption>
  <blockquote>
     <p>
        ...quotes
     </p>
  </blockquote>
</figure>

That's it! Hopefully this is helpful!

Hey, awesome work on this one. Layout in desktop looks great it is responsive and the mobile state looks great as well.

For your queries:

1. By default as well, when using display: flex all items inside the row gets the same height since it uses as default align-items: stretch which makes the tallest element, share that height to its siblings. Now on flex-direction: row flex: 1 only makes the element of the flexbox be equal in terms of width and not height. If it is flex-direction: column then it goes to height.
2. I think the design/layout is already great.

Some suggestions on the site would be:

• body does not need flex-direction: column since there is only one direct child it has.
• I wouldn't really use ul on the stars, instead if I were to do this, I would use the li element's background props and put all those 5 stars in there. By doing that, I avoided creating extra html tags.
• When wrapping a text-content do not just use strong to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
• For each of the testimonial cards, it would be great to use this markup:

<figure>
  <img src="" alt="">
  <blockquote>
    {qoute in here}
  </blockquote>
  <figcaption>
    person name
    <p>
      person role
    </p>
  </figcaption>
</figure>

Then you could just use grid to place each item in their own spot.

Aside from those, great job again on this one.