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.
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
Desktop Layout (1440 X 900)
Tablet Layout (768 x 1024)
Mobile Layout (375 x 667 ~ 850)
- Solution URL: Github Respository
- Live Site URL: Hosted on Netlify
- Semantic HTML markup
- CSS custom properties
- Flexbox
- Mobile-first approach
- Plain JavaScript
- Close the app drawer (aside from the close icon) for any touches outside it (mobile view)
- Optimized html structure for easier styles implementation for each respective device's screen size
- Appealing UI for the most common device's screen size
- Smooth and elegant animation
- Design accuracy from the given Figma design file while adding personal touch to the project
- Enable animation to be triggered when selecting a different content for each page
- Prevent animation and content changes when attempting to select the already selected content
- Allow the images to be updated first before the animation starts
- Name: Nelson Aquino
- Website - Github Profile
- Frontend Mentor - @nelsonaq
- Email - chibuds217@gmail.com