Skip to content
Submitted over 2 years ago

Stats preview card component

Amos Machora•330
@AmohPrince
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This project was fun but I was not able to make the accent color on the image any help will be highly appreciated.☺☺☺☺☺

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey Amoh, Congratulations on completing this challenge... You have some accessibility issues that need to fix.

    • Document should have one main landmark, Contain the component with <main>.
    • Page should contain a level-one heading, Change <p className="Main__text" to <h1 className="heading"> You should always have one h1 per page of the document...
    `<h1 className="heading">Get <span className="insights">insights</span> that help your business grow.</h1>

    In this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page. There are six levels of section headings <h1> to <h6>

    • All page content should be contained by landmarks, Contain the attribution with <footer>.
    <footer>
   <div class="attribution">
      //...
   </div>
</footer>
    • To make the accent color on the image, give the classes these properties like the following:
    .App__right {
  //...
  background: #aa5cd;
}

img {
   //...
   mix-blend-mode: multiply;
  opacity: 75%;
}
    • I suggest you put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:
    <ul class="stats-preview__stats">
   <li>
      <span class="stat-number">10K+</span>
      <span class="stat-name">Companies</span>
   </li>
   <li>
      <span class="stat-number">314</span>
      <span class="stat-name">Templates</span>
   </li>
   <li>
      <span class="stat-number">12M+</span>
      <span class="stat-name">Queries</span>
   </li>
</ul>

    I hope this is helpful to you... Keep coding👍

    Marked as helpful
    0
  • Hamzat Lawal•560
    @EngineerHamzieyPosted over 2 years ago

    Hi Amoh Prince, you have done a great job 👏👏 Here are my suggestions concerning your accessibility: *Try using this color for the image overlay hsl(278, 100%, 35%); and give it some opacity you can convert it to rgb so that you can use rgba • make sure you add lang="en" as an attribute to your html tag. I mean use <html lang="en"> instead of ordinary <html> • everything except the .attribution should be contained main. I mean use <main id="root"> instead of <div id="root"> • and .attribution div should be contained in a <footer> <div class="attribution"></div></footer> I think all the above suggestions should solve the accessibility issues •
    • the mobile view isn't as recommended, I guess you did it the way you like 😊 here are my suggestions concerning that: • for the heading: I think it's text-align property should be centered..... text-align: center; *you stats should also be centered Hopefully, I'll check the remaining part and get back soon

    1
  • Finney•3,030
    @Finney06Posted over 2 years ago

    set you flex direction for your mobile design to be column reverse

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord