Hey Frontend Mentor Community,
As you can see, I've created another masterpiece. I know, it's majestic.
Quick question though, for the life of me I couldn't figure out how to take the main Purple 'accent' colour provided and apply it to the image to match the design. Any pointers on this one?
I tried a combination of using a wrapper with a bg colour, CSS img filters, etc — all to no success.
Thanks in advance!
Try adding mix-blend-mode: multiply on the <img> and tweaking its opacity to get the color closer to the design.
Good luck!
I am learning responsive design and I faced difficulties in positioning the image and during resizing. If you find any mistakes in the site or in the code, please do mention it! Thank you!!
The image gets squished at some resolutions. (One possible solution: use object-fit: cover on <img>)
The overlay bleeds out of the image when the screen is too wide. (Possible solution: change max-width: 100% for width: 100% on the <img>, just like it is on the overlay)
Good luck!
Las media queries de mi laptop cambian cada vez, no sé si quedó bien el diseño responsive.
Que tal quedó?
Te faltó agregar la imagen del QR. Hay un overflow importante con el texto, se sale de la tarjeta (creo que por el height: 70% de la imagen).
