NFT preview card component using flexbox and grid

Hi, Jorge Sánchez! 👋

A few changes you can do to make your solution better.

• Replace the <article class="card"> with <main>. All the page content should live inside landmark elements. <article> is not a landmark element.
• Use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
• For your information, anchor tags are for navigation. The <button> element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements.
• Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
• Remove the word "image" from the alternative text. The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
• Make the <img> as a block element and set max-width: 100%. It makes working with <img> easier.

I recommend creating the overlay of the Equilibrium using pseudo-element. You can see the solution from @IlnaraAckermann as your reference: Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution

I hope you find this useful. Have fun coding! 😄