Stats preview card component

Community feedback

• Account deletedPosted over 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • 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 to the image. Lastly, the image’s container must have the background color of hsl(277, 64%, 61%).

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  • The statistics at the bottom are a list ⚠️, so it should be built using an unordered List element.

  More Info: 📚

  MDN <ul>: The Unordered List element

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

  • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  21

  Marked as helpful
• 

  TayAki79•160

  @TayAki79

  Posted over 2 years ago

  Hi Gabriela,

  nice job. I still can remember when I first worked on this challenge took me days to accomplished it. Here's a solution I can provide for you:

  background: linear-gradient(hsl(277, 64%, 61%, 0.5), hsl(277, 64%, 61%, 0.5)), url(../images/image-header-desktop.jpg);

  1. You should use 'background' as the attribute not 'content'.
  2. As the first value you use 'linear-gradient' and insert at least two colors in there. Here I use your soft-violet color for both since we don't need any gradient at all.
  3. At the end of the color-code (here we use 'hsla' instead of 'hsl' because 'a' serves as the opacity value) you can type in any value from 0.0 to 1.0. Just try yourself what opacity you guess fits the most.
  4. The second value finally is the url() of your image.

  Note: I applied it on your content attribute inside your @media query. But still I see some difficulties in your code. If you want to work on this together I'd love to. Just hit me up. I expect to learn a bit more myself.

  But anyways. Good job and keep practicing!

  Best regards, AkraDEV

  12

  Marked as helpful