Skip to content
Submitted over 3 years ago

Responsive landing page using CSS flexbox and grid

Mohamed•325
@MohamedBehhar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hy again, Hope you all having a good day :D here's my solution for this project, I really didn't like the footer on the original design so I made some changes to make it more beautiful, I also use "white smoke" for the body background instead of using white. My question: Should I use @media queries on the bottom for all elements, or should I use several @media for each one, which way it's more professional?

Community feedback

  • karenefereyan•375
    @karenefereyanPosted over 3 years ago

    Hey soqk, lovely work here. On mobile devices, the header could use a little more spacing to distinguish it from the nav. I'd say the same for the cards and footer too. Adequate spacing enhances legibility. Great work. Keep coding. Cheers!!! 😉😉😉😉

    0
    Mohamed•325
    @MohamedBehharPosted over 3 years ago

    @karenefereyan thank you a lot for your comment, your right, I have to pay more attention to the spacing on my designs.

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, great work on this one. Though the desktop layout is somewhat smaller than the original but the mobile state on the other is fine.

    Some suggestions would be that:

    1. You shouldn't be nesting a tags inside button, you could just remove that button and make the a tag look like a button and it is way more natural and suited for links. So changing all of the button on your layout into a tags only will be a lot more better.

    2. Your huddle logo needs to have more descriptive and meaningful alt text and not just "logo". Also on the other images, if can be, then create more good alt text^

    3. Also, on your header tag, the background-image is not rendering properly. You used background: url(/images/bg-hero-desktop.svg) no-repeat; which doesn't really work on github. Instead, you should use background: url(../images/bg-hero-desktop.svg) no-repeat;, I added ../ this means go up by one level.

    4. Your footer social media icons should be wrapped inside a tags, since they are links right, so they need to be wrapped around.

    Still, good job on this ^

    0
    Mohamed•325
    @MohamedBehharPosted over 3 years ago

    @pikamart oh my god this is really helpful, thanks a lot. I will rectify my code, and thank you again.

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    ⭐⭐⭐⭐⭐ Looks great and nice how you changed the color of the huddle logo in the footer with the CSS filtering

    0
    Mohamed•325
    @MohamedBehharPosted over 3 years ago

    @palgramming first of all I want to thank you for taking your time and reviewing all my challenges. To be honest, I struggled to do that, but after some research, I found the solution on StackOverflow and it works.

    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