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

Html and Css xd

@sergiopin22

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


Use Html and css only with flexbox, I still don't understand the part of the responsive design well, I would like your brothers to give me feedback :)

Community feedback

@UnTalPeluca

Posted

As a suggestion, in order not to have to use margin above and below, a max-width so that it is separated from the borders. In .card you can use the css property "box-sizing: border-box" and give it a "padding: 25px", with border-box, padding does not enlarge our elements, but pushes them inwards, you will see that it will be a lot easier and faster to make your components with this. In the paragraph "Our Equilibrium collection ..." you can use "line-height: 24px" or something like that to give a bigger space between lines and finally for the white border that separates the information of the card with the creator you can use RGBA colors, these colors are very useful because you can change the opacity ("border-bottom: 1px solid rgba (0, 0, 0, 0.1)" for example) With this tool you can test https://rgbacolorpicker.com.

esp :D

Como sugerencia, para no tener que usar margin arriba y abajo, un max-width para que esté separado de los bordes. En .card puedes usar las propiedad de css "box-sizing: border-box" y darle un "padding: 25px", con border-box, el padding no agranda nuestros elementos, sino que los empuja hacia adentro, verás que será mucho mas facil y rapido hacer tus componentes con esto. En el parrafo "Our Equilibrium collection..." puedes usar "line-height: 24px" o algo asi para darle un espacio mas grande entre lineas y por ultimo para el border blanco quue separa la informacion de la tarjeta con el creador puedes utilizar colores RGBA, estos colores son muy utiles porque puedes cambiar la opacidad ("border-bottom: 1px solid rgba(0, 0, 0, 0.1)" por ejemplo) Con esta herramienta puedes testear https://rgbacolorpicker.com.

Marked as helpful

0

@sergiopin22

Posted

Gracias bro, soy de Colombia jasjsjs es útil el traductor, manejas discord seria bueno estar contactados para ayudarnos en este mundo , se te agradece los comentarios, saludos amigo V:

0

@UnTalPeluca

Posted

@sergiopin22 Dc Peluca #7132 😉

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