Skip to content
Submitted about 1 year ago

Multi-page website using flexbox, CSS grid and javascript

María López•240
@oppahero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

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,530
    @Zy8712Posted about 1 year ago

    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

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