Preview Card Buisness using HTML and CSS

Community feedback

• 

  Harold-chn•440

  @chanwinharoldPosted 18 days ago

  Hi 👋🏽, To answer to your question, you should add the purple color to your background-color property and use the property background-blend-mode: overlay; it will mix your background image to the purple color.

  Marked as helpful

  2
• 

  MEHNOOR SHAHBAZ•680

  @Mahnoor366880Posted 17 days ago

  Hey there! Yes, it's absolutely possible to make the image purple using only HTML and CSS. One common method is to apply a purple overlay using CSS properties like background-blend-mode or mix-blend-mode. Here are two approaches you might try:

  Using Background Blend Mode: Set your image as a background image on a container, then apply a purple background color with a blend mode to mix the two. For example:

  .image-container { background-image: url("path-to-your-image.jpg"); background-repeat: no-repeat; background-size: cover; background-color: hsl(277, 64%, 61%); /* Purple tone */ background-blend-mode: multiply; }

  Using Mix-Blend Mode on an <img>: Wrap your <img> tag in a container with a purple background and apply mix-blend-mode to the image. For example:

  .parent-container { background-color: hsl(277, 64%, 61%); position: relative; }

  .parent-container img { mix-blend-mode: multiply; width: 100%; height: auto; display: block; } Both methods rely solely on HTML and CSS, and you can choose the one that best fits your layout. I hope this helps, and keep up the great work on your project!

  Marked as helpful

  1
• 

  P

  Matt Hummel•60

  @matthummel-paPosted 18 days ago

  Great work! Your final solution matches the design. One suggestion I have is to maybe adjust your borders for smaller screen sizes for top bottom left right. Some of the rounded borders in the images seemed slightly strange on smaller screen. But all in all your code is clean easy to read.

  Marked as helpful

  1