Skip to content
Submitted over 1 year ago

Responsive page using HTML/CSS and active hover features

Modesire Soneye•270
@Desireye
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

For some reason the hover effects on my footer contents aren't working? If anyone can help that'd be amazing!

Community feedback

  • Daniel•950
    @GhraviteePosted over 1 year ago

    Hello @Desireye!!, congrats on completing this challenege. To solve your hover issue, simply get rid of your z-index on both the footer and the in-between card. The z-index prevents the hover effect from taking effect.

    Here are some other tips to make your code efficient.

    • Try to avoid using definite heights and widths on your containers or divs. It makes the very rigid and unresponsive. Percentages are still acceptable.

    • Direct usage of the button tag obstructs accessibility. Simply use an anchor tag and then style it as a button and try to use more classes on your divs for better specificity or just focus on semantic html.

    Happy coding.

    Marked as helpful
    1

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