Skip to content
Submitted 3 months ago

Responding landing page using bootstrap

#bootstrap
Dedeke Timilehin•190
@Timilovic
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

Community feedback

  • Aakash Verma•9,480
    @skyv26Posted 3 months ago

    Hello @Timilovic,

    Great effort on your project! 👏 The design and structure are shaping up well, and I have a few suggestions to refine your implementation:

    1. Background Image:
      Your background image is repeating, which impacts the visual appeal. To fix this, use the following CSS properties:

      background-size: cover;
background-repeat: no-repeat;

      This ensures your background spans the entire viewport without repeating.

    2. Content Alignment:
      The main content is not centered on the screen, which makes it look off-balance. Adjust your flex or grid properties to center-align the content. Aim to replicate the provided design as closely as possible for a professional finish.

    3. Styling Organization:
      Consider moving your inline styles into a separate CSS file. Doing so will:

      • Enhance readability
      • Simplify maintenance
      • Ensure a cleaner HTML structure
        💡 Example: Create a styles.css file and link it in the <head> section.

    4. Semantic Structure:
      A typical webpage is divided into header, main, and footer sections. Adding a div between main and footer disrupts this structure. You could either:

      • Integrate the additional div content into footer
      • Wrap it within the main if it’s part of the primary content

    5. Accessibility Enhancements:

      • Add alt text to images for screen readers. For example: 
        <img src="images/logo.svg" alt="Huddle Logo">
      • Use proper heading levels (h1, h2, etc.) for better SEO and accessibility.

    Bonus Tip ✨

    Keep testing your design across various screen sizes and devices. Your use of media queries looks good, but refining the alignment and spacing on smaller screens will improve the user experience significantly.

    Warm regards,
    Aakash 🌟

    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