Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Four card feature section using HTML ,CSS

Ajiboso Adeola•70
@comfort-deola
A solution to the Four card feature section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Just completed this challenge would need your honest review on how i could improve this

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Yazdun•1,310
    @Yazdun
    Posted over 3 years ago

    Hello Ajiboso and well done 👏 ! Here are my suggestions:

    • On ACCESSIBILITY issue : each page should have at least one main tag which wraps the whole page's content and this main tag, must have a level one heading which tells what this page is about, this h1 can be hidden. your html contains main tag so just add a h1 to `main and your accessibility issues will be gone. Don't forget to generate new report though !
    • for font family, it seems like you've forgot to add comma font-family: 'Poppins'sans-serif;, make sure to change it to font-family: 'Poppins', sans-serif; so your fonts load correctly.
    • I think box shadow is too thick, I would've used something along the long with box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    • Use prettier extenstion on your IDE to format your code.

    ✅ Also I opened a pull request to your github which take care of above issues

    I hope this was helpful

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub