DEV Community

Cover image for Frontend Mentor - Space Tourism
Nabilla Trisnani
Nabilla Trisnani

Posted on • Updated on

Frontend Mentor - Space Tourism

This is my solution to Frontend Mentor Space Tourism Challenge.

Overview

The challenge is to build out this multi-page space tourism website and get it looking as close to the design as possible.

User should be able to:

  • View the optimal layout for each of the website's pages depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each page and be able to toggle between the tabs to see new information

Links

My process

Build by:

What I learned

  1. GET data from local json.
  2. Using React Router V6.
  3. How to use AOS in React and disabled it when it's on tablet or mobile using componentDidMount.
componentDidMount() {
    // initialise AOS
    AOS.init({
        // settings
        duration : 2000,
        //disable when device width is below 800px
        disable: function() {
                    var maxWidth = 800;
                    return window.innerWidth < maxWidth;
                 }
    });
};
Enter fullscreen mode Exit fullscreen mode

Author

Top comments (0)