Html and Css

Hello There! 👋

Congratulations on completing this challenge 🎉

I like your spirit of learning from mistakes. I've nothing harsh but some insightful thoughts that might improve your code. 💡

1. Center Your Content

There are many ways to center any content; for now, we'll go with a straightforward grid:

body {
    display: grid;
    place-items: center;
}

2. Add some space

Let's give your content some space to breathe using padding:

.product__content {
    padding: 20px; // tweak the value as per your need
    ...
}

3. Order Your Image

I noticed you are using a desktop-first approach and grid, you can order your image like this:

.product-image {
    order: 2; // as the image is next to the content on desktop mode
    ...
}

@media (max-width: 649px) {
    .product-image{
        order: 1;   // reset the image position when on mobile
    }
}

4. Add an Overlay

The challenge has some purple tint on the image which can be achieved by using mix-blend-mode: overlay; and ::before pseudo element.

.product-image {
    position: relative;   // to make sure the overlay does not overflows
}

.product-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-accent);
  z-index: 1;    // bring the overlay on top of the image
  mix-blend-mode: multiply;  // apply the tint effect
}

5. Flex your Stats

Using flex can be more convenient than grid for .stat

.stat {
    display: flex;
    gap: 15px;   // specify gap between each item
    ...
}

// make your flex items vertical on mobile
@media (max-width: 649px) {
    .stat {
        flex-direction: column;
    }
}

Above all your solution looks great! ✨

As I said, you already did an excellent job, but these details will improve it even further. 🚀

I hope this helps 👍

Happy Coding 🤓

Great design,

I like your design because it is unique. Instead of copying, you tried it in your way.

But there was a small suggestion from my side that you have to improve your design a little bit.

In your design, you didn't use padding for text content. Use those. Here is the MDN docs on padding; follow this.

And you also need to know about Flexbox and grid layout. Here are the best resources you can learn from. I hope this was helpful.

Here are the resources from MDN for learning about padding, Flexbox, and Grid Layout:

Padding Documentation:
    MDN Padding Documentation: Padding - https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Flexbox:
    MDN Flexbox Documentation: CSS Flexible Box Layout - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Grid Layout:
    MDN Grid Layout Documentation: CSS Grid Layout -  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout