3 Column preview card component with little animations

Hello Arturo Navarro Riveros, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

to solve this problem do this:

<a href="/">Learn More</a>

To improve the code structure wrap this div:

<div class="attribution">

with the semantic tag footer

The remainder is excellent.

I hope it's useful. 👍

@chopinex, how are you. Well done for completing this challenge To make your page responsive, don't use height. give the .vehiculo a padding value and remove the height value in the main To center the content on a page in the body declare the following : body{ min-height-100vh; display: flex; align-items: center; justify-content: center;} or body{ min-height: 100vh; display: grid; place-items:center;} . No need to specify margin for the main . you can add margin: 0 auto to the main Use em and rem as unit for your margin and padding. In the media query , give the body a percentage width: body{ width: 80%} or body{width: 90%} and remove align-content:flex-start. Again remove the height value for the main in the media query and dont give it a margin. In the main you declare display: block; eg: main{ width: 300px ; display: block}. Hope am helpful. Happy coding.