@correlucas
Posted
πΎHello Natasha, congratulations for your new solution!
Your solution is already really good, you can improve it fixing the alignment vertically like David said and also reducing your code for the overlay effect with 2 lines. To add the exact same purple overlay effect for the image, matching the design files you can use, filter
or mix-blend-mode
. See the code below
img {
mix-blend-mode: multiply;
opacity: 75%;}
Instead of importing the card image with CSS you can manage it inserting the tag <picture>
to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html
π I hope this helps you and happy coding!