I used HTML, CSS , Flexbox and Media queries for completing this task.

Solution retrospective
Feedback on my code need suggestion for improvement .
Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Greeting Arun Kumar Singh, Congratulation on completing another frontend mentor project . Your solution looks nice.
-
Use an unordered list with 3 items for the stats.
-
The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class).
-
You can apply
border radius
,overflow hidden
to the component. So you don't have to set it to individual corners. -
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. (in this challenge the image is decorative). -
You should use
em
andrem
units .Bothem
andrem
are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. -
Never use pixel for font-size.
-
no need for any heights on this at all. All you need is a
min height
on the half of the card containing the image. It's rarely ever a good practice to set heights on elements Let the content dictate how tall something needs to be.
I recommend not to use
<h1>
on the same page more than once.I really hope this feedback helps
Marked as helpful -
- @darryncodes
Hi Arun,
Awesome solution, well done!
You could add
mix-blend-mode: multiply;
to yourimg
and removeopacity
from theimg
and the parentdiv
to closer match the design to the challenge!All the best!
Marked as helpful
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