Skip to content
Submitted over 2 years ago

Space Tourism website REACT, REACT ROUTERV6, TAILWINDCSS, VITE, Framer

react, react-router, tailwind-css, vite, motion
XIII•790
@minibrusp
A solution to the Space tourism multi-page website challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Built with

  • REACT
  • REACT HOOKS
  • Tailwindcss
  • REACT ROUTER V6.8
  • FRAMER MOTION
  • VITE
  • Mobile-first workflow
  • https://jsonbin.io/ for API

You can also swipe left and right on touch devices ^^

Had so much fun taking up this challenge would it be nice if I had made the items from each page as a nested routes to each page? A feedback is much appreciated. Meow ^^,

Code

Please log in to post a comment

Log in

Community feedback

  • diversis•250
    @diversis

    Hello! Looks fine except for some overflow issues and layout shift. To remove overflow on main section change you can simply add css main {overflow-x:hidden}. Addressing layout shift : better render only content that changes (like text,images and their direct <div> | <motion.div> parents), but layout itself should remain unchanged. This may require wrapping each piece of content you want to animated in one more <div>

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord