I am happy to finish the project although it took some time to understand about pseudo selector i had to do some research online about it. I am happy that its working now and the final design looks lot similar.
What challenges did you encounter, and how did you overcome them?I had challenges with pseudo selector selection and add hover effect for the child class.
The solution matches the design pretty well and the hover effects are a nice touch, but you also need to allow keyboard users to navigate the links. You can do this by using the :focus pseudo-selector. However, <div> elements are not focusable by default, so you either have to add a tabindex="0" property to the divs containing the links. Otherwise, you can change the divs inside your content div to be anchor elements, which are focusable by default.
Looks great! One small thing missing from your solution is a border on the card, but otherwise it looks pretty good.
The image should be centered in the component. One way to achieve this is to set the image to display: block and use margin: auto (make sure to also give the image a max-width: 100% to prevent overflow).
The first paragraph should also have its text-alignment be center.
