Mobile first solution using Html Css and Scss preprocessor

Community feedback

• 

  Remus D. Buhaianu•3,125

  @remusbuhaianu

  Posted over 3 years ago

  Congratulations on completing the challenge, Ayman!

  I had a look through your code and final solution and I have a few suggestions / observations that I hope will be useful to you. In no particular order, here they are:

  • Card is not centered vertically. You can center vertically and horizontally a div through a variety of methods. One I personally use is flex display

  • There are still a few places where you've used px. You should replace those with relative units such as rem / em / % / vh / vw depending on the property in which it's being used

  • You can also achieve the overlay effect using ::after and ::before

  • Add a bit more space at the bottom of your .main-text element and also lower its font-size

  • The two icons are not vertically centered with their corresponding texts

  Overall, you've done a nice job. Hope my suggestions will prove useful.

  Looking forward to seeing more of your projects here on Frontend Mentor!

  00

  Marked as helpful
• 

  Melwyn•250

  @melwynt

  Posted over 3 years ago

  Hi there!

  Minor tweaks:

  • it looks like the card is not centered vertically.
  • you could use some transitions with some delays to change the state of your elements in a smoother way
  • and it looks like there is a small warning in the report that could be fixed

  All in all, good job 👍

  00