Skip to content
Submitted almost 5 years ago

Huddle Landing Page with pure css

INexplicableName•40
@TheLiberal
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

This time I had trouble with the mockup image as I didn't know wheter it should be put in a container representing the left part of the bigger flex container or just sitting there alone. I settled with the latter, which later presented a problem with widths of 1100px+ until a certain point. If anyone could explain that to me and give me any tips regarding anything that's still wrong about this implementation, I'd be very grateful. Also I made the same mistake as the last time, because I styled some element/s using IDs and now I know that I shouldn't.

Code

Please log in to post a comment

Log in

Community feedback

  • Roman Filenko•3,335
    @rfilenko

    Hi Błażej, good job, but with a few corrections can be a lot better. I was wondering about choices you made, so here a few tips for improvement:

    • please don't use !important, id's you already mentioned;
    • add max-width to .container and center it;
    • fix img distorted proportions(max-width: 100% for all imgs, object-fit:contain as option for big one image);
    • why social icons have absolute position?
    • what the purpose of address in footer? Hope this was helpful feedback for you, have a good day.

    Keep practicing, Roman

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Błażej Gułaj! 👋

    Nice work on this challenge! 👍

    I suggest,

    • Decreasing the space between the hero image and the text on the left side of the screen.
    • Making sure that the image scales (not stretches) when the page is resized (you should be able to do this by setting either one of the width or height properties to auto).
    • An idea for how to place the image would be two create two containers (both of which take up 50% of the available width of their parent container) put the image in the left container and make sure it fills up 80-100% of that container's width and put the text in the right container like you've done.

    Keep coding (and happy coding, too)! 😁

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