Stats Preview Card Component

Hi, Atif!

For animations and transitions, I recommend taking a no-motion-first approach. This way, only the users who choose to see them will be able to see them. Also, if the users' browsers don't support the prefers-reduced-motion media query, they will not see them and that's fine as long as the animations are not needed to understand the page content.

Read more — prefers-reduced-motion: Taking a no-motion-first approach to animations » Tatiana Mac

<picture> should have an <img> as a fallback for browsers that don't support <picture>. It is also used to provide other information like alternative text (if needed) and the aspect ratio of the image (width and height attributes).

Add rel="noopener" to all links with target="_blank". It helps protect users of legacy browsers from security issues. Read more — Links to cross-origin destinations are unsafe

Like @grace-snow said earlier, the website only needs one media query to be responsive. One media query to switch from a one-column layout to a two-column layout or vice versa.

I hope my feedback helps.

Hi

Text content is hitting the sides of the card when I view on mobile. Did you forget to add padding to the text half of the card perhaps?

Next time definitely work mobile first.

Here's some feedback for improvement, I hope it helps

• you need to change the html on this. Things like "10k" make no sense at all as headings. You have to interpret the design into appropriate elements for the content, as if there was no styling at all. If this was plain content, those stats would be 3 bullets in a list so thats what you have to use in html.
• never ever have font size in px use rem. This is extremely important
• it's more performant to link fonts in the html than import in css if possible
• instead of using gap and padding on one side of the card, make it easy on yourself - just padding on the text side of the card
• main is not an interactive element so should definitely not have a hover style. That would make it appear clickable to some users causing nothing but confusion
• you can set border radius on the whole component then clip the overflowing corners with overflow hidden. Much easier than setting each corner radii individually on child elements
• it's really unusual to change font sizes this much. They shouldn't need to change at all between screen sizes
• there is no need for so many media queries in this. It only needs one