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

Uso de Display Flex para acomodar los items e imagenes del Avatar.

TITOR 340

@hectorestebanm

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


Tercer desafío completado. La parte del efecto hover en la imagen fue lo que más me llevo tiempo. Tuve que revisar ejemplos para poder hacerlo. Cualquier sugerencia será bienvenida.

Community feedback

David 8,000

@DavidMorgade

Posted

Buenas Titor, muy buen trabajo te quedo muy bien tu componente enorabuena!

Como consejo te podría decir que intentaras alinear el componente justo en el centro de la pantalla, con margin solo se te está alineando horizontalmente, esto puedes conseguirlo facilmente dandole flex al elemento padre (que en este caso es el body), prueba a quitarle el margin a tu main y pon tu body así:

body { 
font-size: 18px;
font-family: 'Outfit', sans-serif;
background-color: var(--Very-dark-blue-main);
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}

Espero que te sirva de ayuda para próximos proyectos! buen trabajo.

0

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