NFT Preview Card

Community feedback

• 

  Esteban•150

  @ehmenzalaPosted over 2 years ago

  Hello João!

  For the white border on the avatar (and actually with any other element that you want to have it)...

  • You should add border-radius: 50%; property, and then the border: 1px solid #colorThatYouWant; directly on your image. And you’ll have your fancy circular border.

  For the ethereum icon...

  • Personally, I think you should turn the <span class="price"></span> position to relative. This is because you will also define its :before pseudoelement position to absolute. Then you could play with left padding on the <span class="price"></span> and inset properties (top, right, left, bottom) on its :before pseudoelement.

  I hope this can help you! And keep it up 👋

  Extra tips...

  • In the title of your card, when you put the cursor to the right of it —without touching any of its characters—, the :hover event is fired on the title (the light blue colour is applied to the title). To avoid this I suggest that in your <h1></h1> you set the width: max-content; property so that the :hover is only applied when you point the cursor over the letters of the title, but not to the sides.

  I leave you a link to the official documentation of the max-content property in case you want to take a look...

  Marked as helpful

  0