Skip to content
Submitted 4 months ago

Responsive landing page with single introductory section using Grid

MarinaPerezR•120
@MarinaPerezR
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

What are you most proud of, and what would you do differently next time?

I am not very happy with the final result, but I struggle to position the elements.

What challenges did you encounter, and how did you overcome them?

I always struggle when it comes to going from the mobile preview to the desktop one.

What specific areas of your project would you like help with?

Any kind of review or feedback would be nice, I want to know my mistakes.

Code

Please log in to post a comment

Log in

Community feedback

  • Polariz625•270
    @Polariz625

    Nice job! I just finished this one and was suffering haha.

    My advice for this challenge is that you should use grid and flexbox for everything. instead of using margins for every element within a container, you should use "gap" to move everything in one go.

    Also in your <div> "container" I can see you used grid. the img and the description were already in their own box of the grid. for the icon container you could have used "grid-column: span 2" for it to use two column spaces at the same time and finally "justify-content: flex-end" to move the icons to the right.

    sorry for the long answer,

    greetings from a noob :D.

    pds: do you speak Spanish by any chance? maybe i can explain better in my native tongue.

    Marked as helpful

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