Skip to content
Submitted over 2 years ago

Responsive Landing Page

Daniel Filipe Santos•70
@Lipe-Santos
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi guys, I am new to this community and I would like to know your opinion about this landing page. I joined this community because I really want to improve my HTML and CSS, so I really appreciate your advice and opinions.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    Nice! 🙌🏻

    I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

    You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

    IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

    Marked as helpful
  • Amal Karim ✅•1,290
    @amalkarim

    Hi Daniel,

    When I turn on my developer tools in chrome, which is sitting at the bottom of the browser, the <div class="container"> is overlapping with the element after it: <section class="main-content">. I think it's because you set height: 100vh; for the .main-header .container. It's better to remove it, or change it to min-height: 100vh;

    Also, please look at the <div class="main-header-mockup"></div>. In my opinion, it's better to place the image inside it using <img> tag rather than as a background-image. First, it's an important image that has meaning, not just a decorative image. Background image is best suited for an image that is just a decorative one. Please refer to this article about image accessibility. And second, in mobile view, the image is vanished. It can't be seen under the Get Started For Free button. By using <img> tag, that could be prevented from happening.

    That's it from me. Hope this helps. Happy coding!

    Marked as helpful
  • ANDRES•190
    @t0ntin

    Looks good. Add the hover states to the buttons and the footer links.

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