Skip to content
Submitted almost 3 years ago

NFT preview card component

Radu Chioreanā€¢100
@chioreanradudandan
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 šŸ‘‹šŸ»

Here's my attempt at the NFT component. One thing that I didn't manage to do is to make the eye icon have an 1 opacity while on hover. šŸ•µšŸ» Going to have a look at other solutions to see how to tackle that one

Community feedback

  • PhoenixDev22ā€¢16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @chioreanradudandan ,

    I have some suggestions regarding your solution:

    • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image(image-equilibrium.jpg), Equilibrium #3429, Jules Wyvern`.

    • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden:true or role presentation with empty alt

    • For any decorative images, each img tag should have empty alt="" ( as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view,icon-ethereum, icon-clock ).

    • The avatar' alt text shouldn't be An user image-avatar , it's not meaningful, you can set it to Jules Wyvern .

    • Tips for writing 'good' alt text.

    • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

    • You can use unordered list <ul> for class="card-meta-ammount" and in each <li> there would be <img> and <p> . don't use span for meaningful content.

    CSS

    • Use min-height: 100vh; for the <body> using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.This also allows the body to to grow taller if the content outgrows the visible page

    -width: 19.5rem; an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

    • height: 33rem;Also you would never want to set the height of the element. Let the content inside the card element dictate the height of it.

    • In most cases, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN

    Overall, your solution is good, Hopefully this feedback helps.

    Marked as helpful
    1
    Radu Chioreanā€¢100
    @chioreanradudandanPosted almost 3 years ago

    @PhoenixDev22 cheers for the feedback. Appreciated.

    1

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