Skip to content
Submitted about 2 years ago

Huddle Landing Page

Glenda Joyce Reed•1,260
@Glenda9031
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

Ok. Either I'm getting better with coding or this one was easy! I welcome any and all feedback! Thank you!

Community feedback

  • dgjenni2•320
    @dgjenni2Posted about 2 years ago

    It appears that the social media link images are broken on the web deployment. This is likely because the src fields do not start with "./" which allows the code to know to start looking from the current directory aka folder and then looking for an images folder with the specific social media svg file.

    Marked as helpful
    0
    Glenda Joyce Reed•1,260
    @Glenda9031Posted about 2 years ago

    @dgjenni2 Thank you. This time, there wasn't any social media images included with this challenge so I copied them from another challenge and pasted them into this challenges' images folder. I will apply the feedback suggestions and resubmit. Again, thank you so much for your feedback - it is very appreciated!!

    0
    Glenda Joyce Reed•1,260
    @Glenda9031Posted about 2 years ago

    @dgjenni2 Thank you. This time, there wasn't any social media images included with this challenge so I copied them from another challenge and pasted them into this challenges' images folder. I will apply the feedback suggestions and resubmit. Again, thank you so much for your feedback - it is very appreciated!!

    0
    dgjenni2•320
    @dgjenni2Posted about 2 years ago

    @Glenda9031 Cool.

    If there's icons like that in the future that aren't in provided sample, it may be necessary to import an icon library to help complete the project. Personally, I use the FontAwesome icon library (See Here --> https://fontawesome.com/start) which has plenty of free, fair-use icons you can use for coding projects. There's multiple options on how to use it and you can decide which is the most convenient for you.

    Hope this can help you in future projects

    Marked as helpful
    0
    Glenda Joyce Reed•1,260
    @Glenda9031Posted about 2 years ago

    @dgjenni2 I forgot about Font Awesome!! Again I thank you and really appreciate your feedback!!

    1
    Glenda Joyce Reed•1,260
    @Glenda9031Posted about 2 years ago

    @dgjenni2 I forgot about Font Awesome!! Again I thank you and really appreciate your feedback!!

    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Hey @Glenda9031, great job on this project!

    Some suggestions to improve you code:

    • Currently, your background is repeating itself. To fix add the following your <body> element.
    body {
    min-height: 100vh;
    background-repeat: no-repeat ;
    background-size: cover;
    background-position: center;
}
    • To center your content to you page, add the following to your <body> element.
    body {
    display: flex;
    justify-content: center ;
    align-items: center;
    flex-direction: column ;
}

    This will then require some minor position changes to other parts of your content.

    Happy Coding!

    Marked as helpful
    0
    Glenda Joyce Reed•1,260
    @Glenda9031Posted about 2 years ago

    @vcarames Ok. I didn't even notice that the background-image was repeating! Thank you so much!

    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