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: Add solution URL here
- Live Site URL: Add live site URL here
I started by writing down the HTML first to give this page a structure. Then Boostratp 4 was added shortly after. But most of the components was styled by using CSS.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Bootstrap 4
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
To see how you can add code snippets, see below:
<div class="col-6 price">
<span class="eth"><img src="images/icon-ethereum.svg" alt="" id="eth-icon"> 0.041 ETH</span>
</div>
.card-image {
background-color: hsl(178, 100%, 50%);
background-image: url(images/icon-view.svg);
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
border-radius: 10px;
}
.card-img-top:hover {
height: 100%;
width: 100%;
opacity: 60%;
transition: .5s ease;
}
I found it hard to change the color of the icon while it's on a hover state.
- w3school - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- Website - Audrie Cheong
- Frontend Mentor - @audriecheong
- Instagram - @audriecheong