Skip to content
Submitted almost 2 years ago

NFT preview card component CSS

YanlDev•170
@YanlDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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-jawPosted almost 2 years ago

    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

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