This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Users 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

explore button's active state

when you click the button, you will see the destination page

destination page

nav hover and active state

crew page

nav dot's hover and active state

technology page

nav hover and active state

• Github

• Live Site - github pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React - JS library
• animate.css - For styles

• image path with react

  I wanted to use an image path from local json file.

  "png": "/images/destination/image-moon.png"

  since it is not importing, I couldn't get the image.

  solution is using PUBLIC_URL.

  <img src={process.env.PUBLIC_URL + pic} alt={title} />

• animation

  applying animation on the images

  AOS is the one I tried at first.

  I have different image with every tab changing,

  and AOS are not applying animation on tab changing.

  So, I found animate.css.

  This one also doesn't work like I wanted.

  But I could change with javascript.