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
- Flexbox
- Mobile-first workflow
I learned about the importance of structuring the HTML code first before moving to styling using CSS and how to make a divider in this challenge :).
To see how you can add code snippets, see below:
<div>
<div class="balance">
<img src="images/icon-ethereum.svg" alt="ETH Icon" />
<p class="balance">0.041 ETH</p>
</div>
<div class="timeline">
<img src="images/icon-clock.svg" alt="Icon Clock" />
<p>3 days left</p>
</div>
</div>
<hr class="solid" />
hr.solid {
border: 0;
border-top: 1px solid white;
opacity: 0.3;
margin-top: -5px;
}