HTML + CSS interactive page

Hi Bernardo, great work in making this responsive, and I think you did well on the whole! Two quick comments for you:

1. You can add a bit of margin around the component so that when it is resized in smaller screen sizes, there's some spacing around it and its sides won't be touching the browser.

2. About picture, since you only have one image here and not a desktop and mobile version of the image, you don't really need to use picture. The picture element is meant to be used as a way to handle changing different versions of the same image, whether size or format. Since there's only one version here, you can simply use a div if you need to make it into a container for the image. Read more about picture here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

That's all, great work once again, and yes, you're getting better at this, keep going! 😊

Hi Bernardo, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• you can use article tag instead of a simple div to the container card for improve the Accessibility
• remove all unnecessary code, the less you write the better as well as being clearer: for example the picture tag container of image
• another approce is creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
• Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😉

👾Oi Bernardo , tudo bem? Parabéns pelo desafio!

Aqui algumas dicas pra melhorar sua solução:

Quando esse NFT card vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços/creator fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:

@media (max-width: 340px) {
.complement {
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-direction: column;
}

.info-user {
    font-weight: 300;
    color: hsl(215, 51%, 70%);
    display: flex;
    align-items: center;
    flex-direction: column;
}
}

👋 Espero que essas dicas tenham sido úteis e continue codando!