3-column preview card

Community feedback

• 

  Amanda Buttineau•200

  @ab1820

  Posted over 2 years ago

  Hey lady!!! :) I just wanted to point out the border-radius around your card! Otherwise it looks awesome and I think I may try this challenge next! :P

  02

  Marked as helpful
• 

  Hassia Issah•50,410

  @Hassiai

  Posted over 2 years ago

  Wrap the three divs in the main tag. there is no need to add <a> after the button to make the cursor a pointer but rather give it a class for the styling.

  To center a content on a page, add min-height:100vh; to the body and remove the height value and the width value in the body. there is no need to give the body a padding value

  Give the main display : flex ; and a width value that sum of the width value if the three divs.

  Give .sedans , .luxury and .suvs a width value and padding value instead of the height value for a more responsive site. Give the button of each div a font color that is the same as the background-color of the div, a background-color of transparent and a font-weight of 700;

  In the media query give the main a width of 80% and flex-direction: column

  Hope am helpful HAPPY CODING

  00

  Marked as helpful
• Account deletedPosted over 2 years ago

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

  To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • 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.

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

  More Info:📚

  MDN The Anchor element

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

  Happy Coding!🎄🎁

  00