Stats Preview Card Component Solution

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

  • 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

  • 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! 🎆🎊🪅

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container-fluid">with the main tag,<h2> and <h5> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility

  To center .container page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to .container-fluid

  For the color of the image, change the value of background-blend-mode to multiply and add opacity: 0.8 to; .

  In the media query give .container a fixed width value. e.g width: 320px;

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0