Skip to content
Submitted almost 3 years ago

Space Tourism Website

#accessibility#react
Karishma Garg•1,010
@karishma-dev
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

Hey Guys, I just finished the Space Tourism Multi-page Website Challenge.

I am not able to understand how to set the active state of explore button. Any advice for this? I also would like to know if there is a better way to use images without using lots of import statements and if the code could be cleaned up a little bit more?

Thank you!.

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Karishma, great job!

    Here are a few tips for improve your code:

    • You can use pseudoelement :before or after with hover for the active state of explore button -> read here](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
    • using <hr> for the line of navbar isn't the best way because this tag have a semantic meaning... in this case use border property because this line is decorative
    • use semantic html like header to wrap nav and main tag to wrap the content of page and improve the Accessibility
    • the mobile menu illegible because firefox doesn't support the css backdrop-filter property, you can add an exception in firefox by putting a solid color there only through @supports, look here: backdrop-filter and @supports

    Overall you did well 😁 Hope this help!

    Marked as helpful
    0
    Karishma Garg•1,010
    @karishma-devPosted almost 3 years ago

    Sure! I will fix all of these. Thank You!! :)

    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