Skip to content
Submitted over 3 years ago

Huddle Landing Page // flexbox | mobile-first | responsive

Anosha Ahmed•9,300
@anoshaahmed
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Would appreciate any suggestions to improve.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Rohit•330
    @Rohitgour03

    You have done a nice job there 👍, I really liked it 😍, but one thing that I noticed was that at some point when it crossed the media query, you have set a certain width to the mockup image which is causing the image to squeeze, and maybe you don't want that your image to get distorted. One thing you can do is to put that image in a container. Everything is just fine and cool. Hope you will find it useful. 👍

    Marked as helpful
  • Afzal Khan•30
    @Khn-Afzal

    Nice :) The only thing which I was noticed by looking at your CSS is that you can shorthand your background property, rest all looks good, and seriously I get to know most of some new CSS selectors, properties which I aint aware of... :) :)

    Marked as helpful
  • Elroy Toscano•630
    @elroytoscano

    Great job at the pixel perfect design. While you've covered almost every aspect of the design, you may want to place the social media icons inside of an unordered list "<ul></ul>" as a list item <li></li> as it would be more semantically correct.

    Hope it helps.

    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    1-When the first media query hits there is a an overlapping between the resigter button and social icons, it's like one pixle after your media query hits going form mobile to desktop.

    2- Since you are already using aria-hidden to hide the icon for assitive technologies it would be nice to give them a way to make sense of it thus making the icons more accessible with aria-label.

    Keep coding :=)

    Marked as helpful
  • shawky sobhy•340
    @shawkysobhy

    This comment was deleted over 3 years ago

  • Kunal Munda•200
    @ryu-kamiski

    I really love ❤ all the solutions you have posted and how pixel perfect and so close it to the design. It's just amazing.

    And if you don't mind I have a few questions in mind. Please do answer if you have time for it.

    1. How do you make it so close to design and pixel perfect? 👌 I have seen the code of this solution on Github and was wondering how the numbers were in decimals and even in three decimal digit numbers.
    2. Also if have read it till here then please do share your process in detail like what you do first ; or if you use naming convention like BEM.

    Thanks if you have read till here 📌 and happy coding. 😁

  • abderrahim•155
    @abderrahim-alougane

    that's a wonderful job keep coding ^_^

  • Jaycee Altamia•330
    @simplyJC

    I was amaze that you have done the design perfectly as shown on the screenshot. Amazing! Great job 👌 😁.

  • .dela•20
    @delalluyah

    Wow! Amazing

  • MUHAMMED ARSHAK K V•50
    @arshaqkv

    pixel perfect design...keep going ;)

  • Harmanjot Singh•985
    @arkharman12

    Good one! 👏

  • Ilkin Mammadli•180
    @ilkinm03

    Nice job! Can I follow you on GitHub. I want to see more wonderful works!😇

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