Skip to content
Submitted over 2 years ago

@traez's 3-column preview card component using HTML and CSS

Trae Zeeofor•490
@traez
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

This project stressed me the less. Proof that I'm getting better with Styling (media queries) etc

However i feel my code was too verbose.

I need to learn how to combine selectors, target properties with less code. This is evident in my CSS for the buttons.

Kindly review and help advice.

P/S: There could also be finer details put in cloning to exactly mirror prototype.

Community feedback

  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @traez,

    Nice work with the component, I would make some suggestions on how to improve your component:

    • I would suggest measuring heights/widths & paddings/margins with more precision, using a tool like FIGMA or Adobe XD helps you a ton!
    • The overall component has more spaces between the elements.
    • Increase the padding on the button.
    • The button size gets bigger on hover for 2px because the border is added outside of the button, I would recommend setting the border from the inside like this:
      button {
    border-radius: 20px;
    border: 0.125rem solid transparent;
    cursor: pointer;
 
}
  button:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }
    Marked as helpful
    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