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

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

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!💪