Building the card component using HTML CSS

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .row into a <main>.

• The icons are decorative, so the alt text should be empty: alt="".

• Text should never be in divs alone. .topic should be a <h2>. You can wrap the <h2> in a <div>, though it is probably not needed here.

• Likewise, style-t is a paragraph, so wrap it in a <p>.

• Don't use <br> to force text onto a new line. The text should flow naturally, and all styling belongs in the CSS.

• The headings should be written with normal capitalization: "Sedans", "Suvs", and "Luxury". You then use text-transform: uppercase to change the capitalization in CSS.

• "Learn More" would navigate to another page, hence it is not a button but a link.

• .attribution should be a <footer>, and its text must be wrapped in a <p>.

CSS:

• It's good practice to include a CSS Reset at the top.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• line-height must also never be in px.

• "Learn More" should have border: none, not border: 0px. Also, whenever you need to set a value to zero, write 0, without including any units.

• Remove all positioning properties.

• Remove all widths and heights in px and %. You can set a max-width in rem on the card container in case it gets too wide on larger screens.

• All styling should be done in the CSS, so move the styles for .attribution from the HTML document to the stylesheet, and remove the ``