Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor.

Table of contents

• Overview

  • The challenge
  • Screenshot
  • Links

• My process

  • Built with
  • What I learned
  • Continued development

• Author

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

Links

• Solution URL: Solution URL
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Vanilla Javascript
• Flexbox
• Mobile-first workflow

What I learned

• Integrating animations into the code can impact its behavior. After importing the animate.css library, the page dimensions noticeably increased. However, upon removing the imported animations, the pages reverted to their original width and height.

Continued development

My focus will be on implementing dynamic routing, incorporating delightful animations, and implementing lazy loading for continued development.

Author

• Website - Benedicta Onyebuchi
• Twitter - Benny_dicta1