Stats Preview Card with CSS Flex

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hi there Ebere. Congratulations on finishing the challenge.

  The picture element is perfect for displaying images for each different screen size. Here's a link to MDN web docs if you're interested in learning more about how to use it: The Picture element.

  Regardless I'll leave an example below on how you can implement it in your code:

  <picture>
      <source srcset="/images/image-header-desktop.jpg" media="(min-width: 576px)" />
      <img src="/images/image-header-mobile.jpg" alt="image" />
   </picture>
  

  The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. This is also from MDN web docs and here's the link: linear-gradient.

  I didn't notice any gradient in the design but either way I'll leave an example below on how you can implement it:

  /* angle | color-start | color-stop */
  background: linear-gradient(transparent, hsl(277, 64%, 41%));
  

  I hope that gives you an idea on how you can implement it👌

  Marked as helpful

  0
• 

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  **congratulation on finishing this challenge **

  and look at this site if u wanna know about [picture tag] (https://www.w3schools.com/tags/tag_picture.asp)

  if u wanna make the img like the design make the background the color that u want then

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

  and this site can help with making [linaer gradient colors] (https://cssgradient.io/)

  Marked as helpful

  0

  ---

  

  Ebere Ndukwu•180

  @eby-coderPosted about 2 years ago

  @omarsaleh11 Thank you. But I tried using the steps that W3schools (https://www.w3schools.com/tags/tag_picture.asp) provided for the picture element before and it didn't work. Is there anything I should be doing that I'm not?

  0

  

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  @eby-coder np,

  try to look at my solution here ( https://www.frontendmentor.io/solutions/stats-preview-card-component-using-css-flex-and-grid-vZcHmUVjWx )

  0