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. There are two layouts: mobile and desktop.
- See hover states for interactive elements.
- Solution URL: https://github.com/harnettd/nft-preview-card
- Live Site URL: https://harnettd.github.io/nft-preview-card/
- HTML
- CSS
- Sass
- Flexbox
- Mobile-first workflow
In completing this challenge, I learned how to
- use the child combinator
>
to combine class selectors, e.g.,
.image-wrapper:hover > .image-eye-wrapper {
cursor: pointer;
display: flex;
}
- mdn web docs: Child combinator - This is where I learned how to use the
>
combinator.
- Github - Derek Harnett
- Frontend Mentor - @harnettd
- Thanks to Frontend Mentor for posting this challenge.