Stats preview card component | Responsive | HTML & CSS

Community feedback

• 

  Julian Krüger•100

  @juliankruger

  Posted over 3 years ago

  Hi Tushar,

  this might look as much but trust me, it's not! The second paragraph is more important and easy to fix.

  Your design looks really good and it's close to the challenge. The image is a bit stretched and with varying screen size it gets squished. (Looks fine on the two targeted screen sizes, though) A possible solution is to use the image as a background-image in CSS. With background-blend-mode you can also take control of the coloring a bit more and with background-position you can control the position.

  Anyway, the more important issues at hand (that are also way easier to fix) are the Accessibility and HTML issues in your report.

  Accessibility: That div at the bottom should be a footer, it helps the semantic structure of the page and boosts accessibility.You also used the <main>-tag, that is nice!

  HTML: The article tags are misused as stated in the report. This is some data that is for itself just a single statement, it doesn't contain a heading. An article should be something that could be viewed on its own completely, like the whole card for example - with a heading and more content. But on the upside: You didn't fall into the trap turning the big texts of the data into headings. These are maybe paragraphs or items of a list of features. Wrapping the "1k+" and the "companies" in one tag was the right move, but the tag should be a <p>- or <li>-tag in my opinion.

  I hope that helps, have a great day!

  Greetings!

  12
• 

  Ya.•50

  @Ya911

  Posted over 3 years ago

  nice

  11
• 

  Aakash Verma•9,500

  @skyv26

  Posted over 3 years ago

  Hi! Tushar, I hope you are well and good. I gave few feedback on your work already and now I again I am going to tell you about your design. You made it really well. As you can see you are pretty close to the preview design. But still I would say focus on detailing. Like 12M+ there you used small letter 'm'. Why it is so important to focus on this little thing ? Answer is to test your skill on CSS. Now I am going to tell you some other issue .

  In mobile view your left container text is going little bit towards right handside, in short, not aligned to center hoizontally. And I found problem below:

  .left {
      background: var(--Dark-desaturated-blue-cardbg);
      flex: 1;
      margin: 10% 0% 10% 10%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      padding: 5% 0% 5% 5%;
  }
  

  you can see you missed adding 5% and used 0%.

  padding property structure.

  padding: TOP, RIGHT, BOTTOM, LEFT;

  just use

  padding: 5%; and your text will be in center position

  I hope you understand and solve your issue. Again I would say if you really wanna get client then focus on your skills.

  Good Luck

  11