Frontend Mentor | Hubble landing page with alternating feature blocks coding challenge solution

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,835

@vanzasetia

Posted almost 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

Hubble landing page with alternating feature blocks

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community