FEM - Planet Facts Challenge - build with scss/webpack and JavaScript

Hello Frontend Mentor community

Here is my Solution for the "Planet Facts Challenge”

In this Challenge, I used ‘webpack’ for the First time and other tools like

• PostCSS
• ESlint
• Prettier
• SASS
• and appropriate loader to load the self-hosted Fonts and images.

---

The data for the content of each Planet Page gets extracted from the “data.json” with JavaScript. An put on the right place with JavaScript DOM methods.

---

I used for the First time two CSS- animation library’s

anime.js - to animate the hamburger menu button

Animate.css - to animate the transition between Planet Images and relevant text content.

Plain CSS - to animate the mobile menu itself.

I used two libraries to gain some experience in both systems

---

I tested the layout for mobile/tablets and Desktop and i tried to keep up with the figma design template as best as possible.

Maybe some of you can give me some feedback 🙂

Does load the text and images correctly on each page?

Does the animation work correctly on each page?

Are some layout issues on your Device?

Or maybe some of you have suggestions for Best Practise etc 🙂

Let me know! 🙂

I hope for your constructive feedback :) Thanks in advance.

Wish you a good day/week :D