Submitted over 2 years ago

Huddle landing page

VINÍCIUS DOS SANTOS VERISSIMO• 250

@viniciusdsv93

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello guys. Greetings from Brazil. I would appreciate a lot if you give me a feedback about this one. By the way, can anyone tell me how do i get icons that can change their colors in a hover state? The icons i got ate fontawesome have just one color. Thanks!

Community feedback

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello VINÍCIUS ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Must use h2-h6 elements to add identifying headings to all sections.

happy Coding😀

Marked as helpful

VINÍCIUS DOS SANTOS VERISSIMO• 250

@viniciusdsv93

Posted over 2 years ago

@Crazimonk in that case, i used only 3 sections. The first used an img for the logo and the big picture, the second used a text, so i used a h2 and a paragraph, and the third used icons for the social media. Please, where i could place other headings?

bikeinman• 1,080

@BikeInMan

Posted over 2 years ago

Nice work, again ! Works well in both sizes.

About icon colors, you have used them as images, so I don't know. I too have used fontawesome, (a little older version) as text element like below <span class="icon fa fa-facebook"></span>

Since it is a font, I was able to style them as a text element with regular color . But as an image tag, I don't know yet. If it were svg, may be you could have used fill property. I too am struggling with svgs, please let me know if you find a solution.

Another unrelated suggestion You can use max-inline-size: 20ch; on h1 and p to adjust the line size, so that you can break the text at a desired location, getting you closer to the design.

Hope this helps. Good Luck.

Marked as helpful

VINÍCIUS DOS SANTOS VERISSIMO• 250

@viniciusdsv93

Posted over 2 years ago

@BikeInMan Thanks a lot! Yes, i looked at other solutions, but almost everyone uses de CSS' ::before, and i don't understand how. About the max-inline-size tip, thanks, i'm going to give it a try!

Please log in to post a comment

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