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 preview card component CSS

yanlsama 170

@yanlsama

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


Hello everyone 🤓💻, I'm Yaniv and this is my solution for the challenge #5

**built with : **

  1. Grid.
  2. Flex-box.

It was difficult for me to give the hover effect to the image but finally I did it by reading a lot of info and seeing similar effects in other websites and I did it with few lines of code, I will appreciate any recommendation.

Thanks!💖

Community feedback

Muhammadh 1,140

@Mr-jaw

Posted

Hello there

Congratulations on completing the challenge*

HTML 📄

  • Always provide the <img> tag with meaningful and understandable descriptive text about what the image is about in the alt attribute. to improve accessibility.

  • avoid using <p> tags for short text. you can rather use <em> , <strong> or <small>

  • Also replace <h2> with <h1> in <h2 class="card__title"><a href="#">Equilibrium #3429</a></h2>, Since it is the main heading of the component and a page should contain a level-one heading.

CSS 🎨

  • Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

Other than that it looks good

I hope this was useful 😊

HAPPY CODING

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