Skip to content
Submitted over 2 years ago

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

Lucas 👾•104,400
@correlucas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

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•38,120
    @AdrianoEscarabotePosted over 2 years ago

    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,400
    @correlucasPosted over 2 years ago

    @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

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