Skip to content
Submitted 6 months ago

Space Tourism Website using ReactJS and TailwindCSS

Yoga Budiman•300
@ygabdn29
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

What challenges did you encounter, and how did you overcome them?

The most challenging things I encounter whilst doing this project is probably how to layout the pages. I think I just try to use what I have learned before to overcome the difficulty on doing the layout and occasionally I need to search for something new and make it work.

What specific areas of your project would you like help with?

I'm interested in learning how to create the hover state for the 'Explore' button on the homepage, and I'm also curious about the best approach for handling designs like this, particularly how to manage different breakpoints. I often struggle to keep the design looking good across various common resolutions, especially when the screen is wider than the desktop design or falls between smaller breakpoints. Any advice would be appreciated. Thanks!

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there!

    I'm doing the challenge rn, I did the :hover with a ::before pseudo element. you set position:absolute; on it, height and width 100%, border-radius 50% and transform:scale(1). in the :hover selector you modify the scaling to `transform:scale(1.5) and boom.

    You can set a transition on it as well if you want.

    For breakpoints there are popular ones: 768px, 1024px, 1440, 1980.. but at the end of the day it depends on your content. if it starts to fall apart around 1200px just place your breakpoint there.

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    1
    Yoga Budiman•300
    @ygabdn29Posted 6 months ago

    @kodan96 Hi to you as well! Thanks for the feedback, I'll try to implement that on my button 👍.

    So, for breakpoints, aside from the popular ones, I just need to decide by looking at the contents of my website and how they look on the web pages. I see, I'll take note of that and try to do that from now on 😀. Once again thanks for the feedback!

    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