Travolgi 🍕• 31,420
@denielden
Posted
Hi Mukunde, great job!
I had a look at your solution and I have a few suggestions for you:
- try to use
background-blend-mode
for image. Look here -> blend mode - To center the cards on the page try using Flexbox, it can help you better: give the flexbox and
height
properties to the body and remove allmargin
from the.container
class. - Note: Flexbox aligns to the size of the parent container. You can use the
vh
measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window. - to fix the heigth of image and align with the dimension of the left box change in
height: 100%;
the property of.card__img img
class
Hope this help ;) And keep it up!
1