Responsive stats preview card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Shimul! 👋

  Good effort on this challenge! 👍

  For creating the violet color or purple overlay, I would recommend what @correlucas has suggested. For me, when I was creating the purple overlay, I prefer using mix-blend-mode since the image element exists on the HTML.

  For your inspiration, I recommend taking a look at the @DarrickFauvel's solution. He had done an amazing job on making his solution looks similar to the original design.

  Some more suggestions from me.

  • I recommend using picture element for the image. It will let you decide which image should appear based on media condition. This way, there's no need for two img elements for each image.
  • If you start writing duplicate HTML or two versions of the HTML markup then it is a good sign that something is not right. It is possible to create the desktop and the mobile layout with one HTML markup. Also, duplicate HTML markup is not good for SEO (because of spamming) and accessibility (double content).
  • Avoid using br elements for presentational purposes. Read what MDN documentation says about it.
  • The two-column layout of the card has not enough space at 376px. So, I suggest adjusting the breakpoint of the media query. As a side note, The sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". You should add media query whenever the layout starts looking bad or on when it has enough space.

  That's it! I hope this helps! 😊

  Marked as helpful

  0

  ---

  

  Shimul•40

  @shimul0022Posted over 2 years ago

  @vanzasetia This was immensely helpful. thank you so much

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @shimul0022 Happy to hear that was helpful! 😊

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Shimul, congratulations for your new solution!

  Answering your question:

  To add the exact same purple overlay effect for the image, matching the design files you can use, filter, background-blend-mode or mix-blend-mode (the one I used for my solution). See the code below

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

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

  👋 I hope this helps you and happy coding!

  1

  ---

  

  Shimul•40

  @shimul0022Posted over 2 years ago

  @correlucas thank you so much for the answer

  0