Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle LP Section (Vanilla CSS + Logo Animation + Easter Egg + BEM) 😎

Lucas 👾 104,440

@correlucas


Design comparison


SolutionDesign

Solution retrospective


👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page Section.

❓ The main struggle I had with this challenge was to position properly the background and make it full height in all breakpoints. Is correct the way I applied the background-image? Which is the best way to use SVG's? I did it right?

I added some features:

  • 😎 I recreated the logo as a SVG (this way I could animate it).
  • 👻 I added an animation on the logo (chat-box icon flip and turn).
  • 👨‍🔬 Some custom design improvements.

Happy to hear any feedback and advice!

Community feedback

Adriano 34,110

@AdrianoEscarabote

Posted

Parabéns pelo resultado, porque ficou realmente muito bonito!

Percebi que você posicionou a imagem de fundo de uma forma diferente, mas achei interessante, eu nunca pensara dessa forma, mas uma dica que já te dou é que você poderia ter colocado ela direto na main class:container já que ela engloba todo o conteúdo do site e facilitaria um pouco na manipulação da imagem pelo css.

Vi que a imagem de fundo estava quebrando quando ela chegava á 1380px e até ativar o (media-query) dos 1300px ela continua diminuindo, consegui resolver realizando o seguinte:

@media (max-width: 1440px) {.background { background-size: contain; }

eu apenas apaguei a declaração do background-size fazendo ela herdar da primeira declaração que no caso é background-size: cover;

Mas fora isso ficou tudo muito boom, parabéns pelo resultado. Gostei bastante das animações, começarei a efetuar algumas assim também huahuahu

Marked as helpful

2

Lucas 👾 104,440

@correlucas

Posted

@AdrianoEscarabote Boa, pois é, na real eu deveria ter colocado direto no body, mas quando eu fiz nem me liguei, tava tentando ajustar porque não consegui gerir as quebras quando a tela ia diminuindo, vou fazer esse ajuste do media query que você falou.

Valeu brother!

2

Please log in to post a comment

Log in with GitHub
Discord logo

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