3 column preview card

Hey, Armoretech!

Your project looks nice!

Here's one tip:

You can place your card in the middle of the page doing this:

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Hope it helps!

Hi, here is some feedback.

HTML:

• You need a <main>, this is important for accessibility. It can also be the container here, meaning the element that wraps all the cards.

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

• Do not use <br> to wrap the text. All styling should be done in the CSS.

• .heading should, as you imply, be a heading. Since there are several headings, they should all be <h2>.

• Remove the input around "Learn More`` - it would navigate to another page, so it's only a link.

• .attribution should be a <footer>.

• Footer text needs to be wrapped in a <p>.

CSS:

• Use the style guide to get the correct fonts to use.

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

• Remove flex-wrap on body, and add flex-direction: column and min-height: 100vh.

• Remove all text-align: left as that is the default value.

• Font-size must never be in px. Use rem instead.

• Remove font-family: para and font-family: head - these are not valid values.

• Remove the fixed width and height on the cards. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

• Add a max-width in rem on the container(<main>), to prevent it from getting too big on larger screens.

Hope this is helpful - good luck!