Skip to content
Submitted over 2 years ago

Hubble landing page with alternating feature blocks

Lacey E•110
@laceeder
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

this one was a little challenging but I enjoyed it!

I couldn't figure out how to get the logo in the footer to be completely white, just the text is white. positioning the "ready to build your own community" card was also a pain.

I feel like I could've done this with less code, it feels a little messy. feedback and tips are welcome!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Lacey! 👋

    Good effort on this challenge! 👍

    For the white logo,

    • I would recommend creating a new file called logo-white.svg.
    • After that, you can copy-paste the SVG code from the original logo file.
    • Then, find all the fill attributes and then change the value to a white hex color code (fill="#ffffff").
    • Lastly, change the file path on the img element to the new SVG.

    Some suggestions from me.

    • The alternative text for the logo images should only be the company name. I would not recommend telling the exact look of the logo.
    • For the "Try it free" button and the other buttons as well, wrapping an anchor tag with a button tag is not valid HTML. You can check it by yourself by using ]Caninclude website](https://caninclude.glitch.me/). So, I would recommend choosing either they should be buttons or links.

    That's it! Hope you find this useful! 😁

    Marked as helpful
    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