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 🤓

  0
• 

  DHEERAJ PUJYAM•200

  @dheeraj-90040Posted 11 months ago

  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
  

  0