Stat Preview Card with HTML and CSS Flexbox

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

• It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

• The only heading ⚠️ in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

• 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

• NEVER ❌ do this as it creates accessibility issues for users and it is outdated.

html {
  font-size: 25px;
}

• Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

More Info: 📚

Mobile First

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 <div class="attribution"> with the footer tag to fix the accessibility issues.

Give .container a max-width value instead of a min-width and increase the width value. e.g. .container{ max-width: 1440px; width: 80%; margin: 0 auto; padding: 20px 0;}

Use relative units like rem and em instead an absolute unit (px) as the unit for the width, margins, paddings and font-size values. For more on CSS unit click here

Add opacity: 0.8 to the .imageholder to get the color in the design. In the media query add .ratings, give it a flex-direction of row.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING