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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
From this quick project, I was able to practice my HTML and CSS skills and create an NFT card from a design.
This was my first time adding a hover to an image, and had some complexities when needing to add an image to the image hover, as well as centering it.
This was a great way to knock out a quick project and practice my skills. I would like to keep practicing with FlexBox, Grid, and begin using frameworks for future projects like SASS, and also begin introducing JS.
- W3Schools - Image Hover - This helped me get the start on the hover for the image.
- Website - John Darrin
- Frontend Mentor - @JohnMichaelD
- Twitter - @_JohnMichael_D