Submitted almost 2 years ago

Solution w/grid and flex

Alexsandro Agustini Junior• 250

@AlexAgustini

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

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any tips to improve the code are welcome! :)

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 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

バレンタイン 😈• 64,190

@VCarames

Posted almost 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

Fancy• 320

@maciejkrol18

Posted almost 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

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