3-column preview card component

Hey @JoseEliasMorales! Great work!

• Add a css reset to remove some of the default syles applied by the browser (user-agent stylesheet). You can use a small reset like this (by adding it to the very top of the stylesheet):

  * {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
  }
  

  to remove all margins, paddings, borders, and to include the border size when setting elements' dimensions. Or you can use a larger one like this one. There are more resets out there, you can look them up.

• Use gap instead of margins/paddings to space the contents inside of each .card element.

• Change the .card__btn from a <button> to a <a href="#"> because a link is more suitable for this content. When we see 'Learn More` we expect to be redirected to another page, which is how a link behaves.

• Add cursor: pointer; to .card__btn to change the cursor symbol when hovering over each card button.

Hope the review was helpful! Wish you the best with your future challenges!

Hey there! 👋 Here are some suggestions to help improve your code:

• The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

• As mentioned above, a lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁