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:
- HTML5
- SCSS
- Bootstrap 5
- React
- AOS for animation
What I learned
- GET data from local json.
- Using React Router V6.
- 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;
}
});
};
Author
- Frontend Mentor: @NabillaTrisnani
- Github: @NabillaTrisnani
- LinkendIn: Nabilla Trisnani
- Twitter: @NabillaTrisnani
Top comments (0)