@Hassiai
Posted
Replace <div class="preview-card"> with the main tag and <h4> with <p> to fix the accessibility issues click here for more on web-accessibility and semantic html
For the color of the image add a background-color of soft violet instead of a linear gradient, background-blend-mode: multiply and opacity: 0.8 to .img-box
.img-box{
background-image: url();
background-size: cover;
background-color: hsl()
background-blend-mode: multiply;
opacity: 0.8;
}
To center .container on the page using flexbox, replace the height in .preview-card with min-height: 100vh.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@TianYeCal
Posted
@Hassiai Thank you! I was struggling with how to make it, but now it's good!