First solution using CSS Grid

Community feedback

• 

  Bob•105

  @robakersonPosted over 3 years ago

  Few quick changes I would make:

  For the numbers on bottom you used H4, I would use H2 as those numbers are not big enough for you.

  Also, your h4 & p elements have default margins that are pushing your numbers too far from the description. You want "10k+" and "Companies" to be a little closer. I would remove the bottom margin from those H elements and reduce the top margin on the p elements to fix that.

  I would add a "line-height" property to your p elements as well to add space between lines on your middle paragraph. Maybe "line-height:2"?

  Compare the edges of your boxes to the example, you want rounded edges so you are looking for the "border-radius" property. I would experiment with that property to figure out how it works and how you could use it to round the edges of your components.

  Marked as helpful

  1

  ---

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @robakerson Thank you for viewing my solution. Very helpful. I will make the changes

  1

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @robakerson Please i have updated my code kindly review thanks

  1

  

  Bob•105

  @robakersonPosted over 3 years ago

  @albertnutifafa Looks like Grace is already giving you a lot of help. She's better at this than I am, I would heed her advice!

  1

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @robakerson Thanks you 🙏🏻

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  Even if you struggle with the responsiveness, try to get this looking much closer to the design with the fonts, spacings, sizes etc if you can

  Marked as helpful

  1

  ---

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @grace-snow oo ok Thanks.I will do that

  0

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @grace-snow Please i have updated my code kindly review thanks

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @albertnutifafa this is still quite a way off the design I’m afraid. Slow down and be methodical.

  First address the html. Those h2s don’t make sense as headings. They are numbers to be read with the word. How would you write this content in a normal document? There would be 3 bullet points I expect. That means this must be an unordered list with three bullets, one for each stat

  Next start to address …

  • removing brs. Use margin for vertical spacing
  • capitalisation. Use text transform not html capitals
  • font family. Follow the style guide
  • mobile styles. Only one media query needed
  • max widths and/or flex basis for flex children; or with css grid let the grid template choose how big it’s children should be
  • border radius
  • spacing
  • look up blend modes for the image and make display block

  Hope this helps

  0

  

  Albert Nutifafa Dovlo•25

  @alb1nutPosted over 3 years ago

  @grace-snow Thank you. I really appreciate the help . I will slow down and do the change to get it right.🙏🏻

  1