3 column preview card component using grid & flex box

Solution retrospective
hello guys, in this challenge, I used grid and flexbox to achieve the challenge. if you have any advice to improve it or feedback don't hesitate to tell me.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kens-visuals
Hey @AliBenlemmouden 👋🏻
I have some suggestions for the project.
- First, for the car icons, add
aria-hidden="true”
, because they are for decoration. You can read more aboutaria-hidden
here. - Next, I suggest implementing
:hover
state, which you can find in design folderactive-state
image, after you implement it you can also addtransition: all 0.2s;
to the button and the links, this will make:hover
smoother. - Lastly, instead of giving individual
border-radius
to each<div>
you can do this:
.container { width: 800px; height: 500px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: auto; align-items: center; border-radius: 10px; overflow: hidden; }
the last two lines that I added will take care of all
<div>
s.I hope this was helpful 👨🏻💻 Other than that, you did a good job, nicely done. Cheers 👾
Marked as helpful - First, for the car icons, add
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