Skip to content

mohammadrz003/space-tourism

Repository files navigation

Frontend Mentor - Space tourism website solution

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.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

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

Screenshot

Home page

Home page

Destination page

Home page

Crew page

Home page

Technology page

Home page

Links

My process

Built with

  • React - JS library

  • React Router - JS library

  • Semantic HTML5 markup

  • CSS module custom properties

  • Flexbox

  • CSS Grid

  • Mobile-first workflow

What I learned

I learned how to change the background image based on the route we are on

  1. First we need to get the route address where we are
const  path  =  useLocation().pathname;
const  location  =  path.split("/")[1];
  1. Then we give the element the name of the root as a class
<div  className={`backgroundWrapper ${location}`}>
</div>
  1. Finally, we use the root name as a class in css and apply our desired style
.backgroundWrapper.destination {
	background-image: url("*image url*");
}

Continued development

I want to use scss in future projects to make development faster and easier and I plan to do projects that are much more complex

Useful resources

  • React-tabs - This library helped me a lot to create tabs