Hello everybody,
The most challenging thing, for me, during this solution was: how to create an overlay hover effect on the main image.
Can it be done in another way more efficiently? Any other feedback is welcomed too.
Thank you! :)
Hi, nice job! You can try to use opacity property for the overlay element instead of z-index, then you can add transition property for a smooth effect 😉 If you have any difficulties, you can find this solution on my account :) Keep it up 👍
Hello, Frontend Mentor community. This is my solution to NFT preview card component challenge.
Happy to hear feedback and advice!
Good work! I see you’re having trouble centering <main> element, try to add Flex Box properties for body { height: 100vh; display: flex; justify-content: center; margin: 0; padding: 0; }, so for <main> block you don’t have to use margin-top property, and it’s beautifully centered!👌 You can also use Flex Box properties to place elements inside 'container' block (without using position: absolute). You can learn about flexboxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or anywhere else 😊 Hope it was helpful! 🤘
I would love to get feedback about best practices and how i can improve my code. Have a nice day!
Nice work! I see small design inconsistencies in the fonts, try this styles: body {font-family: "Montserrat", sans-serif;} and h1, .prices {font-family: "Fraunces", serif;}, and also font-weight:1500 is not working (900 is a max 😁). And you can put another image for small screen (it's in the archive). Hope it was helpful, keep it up! 👍
Did I do a bad practice? What should I improve related to what I used to built this component? For example: the use of selectors, etc
Nice work! Just noticed small fixes you can do: "--h-font" and "--p-font" are the same, so you can delete one. And if you use variables for font-family, then you can do it for colors too ;) Also instead of "padding: 10px 15px 15px 15px;" you can use "padding: 10px 15px 15px;" (top, left&right, bottom). Good job, keep it up 👍
