I used HTML5 and CSS3.

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Ahmad,

  A designer supplying the design would expect you to acheive the same background effect so revisit that if you can.

  This looks good on mobile portrait but breaks with content going off screen for me on mobile landscape.

  Try to find a way to allow overflow if the card is larger than screen, but prevent lots of scrolling (hide overflow) of those bg circles. (hint, a wrapper element will help)

  Hope this gives you some ideas, and we'll done for submitting your first challenge!

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Looking at the code, I have a few pointers

  • don't put media queries in a separate file. In bigger projects that will be bad for performance as it makes more server calls
  • your media queries are unnecessary in this. Let the card have one max width that applies to all screen sizes. If the screen is small it can be 100% wide anyway. If its hitting the sides of the screen, it means your wrapper/body needs padding
  • think about semantic meaning of html elements. It's not appropriate for figures like 80k to be in a heading element as they wouldn't make sense as headings. They need to be in the same element as the word after them, like a paragraph or list item. To style the number and word differently, you can use spans with classes on (inside the paragraph, wrapping each part)

  Good luck with it 👍

  1

  

  ahmad essam•70

  @ahmadEssam77Posted almost 4 years ago

  @grace-snow Hi Grace,

  I love you xDD, HAHAHA sorry I'm just so excited. This is the first time for me to receive a comment about my code. I appreciate the big effort.

  I did some modifications to my code and I followed your tips and advice. Could you check my code again?

  About the bg, I tried a lot, but I don't know the idea. I have two background images, I tried to add them by using CSS but they did not apply like the design. Another hint will be so appreciated.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @ahmadEssam77 take a look at my solution if you like, that might help. I recommend inspecting with dev tools open on the side, that may help tie the code and visual appearance of what's happening in your mind ☺

  0

  

  ahmad essam•70

  @ahmadEssam77Posted almost 4 years ago

  @grace-snow Thanks a lot Grace. Appreciate. xD

  0