Submitted almost 2 years ago

Stats preview card component

Nada Elhosary• 230

@NadaElho

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback?

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @NadaElho, 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

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @NadaElho, some suggestions to improve you code:

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.

To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):

  <body>
  <main>
    <article></article>
  </main>
</body>

The Main Element identifies the main content of the document.

While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.

More info:

https://web.dev/learn/html/headings-and-sections/

Reduce the padding in your mobile design.

Happy Coding! 👻🎃

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord