Stats Preview Card Component using CSS, Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Claire, congratulations on your solution!

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

  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

  ---

  

  Claire Karsenti•130

  @ClaireKarsentiPosted about 2 years ago

  @correlucas Hello Lucas,

  Thank you for your feedback 😀

  I just applied your advice for the image and it works perfectly, the code is very clear and readable now for the overlay effect.

  Thanks a lot 🙏 Claire

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @ClaireKarsenti, congrats on your first challenge!

  Some suggestions to improve you code:

  • The stat numbers are not headings. They should be wrapped in a Paragraph Element.

  • You do not want to have or use empty divs in you HTML code, since this is considered to be bad practice. Instead use the Picture Element

  Picture Element will allow your to switch between images in different breakpoints

  Syntax:

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

  Source:

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

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

  • To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8. (Courtesy of @correlucas)

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
   
  }
  

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Claire Karsenti•130

  @ClaireKarsentiPosted about 2 years ago

  Hello @vcarames !

  Thank you for your feedback 😀

  I will redo the project by starting building the content for smaller screen first and then adjust it for larger screens. I did like this for my #3 challenge. I also used the Picture Element for my #3 challenge, I guess it's an improvement of my code then ;-)

  Thank you for this detailed advice. 🙏 Claire

  0

  

  Claire Karsenti•130

  @ClaireKarsentiPosted about 2 years ago

  Hello @vcarames

  I've just updated my code with better practice for the HTML and CSS. Thank you for all your advices, I feel much more confortable with it now 😁

  Claire 🦢

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @ClaireKarsenti

  I am glad I could help! It looks great! Did you add an animation?

  0

  

  Claire Karsenti•130

  @ClaireKarsentiPosted about 2 years ago

  @vcarames

  Thank you :-)

  Yes, I did. I used the Animate.css library for just a little animation at the beginning, nothing "waouh". I would like to train with animation in css, if you have any recommendation with some good ressource to learn about that I'm all ears

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @ClaireKarsenti

  That's a great library! I actually use it myself. I'm still learning animation. The simple ones are easy, but one you get into the more complex one are not so much...

  Here's a link that helped me out when I first started studying animation:

  https://web.dev/learn/css/animations/

  You can use this site, that was created by Google, to learn a lot of things related to web development:

  https://web.dev/learn/

  0

  

  Claire Karsenti•130

  @ClaireKarsentiPosted about 2 years ago

  @vcarames

  Thank you for your recommendations, seems great, very usefull, thank you !

  0