Responsive Insure landing page using HTML SCSS and js (Desktop first)

Community feedback

• 

  Talha•120

  @TalhaAmjad0034Posted over 3 years ago

  Thank you soo much for your feedback, I will not repeat these mistakes from now on. ✨

  0
• 

  Dinesh•1,115

  @Dinesh1042Posted over 3 years ago

  Hello, Talha!👋 Fantastic work on your first challenge, Here are my few suggestions

  • When you are trying to apply transition property for display:none to display:flex, transition properties do not work. The reason is display:none property used to remove element from the dom. display:flex property is used to make flexible box layout it cannot be partly displayed. That is why the transition property does not work. You can use keyframe animation @keyframes navAnimation{0%{display:none; opacity:0; } 1%{display:flex; opacity:0;}100% {opacity:1; }}
  • another way is using transform property set transform:translateY(-100%) property in mainMenu this moves mainMenu out of the screen. When the nav is in the active stage change the transform property to transform:translateY(0).
  • Consider using the h1 element as a top-level heading only the reason for that is h1 elements are treated as top-level headings for many screen readers.
  • Your .links should be accessible for screen readers use <a href=""></a> tag for all your social link and Add some aria-label for your .links. This attribute is used to define a string that labels the current element. In your case these anchors have icons inside so screen readers users won't know what it is.

  Wish you Happy Coding!💪

  0