Submitted over 2 years ago

Responsive Stats Preview Card built with Vite

Warrick•20

@wozdog

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This was a fun project. I had some challenges with the overlay on the image, trying to do it with ::before and then blending it. It had some quirky glitches on the image border in the middle of the card, but seemed to come right with some settings adjustments. Felt a bit messy.

Tried to keep it clean but can still improve on it. Some of my spacing needs work to match the design but pretty happy with it in general.

As always, all feedback welcome.

Community feedback

Lucas 👾•104,340
@correlucasPosted over 2 years ago
👾Hello Warrick, congratulations for your solution!

Your solution code is fine, but there's some minor fixes you can consider applying to improve the design.

Here's my tips:

1.The component/image border-radius is not so rounded, I checked your variable and the value isn't 1rem its around border-radius: 12px;.

New variable: --radius: 12px;

2.Wrap the general content replacing the div and using main or section, div is an element to use in small details and with less importante role in the page since div has no semantical meaning.

<section class="card | container split">

3.Use the correct mix-blend-mode applying to the <picture> these properties picture {mix-blend-mode: multiply;}

Hope it helps and happy coding!
Marked as helpful
0

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