Stats preview card

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @katrine9176, some suggestions to improve you code:

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info:

  https://www.w3schools.com/html/html_images_picture.asp

  https://web.dev/learn/design/picture-element/

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  katrine9176•540

  @katrine9176Posted about 2 years ago

  @vcarames thanks ;)

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @katrine9176, congratulations on your solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius

  2.The image is getting distorted, to avoid this behavior, use these steps, first add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more by adding the auto-crop property you can add object-fit: cover to make the image crop inside the container. Here’s the code:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  3.To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

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

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  katrine9176•540

  @katrine9176Posted about 2 years ago

  @correlucas thank youuuuuuuu

  0