Stats-Preview Challenge

👋 Hi Priyanka!

🎉 Congratulations on finishing your second challenge on Frontend Mentor! I have some feedback to help you improve this solution:

• Accessiblity
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • Only have one h1 for every page. Heading one is used to identify each page, not for sectioning.
  • Also this should not be a heading. It should be a paragraph.

<h1 class="subhead">10k+</h1>

• Wrap all the page content inside a landmark. In this case, you can wrap it with main tag (This should fix the generated issue).
• I would recommend making each subdiv to be a li and wrapping all li with ul. This will make your HTML markup more semantic.
• Other
  • Don't manually uppercase the text (unless you want it to be spelled by screen reader). Use CSS instead.

<p>COMPANIES</p>

I would recommend refactoring this code (do this challenge again), by following this guide:

• Try to learn and use background-blend-mode or mix-blend-mode properties to create the purple overlay.
• Don't use float in this case. You can use flexbox to make the card have two columns on desktop view.
• Add max-width to the container or the card to prevent it become too large on the small or big screen size. You can see the issue by seeing your website on 600px width to 1439px and also >1440px.
• You can make the card perfectly on the center by using flexbox.
• This is obvious, but I would recommend seeing other people solutions if you get stuck or want to get an idea.
• (Best Practice) I would highly recommend naming your class in English and trying to follow BEM class naming convention.

That's it! Hopefully, this is helpful!

Could try using background-blend-mode: multiply; with a background image and the purple background color. Something like...

<div class="card-image" style="background-image: url('image-header-mobile.jpg');"></div>

.card-image {
    background-repeat: no-repeat;
    background-position: center
    background-color hsl(277, 64%, 61%);
    background-blend-mode: multiply;
    background-size: cover;
    padding-top: 74%;
    border-radius: 10px 10px 0 0;
}

Then can position the background image to the right on desktop, so something like...

@media (min-width: 1440) {
    .card-image {
        position: absolute;
        top: 0;
        right: 0;
        left: 50%;
        bottom: 0;
        padding-top: 0;
        border-radius: 0 10px 10px 0;
    }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

AS mentioned above above your looking for something background-blend-mode.

Keep coding