Skip to content
Submitted almost 4 years ago

Huddle landing page with single introductory section - HTML & CSS

Andy Curley•30
@racurley
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

Third newbie project. I tried to learn and apply BEM naming convention (mostly). Would appreciate any commentary on that. I thought this would be pretty easy but spent a lot of time getting the positioning and sizing correct. I realize the shadow around the button is bit dark and can fix that. The Font for the title seems heavier on mine than the designs. Not sure how to fix that.

Community feedback

  • Mike Rojas•0
    @mikerojas87Posted almost 4 years ago

    Hey Andy... Nice work! The time spent getting it "pixel perfect" shows. I took a look at your code and all looks good there but I do have one suggestion...

    Try refactoring to use @media (min-width: <some-breakpoint>) in place of @media (max-width: <some-breakpoint>), so refactoring to a "mobile-first" approach. I don't think it's a requirement for all projects but a great technique to have in the toolset.

    Next you mentioned the heading feeling heavier on yours... I think font-smoothing is your friend here, something like this on the body tag in your css: body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } Overall it looks great! Happy coding...

    Mike

    0

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