DEV Community

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

Posted on • Edited on

5 2

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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)