Skip to content
Submitted 6 months ago

(somewhat) Animated Planet-Fact Page w/ HTML, CSS & JS 🪐🌠

Koda👹•3,830
@kodan96
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Planets fact site
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Made with:

  • HTML 🦴
  • CSS 🎨
  • JS 🤖
  • I used jQuery and GSAP libraries 📚📚
  • used postCSS to ensure browser compatibility 💯
  • mobile-first workflow 📲📲
  • added some animations to make the page more dynamic 💨💨
What specific areas of your project would you like help with?

As always, if you notice anything, you know what to do 👇👇

Community feedback

  • Md Mazhar Ali•440
    @Mazhar1857Posted 6 months ago

    The hovering effect is not smooth. I'm not sure, but it may be because of left: 50% and transform: translateX(-50%). Instead, you can use left: 0. I haven't tried it yet because I need to download your code to check if it is working.

    Marked as helpful
    1
    Koda👹•3,830
    @kodan96Posted 6 months ago

    @Mazhar1857

    it surely works like that, but I did it on purpose. but thanks for the feedback tho 🙌

    1
  • DaniNewAcc•340
    @DaniNewAccPosted 6 months ago

    Now i don't know how you build all the btns like overview, internal structure and surface geology but one thing that can be improved is to redirect the user to the information he has clicked not only by clicking on the name of the info but clicking on the container of it. Anyway, it is a very good project, well done.

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

    @DaniNewAcc

    yeah, I realized I f*cked up the buttons, but I was lazy to fix it 😩😩

    and thank you for the compliment, appreciate it🙌

    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