3 Column Card

To get your buttons to show the effects on hover, you can apply this to your CSS.

.btn:hover, #first:hover, #second:hover, #third:hover { background-color: transparent; border: 1px solid white; color: white; }

There are a few things going on here...the button and all of your spans are being applied this CSS at this same time.

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

This is a great article on applying hover styles. Let me know if you need anything more!

Michael Johnson

Hi @SemihRodoplu 👋, good job completing this challenge! 🎉

I have some suggestions you might consider to improve your code:

• Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

• Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 920px and remove width: 55vw;

• The <h1> element is the main heading on a web page. There should only be one <h1> tag per page. The HTML Section Heading elements (Reference). This case requires that SUVS, SEDANS, and LUXURY be <h2> elements.

• The Learn More elements should be anchor tags and not buttons because they redirect to another website. Use buttons to perform actions such as displaying a modal, performing calculations. Use anchor tags to redirect users to a part of the page or to an external site.

• Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

<img src="./images/icon-sedans.svg" alt aria-hidden="true">
<img src="./images/icon-suvs.svg" alt aria-hidden="true" >
<img src="./images/icon-luxury.svg" alt aria-hidden="true" >

Above all, the project is done well👏. I hope those tips will help you! 👍

Good job, and happy coding! 😁

It looks good to me. If you want any improvement I think having more padding inside the card should make the difference but the mobile responsiveness is not there. This can be solved if you apply layout using a flex or grid.