Skip to content
Submitted almost 3 years ago

Huddle LP w/ Alternating Feature Blocks (Vanilla CSS + Custom Logo)

Lucas 👾•104,160
@correlucas
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,340
    @elaineleung

    Great work Lucas, as always! Really cool logo, and I remember seeing it on the other Huddle landing page you did (I think it was there) but I only noticed the changing color with this logo, which is really nice and clever. Anyway, I really only have one quick comment here based on what I noted when looking through the site: for the sections with a border around the section when hovered over, I probably would just keep things as they normally are, as in, I don't think I'd add a hover style with the section, as having a color change for the border would most likely suggest interactivity, which isn't the case in the sections. Well done once again!

    Marked as helpful
  • Rodrigo Pires•410
    @rodrigompires

    Hello Lucas. I tested the responsiveness of the page, and verified that between 490px and 421px the Try it Free button is deforming it and overlapping the logo a little. Another point I noticed is that even at this screen size, the first Get Started For Free button is aligned to the left and the other elements (except the footer) are aligned to the middle. I hope it helps. Hugs.

    Marked as helpful
  • aDev•280
    @Senkuu-Midoriya

    Hey Lucas, amazing website that you have built, I especially liked your logo affect. It is amazing how your are able to make the websites designs even better. If you don't mind, how did you get the svg to animate, and how did you format your code to be able to do that. I am a newbie and don't have much experience yet, and seeing you do such amazing things is jaw dropping to me. Any answer would be appreciated from a knowledgeable person like you.

    If you don't mind me saying, I noticed that the middle section of your webpage moves a bit when it is hovered over, I am not sure if this was intentional but it is a very slight thing.

    Thanks for sharing you knowledge with us, aDev

    Marked as helpful
  • Alexander Charles Bonney•530
    @alexanderbonney

    The website looks great. Loving the modifications you added.

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