Mobile First approach HTML, CSS, JavaScript

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

ANIMATION 🟡:

• Wow, the outcome of solution is amazing and the code is structured well also. But the part needs to be improved is to remove the animation of the illustration oscillation on devices where the users set their animations preferences to none

• The prefers-reduced-motion media query in CSS allows you to target users who have expressed a preference for reduced motion on their devices or browsers.

• This is particularly useful for accommodating individuals with motion sensitivity or vestibular disorders. You can use this media query to adjust your CSS styles and provide a more comfortable experience for such users.

• Example:

/* Default styles */
.element {
/* your default styles here */
}

/* Reduced motion styles */
@media (prefers-reduced-motion: reduce) {
.element {
/* styles for reduced motion here */
}
}

• When a user's device or browser indicates a preference for reduced motion, the styles inside the @media (prefers-reduced-motion: reduce) block will be applied, overriding the default styles. You can customize the styles within the media query to suit your specific requirements, such as reducing or removing animations, transitions, or any other motion-related effects.

• It's important to note that the prefers-reduced-motion media query is supported in modern browsers, So we don't wanna worry to implement this method on our solution

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!