Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#react#react-router#tailwind-css#vite#framer-motion
XIII 790

@minibrusp

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

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 ^^,

Community feedback

diversis 250

@diversis

Posted

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

1

XIII 790

@minibrusp

Posted

@diversis hey dude thanks for the awesome advice. I'll try to refactor it. It really do look weird with those issues. thanks man.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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