Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT card using css Flexbox

@Ahmed7019

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any ideas to make this code better ? And does it look like the design ?

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done, you are almost there. A few tips

  • You don't need to do a calculation on the height height: calc(100% / 2); change it to height: 100%;. With the height calculation the picture is half the normal height.
  • Why did you placed an image tag inside a p tag. Avoid this, use p tags only for text. You could have done something like this.

HTML

<div class="coin-price">
  <img src="images/icon-ethereum.svg" alt="">
  <p>0.041ETH</p>
</div>

CSS

.coin-price {
  display: flex;
  align-items: center;
  gap: 6px;
}

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord