@Hassiai
Posted
Replace <section class="card"> with the main tag to fix the accessibility issue. There is no for <br> in <section class="highlights"> , replace all the <h2> in <section class="highlights"> with p and give it a class for the styling, wrap each set in a div. sample
<section class="highlights">
<div class= " col"><p class= "number"></p><p class= "text"></p></div>
<div class= " col"><p class= "number"></p><p class= "text"></p></div>
<div class= " col"><p class= "number"></p><p class= "text"></p></div>
</section>
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units Click here
To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.
Give the .card a fixed width value instead of a min-width value and a percentage width value. this applies to the media query as well.
For the color of the image, give .rightContainer a background-color of soft violet. and add mix-blend-mode: multiply and opacity: 0.8 to the img
.rightContainer{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@suhaib52
Posted
@Hassiai Thank you so much for your suggestions. That makes sense to me.
