Html and Css

Community feedback

• 

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 11 months ago

  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 🤓

  Marked as helpful

  0