Flexbox

Replace <div class="container"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.

To prevent the content from overflowing on smaller screens, there is no need to give .card a height value rather give .text-info a padding value for all the sides.

For the color of the image, wrap the img in a figure tag, in the css give the figure tag a background-color of of soft violet and the img a width and height of 100%, object-fit: cover , mix-blend-mode: multiply and opacity: 0.8.

<figure><img></figure>

figure{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there,

nice work! I'd have few more suggestions to improve it further:

• Having the container itself with min-height: 100vh is not a good idea, instead try to use GRID or FLEXBOX on the parent of that, because .container is the direct parent of two sections and it makes harder to control when their size don't match to the container itself.

A better practice to center would be e.g.:

body { background-color: hsl(233, 47%, 7%); font-size: 15px; min-height: 100vh; display: grid; place-items: center; }

• Try to avoid giving fixed heights or max-heights for text containing elements like you have for .card (height: 450px), even if it is in rem, because it can cause issues later on (with changing dynamic data, when the user changes font-sizes, or even browser rendering issues etc.)

• About the color effect on the images, there is an easy way:

• Wrap the img into a container div and just give container of the img a background color like hsl(277, 64%, 61%),

• then apply this css rules to the img: mix-blend-mode: multiply; opacity: .75;

Hope you find my feedback helpful!