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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

(./assets/screenshots)

Links

• Solution URL: (https://github.com/Wizzy-05/Space)
• Live Site URL: (https://space.vercel.app)

My process

Built with

• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Sass - CSS Preprocessor

What I learned

    <div className="pick-destination">
        <span>01</span>
        <p>PICK YOUR DESTINATION</p>
    </div>

    nav {
        @include flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: rgba(255, 255, 255, 0.076);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        position: relative;
    }

      {destinationsData.map(destination => {
          return (
              <span key={uuidv4()} onClick={() => handleClick(destination)} className={planets.planet === destination.name ? "activePlanet" : ""}>{destination.name}</span>
          )
      })}

Continued development

• Css Grid
• Sass functions
• React Routers

Useful resources

Note: Delete this note and the content within this section and replace with your own plans for continued development.

• Example resource 1: This helped me while routing. I'll Like to work with it in upcoming projects.
• Example resource 2 - This really helped me as this is my first project with sass.

Author

• Frontend Mentor - @Wizzy-05
• Twitter - @yourusername

Acknowledgments

I really appreciate my mentor Harry.