Skip to content
Submitted over 2 years ago

Three column preview card component using Flexbox

C Lewis•110
@casserole27
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

Solution retrospective

I found the buttons a little bit difficult while building the project, specifically their width. I used a percentage measurement that seemed to go well as far as responsiveness, but is there a best practice?

I found this to be a fairly straightforward exercise in Flexbox, which I seem to be getting the hang of. I also changed the original orange color to a darker hue because an accessibility check yielded a low contrast warning.

Community feedback

  • Account deleted

    Hello C Lewis, I hope you are doing well!

    About the buttons, I think those elements would redirect the user to another page and act as a links rather than as a buttons triggering some JS behavior. Using links instead of buttons in this case is a best practise plus are easier to style than buttons. You can find more info about links-buttons here: css-tricks link

    Ps: I like the font change! Good job and keep going!

    Marked as helpful
    1
    C Lewis•110
    @casserole27Posted over 2 years ago

    @alexcumplido thank you!

    Are you seeing the font as different than what the exercise intended? I used the fonts that were indicated in the exercise files, and it looks the same to me. Just curious!

    0
    Account deleted

    Hello again C. Lewis! It is the same font indeed. It seemed different first time I checked in, don't know why.

    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