Skip to content
Submitted over 2 years ago

NFT Preview card - Using CSS3's Grid & Flex

accessibility
Abdul Khaliq 🚀•72,380
@0xabdulkhaliq
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone..👨‍💻

  • This was an excellent challenge to train and improve my knowledge with grid & flex layout.
  • This helps me to practice about turning designs into actual website
  • I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

Feel free to leave comments on how I can improve my code.

Peace be upon you..✨

Code

Please log in to post a comment

Log in

Community feedback

  • Pirate•170
    @ima9gh

    Hi please help me.

    What is the problem with my code, why doesn't it work? Although the opacity on hover is 1!

    The eye is the icon on the photo when hovering

    .NTF .eye{
position: absolute;
background-image: url(images/icon-view.svg) no-repeat center;
background-color: var(--clrBGeye);
width: 290px;
height: 290px;
display: flex;
justify-content: center;
align-items: center;
top: 130px;
border-radius: 5px;
opacity: 0;
}

.NTF .eye :hover{
opacity: 1;
 }

    : I haven't uploaded the challenge yet.

  • Hassia Issah•50,390
    @Hassiai

    Increase the width of .container to get the desire width in the design. for mor responsive width use max-width instead of width. There is no need for height value in .container the padding value is sufficient.

    Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more css units this watch this https://youtu.be/N5wpD9Ov_To

    Hope am helpful

    Well done for completing this challenge,

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