3 Column Card

Community feedback

• 

  Michael Johnson•950

  @mikej321

  Posted over 2 years ago

  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

  20
• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  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! 😁

  20
• 

  Fhero•110

  @fhero2030

  Posted over 2 years ago

  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.

  00