@ranieto
@Scott1UP
Submitted
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!
@ranieto
Posted
Try adding mix-blend-mode: multiply on the <img> and tweaking its opacity to get the color closer to the design.
Good luck!
@Capt-Coder
Submitted
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!!
@ranieto
Posted
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!
Marked as helpful
@M1ch3ll0101
Submitted
Las media queries de mi laptop cambian cada vez, no sé si quedó bien el diseño responsive.
Que tal quedó?
@ranieto
Posted
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).
Marked as helpful
