NFT Preview Card

Hi 👋, perhaps some of this may interest you:

HTML / ACCESSIBILITY:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

CSS:

• You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. An example of a CSS reset from Josh Comeau 🔎

For example, here are some very common and useful ones to get you started:

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

• The page content could be centered using Grid or Flexbox. For example as follows:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

I hope it’s useful : )

Regards,