Skip to content
Submitted almost 3 years ago

HTML,CSS,VS CODE

BADHRI KESAVA RAJA S M•515
@Badhrikr
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

Any kind of feedback is useful 🤗.This is my first attempt in creating a landing page 😅. Can anyone suggest me on how to create a perfect hover effect on svg.

Community feedback

  • Tomi•565
    @Tomi-pterPosted almost 3 years ago

    Notable points

    1. You need to decrease the min-width on the media query from 1400px as it is larger than the average desktop size
    2. For the desktop view you'll need to decrease the size of the images so they can fit the cards with the text
    3. Reduce the inline (left and right) padding set on the text beside the images
    4. Add some opacity on the box shadow of the cards as they're too dark
    5. Add box shadow to the card that contains the button above the footer
    6. For the hover effect on the svg, use the "filter" function for that. Refer to https://css-tricks.com/almanac/properties/f/filter/ for more help
    7. Also check out the html issues highlighted in your solution report.

    I hope this helps 👍🏾

    Marked as helpful
    0
  • Jay•260
    @Hyuuga81Posted almost 3 years ago

    Great job. Love the mouse over effects as they are. Especially the footer links. Keep it up.

    0
    BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted almost 3 years ago

    @Hyuuga81 Thanks mate

    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