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

Responsive Space Tourism Website made with Vite+React

DaFlusher 350

@DaFlusher

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


It was quite a struggle to get the background images to align properly, even with the background said to no-repeat, there were still some grey areas of repeating images. I tried to keep the code DRY by using props and hooks to create reusable components. The height of the side navigation also looks weird in some places. I think it comes from the fact that all the main navigation pages received a page layout component which contained preset styles for navigation. With each of the pages having different heights, 100% no longer worked. I tried using the height: calc(100vh + extra pixels from the navbar), 100vh, 100%. None produced a uniform height for the side nav. In future projects, I would definitely try another approach. Any advice on best practices?.

Community feedback

@theooow

Posted

Hey, you can use background-size: contains; to fixes your background ! Good job

0

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