3 column preview card component css html

Community feedback

• 

  P

  Marge C.•440

  @msunjiPosted over 2 years ago

  Hiya Dean! Great job! 👍

  You're right about it not having to be too complicated. Here's how to simplify things a bit. First off, I noticed you used id's, you can use classes instead. The logic here is:

  • Aside from the text colour, your buttons all have the same base style - the same size, padding, etc. You can use the button selector, or make a class that you'll use for all three buttons. (Note: in this explanation, I'll use the button selector instead of a class, but you can definitely have two or more classes for an element).
  • Set your base styles. You'll also want to set a border that's the same colour as the button's background colour, so something like: border: 2px solid #fff;
  • To change the button's colour on hover, instead of setting the background colour for each button, you can do this instead:

  button:hover {
    background: transparent;
    color: #fff;
  }
  

  • Last but not least, to change the text colour for each button, you'll want to make a class for each button. Maybe something like button-sedan, button-suv, etc. Then for each class, set the colour accordingly.

  That should help reduce/simplify the amount of CSS you've written. Hope you find this helpful!

  Marked as helpful

  1

  ---

  

  Dean Hudek•290

  @deksa89Posted over 2 years ago

  @msunji Thank you Marge that was really helpful!!! :D

  0