Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

card-NFT

@Darkfenix013

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


si alguien puedo ayudarme a agregar la separacion entre los iconos del reloj como tambie en ethereum y los textos de tiempo, se los agradeceria.

Community feedback

@simonhernandez

Posted

Hola @Darkfenix013! Espero estes bien.

Una forma de lograr esa separación sería agregandole un display: flex al span que tiene la clase "precio" y lo mismo con el span "time". De esa manera estarías convirtiendo esos span en contenedores flex, lo que a su vez te permitiría usar la propiedad gap para indicar la separación que quieres que tengan los elementos que estan dentro de los span.

.time,
.precio{
          display: flex;
          gap: 6px
}

Un saludo!

Marked as helpful

1
Eduardo 910

@KTrick01

Posted

Buenas! Como ya te respondieron puedes hacerlo con gap, o si tambien quieres en tus clases de .img__reloj .img__ethereum puedes añadirles un padding-right: ; que tambien los separara pero "empujando" el texto a la derecha en vez de separarse de forma simetrica digamos, puedes probar las dos formas y elegir la que mejor te parezca ya que se veran diferentes, un saludo!

Marked as helpful

0
Kevin Copo 150

@snowbot22

Posted

Debes usar un flexbox en los dos contenedores y usar la propiedad gap como dijo @simonhernandez. Pero tambien veo que necesitas alinear de forma vertical los elementos, consigues eso agregando la propiedad "align-items: center". Con esta se alinearan de forma vertical

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord