NFT Preview Component v1 - HTML, BEM CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Sarah Soares! 👋

  You can use hsla or rgba color format to only reduce the opacity of the cyan color. This way, the eye icon can have opacity: 1.

  I have a few suggestions for improving your solution.

  • 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.
  • Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

  I recommend creating the overlay of the Equilibrium using pseudo-element and absolute positioning; use both of them. This way, the HTML can be simpler. 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! 😄

  0