Stats Preview Card - Responsive HTML/CSS

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Instead of using separate properties for top, right, bottom, and left with position: absolute;, you can use the inset shorthand. For example, in your .main-image::before selector:

  .main-image::before {
      . . .
      /* top: 0; */
      /* right: 0; */
      /* bottom: 0; */
      /* left: 0; */
      inset: 0;
  }
  

• Instead of having fixed values for properties like font-size, consider using the clamp() function. It allows for a scalable design by defining a minimum, preferred, and maximum value.

• Instead of defining individual paddings and margins, consider using the shorthand. For example, the margin property in CSS has several shorthand properties that allow you to set the padding of multiple sides simultaneously:

  • margin: [top/bottom] [left/right];
  • margin: [top] [right/left] [bottom];
  • margin: [top] [right] [bottom] [left];

  .main-content p {
      /* margin-left: 0; */
      /* margin-right: 35px; */
      /* margin-bottom: 60px; */
      margin: 0 35px 60px 0;
      . . .
  }
  

  The same concepts of the margin shorthand can also apply to border-radius and padding:

  • border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

• Instead of setting borders directly on the image, you can apply the border to the container element. Additionally, to crop any overflow of the image, you can use the overflow: hidden property on the container.

  .main-container {
      . . .
      border-radius: 10px;
      overflow: hidden;  /* <- Add this line */
  }
  
  .main-image img {
      . . .
      /* border-top-right-radius: 10px; */
      /* border-top-left-radius: 10px; */
  }
  

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!