3-column preview card component #5

Hello @DefinitelyObsessed , Great job for this challenge.

I have some notes for you:

• As LiBee mentioned above the card not centered. This problem cause horizontal overflow for small screens.

• Add transition property for <button> elements on hover for smoother effect on hover on it

• you can leave card's image alt attribute Empty. Because these icons not necessary it's just for decoration. And this one of the cases leaving alt attribute empty is a good practice.

• instead of redeclaring font-family for each element individually. You can set it to the body globally.

	body {
		font-family:  "Big Shoulders Display", sans-serif;
	}

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀

Hi, there! That looks great. Except, you need to add border-radius on large screen sizes. Also, it is good to set flex-direction: column; on your cards on smaller screen sizes if you have used flex on them. Good luck!

Good job on the challenge - well done! 👏 A have a few comments for your consideration - i have listed below for ease :

1. The card is not quite in the center consider using flexbox to center the card component:

body {
 display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

1. The titles Sedans, Suvs and Luxury need to capitalised in the design so: text-transform: uppercase;

2. Compared to the design you need to smooth corners of the card component do add a border radius

3. Compared to the design the background is not white (#fff) need to add shade to the background.

4. To fix your accessibility issues add <main></main> around your code.