stats preview card component with flexbox

Hello!

I am not sure if this is the right way of doing it but as a workaround for me, I set my main container with the purple background and then set the img opacity to 0.5. Hope it works out for you.

Hi.. Good day!

Since you can't add an ::after pseudo element selector to an image inside an <img> tag. You can use a work-around by using another tags like <div> or <span> and declare the background attributes and styles in the CSS.

<main>
  <section class="card">
    <div class="card__img"></div>
  </section>
</main>

To apply the purple filter on the image. you can use background-blend-mode: overlay;

.card {
  &__img {
    background: $primary-color url(../images/image-header-mobile.jpg)
      no-repeat center center/cover;
    background-blend-mode: overlay;
  }
}

Replace <section class="container"> with the main tag, <h2> with <h1> and <h5> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html

For the color of the image give the figure a background-color of soft violet and add mix-blend-mode: multiply, object-fit: cover, opacity: 0.8 and height of 100% to the img. there is no need for the max-width in the img.

figure{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

For a responsive content you can give .container a width of 90vw or a max-width of 1440px and width of 90%.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello there 👋. Good job on completing the challenge !

Here are some suggestions regarding your code that may be of interest to you.

HTML 🔤:

To clear the Accessibility report:

• Wrap the page's whole main content in the <main> tag.

• Use an h1 tag for the main text in the design given and always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

• Use HTML5 semantic elements such as <header>, <nav>, <main>, <aside>, and <footer> to define these sections.

• Use ARIA landmarks such as <header role="banner"> and <footer role="contentinfo"> to provide additional information about the purpose of each section to assistive technologies.

Here is a web accessibility evaluation tool📕 to check your webpage for any remaining errors or warnings related to landmarks.

I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!