Skip to content
Submitted 11 months ago

3 column card using flexbox and grid layout

geektim•230
@geektim
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 11 months ago

    HTML:

    • The icons are decorative, so the alt text should be empty: alt="".

    • There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

    • The headings should be written with normal capitalization. You then use text-transform: uppercase to change the capitalization in CSS.

    • "Learn More" would navigate to another page, hence it is not a button but a link.

    • You don't need all the wrapping divs. Only add the elements that you need.

    CSS:

    • Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.

    • It's good practice to include a CSS Reset at the top.

    • Remove the max-width on .container.

    • Remove everything except the max-width on .card. The max-width needs some adjustment, though. Firstly, it should be in rem instead of px. And secondly, it is way too low. Change it to around 70rem.

    • Add cursor: pointer to the "Learn More" links, so you get a "pointing hand" when hovering over them.

    • Media queries need to be in rem, not px. And I would adjust it to around 80rem(equal to 800px). Keep the grid properties, but remove the width and max-width.

    Marked as helpful
    0
  • geektim•230
    @geektimPosted 11 months ago

    Thank you very much.

    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