Responsive 3 Column Preview Card

Community feedback

• 

  not-a-patch•200

  @notapatchPosted about 3 years ago

  I have not done this challenge. Your site looks the same, but just offset? I don't think it's important unless you don't know how to make the offset the same.

  I liked:

  • CSS variables.
  • CSS was written consistently - I assume you used a linter or experienced.
  • BEM ? usage (I don't write CSS much now, but as long as you have a system that works for you)

  The only thing I would not be sure about is that usage of colors in naming the cards. My thoughts would be to name it after the type of cars instead because the chances of the car type changing is less than the chance the designer wants to change the colors.

  .card--orange {                                      ===> .card--sedan         ???
    background-color: var(--orange);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  

  Marked as helpful

  0
• 

  Spencer Runde•640

  @spencerrundePosted about 3 years ago

  Hello Ryan,

  Good job on the challenge! The most likely reason for the comparison looking slightly off is just minor differences in margin and padding styles, along with anything else relating to size. Don't worry about making it look completely identical, unless you're going for a pixel-perfect recreation. The only big difference I notice is that your "Learn More" buttons have a bigger margin-top than in the design. Nothing wrong with putting your own spin on it though, and I do like how the buttons look at the bottom of the cards instead of directly below the text.

  Marked as helpful

  0