Flexbox

Hey there! 👋 Here are some suggestions to help improve your code:

• Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.

• Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

More Info: 📚

MDN Main Element

• The section element is being used incorrectly ⚠️ and not needed for this challenge .

• Avoid skipping heading levels ⚠️. Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.

• The statistics at the bottom are a list ⚠️, so it should be built using an unordered List element.

More Info: 📚

MDN <ul>: The Unordered List element

• Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Replace<div class="container">with the main tag and <h2> with <h1> to fix the accessibility issue.

For the color of the image, give .top a background-color of soft violet , Add height of 100%, mix-blend-mode: multiply , object-fit: cover and opacity: 0.8 to the img.

.top{
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