Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Responsive multi page site, CSS, JS

accessibility, jquery
Pedro•60
@pedrognrd
A solution to the Space tourism multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Following with the great tutorials by Kevin Powell, now it was the turn to build this Space Tourism site. I followed his lessons on Scrimba (https://scrimba.com/learn/spacetravel) and after finished them there were a few issues to develop and fix.

· Technology page wireframe: Continuing with the grid system used on the other pages of the site, here we found a bit more complicated design as the tab list was vertical for desktop sizes and horizontal for tablets and mobile devices.

· Dynamic image in Technology page: There were a portrait and landscape version of the images to be displayed for every tab content so I played with the "display:block/style" to show the appropriate version.

· Destination page, Titan content: I do not remember if on the Powell's lessons that was fixed. Anyway, I detected that the content of this slide was not visible, the id of the content was "europa-tab" instead of "titan-tab".

And basically that's all. Not a very complicated exercise but very interesting especially using the grid system.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Pedro•60
    @pedrognrd
    Posted over 1 year ago

    I do not find documentation to fix this error detected in the HTML validation report

    Message: Element "span" is missing one or more of the following attributes: "role". Code: "vigation"><span class="sr-only" aria-expanded="false">Menu</"

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub