Skip to content
Submitted almost 4 years ago

HTML/ CSS

Mike Schmidt•90
@Schmidt217
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

I'd love to get some feedback on my code if anyone has any!

Community feedback

  • Amir Jacobs•165
    @Amir-JacobsPosted almost 4 years ago

    I love the fact that you used "preconnect" on the google font.

    There's are a few things I'd do differently:

    • I'd avoid using position: relative and position: absolute if I can.
    • I would change width: x% to width: 100%; max-width: x% as this helps with responsive design ("x" being the width you want).
    • something is making your body too tall -- it probably has something to do with your use of position, so I'd use overflow: hidden on the body to make it not scrollable.
    • I would put the stylesheet <link> elements after the title and the script elements at the bottom of your <body> element.
    • I'd remove the .attribute styling and move it to your stylesheet.
    • I'd add a subtle transition to your buttons when hovering by using transition: 0.3s ease all.
    • I'd put the <img> element in the <div class="container"> too.

    You're doing amazing so far. Keep it on! :)

    1
    Mike Schmidt•90
    @Schmidt217Posted almost 4 years ago

    @Amir-Jacobs

    Thank you for your suggestions! I tried them out in my VSCode and it seems to have helped. Thanks for the feedback!

    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