Space Tourism Website

This is my a solution to the Space Tourism challenge by Frontend Mentor.

Requirements

My goal was to build the site to match the figma design provided by Frontend Mentor.

I had to make sure that users can experience the following:

• 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

Teachnical details

I built the website using

• Semantic HTML5
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript
• A11y

What I learned

To be able to complete this project, I learned a range of new skills:

• Extensive use of variables for color, font-size, line-height, letter-spacing, and font-families
• Create responsive margins using the "clamp" function
• Use @supports
• Apply background effect with "backdrop-filter"
• Use "aria-selected", "role", and "aria-controls"

Useful resources

Book: "Using SVG with CSS3 & HTML5" (Publisher: O'Reilly)- This is an amazing book which helped me understand working with SVG.

Live site and snapshot

Live site: Corina's Space Tourism Website