Skip to content
OverviewSolutions
7
Comments
3
Esteban
@ehmenzala

All comments

  • João Gabriel•340
    @joaojgabrielSubmitted over 2 years ago
    • how to add the white border to author's avatar?
    • how to align the text vertically to the center of the icon in :before?

    any other feedback welcome

    NFT Preview Card

    1
    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
  • Esteban•150
    @ehmenzalaPosted over 2 years ago

    Hello João!

    • I think you have done well making this card responsive.
    • Also, semantic HTML is well used.

    Some things you should consider...

    • Maybe you could use max-width: 100%; property on your image to prevent it from stretching when viewport width is being reduced, and remove the height property (Assigning a width to your image will kind of auto-render the height of it, so it will always look good).
    • Also, I think it's ok to use flexbox to center the card. There are various methods to center elements in CSS, and using Flexbox is one of them.

    Good luck! 👋

    Marked as helpful
    1
  • Luis Fuentes•50
    @EleganteOsoSubmitted over 2 years ago

    open to suggestions to implement the icon-view.svg

    HMTL & CSS

    2
    Esteban•150
    @ehmenzalaPosted over 2 years ago

    ¡Hola @EleganteOso!

    • Veo que, al realizar :hover sobre el <div></div> que contiene a tu imagen, le asignas a la imagen una opacidad (opacity) de 0.5.
    • Pienso que está bien implementada tu solución por esa parte.

    Para implementar el ícono te sugiero lo siguiente...

    Al <div></div> que contiene la imagen, puedes asignarle también la propiedad background-image: url();. Dentro de url() debes colocar, con comillas dobles o simples, la ruta hacia la imagen del ícono del ojo. No te olvides de asignar la propiedad background-repeat: no-repeat;. Y asegúrate de posicionar bien el ícono con la propiedad background-position.

    Tips extras...

    En el título de tu tarjeta, al poner el cursor a la derecha de este —sin tocar ninguno de sus caracteres—, se dispara el evento :hover sobre el título (Se aplica el color celeste al título). Para evitar esto te sugiero que en <h1 class="title">Equilibrium #3429</h1> asignes la propiedad width: max-content; para que el :hover solo se aplique cuando apuntas con el cursor sobre las letras del título, mas no a los lados.

    Te dejo un enlace hacia la documentación de la propiedad max-content por si quieres echarle un vistazo...

    ¡Suerte! 👋

    Marked as helpful
    0