Stats Component with CSS Grid and Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @j-hutchison ,

  I have some suggestions regarding your solution :

  • There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution)

  • For class="stats-section", it would be better if you use an unordered list <ul> with 3 items for the stats.Numbers don't make sense as h2s.

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • I wouldn't use <section> for each half . Read more aout usage notes

  • To improve the image overlay effect you should use blend modes. yuo can use background color, Use mix-blend mode and opacity to make it more like the design. Also you would never want to set the height of the element. Let the content inside the card element dictate the height of it .use only min height on the image half

  Check the responsiveness again .

  Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  HutHut•310

  @j-hutchisonPosted almost 3 years ago

  @PhoenixDev22 Thank you for this feedback and particularly for your detail on the which html elements to use based on the content being displayed, this is something I sometimes take for granted a bit, but I will pay particular attention to this on future challenges!

  Thank you again for taking the time to review my code and solution, it is really appreciated!

  1
• 

  Deepak Parmar•490

  @deepak-parmarPosted almost 3 years ago

  Hey @j-hutchison,

  First, the page and the image already looks so great. 👌

  As for the image, to get close to design, try...

  • adding image using <img> tag instead of applying as background.
  • give image's parent element (the section tag in your case) Soft Violet background color.
  • apply mix-blend-mode: multiply to blend the image with Soft Violet given to its parent
  • and set the image's opacity to 75%

  Someone helped me out on this and it did the trick for me, hope it works for you. 👍

  Marked as helpful

  0

  ---

  

  HutHut•310

  @j-hutchisonPosted almost 3 years ago

  @deepak-parmar Thank you for this feedback!

  I haven't used blend modes yet, so I will definitely check this out to see how they could be applied to my solution, thanks again!

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation complete the challenge😊🚀, If you want to reduce the accessibility change this code:

  <section class="section-image"> to <div class="imageContainer"> ( Used div Container)

  Marked as helpful

  0