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
- Mobile-first workflow
- React - JS library (This project was bootstrapped with Create React App)
I gained basic understading of implementing/positioning elements, using absolute/relative, as well as centering said element. @smug took time to explain to me.
.header--wrap {
position: relative;
cursor: pointer;
}
.img--overlay {
background-color: var(--clr-accent);
border-radius: 10px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.img--overlay img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header--wrap:hover .img--overlay {
opacity: 0.5;
}
.header--img {
border-radius: 10px;
vertical-align: bottom;
}
- Scrimba - This platform provided me with an opportunity to learn react for free
- React - This is an amazing web page provides you all the resources you need to put together to get your react app working perfectly on your local machine
- Github - @soji
I am very grateful to Smug & Openwell for always making time out of their busy schedules to see to my coding challenges and providing me with extra motivation.