Social proof section (Tailwind CSS 🎨)

Hello @MelvinAguilar

Excellent work on completing this challenge.

I went to my Chrome browser and went to the browser settings and modified the font size settings to "very large" and I noticed that the the profile pics were elongated vertically. Moreover, the stars were also appearing in another line. When I change the font size setting to "very small", the profile pics were appearing squarish. The stars were appearing quite big as compared to the surroundings. You might want to take a look at it.

Besides that, I have a general suggestion: Consider using css grids since it is more powerful than css flexbox. Flexbox handles one-dimensional layout whereas grids handles one-dimensional as well as two-dimensional layouts. For example, in the rating section - desktop view, they appear in a stair-way kinda manner. So in a grid format, there are basically 5 columns and 3 rows to represent it. So you can use grid-template-areas and assign grid areas to the individual items inside it. Using grid-template-columns, you can assign the width of the columns. I suggest you draw the grids on a paper and then see how the rating section fits in it. My similar comment for the testimonial section.

Refer to Kevin Powell's video on learning the CSS grid the easy way

I will be submitting my solution on the social proof challenge soon.

To, @MelvinAguilar I noticed you used .sr-only class, which I also want to include in my solution.

I experimented with that class and noticed that these two properties seem to be sufficient for sr-only class.

.sr-only {
  position: absolute;
  clip: rect(0,0,0,0)
}

1. What are your thoughts on the above?
2. Also, I was surprised that the position absolute had to be used in conjunction with the clip. I am not yet sure why. I thought the clip would be enough. I would love to hear your thoughts on this.

I just wanted to drop in and say:

You are a master at perfection. 🙌️🙌️🙌️

Excellent 👌👌👍👍👍

@MelvinAguilar you are the marter of tailwind-css, you make your challenge so beutifull with [2.4375rem], [1.4375rem]... wow, i had followed you and learn more about it. Keep doing your work, i will always be with you.

✋Hi bro, I hope you're doing well. I have some doubts about your project. I noticed that your webpage is responsive even when I zoom in and out of the web browser. However, my solution is not responsive; when I zoom in and out of the web browser, it creates unwanted gaps between the elements. I really like all of your projects. 💁‍♂️Could you please provide a roadmap for me to learn complete front-end web development? It would be really helpful for me to master this field. Also, could you share the resources you followed to learn front-end development?😊😊