Skip to content
Submitted about 2 years ago

Solution w/grid and flex

Alexsandro Agustini Juniorβ€’250
@AlexAgustini
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 tips to improve the code are welcome! :)

Community feedback

  • Lucas πŸ‘Ύβ€’104,340
    @correlucasPosted about 2 years ago

    πŸ‘ΎHello Alessandro , 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 @AlexAgustini, some suggestions to improve you code:

    • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

    • The stat numbers are not headings. They should be wrapped in a Paragraph Element.

    • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=β€œtrue” to hides it from assistive technology.

    • To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8. (Courtesy of @correlucas)

    Code:

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

    Happy Coding! πŸ‘»πŸŽƒ

    Marked as helpful
    0
  • Fancyβ€’320
    @maciejkrol18Posted about 2 years ago

    I see that in your CSS code you include a CSS reset at the beginning. It's better practice to link such reset instead of putting it directly in your code. If i'm not mistaken, the css reset you're using is this one https://github.com/hankchizljaw/modern-css-reset.

    You can either link it in the <head> of your HTML document with the <link> tag, like so: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />.

    Or by using the css @import rule at the top of your css document, like so: @import url('https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css');

    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