This is a solution to the Space tourism website challenge on Frontend Mentor.
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
- 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: