This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: Nft Card
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
-
To make it easier to measure, I defined the HTML with
font-size: 62.5%, so every 1rem will be considered 10px. This made it easier to be responsive on 4k screens. Increasing the measure of HTML,remelements have followed suit. -
I mostly enjoyed using
flex,align-itemsandjustify-content. - This was one of the biggest challenges, due to the hover of the image. I tried to set the background to the eye icon. Other solutions I tried were: coloring the image, applying a div with a background and lowering the opacity. I opted for the background on the icon, as I would adjust a single element. The other hover effects were pretty straightforward. I added a slight transition to smooth the passage.
- As the project was already being built using responsive solutions, it was necessary to make small adjustments. I made the responsiveness based on the browser breakpoints.
My next steps will be to train more responsiveness. I intend to apply sass to this project for better code organization.
- Responsiveness - I learned very interesting concepts with this repository, I will continue to apply these concepts in the next projects. I recommend it to everyone who wants to learn more about it.
- Frontend Mentor - @LetzC