stats-preview card-component using HTML, CSS and Javascript.

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello again Satyam Jha, congratulations for your new solution!

  Here's some tips to impove your challenge:

  The proper size for the component in this challenge is max-width: 1110px doing that you'll see that the content will fit even better witht he correct size. My other tip is to add the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

  img {
  mix-blend-mode: multiply;
  opacity: 72%;}
  

  👾My rating for this solution: ⭐⭐⭐⭐

  👋 I hope this helps you and happy coding!

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Satyam, congrats on completing the solution of this challenge!

  If you don't mind I would like to give you a little advice.

  Instead of using margins to center your container, use flexbox in your container, you will get completely center using this on your body:

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  }
  

  Also would recommend you to change your 500px media querie to a higher value, since your card has a bit of overlay from 500px~ to 1200px~, so try swapping the display of your styles to a bigger size than 500px!

  Hope my feedback helps you! Good job!

  0