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

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

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

• Solution URL
• Live Site URL

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• A11y & aria Standards
• Gsap

This project was created with the main goal is to focus on accessibility. I have implemented many new principles in this project such as:

• the Hidden Link that skip the navigation menu

<a href="#home" title="click Enter to skip navigation menu"
	>skip to the content</a
>

• using aria-controls & aria-expanded whit the navigation menu button

<button
	type="button"
	aria-controls="main-navigation-list"
	aria-expanded="false"
	class="mobile-nav-toggle"
></button>

• the visually-hidden class

.visually-hidden {
	position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

• using Gsap to make easy animations

gsap.to('ul[date-visible="true"]', {
	duration: 0.5,
	xPercent: -100,
});

• using the Json file more
• using React
• A11y & aria Standards
• Gsap & gsap ScrollTrigger

Check out my latest previous articles:

• how to make an Indestructible button?
• Top 5 Icon websites for devs and designers!!!
• 30-Day React Learning Journey!

• professional links:
  • Twitter
  • LinkedIn
  • GitHub
• Hire me:
  • UpWork
  • Freelancer
• Blog:
  • HashNode
  • Dev.to
  • Medium