Skip to content
Submitted over 2 years ago

It was fun completing this challenge use HTML, CSS and flexbox

Arun Kumar Singh•260
@arunsingh009
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback on my code will be appreciated and need suggestions for box-shadow. Thank you 😊

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    hello @arunsingh009 ,

    I have some suggestions regarding your solution :

    • try to make the shadows softer like the design .

    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images.

    • I recommend to remove heights widths from the cards. Let the content inside the card element dictate the height of it. Also using widths in percentage. Not a great idea as you're losing control of the layout. Use max-width instead, let it grow to a point.

    • never use px for font size.

    Hopefully this feedback helps.

    Marked as helpful
    2

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