html css

HTML:

• Remove .underMain, it is not needed.

• I would wrap all of the card content in a <div class="card">. Hence, your HTML structure would look like this:

<main>
  <div class ="card">
     --card content 
  </div>
</main>

• "Learning" and "Greg Hooper" should be <p>.

CSS:

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• Remove all widths and heights in px, except for the profile image.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

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

• Remove all positioning and transform properties.

• Remove z-index, it is not needed.

• I'm not sure this needs a media query , as the layout doesn't change. When you do need media queries , they must be in rem or em.

These are my suggestions for your solution:

• I think you forgot to add the : hover property to your card, try to do so to have the hover effect on the card. And not to forget, make sure you make the cursor: pointer to make the mouse pointer when hovered on the card to change to a pointer.
• It would be nice if you would have a look at the Figma file, you would have gotten the right properties, sizes, widths and heights for your solution.

I think these will help. regards