@alexrtm
@samritbasnet
Submitted
What are you most proud of, and what would you do differently next time?
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.
@alexrtm
Posted
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.
Marked as helpful
@waeldrwish
Submitted
@alexrtm
Posted
Looks great! One small thing missing from your solution is a border on the card, but otherwise it looks pretty good.
@HembramUmesh5
Submitted
@alexrtm
Posted
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.
