Skip to content
Submitted over 2 years ago

Responsive Space Tourism Website (React+Sass)

kirty•380
@kirtymeena
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

It was a fun challenge, learned many new things. The most challenging parts were :

  • creating layout
  • navbar tab indicator
  • explore button

What I learned:

  • reuse of css classes
  • creating mixin in sass
  • Creating layout
  • responsiveness (mobile first approach)
  • reusing components in react

What I like about this website:

  • the way explore button came out to be is super nice
  • I really like the destination component and animation on planet ( tried it for the first time)
  • navbar underline indicator (never thought I could make that )

What I don't like:

  • background image streching on change of screen size.
  • css classes name that i wrote
  • little messy code here and there

Feedback is welcomed. :)

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted over 2 years ago

    Heyo,

    Well done on completing the challenge, it's a tough one :) The explore button looks very neat and it's nice that you added some animations! There are some bits that could be improved - mostly css:

    1. You should set a background-size: cover and background-repeat: no-repeat on your background images.

    2. You could give a max-width to you containers so it doesn't stretch out so much.

    3. One of your font-families is Times New Roman. Not sure if it's a browser default or you set it but it's not in the challenge and it looks a bit off compared to the rest of the design.

    4. Instead of some of these paragraphs you could use headings for the titles (like the technology names, planet names, etc).

    Marked as helpful
    0
    kirty•380
    @kirtymeenaPosted over 2 years ago

    @FluffyKas Hey Thanks for the feedback I'll try to fix the CSS.

    0

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