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: (https://github.com/Zeighnab/NFT-preview)
- Live Site URL: (https://zeighnab.github.io/NFT-preview/)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
<h1>Nesting of html tags</h1>
.card-img .eye img {
position: absolute;
}
@media{
}
.card-img::after{
position: absolute;
}
- positioning
- media queries
- pseudo element
- Frontend Mentor - @Zeighnab
- Twitter - @iam_laitan