João Gabriel• 340
@joaojgabriel
Submitted
- 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
Esteban
@ehmenzala
All comments
- Esteban• 150
@ehmenzala
Posted
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 theborder: 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 torelative. This is because you will also define its:beforepseudoelement position toabsolute. Then you could play with left padding on the<span class="price"></span>and inset properties (top,right,left,bottom) on its:beforepseudoelement.
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
:hoverevent 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 thewidth: max-content;property so that the:hoveris 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-contentproperty in case you want to take a look...Marked as helpful
0 - You should add
- João Gabriel• 340
@joaojgabriel
Submitted
is this one worth using
flex?Esteban• 150@ehmenzala
Posted
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 theheightproperty (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
@EleganteOso
Submitted
open to suggestions to implement the icon-view.svg
Esteban• 150@ehmenzala
Posted
¡Hola @EleganteOso!
- Veo que, al realizar
:hoversobre 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 propiedadbackground-image: url();. Dentro deurl()debes colocar, con comillas dobles o simples, la ruta hacia la imagen del ícono del ojo. No te olvides de asignar la propiedadbackground-repeat: no-repeat;. Y asegúrate de posicionar bien el ícono con la propiedadbackground-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
:hoversobre 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 propiedadwidth: max-content;para que el:hoversolo 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-contentpor si quieres echarle un vistazo...¡Suerte! 👋
Marked as helpful
0 - Veo que, al realizar
