Responsive social proof section using css grid

Greetings Oviedev 👋

I did play around with CSS flex box and grid to place your content in the center of the page and both work perfectly fine. Below is a snippet of CSS I used and I commented out the properties that you should remove.

body {
   display: grid;
   place-content: center;
   min-height: 100vh;
   /* display: table; */
   /* position: absolute; */
   /* height: 100%; */
   /* width: 100%; */
}

Regarding the background images, I'll leave below a starting point where you can also play around and see how you can place those images the way you want and I'll also comment out properties that are unnecessary :

body {
   background-position: top left, 50vh bottom;
   background-repeat: no-repeat;
   /* background-size: auto, cover; */
}

Happy coding. 👌

👾Hello @ovie-best, Congratulations on completing this challenge!

You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

✌️ I hope this helps you and happy coding!

Hi, Oviedev! 👋

Congratulations on completing this challenge! 🎉

It looks like you had solved the issues. So, I will just give some suggestions to improve this solution.

• There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
• Hover effects on the non-interactive elements may confuse your users. They might think those elements are interactive elements. Interactivity should only be for interactive elements such as buttons or links.
• Also, transitions and animations should be disabled when the users prefer not to see them. I recommend wrapping the transitions and the animations with the prefers-reduced-motion media query.

@media (prefers-reduced-motion: no-preference) {
  /* animations and transitions */
}

• Not every image needs alt text. If the image does not provide any meaningful content, such as the star icons, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.

That's it! I hope this helps! Happy coding! 😄