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

Multi-page website using flexbox, CSS grid and javascript

@oppahero

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


In this practice project, I had some trouble resizing images depending on the height of the container and applying opacity/blur on a container without affecting the elements inside them.

For example, on the team page I couldn't find a way to apply opacity to the background image

Feel free to give me any recommendations

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Your site looks great. One minor bug I noticed is that on desktop, when you go to the Destinations page and then click on of the options (moon, mars, europa, titan) the navbar jumps up to the top of the page. Pretty sure you didn't mean for that to happen.

Also, to answer you question, if you want to apply blur to the background image, you'd have to use filter blur on whatever element you used to insert the background image. For example, your destinations page uses the body tag to insert the background image. So you can add something like: filter: blur(10px) to the body tag.

Hope I was able to help 👍

Marked as helpful

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