Skip to content
Submitted over 2 years ago

NFT Preview Card

Zubin Nair•190
@znair96
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

Please provide feedback for the same . It would be helpful for me for the scope of improvement.

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlinePosted over 2 years ago

    Looks nice, I would also add transition to hover states, so it looks smoother

    1
  • Dev Rathore•2,600
    @GitHub-dev12345Posted over 2 years ago

    Good Work Bro ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this helpful

    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello @znair96,

    I have some suggestions regarding your solution:

    • I would leave the equilibrium main img in html and use pseudo-elements to change the teal bg color . Then opacity can be changed from 0 to 1 on the pseudo on hover.

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

    • For any decorative images, each img tag should have empty alt="" 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 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 or role presentation with empty alt.

    • The avatar 's alt shouldn't be "empty " , you can set Jules Wyvern to it .

    • Alt text for the profile image shouldn't be empty . Read more how to write an alt text

    • Also , read up on how to make inline svgs accessible. They'll either need aria-hidden if meaningless or labelling appropriately if meaningful.

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

    • You can use an unordered list<ul> to wrap class="price-of-equilibrium" and in each <li>, there would be <img > and<p> .

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>like this:

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; /*If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars. */
min-height: 100vh;

    So you can remove the absolute position to the main.

    • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

    • Never use px for font size.

    • width: 24rem;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.

    • min-height: 100vh; to 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.

    You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

    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