Skip to content
Submitted almost 3 years ago

NFT Responsive Card Component

David Oncu•350
@david-oncu
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,

Would love to hear your feedback and improvements that can be implemented. Thanks!

Community feedback

  • Account deleted

    Hi there 👋

    Congratulate on finishing your project 🎉. You did a great job 🔨

    I give some suggestions that I hope help you take your project to the next level 📈.

    1. Let's first fix ACCESSIBILITY ISSUES. For more information click on the view report button below the screenshot
    2. I think your card doesn't look centered. I'd suggest moving it a bit to the bottom

    Happy coding ☕

    Maqsud

    1
    David Oncu•350
    @david-oncuPosted almost 3 years ago

    @maqsudtolipov

    Hi Maqsud,

    Thank you for your feedback!

    Many thanks, David

    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @david-oncu ,

    I have some suggestions regarding your solution:

    To tackle the accessibility issues:

    • Use <main> landmark to wrap the body content .HTML5 landmark elements are used to improve navigation .

    • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image Equilibrium #3429 and 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-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 should be Jules Wyvern to it.

    • Read more how to write an alt text

    • 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="card-split"and in each <li>, there would be <img > and<p> .

      • I would use pseudo-elements . You either have to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo on hover.

    • Use min-height: 100vh for the <body>

    
body{
min-height: 100vh;/*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.*/

    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