Skip to content
Submitted almost 2 years ago

Huddle-landing-page-with-single-introductory-section

Bentaher malek•730
@malek-bt
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

Hello, thank you for coming and looking at my code!

This is my solution for this challenge, I hope it's up to the standards, but if it's not, please feel free to tell me! Thank you in advance.

Community feedback

  • Sanjeewa Marukona•200
    @eewa-SANJPosted almost 2 years ago

    Hello!. Your solution looks fantastic and I have gone through your code. There are a few issues found in your codes. Here are my findings.

    1. Your main large image and other text and button overlap each other. Try to fix it.
    2. In smaller screen sizes, h1, p, and buttons are not verticle centered. you can align it by adding align-item: center into the flex div container. (class = "row" in your file)
    3. Social icons are not styled properly. You have to add a border and some padding to isolate inside a circle.
    4. In "Register" you don't add the box shadow. Do see that?
    5. Learn to use rem instead of using px. It is a suggestion and best practice.

    I think, my findings will help you to improve your coding.

    Happy coding😊

    Marked as helpful
    2
    Bentaher malek•730
    @malek-btPosted almost 2 years ago

    Thank you @eewa-SANJ .. i will make it in mind .

    1
  • Hatem Henchir•530
    @hatemhenchirPosted almost 2 years ago

    Hey Malek Bentaher, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

    • Logo Huddle should be in tag, <header> not in <main> like this: <body><header>your logo</header><main>your main page</main><footer>your footer(icons)</footer></body> for semantic page.
    • replace <div class="id"> with <section class="id"> for semantic page. You can read more about semantic HTML here: HTML Semantic Elements
    • Implement a Mobile First approach 📱 > 🖥

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful
    1
    Bentaher malek•730
    @malek-btPosted almost 2 years ago

    Thank you @hatemhenchir I will make it in mind.

    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