Skip to content
Submitted about 2 years ago

Stats preview card component

Nada Elhosaryβ€’260
@NadaElho
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any feedback?

Community feedback

  • Lucas πŸ‘Ύβ€’104,340
    @correlucasPosted about 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
    0
  • バレンタむン πŸ˜ˆβ€’64,170
    @VCaramesPosted about 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
    0

Please log in to post a comment

Log in with GitHub

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