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

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay