3-column preview card component (HTML & CSS)

Hello @LuisGonzH94!

Your solution looks great!

I have a couple of suggestions:

• Setting a fixed width: 90% to the card can make it overgrow depending on the size of the screen. In this case, a better option is to set a max-width with a fixed value, for example 950px. By doing this, your card will grow until it reaches 950px and then it'll stop. As I said, this can prevent your card from turning bigger than it should.

• Also, you can add background-color: #F2F2F2; to the body. It'll look even closer to the original design.

I hope it helps!

Other than that, great job!

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• You don't necessarily need to add border--radius to every column Instead, you can use set to the container parent and use overflow: hidden on the container to clip any excess from the image, achieving a similar effect.

main {
  border-radius: .625rem;
  overflow: hidden;
}

• You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here 📘.

• Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by leaving its alt attribute empty. You can read more about this here 📘.

• To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!